"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 } from "@/service/product";
import { CheckCheck, Plus } from "lucide-react";

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "../ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
import { Label } from "../ui/label";
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 CostumerServiceTable() {
  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 userlevelId dari cookies
  useEffect(() => {
    const urie = Cookies.get("urie"); // contoh: "3"
    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 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();
  }

  return (
    <>
      <div className="py-3">
        <div className="w-full overflow-x-auto ">
          {/* Header */}
          <Tabs defaultValue="after-sales">
            <TabsList className="py-3 px-3 bg-[#1F6779] rounded-sm">
              <TabsTrigger value="after-sales" className="px-3 py-3 ">
                After Sales
              </TabsTrigger>
              <TabsTrigger value="sales" className="px-3 py-3 ">
                Sales
              </TabsTrigger>
            </TabsList>
            {userRoleId !== "1" && (
              <Link href={"/admin/product/create"}>
                <Button className="bg-[#1F6779] text-white w-full lg:w-fit hover:bg-[#1a9bb5] flex items-center gap-2">
                  <Plus className="h-4 w-4" />
                  Tambah After Sales
                </Button>
              </Link>
            )}

            <TabsContent
              value="after-sales"
              className="shadow-sm border border-gray-200 "
            >
              <div className="bg-[#0F6C75] text-white  text-lg rounded-t-sm px-6 py-3">
                Daftar After Sales
              </div>

              {/* 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>
            </TabsContent>
            <TabsContent value="sales">
              <div className="bg-[#0F6C75] text-white  text-lg rounded-t-sm px-6 py-3">
                Daftar Sales
              </div>

              {/* 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>
            </TabsContent>
          </Tabs>
        </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>
      )}
    </>
  );
}
