"use client";

import * as React from "react";
import {
  ColumnFiltersState,
  PaginationState,
  SortingState,
  VisibilityState,
  flexRender,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table";
import { Button } from "@/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { ChevronDown, Search } from "lucide-react";
import { getCookiesDecrypt } from "@/lib/utils";
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { InputGroup, InputGroupText } from "@/components/ui/input-group";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import TablePagination from "@/components/table/table-pagination";
import { listDataImage, listEnableCategory } from "@/service/content/content";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { Label } from "@/components/ui/label";
import { format } from "date-fns";
import useTableColumns from "./columns";

const TableImage = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const params = useParams();
  const locale = params?.locale;
  const MySwal = withReactContent(Swal);

  const [dataTable, setDataTable] = React.useState<any[]>([]);
  const [totalData, setTotalData] = React.useState<number>(1);
  const [sorting, setSorting] = React.useState<SortingState>([]);
  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
    []
  );
  const [columnVisibility, setColumnVisibility] =
    React.useState<VisibilityState>({});
  const [rowSelection, setRowSelection] = React.useState({});
  const [showData, setShowData] = React.useState("10");
  const [page, setPage] = React.useState(1);
  const [totalPage, setTotalPage] = React.useState(1);
  const [search, setSearch] = React.useState("");

  const searchTimeout = React.useRef<NodeJS.Timeout | null>(null);
  const [categories, setCategories] = React.useState<any[]>([]);
  const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
    []
  );
  const [categoryFilter, setCategoryFilter] = React.useState<string>("");
  const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
  const [startDate, setStartDate] = React.useState("");
  const [endDate, setEndDate] = React.useState("");
  const [filterByCreator, setFilterByCreator] = React.useState("");
  const [filterBySource, setFilterBySource] = React.useState("");
  const [filterByCreatorGroup, setFilterByCreatorGroup] = React.useState("");
  const roleId = getCookiesDecrypt("urie");
  const userLevelId = getCookiesDecrypt("ulie");
  const columns = useTableColumns();

  const table = useReactTable({
    data: dataTable,
    columns,
    onSortingChange: setSorting,
    onColumnFiltersChange: setColumnFilters,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    onColumnVisibilityChange: setColumnVisibility,
    onRowSelectionChange: setRowSelection,
    state: {
      sorting,
      columnFilters,
      columnVisibility,
      rowSelection,
    },
  });

  React.useEffect(() => {
    fetchData();
    getCategories();
  }, [categoryFilter, statusFilter, page, showData, startDate, endDate]);

  async function getCategories() {
    const category = await listEnableCategory("1");
    const resCategory = category?.data?.data?.content;
    setCategories(resCategory || []);
  }

  async function fetchData(showLoader = false, customSearch?: string) {
    const formattedStartDate = startDate
      ? format(new Date(startDate), "yyyy-MM-dd")
      : "";
    const formattedEndDate = endDate
      ? format(new Date(endDate), "yyyy-MM-dd")
      : "";

    try {
      if (showLoader) {
        MySwal.fire({
          title: "Memuat data...",
          html: "Mohon tunggu sebentar",
          allowOutsideClick: false,
          didOpen: () => {
            MySwal.showLoading();
          },
        });
      }

      const isForSelf = Number(roleId) === 4;
      const res = await listDataImage(
        showData,
        page - 1,
        isForSelf,
        !isForSelf,
        categoryFilter,
        statusFilter,
        statusFilter?.sort().join(",").includes("1") ? userLevelId : "",
        filterByCreator,
        filterBySource,
        formattedStartDate,
        formattedEndDate,
        customSearch ?? search, // ✅ gunakan customSearch jika ada
        filterByCreatorGroup,
        locale == "en"
      );

      const data = res?.data?.data;
      const contentData = data?.content || [];
      contentData.forEach((item: any, index: number) => {
        item.no = (page - 1) * Number(showData) + index + 1;
      });

      setDataTable(contentData);
      setTotalData(data?.totalElements || 0);
      setTotalPage(data?.totalPages || 1);
    } catch (error) {
      console.error("Error fetching data:", error);
    } finally {
      MySwal.close();
    }
  }

  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setSearch(value);

    if (searchTimeout.current) clearTimeout(searchTimeout.current);

    searchTimeout.current = setTimeout(() => {
      // ✅ panggil fetchData dengan nilai search terkini (bukan dari state lama)
      fetchData(true, value);
    }, 500);
  };

  return (
    <div className="w-full overflow-x-auto">
      <div className="flex flex-col md:flex-row md:justify-between items-center md:px-5">
        {/* Search bar */}
        <div className="w-full md:w-[250px] px-2 relative">
          <InputGroup merged>
            <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
              <Search className="h-4 w-4 dark:text-white" />
            </InputGroupText>
            <Input
              type="text"
              placeholder="Cari Judul..."
              className="bg-transparent dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
              value={search}
              onChange={handleSearch}
            />
          </InputGroup>
        </div>
      </div>

      {/* Table */}
      <Table className="overflow-hidden mt-3">
        <TableHeader>
          {table.getHeaderGroups().map((headerGroup) => (
            <TableRow key={headerGroup.id} className="bg-default-200">
              {headerGroup.headers.map((header) => (
                <TableHead key={header.id}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                </TableHead>
              ))}
            </TableRow>
          ))}
        </TableHeader>

        <TableBody>
          {table.getRowModel().rows?.length ? (
            table.getRowModel().rows.map((row) => (
              <TableRow
                key={row.id}
                data-state={row.getIsSelected() && "selected"}
                className="h-[75px]"
              >
                {row.getVisibleCells().map((cell) => (
                  <TableCell key={cell.id}>
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </TableCell>
                ))}
              </TableRow>
            ))
          ) : (
            <TableRow>
              <TableCell colSpan={columns.length} className="h-24 text-center">
                Tidak ada hasil ditemukan.
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>

      <TablePagination
        table={table}
        totalData={totalData}
        totalPage={totalPage}
      />
    </div>
  );
};

export default TableImage;

// "use client";

// import * as React from "react";
// import {
//   ColumnDef,
//   ColumnFiltersState,
//   PaginationState,
//   SortingState,
//   VisibilityState,
//   flexRender,
//   getCoreRowModel,
//   getFilteredRowModel,
//   getPaginationRowModel,
//   getSortedRowModel,
//   useReactTable,
// } from "@tanstack/react-table";
// import { Button } from "@/components/ui/button";

// import {
//   Table,
//   TableBody,
//   TableCell,
//   TableHead,
//   TableHeader,
//   TableRow,
// } from "@/components/ui/table";
// import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
// import {
//   ChevronDown,
//   ChevronLeft,
//   ChevronRight,
//   Eye,
//   MoreVertical,
//   Search,
//   SquarePen,
//   Trash2,
//   TrendingDown,
//   TrendingUp,
// } from "lucide-react";
// import { cn, getCookiesDecrypt } from "@/lib/utils";
// import {
//   DropdownMenu,
//   DropdownMenuCheckboxItem,
//   DropdownMenuContent,
//   DropdownMenuItem,
//   DropdownMenuRadioGroup,
//   DropdownMenuRadioItem,
//   DropdownMenuTrigger,
// } from "@/components/ui/dropdown-menu";
// import { Input } from "@/components/ui/input";
// import { InputGroup, InputGroupText } from "@/components/ui/input-group";
// import { paginationBlog } from "@/service/blog/blog";
// import { ticketingPagination } from "@/service/ticketing/ticketing";
// import { Badge } from "@/components/ui/badge";
// import { useParams, useRouter, useSearchParams } from "next/navigation";
// import TablePagination from "@/components/table/table-pagination";

// import {
//   deleteMedia,
//   listDataImage,
//   listEnableCategory,
// } from "@/service/content/content";
// import { loading } from "@/config/swal";

// import { toast } from "sonner";
// import Swal from "sweetalert2";
// import withReactContent from "sweetalert2-react-content";
// import { error } from "@/lib/swal";
// import { Label } from "@/components/ui/label";
// import { format } from "date-fns";
// import useTableColumns from "./columns";

// const TableImage = () => {
//   const router = useRouter();
//   const searchParams = useSearchParams();

//   const params = useParams();
//   const locale = params?.locale;
//   const MySwal = withReactContent(Swal);
//   const [dataTable, setDataTable] = React.useState<any[]>([]);
//   const [totalData, setTotalData] = React.useState<number>(1);
//   const [sorting, setSorting] = React.useState<SortingState>([]);
//   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
//     []
//   );
//   const [columnVisibility, setColumnVisibility] =
//     React.useState<VisibilityState>({});
//   const [rowSelection, setRowSelection] = React.useState({});
//   const [showData, setShowData] = React.useState("10");
//   const [pagination, setPagination] = React.useState<PaginationState>({
//     pageIndex: 0,
//     pageSize: Number(showData),
//   });
//   const [page, setPage] = React.useState(1);
//   const [totalPage, setTotalPage] = React.useState(1);
//   const [search, setSearch] = React.useState("");
//   const userId = getCookiesDecrypt("uie");
//   const userLevelId = getCookiesDecrypt("ulie");

//   const [categories, setCategories] = React.useState<any[]>([]);
//   const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
//     []
//   );

//   const [categoryFilter, setCategoryFilter] = React.useState<string>("");
//   const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
//   const [startDate, setStartDate] = React.useState("");
//   const [endDate, setEndDate] = React.useState("");
//   const [filterByCreator, setFilterByCreator] = React.useState("");
//   const [filterBySource, setFilterBySource] = React.useState("");
//   const [filterByCreatorGroup, setFilterByCreatorGroup] = React.useState("");

//   const roleId = getCookiesDecrypt("urie");
//   const columns = useTableColumns();
//   const table = useReactTable({
//     data: dataTable,
//     columns,
//     onSortingChange: setSorting,
//     onColumnFiltersChange: setColumnFilters,
//     getCoreRowModel: getCoreRowModel(),
//     getPaginationRowModel: getPaginationRowModel(),
//     getSortedRowModel: getSortedRowModel(),
//     getFilteredRowModel: getFilteredRowModel(),
//     onColumnVisibilityChange: setColumnVisibility,
//     onRowSelectionChange: setRowSelection,
//     onPaginationChange: setPagination,
//     state: {
//       sorting,
//       columnFilters,
//       columnVisibility,
//       rowSelection,
//       pagination,
//     },
//   });

//   React.useEffect(() => {
//     const pageFromUrl = searchParams?.get("page");
//     if (pageFromUrl) {
//       setPage(Number(pageFromUrl));
//     }
//   }, [searchParams]);

//   React.useEffect(() => {
//     fetchData();
//     getCategories();
//   }, [
//     categoryFilter,
//     statusFilter,
//     page,
//     showData,
//     search,
//     startDate,
//     endDate,
//   ]);

//   async function getCategories() {
//     const category = await listEnableCategory("1");
//     const resCategory = category?.data?.data?.content;
//     setCategories(resCategory || []);
//   }

//   // Fungsi menangani perubahan checkbox
//   const handleCheckboxChange = (categoryId: number) => {
//     setSelectedCategories(
//       (prev: any) =>
//         prev.includes(categoryId)
//           ? prev.filter((id: any) => id !== categoryId)
//           : [...prev, categoryId]
//     );

//     // Perbarui filter kategori
//     setCategoryFilter((prev) => {
//       const updatedCategories = prev.split(",").filter(Boolean).map(Number);

//       const newCategories = updatedCategories.includes(categoryId)
//         ? updatedCategories.filter((id) => id !== categoryId)
//         : [...updatedCategories, categoryId];

//       return newCategories.join(",");
//     });
//   };

//   async function fetchData() {
//     const formattedStartDate = startDate
//       ? format(new Date(startDate), "yyyy-MM-dd")
//       : "";
//     const formattedEndDate = endDate
//       ? format(new Date(endDate), "yyyy-MM-dd")
//       : "";
//     try {
//       const isForSelf = Number(roleId) === 4;
//       const res = await listDataImage(
//         showData,
//         page - 1,
//         isForSelf,
//         !isForSelf,
//         categoryFilter,
//         statusFilter,
//         statusFilter?.sort().join(",").includes("1") ? userLevelId : "",
//         filterByCreator,
//         filterBySource,
//         formattedStartDate,
//         formattedEndDate,
//         search,
//         filterByCreatorGroup,
//         locale == "en"
//       );

//       const data = res?.data?.data;
//       const contentData = data?.content;
//       contentData.forEach((item: any, index: number) => {
//         item.no = (page - 1) * Number(showData) + index + 1;
//       });

//       setDataTable(contentData);
//       setTotalData(data?.totalElements);
//       setTotalPage(data?.totalPages);
//     } catch (error) {
//       console.error("Error fetching tasks:", error);
//     }
//   }

//   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
//     setSearch(e.target.value);
//     table.getColumn("judul")?.setFilterValue(e.target.value);
//   };

//   const handleSearchFilterBySource = (
//     e: React.ChangeEvent<HTMLInputElement>
//   ) => {
//     const value = e.target.value;
//     setFilterBySource(value);
//     fetchData();
//   };

//   function handleStatusCheckboxChange(value: any) {
//     setStatusFilter((prev: any) =>
//       prev.includes(value)
//         ? prev.filter((status: any) => status !== value)
//         : [...prev, value]
//     );
//   }

//   const handleSearchFilterByCreator = (
//     e: React.ChangeEvent<HTMLInputElement>
//   ) => {
//     const value = e.target.value;
//     setFilterByCreator(value);
//     fetchData();
//   };

//   return (
//     <div className="w-full overflow-x-auto">
//       <div className="flex flex-col md:flex-row lg:flex-row md:justify-between lg:justify-between items-center md:px-5 lg:px-5">
//         <div className="w-full md:w-[200px] lg:w-[200px] px-2">
//           <InputGroup merged>
//             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
//               <Search className=" h-4 w-4 dark:text-white" />
//             </InputGroupText>
//             <Input
//               type="text"
//               placeholder="Search Judul..."
//               className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
//               value={search}
//               onChange={handleSearch}
//             />
//           </InputGroup>
//         </div>
//         <div className="flex flex-row items-center gap-3">
//           <div className="flex items-center py-4">
//             <div className="mx-3">
//               <DropdownMenu>
//                 <DropdownMenuTrigger asChild>
//                   <Button size="md" variant="outline">
//                     {showData} Data
//                   </Button>
//                 </DropdownMenuTrigger>
//                 <DropdownMenuContent className="w-56 text-sm">
//                   <DropdownMenuRadioGroup
//                     value={showData}
//                     onValueChange={setShowData}
//                   >
//                     <DropdownMenuRadioItem value="10">
//                       10 Data
//                     </DropdownMenuRadioItem>
//                     <DropdownMenuRadioItem value="50">
//                       50 Data
//                     </DropdownMenuRadioItem>
//                     <DropdownMenuRadioItem value="100">
//                       100 Data
//                     </DropdownMenuRadioItem>
//                     <DropdownMenuRadioItem value="250">
//                       250 Data
//                     </DropdownMenuRadioItem>
//                   </DropdownMenuRadioGroup>
//                 </DropdownMenuContent>
//               </DropdownMenu>
//             </div>
//             <DropdownMenu>
//               <DropdownMenuTrigger asChild>
//                 <Button variant="outline" className="ml-auto" size="md">
//                   Filter <ChevronDown />
//                 </Button>
//               </DropdownMenuTrigger>
//               <DropdownMenuContent
//                 align="end"
//                 className="w-64 h-[200px] overflow-y-auto"
//               >
//                 <div className="flex flex-row justify-between my-1 mx-1">
//                   <p>Filter</p>
//                   {/* <p
//                     className="text-blue-600 cursor-pointer"
//                     onClick={fetchData}
//                   >
//                     Simpan
//                   </p> */}
//                 </div>
//                 <Label className="ml-2">Kategori</Label>
//                 {categories.length > 0 ? (
//                   categories.map((category) => (
//                     <div
//                       key={category.id}
//                       className="flex items-center px-4 py-1"
//                     >
//                       <input
//                         type="checkbox"
//                         id={`category-${category.id}`}
//                         className="mr-2"
//                         checked={selectedCategories.includes(category.id)}
//                         onChange={() => handleCheckboxChange(category.id)}
//                       />
//                       <label
//                         htmlFor={`category-${category.id}`}
//                         className="text-sm"
//                       >
//                         {category.name}
//                       </label>
//                     </div>
//                   ))
//                 ) : (
//                   <p className="text-sm text-gray-500 px-4 py-2">
//                     No categories found.
//                   </p>
//                 )}
//                 <div className="mx-2 my-1">
//                   <Label>Tanggal Awal</Label>
//                   <Input
//                     type="date"
//                     value={startDate}
//                     onChange={(e) => setStartDate(e.target.value)}
//                     className="max-w-sm"
//                   />
//                 </div>
//                 <div className="mx-2 my-1">
//                   <Label>Tanggal Akhir</Label>
//                   <Input
//                     type="date"
//                     value={endDate}
//                     onChange={(e) => setEndDate(e.target.value)}
//                     className="max-w-sm"
//                   />
//                 </div>
//                 <div className="mx-2 my-1">
//                   <Label>Kreator</Label>
//                   <Input
//                     placeholder="Filter Status..."
//                     value={filterByCreator}
//                     onChange={handleSearchFilterByCreator}
//                     className="max-w-sm"
//                   />
//                 </div>
//                 <div className="mx-2 my-1">
//                   <Label>Sumber</Label>
//                   <Input
//                     placeholder="Filter Status..."
//                     value={filterBySource}
//                     onChange={handleSearchFilterBySource}
//                     className="max-w-sm"
//                   />
//                 </div>

//                 <Label className="ml-2 mt-2">Status</Label>
//                 <div className="flex items-center px-4 py-1">
//                   <input
//                     type="checkbox"
//                     id="status-2"
//                     className="mr-2"
//                     checked={statusFilter.includes(1)}
//                     onChange={() => handleStatusCheckboxChange(1)}
//                   />
//                   <label htmlFor="status-2" className="text-sm">
//                     Menunggu Review
//                   </label>
//                 </div>
//                 <div className="flex items-center px-4 py-1">
//                   <input
//                     type="checkbox"
//                     id="status-2"
//                     className="mr-2"
//                     checked={statusFilter.includes(2)}
//                     onChange={() => handleStatusCheckboxChange(2)}
//                   />
//                   <label htmlFor="status-2" className="text-sm">
//                     Diterima
//                   </label>
//                 </div>
//                 <div className="flex items-center px-4 py-1">
//                   <input
//                     type="checkbox"
//                     id="status-3"
//                     className="mr-2"
//                     checked={statusFilter.includes(3)}
//                     onChange={() => handleStatusCheckboxChange(3)}
//                   />
//                   <label htmlFor="status-3" className="text-sm">
//                     Minta Update
//                   </label>
//                 </div>
//                 <div className="flex items-center px-4 py-1">
//                   <input
//                     type="checkbox"
//                     id="status-4"
//                     className="mr-2"
//                     checked={statusFilter.includes(4)}
//                     onChange={() => handleStatusCheckboxChange(4)}
//                   />
//                   <label htmlFor="status-4" className="text-sm">
//                     Ditolak
//                   </label>
//                 </div>
//               </DropdownMenuContent>
//             </DropdownMenu>
//           </div>
//           <div className="flex items-center py-4">
//             <DropdownMenu>
//               <DropdownMenuTrigger asChild>
//                 <Button variant="outline" className="ml-auto" size="md">
//                   Columns <ChevronDown />
//                 </Button>
//               </DropdownMenuTrigger>
//               <DropdownMenuContent align="end">
//                 {table
//                   .getAllColumns()
//                   .filter((column) => column.getCanHide())
//                   .map((column) => {
//                     return (
//                       <DropdownMenuCheckboxItem
//                         key={column.id}
//                         className="capitalize"
//                         checked={column.getIsVisible()}
//                         onCheckedChange={(value) =>
//                           column.toggleVisibility(!!value)
//                         }
//                       >
//                         {column.id}
//                       </DropdownMenuCheckboxItem>
//                     );
//                   })}
//               </DropdownMenuContent>
//             </DropdownMenu>
//           </div>
//         </div>
//       </div>
//       <Table className="overflow-hidden mt-3">
//         <TableHeader>
//           {table.getHeaderGroups().map((headerGroup) => (
//             <TableRow key={headerGroup.id} className="bg-default-200">
//               {headerGroup.headers.map((header) => (
//                 <TableHead key={header.id}>
//                   {header.isPlaceholder
//                     ? null
//                     : flexRender(
//                         header.column.columnDef.header,
//                         header.getContext()
//                       )}
//                 </TableHead>
//               ))}
//             </TableRow>
//           ))}
//         </TableHeader>
//         <TableBody>
//           {table.getRowModel().rows?.length ? (
//             table.getRowModel().rows.map((row) => (
//               <TableRow
//                 key={row.id}
//                 data-state={row.getIsSelected() && "selected"}
//                 className="h-[75px]"
//               >
//                 {row.getVisibleCells().map((cell) => (
//                   <TableCell key={cell.id}>
//                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
//                   </TableCell>
//                 ))}
//               </TableRow>
//             ))
//           ) : (
//             <TableRow>
//               <TableCell colSpan={columns.length} className="h-24 text-center">
//                 No results.
//               </TableCell>
//             </TableRow>
//           )}
//         </TableBody>
//       </Table>
//       <TablePagination
//         table={table}
//         totalData={totalData}
//         totalPage={totalPage}
//       />
//     </div>
//   );
// };

// export default TableImage;