"use client";
import {
  BannerIcon,
  CopyIcon,
  CreateIconIon,
  DeleteIcon,
  DotsYIcon,
  EyeIconMdi,
  SearchIcon,
} from "@/components/icons";
import { close, error, loading, success, successToast } from "@/config/swal";
import { Article } from "@/types/globals";
import { convertDateFormat } from "@/utils/global";
import Link from "next/link";
import { Key, useCallback, useEffect, useState } from "react";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import Cookies from "js-cookie";
import {
  deleteArticle,
  getArticleByCategory,
  getArticlePagination,
  updateIsBannerArticle,
} from "@/service/article";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "../ui/dropdown-menu";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "@/components/ui/select";
import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@/components/ui/table";
import CustomPagination from "../layout/custom-pagination";
import { EditBannerDialog } from "../form/banner-edit-dialog";
import {
  deleteProduct,
  getProductPagination,
  approveProduct,
  rejectProduct,
} from "@/service/product";
import { CheckCheck, Eye, X } from "lucide-react";
import { useRouter } from "next/navigation";

const columns = [
  { name: "No", uid: "no" },
  { name: "Judul", uid: "title" },
  { name: "Banner", uid: "isBanner" },
  { name: "Kategori", uid: "category" },
  { name: "Tanggal Unggah", uid: "createdAt" },
  { name: "Kreator", uid: "createdByName" },
  { name: "Status", uid: "isPublish" },
  { name: "Aksi", uid: "actions" },
];
const columnsOtherRole = [
  { name: "No", uid: "no" },
  { name: "Judul", uid: "title" },
  { name: "Kategori", uid: "category" },
  { name: "Tanggal Unggah", uid: "createdAt" },
  { name: "Kreator", uid: "createdByName" },
  { name: "Status", uid: "isPublish" },
  { name: "Aksi", uid: "actions" },
];

// interface Category {
//   id: number;
//   title: string;
// }

export default function ProductTable() {
  const MySwal = withReactContent(Swal);
  const username = Cookies.get("username");
  const userId = Cookies.get("uie");

  const [page, setPage] = useState(1);
  const [totalPage, setTotalPage] = useState(1);
  const [article, setArticle] = useState<any[]>([]);
  const [showData, setShowData] = useState("10");
  const [search, setSearch] = useState("");
  const [categories, setCategories] = useState<any>([]);
  const [selectedCategories, setSelectedCategories] = useState<any>("");
  const [startDateValue, setStartDateValue] = useState({
    startDate: null,
    endDate: null,
  });
  const [userRoleId, setUserRoleId] = useState<string | null>(null);

  const router = useRouter();

  // 🔹 Ambil userRoleId dari cookies
  useEffect(() => {
    const urie = Cookies.get("urie"); // userRoleId dari cookies
    setUserRoleId(urie ?? null);
  }, []);

  useEffect(() => {
    initState();
    getCategories();
  }, []);

  async function getCategories() {
    const res = await getArticleByCategory();
    const data = res?.data?.data;
    setCategories(data);
  }

  const initState = useCallback(async () => {
    loading();
    const req = {
      limit: showData,
      page: page,
      search: search,
    };
    const res = await getProductPagination(req);
    await getTableNumber(parseInt(showData), res.data?.data);
    setTotalPage(res?.data?.meta?.totalPage);
    close();
  }, [page]);

  const getTableNumber = async (limit: number, data: Article[]) => {
    if (data) {
      const startIndex = limit * (page - 1);
      let iterate = 0;
      const newData = data.map((value: any) => {
        iterate++;
        value.no = startIndex + iterate;
        return value;
      });
      setArticle(newData);
    } else {
      setArticle([]);
    }
  };

  async function doDelete(id: any) {
    // loading();
    const resDelete = await deleteProduct(id);

    if (resDelete?.error) {
      error(resDelete.message);
      return false;
    }
    close();
    success("Berhasil Hapus");
    initState();
  }

  const handleDelete = (id: any) => {
    MySwal.fire({
      title: "Hapus Data",
      icon: "warning",
      showCancelButton: true,
      cancelButtonColor: "#3085d6",
      confirmButtonColor: "#d33",
      confirmButtonText: "Hapus",
    }).then((result) => {
      if (result.isConfirmed) {
        doDelete(id);
      }
    });
  };

  const handleBanner = async (id: number, status: boolean) => {
    const res = await updateIsBannerArticle(id, status);
    if (res?.error) {
      error(res?.message);
      return false;
    }
    initState();
  };

  const [openEditDialog, setOpenEditDialog] = useState(false);
  const [selectedBanner, setSelectedBanner] = useState<any>(null);
  const [openPreview, setOpenPreview] = useState(false);
  const [previewImage, setPreviewImage] = useState<string | null>(null);

  const handleUpdateBanner = (data: any) => {
    console.log("Updated banner data:", data);
    // TODO: panggil API update di sini
    // lalu refresh tabel
  };

  const handlePreview = (imgUrl: string) => {
    setPreviewImage(imgUrl);
    setOpenPreview(true);
  };

  const handleApproveProduct = async (id: number) => {
    loading();
    const res = await approveProduct(id);

    if (res?.error) {
      error(res.message || "Gagal menyetujui product");
      close();
      return;
    }

    close();
    success("Product berhasil disetujui");
    initState(); // refresh table
  };

  const handleRejectProduct = async (id: number) => {
    const MySwal = withReactContent(Swal);
    const { value: message } = await MySwal.fire({
      title: "Tolak Product",
      input: "textarea",
      inputLabel: "Alasan penolakan (opsional)",
      inputPlaceholder: "Masukkan alasan penolakan...",
      inputAttributes: {
        "aria-label": "Masukkan alasan penolakan",
      },
      showCancelButton: true,
      confirmButtonText: "Tolak",
      cancelButtonText: "Batal",
      confirmButtonColor: "#dc2626",
    });

    if (message === undefined) {
      return; // User cancelled
    }

    loading();
    const res = await rejectProduct(id, message || undefined);

    if (res?.error) {
      error(res.message || "Gagal menolak product");
      close();
      return;
    }

    close();
    success("Product berhasil ditolak");
    initState(); // refresh table
  };

  const copyUrlArticle = async (id: number, slug: string) => {
    const url =
      `${window.location.protocol}//${window.location.host}` +
      "/news/detail/" +
      `${id}-${slug}`;
    try {
      await navigator.clipboard.writeText(url);
      successToast("Success", "Article Copy to Clipboard");
      setTimeout(() => {}, 1500);
    } catch (err) {
      ("Failed to copy!");
    }
  };

  const renderCell = useCallback(
    (article: any, columnKey: Key) => {
      const cellValue = article[columnKey as keyof any];

      switch (columnKey) {
        case "isPublish":
          return (
            // <Chip
            //   className="capitalize "
            //   color={statusColorMap[article.status]}
            //   size="lg"
            //   variant="flat"
            // >
            //   <div className="flex flex-row items-center gap-2 justify-center">
            //     {article.status}
            //   </div>
            // </Chip>
            <p>{article.isPublish ? "Publish" : "Draft"}</p>
          );
        case "isBanner":
          return <p>{article.isBanner ? "Ya" : "Tidak"}</p>;
        case "createdAt":
          return <p>{convertDateFormat(article.createdAt)}</p>;
        case "category":
          return (
            <p>
              {article?.categories?.map((list: any) => list.title).join(", ") +
                " "}
            </p>
          );

        case "actions":
          return (
            <div className="relative flex items-center gap-2">
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="icon">
                    <DotsYIcon className="h-5 w-5 text-muted-foreground" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent className="w-56">
                  <DropdownMenuItem
                    onClick={() => copyUrlArticle(article.id, article.slug)}
                  >
                    <CopyIcon className="mr-2 h-4 w-4" />
                    Copy Url Article
                  </DropdownMenuItem>

                  <DropdownMenuItem asChild>
                    <Link
                      href={`/admin/article/detail/${article.id}`}
                      className="flex items-center"
                    >
                      <EyeIconMdi className="mr-2 h-4 w-4" />
                      Detail
                    </Link>
                  </DropdownMenuItem>

                  {(username === "admin-mabes" ||
                    Number(userId) === article.createdById) && (
                    <DropdownMenuItem asChild>
                      <Link
                        href={`/admin/article/edit/${article.id}`}
                        className="flex items-center"
                      >
                        <CreateIconIon className="mr-2 h-4 w-4" />
                        Edit
                      </Link>
                    </DropdownMenuItem>
                  )}

                  {username === "admin-mabes" && (
                    <DropdownMenuItem
                      onClick={() =>
                        handleBanner(article.id, !article.isBanner)
                      }
                    >
                      <BannerIcon className="mr-2 h-4 w-4" />
                      {article.isBanner
                        ? "Hapus dari Banner"
                        : "Jadikan Banner"}
                    </DropdownMenuItem>
                  )}

                  {(username === "admin-mabes" ||
                    Number(userId) === article.createdById) && (
                    <DropdownMenuItem onClick={() => handleDelete(article.id)}>
                      <DeleteIcon className="mr-2 h-4 w-4 text-red-500" />
                      Delete
                    </DropdownMenuItem>
                  )}
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          );

        default:
          return cellValue;
      }
    },
    [article, page],
  );

  let typingTimer: NodeJS.Timeout;
  const doneTypingInterval = 1500;

  const handleKeyUp = () => {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
  };

  const handleKeyDown = () => {
    clearTimeout(typingTimer);
  };

  async function doneTyping() {
    setPage(1);
    initState();
  }

  const formatRupiah = (value?: number | string) => {
    if (!value) return "Rp 0";

    const number =
      typeof value === "string" ? Number(value.replace(/[^\d]/g, "")) : value;

    return `Rp ${number.toLocaleString("id-ID")}`;
  };

  return (
    <>
      <div className="py-3">
        <div className="w-full overflow-x-auto rounded-2xl shadow-sm border border-gray-200">
          {/* Header */}
          <div className="bg-[#0F6C75] text-white  text-lg rounded-t-sm px-6 py-3">
            Daftar Product
          </div>

          {/* Table */}
          <Table className="w-full text-sm">
            {/* HEADER */}
            <TableHeader>
              <TableRow className="bg-[#BCD4DF] text-[#008080]">
                <TableHead className="w-[40px] text-center text-[#008080]">
                  NO
                </TableHead>
                <TableHead className="text-left text-[#008080]">NAMA</TableHead>
                <TableHead className="text-left text-[#008080]">
                  HARGA PRODUK
                </TableHead>
                <TableHead className="text-left text-[#008080]">
                  VARIAN
                </TableHead>
                <TableHead className="text-center text-[#008080]">
                  BANNER PRODUK
                </TableHead>
                <TableHead className="text-center text-[#008080]">
                  STATUS
                </TableHead>
                <TableHead className="text-center text-[#008080]">
                  AKSI
                </TableHead>
              </TableRow>
            </TableHeader>

            {/* BODY */}
            <TableBody>
              {article.length > 0 ? (
                article.map((item, index) => (
                  <TableRow
                    key={item.id}
                    className="hover:bg-gray-50 transition-colors"
                  >
                    {/* NO */}
                    <TableCell className="text-center font-medium">
                      {index + 1}
                    </TableCell>

                    {/* NAMA */}
                    <TableCell className="font-semibold text-[#0F6C75]">
                      {item.title ?? "—"}
                      <div className="mt-1">
                        {/* {item.isPublish ? (
                          <span className="text-xs bg-blue-100 text-blue-700 px-2 py-[2px] rounded-md">
                            Tampil di Landing
                          </span>
                        ) : (
                          <span className="text-xs bg-gray-100 text-gray-600 px-2 py-[2px] rounded-md">
                            Draft
                          </span>
                        )} */}
                      </div>
                    </TableCell>

                    {/* HARGA PRODUK */}
                    <TableCell className="font-medium">
                      {formatRupiah(item.price)}
                    </TableCell>

                    {/* VARIAN */}
                    <TableCell>{item.variant ?? "-"}</TableCell>

                    {/* BANNER PRODUK */}
                    <TableCell className="text-center">
                      {item.thumbnail_url ? (
                        <img
                          src={item.thumbnail_url}
                          alt={item.title}
                          className="w-[80px] h-[45px] object-cover rounded-md mx-auto"
                        />
                      ) : (
                        <div className="text-gray-400 text-xs">No Image</div>
                      )}
                    </TableCell>

                    {/* STATUS */}
                    <TableCell className="text-center">
                      {item.status_id === 1 ? (
                        <span className="bg-yellow-100 text-yellow-700 text-xs px-3 py-1 rounded-full font-medium">
                          Menunggu
                        </span>
                      ) : item.status_id === 2 ? (
                        <span className="bg-green-100 text-green-700 text-xs px-3 py-1 rounded-full font-medium">
                          Disetujui
                        </span>
                      ) : item.status_id === 3 ? (
                        <span className="bg-red-100 text-red-700 text-xs px-3 py-1 rounded-full font-medium">
                          Ditolak
                        </span>
                      ) : (
                        <span className="bg-gray-100 text-gray-600 text-xs px-3 py-1 rounded-full font-medium">
                          {item.status_id || "Tidak Diketahui"}
                        </span>
                      )}
                    </TableCell>

                    {/* AKSI */}
                    <TableCell className="text-center">
                      <div className="flex items-center justify-center gap-3">
                        <Link href={`/admin/product/detail/${item.id}`}>
                          <Button
                            variant="ghost"
                            size="sm"
                            className="text-[#0F6C75] hover:bg-transparent hover:underline p-0"
                          >
                            <Eye className="w-4 h-4 mr-1" />
                            Lihat
                          </Button>
                        </Link>
                        {userRoleId !== "1" && (
                          <Link href={"/admin/product/update"}>
                            <Button
                              className="text-[#0F6C75] hover:bg-transparent hover:underline p-0"
                              variant="ghost"
                              size="sm"
                            >
                              <CreateIconIon className="w-4 h-4 mr-1" /> Edit
                            </Button>
                          </Link>
                        )}
                        {userRoleId === "1" && item.status_id === 1 && (
                          <>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleApproveProduct(item.id)}
                              className="text-green-600 hover:bg-transparent hover:underline p-0"
                            >
                              <CheckCheck className="w-4 h-4 mr-1" />
                              Approve
                            </Button>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleRejectProduct(item.id)}
                              className="text-red-600 hover:bg-transparent hover:underline p-0"
                            >
                              <X className="w-4 h-4 mr-1" />
                              Reject
                            </Button>
                          </>
                        )}
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => handleDelete(item.id)}
                          className="text-red-600 hover:bg-transparent hover:underline p-0"
                        >
                          Hapus
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              ) : (
                <TableRow>
                  <TableCell
                    colSpan={7}
                    className="text-center py-6 text-gray-500"
                  >
                    Tidak ada data untuk ditampilkan.
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>

          {/* FOOTER PAGINATION */}
          <div className="flex items-center justify-between px-6 py-3 border-t text-sm text-gray-600">
            <p>
              Menampilkan {article.length} dari {article.length} data
            </p>
            <div className="flex items-center gap-2">
              <Button
                variant="outline"
                size="sm"
                className="rounded-full px-3"
                disabled={page === 1}
                onClick={() => setPage(page - 1)}
              >
                Previous
              </Button>
              <p>
                Halaman {page} dari {totalPage}
              </p>
              <Button
                variant="outline"
                size="sm"
                className="rounded-full px-3"
                disabled={page === totalPage}
                onClick={() => setPage(page + 1)}
              >
                Next
              </Button>
            </div>
          </div>
        </div>
      </div>
      <EditBannerDialog
        open={openEditDialog}
        onOpenChange={setOpenEditDialog}
        bannerData={selectedBanner}
        onSubmit={handleUpdateBanner}
      />
      {/* Preview Dialog */}
      {openPreview && (
        <div
          className="fixed inset-0 flex items-center justify-center bg-black/50 z-50 p-4"
          onClick={() => setOpenPreview(false)}
        >
          <div
            className="bg-white rounded-xl overflow-hidden shadow-2xl max-w-md w-full relative"
            onClick={(e) => e.stopPropagation()}
          >
            {/* HEADER */}
            <div className="bg-[#0F6C75] text-white px-5 py-4 flex flex-col gap-1 relative">
              {/* Tombol close */}
              <button
                onClick={() => setOpenPreview(false)}
                className="absolute top-3 right-4 text-white/80 hover:text-white text-lg"
              >
                ✕
              </button>

              <h2 className="text-lg font-semibold">JAEC00 J7 SHS-P</h2>
              <p className="text-sm text-white/90">DELICATE OFF-ROAD SUV</p>

              {/* Status badge */}
              <div className="flex items-center gap-2 mt-1">
                <span className="bg-yellow-100 text-yellow-800 text-xs font-medium px-3 py-1 rounded-full">
                  Menunggu
                </span>
                <span className="bg-white/20 text-white text-xs px-2 py-[1px] rounded-full">
                  1
                </span>
              </div>
            </div>

            {/* IMAGE PREVIEW */}
            <div className="bg-[#f8fafc] p-4 flex justify-center items-center">
              <img
                src={previewImage ?? ""}
                alt="Preview"
                className="rounded-lg w-full h-auto object-contain"
              />
            </div>

            {/* FOOTER */}
            <div className="border-t text-center py-3 bg-[#E3EFF4]">
              <button
                onClick={() => setOpenPreview(false)}
                className="text-[#0F6C75] font-medium hover:underline"
              >
                Tutup
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}