"use client";

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

const TableVideo = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const MySwal = withReactContent(Swal);

  const [dataTable, setDataTable] = React.useState<any[]>([]);
  const [totalData, setTotalData] = React.useState<number>(1);
  const [totalPage, setTotalPage] = React.useState(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 [search, setSearch] = React.useState("");
  const [searchTimeout, setSearchTimeout] = React.useState<any>(null);

  // === FILTER STATES ===
  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 userLevelId = getCookiesDecrypt("ulie");
  const roleId = getCookiesDecrypt("urie");
  const columns = useTableColumns();
  const [pagination, setPagination] = React.useState<PaginationState>({
    pageIndex: 0,
    pageSize: Number(showData),
  });

  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, startDate, endDate]);

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

  async function getCategories() {
    const category = await listEnableCategory("2");
    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 listDataVideo(
        parseInt(showData) || 10,
        page - 1,
        isForSelf,
        !isForSelf,
        categoryFilter,
        statusFilter,
        statusFilter?.sort().join(",").includes("1") ? userLevelId : "",
        filterByCreator,
        filterBySource,
        formattedStartDate,
        formattedEndDate,
        customSearch ?? search,
        filterByCreatorGroup
      );

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

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

  // === HANDLERS ===
  const handleCheckboxChange = (categoryId: number) => {
    setSelectedCategories((prev) =>
      prev.includes(categoryId)
        ? prev.filter((id) => id !== categoryId)
        : [...prev, categoryId]
    );

    setCategoryFilter((prev) => {
      const updated = prev.split(",").filter(Boolean).map(Number);
      const newList = updated.includes(categoryId)
        ? updated.filter((id) => id !== categoryId)
        : [...updated, categoryId];
      return newList.join(",");
    });
  };

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

  // const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
  //   const value = e.target.value;
  //   setSearch(value);
  //   if (searchTimeout.current) clearTimeout(searchTimeout.current);
  //   searchTimeout.current = setTimeout(() => {
  //     fetchData(true, value);
  //   }, 500);
  // };

   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
      const value = e.target.value;
      setSearch(value);
  
      // Hapus timer lama
      if (searchTimeout) {
        clearTimeout(searchTimeout);
      }
  
      // Set timer baru untuk 3 detik
      const timeout = setTimeout(() => {
        fetchData(true, value);
      }, 2000);
  
      setSearchTimeout(timeout);
    };
  

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

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

  // 🧹 Reset semua filter
  const handleResetFilters = () => {
    setSelectedCategories([]);
    setCategoryFilter("");
    setStatusFilter([]);
    setStartDate("");
    setEndDate("");
    setFilterByCreator("");
    setFilterBySource("");
    setFilterByCreatorGroup("");
    setPage(1);
    fetchData(true);
  };

  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-[200px] lg:w-[300px] px-2">
          <InputGroup merged>
            <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
              <Search className="h-6 w-6 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 text-[16px]"
              value={search}
              onChange={handleSearch}
            />
          </InputGroup>
        </div>

        {/* Filter & Columns & ShowData */}
        <div className="flex items-center gap-3 mt-2 md:mt-0">
          {/* Show Data Dropdown */}
          <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={(value) => {
                    setShowData(value);
                    setPagination((prev) => ({
                      ...prev,
                      pageSize: Number(value),
                      pageIndex: 0,
                    }));
                    setPage(1);
                  }}
                >
                  <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>

          {/* Filter Dropdown */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline" size="md">
                Filter <ChevronDown />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent
              align="end"
              className="w-64 h-[380px] overflow-y-auto"
            >
              {/* 🧹 Reset All Button */}
              <div className="flex justify-end px-3 pt-2 pb-1">
                <Button
                  variant="ghost"
                  size="sm"
                  className="text-xs text-gray-700 hover:bg-red-200 dark:text-white"
                  onClick={handleResetFilters}
                >
                  Reset Semua Filter
                </Button>
              </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">
                  Tidak ada kategori.
                </p>
              )}

              <div className="mx-2 my-1">
                <Label>Tanggal Awal</Label>
                <Input
                  type="date"
                  value={startDate}
                  onChange={(e) => setStartDate(e.target.value)}
                />
              </div>
              <div className="mx-2 my-1">
                <Label>Tanggal Akhir</Label>
                <Input
                  type="date"
                  value={endDate}
                  onChange={(e) => setEndDate(e.target.value)}
                />
              </div>

              <div className="mx-2 my-1">
                <Label>Kreator</Label>
                <Input
                  placeholder="Nama kreator..."
                  value={filterByCreator}
                  onChange={handleSearchFilterByCreator}
                />
              </div>

              <div className="mx-2 my-1">
                <Label>Sumber</Label>
                <Input
                  placeholder="Nama sumber..."
                  value={filterBySource}
                  onChange={handleSearchFilterBySource}
                />
              </div>

              <Label className="ml-2 mt-2">Status</Label>
              {[1, 2, 3, 4].map((id) => {
                const label =
                  id === 1
                    ? "Menunggu Review"
                    : id === 2
                    ? "Diterima"
                    : id === 3
                    ? "Minta Update"
                    : "Ditolak";
                return (
                  <div key={id} className="flex items-center px-4 py-1">
                    <input
                      type="checkbox"
                      id={`status-${id}`}
                      className="mr-2"
                      checked={statusFilter.includes(id)}
                      onChange={() => handleStatusCheckboxChange(id)}
                    />
                    <label htmlFor={`status-${id}`} className="text-sm">
                      {label}
                    </label>
                  </div>
                );
              })}
            </DropdownMenuContent>
          </DropdownMenu>

          {/* Columns Toggle */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline" size="md">
                Columns <ChevronDown />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              {table
                .getAllColumns()
                .filter((column) => column.getCanHide())
                .map((column) => (
                  <DropdownMenuCheckboxItem
                    key={column.id}
                    className="capitalize"
                    checked={column.getIsVisible()}
                    onCheckedChange={(value) =>
                      column.toggleVisibility(!!value)
                    }
                  >
                    {column.id}
                  </DropdownMenuCheckboxItem>
                ))}
            </DropdownMenuContent>
          </DropdownMenu>
        </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 TableVideo;

// "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 { useRouter, useSearchParams } from "next/navigation";
// import TablePagination from "@/components/table/table-pagination";
// import columns from "./columns";
// import {
//   listDataImage,
//   listDataVideo,
//   listEnableCategory,
// } from "@/service/content/content";
// import { Label } from "@/components/ui/label";
// import { format } from "date-fns";
// import useTableColumns from "./columns";

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

//   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 [limit, setLimit] = React.useState(10);
//   const [search, setSearch] = React.useState<string>("");
//   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("2");
//     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) // Hapus jika sudah dipilih
//           : [...prev, categoryId] // Tambahkan jika belum dipilih
//     );

//     // 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 listDataVideo(
//         showData,
//         page - 1,
//         isForSelf,
//         !isForSelf,
//         categoryFilter,
//         statusFilter,
//         statusFilter?.sort().join(",").includes("1") ? userLevelId : "",
//         filterByCreator,
//         filterBySource,
//         formattedStartDate, // Pastikan format sesuai
//         formattedEndDate, // Pastikan format sesuai
//         search,
//         filterByCreatorGroup
//       );

//       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); // Perbarui state search
//     table.getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel
//   };

//   const handleSearchFilterBySource = (
//     e: React.ChangeEvent<HTMLInputElement>
//   ) => {
//     const value = e.target.value;
//     setFilterBySource(value); // Perbarui state filter
//     fetchData(); // Panggil ulang data dengan filter baru
//   };

//   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); // Perbarui state filter
//     fetchData(); // Panggil ulang data dengan filter baru
//   };

//   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 TableVideo;