"use client";
import * as React from "react";
import { ColumnDef } from "@tanstack/react-table";

import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
import { cn, getCookiesDecrypt } from "@/lib/utils";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
  DropdownMenuItem,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { useRouter } from "next/navigation";
import { error } from "@/lib/swal";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { deleteUserLevel } from "@/service/tenant";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import { getUserLevelDetail } from "@/service/tenant";

const useTableColumns = (onEdit?: (data: any) => void) => {
  const MySwal = withReactContent(Swal);
  const userLevelId = getCookiesDecrypt("ulie");

  const columns: ColumnDef<any>[] = [
    {
      accessorKey: "no",
      header: "No",
      cell: ({ row }) => (
        <div className="flex items-center gap-5">
          <div className="flex-1 text-start">
            <h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
              {row.getValue("no")}
            </h4>
          </div>
        </div>
      ),
    },
    {
      accessorKey: "aliasName",
      header: "Name",
      cell: ({ row }) => (
        <div className="flex items-center gap-5">
          <div className="flex-1 text-start">
            <h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
              {row.getValue("aliasName")}
            </h4>
          </div>
        </div>
      ),
    },
    {
      accessorKey: "group",
      header: "Group",
      cell: ({ row }) => (
        <div className="flex items-center gap-5">
          <div className="flex-1 text-start">
            <h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
              {row.getValue("group")}
            </h4>
          </div>
        </div>
      ),
    },
    {
      accessorKey: "parentLevelName",
      header: "Parent Level",
      cell: ({ row }) => (
        <div className="flex items-center gap-5">
          <div className="flex-1 text-start">
            <h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
              {row.getValue("parentLevelName")}
            </h4>
          </div>
        </div>
      ),
    },
    // {
    //   accessorKey: "createdAt",
    //   header: "Upload Date",
    //   cell: ({ row }) => {
    //     const createdAt = row.getValue("createdAt") as string | number | undefined;
    //     const formattedDate =
    //       createdAt && !isNaN(new Date(createdAt).getTime())
    //         ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss")
    //         : "-";
    //     return <span className="whitespace-nowrap">{formattedDate}</span>;
    //   },
    // },
    // {
    //   accessorKey: "creatorName",
    //   header: "Creator Group",
    //   cell: ({ row }) => (
    //     <span className="whitespace-nowrap">
    //       {row.original.creatorName || row.original.createdByName || "-"}
    //     </span>
    //   ),
    // },
    // {
    //   accessorKey: "creatorGroupLevelName",
    //   header: "Source",
    //   cell: ({ row }) => (
    //     <span className="whitespace-nowrap">
    //       {row.getValue("creatorGroupLevelName") || "-"}
    //     </span>
    //   ),
    // },
    // {
    //   accessorKey: "publishedOn",
    //   header: "Published",
    //   cell: ({ row }) => {
    //     const isPublish = row.original.isPublish;
    //     const isPublishOnPolda = row.original.isPublishOnPolda;
    //     const creatorGroupParentLevelId = row.original.creatorGroupParentLevelId;

    //     let displayText = "-";
    //     if (isPublish && !isPublishOnPolda) {
    //       displayText = "Mabes";
    //     } else if (isPublish && isPublishOnPolda) {
    //       if (Number(creatorGroupParentLevelId) === 761) {
    //         displayText = "Mabes & Satker";
    //       } else {
    //         displayText = "Mabes & Polda";
    //       }
    //     } else if (!isPublish && isPublishOnPolda) {
    //       if (Number(creatorGroupParentLevelId) === 761) {
    //         displayText = "Satker";
    //       } else {
    //         displayText = "Polda";
    //       }
    //     }

    //     return (
    //       <div className="text-center whitespace-nowrap" title={displayText}>
    //         {displayText}
    //       </div>
    //     );
    //   },
    // },
    // {
    //   accessorKey: "statusName",
    //   header: "Status",
    //   cell: ({ row }) => {
    //     const statusId = Number(row.original?.statusId);
    //     const reviewedAtLevel = row.original?.reviewedAtLevel || "";
    //     const creatorGroupLevelId = Number(row.original?.creatorGroupLevelId);
    //     const needApprovalFromLevel = Number(row.original?.needApprovalFromLevel);

    //     const userHasReviewed = reviewedAtLevel.includes(`:${userLevelId}:`);
    //     const isCreator = creatorGroupLevelId === Number(userLevelId);

    //     const isWaitingForReview = statusId === 2 && !userHasReviewed && !isCreator;
    //     const isApprovalNeeded = statusId === 1 && needApprovalFromLevel === Number(userLevelId);

    //     const label =
    //       isWaitingForReview || isApprovalNeeded
    //         ? "Menunggu Review"
    //         : statusId === 2
    //         ? "Diterima"
    //         : row.original?.statusName;

    //     const colors: Record<string, string> = {
    //       "Menunggu Review": "bg-orange-100 text-orange-600",
    //       Diterima: "bg-green-100 text-green-600",
    //       default: "bg-red-200 text-red-600",
    //     };

    //     const statusStyles = colors[label] || colors.default;

    //     return (
    //       <Badge className={cn("rounded-full px-5 w-full whitespace-nowrap", statusStyles)}>
    //         {label}
    //       </Badge>
    //     );
    //   },
    // },
    {
      id: "actions",
      accessorKey: "action",
      header: "Action",
      enableHiding: false,
      cell: ({ row }) => {
        const router = useRouter();
        const MySwal = withReactContent(Swal);
        const [isDialogOpen, setIsDialogOpen] = React.useState(false);
        const [detailData, setDetailData] = React.useState<any>(null);

        const handleView = async (id: number) => {
          try {
            const res = await getUserLevelDetail(id);
            if (!res?.error) {
              setDetailData(res?.data?.data);
              setIsDialogOpen(true);
            } else {
              error(res?.message || "Gagal memuat detail user level");
            }
          } catch (err) {
            console.error("View error:", err);
            error("Terjadi kesalahan saat memuat data.");
          }
        };

        async function doDelete(id: number) {
          const response = await deleteUserLevel(id);
          if (response?.error) {
            error(response.message || "Gagal menghapus data");
            return;
          }

          MySwal.fire({
            title: "Sukses",
            text: "User Level berhasil dihapus.",
            icon: "success",
            confirmButtonColor: "#3085d6",
            confirmButtonText: "OK",
          }).then((result) => {
            if (result.isConfirmed) {
              window.location.reload();
            }
          });
        }

        const handleDelete = (id: number) => {
          MySwal.fire({
            title: "Yakin ingin menghapus?",
            text: "Data ini tidak dapat dikembalikan!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Ya, hapus",
            cancelButtonText: "Batal",
            confirmButtonColor: "#d33",
            cancelButtonColor: "#3085d6",
          }).then((result) => {
            if (result.isConfirmed) {
              doDelete(id);
            }
          });
        };

        const handleDeleteMedia = (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 [isMabesApprover, setIsMabesApprover] = React.useState(false);
        const userId = getCookiesDecrypt("uie");
        const userLevelId = getCookiesDecrypt("ulie");
        const roleId = getCookiesDecrypt("urie");
        React.useEffect(() => {
          if (userLevelId !== undefined && roleId !== undefined) {
            setIsMabesApprover(
              Number(userLevelId) === 216 && Number(roleId) === 3
            );
          }
        }, [userLevelId, roleId]);

        const [open, setOpen] = React.useState(false);

        return (
          <DropdownMenu open={open} onOpenChange={setOpen}>
            <DropdownMenuTrigger asChild>
              <Button
                size="icon"
                className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
              >
                <MoreVertical className="h-4 w-4 text-default-800" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="p-0 hover:text-black" align="end">
              <DropdownMenuItem
                onClick={() => {
                  setOpen(false);
                  handleView(row.original.id);
                }}
                className="p-2 border-b text-default-700 rounded-none cursor-pointer"
              >
                <Eye className="w-4 h-4 me-1.5" />
                View
              </DropdownMenuItem>
              <DropdownMenuItem
                onClick={() => {
                  setOpen(false); // ⬅️ tutup dropdown manual
                  onEdit?.(row.original);
                }}
                className="p-2 border-b text-default-700 rounded-none cursor-pointer"
              >
                <SquarePen className="w-4 h-4 me-1.5" />
                Edit
              </DropdownMenuItem>

              <DropdownMenuItem
                onClick={() => {
                  setOpen(false); // ⬅️ pastikan dropdown tertutup sebelum alert
                  handleDeleteMedia(row.original.id);
                }}
                className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-white rounded-none"
              >
                <Trash2 className="w-4 h-4 me-1.5" />
                Delete
              </DropdownMenuItem>
            </DropdownMenuContent>
            {/* ✅ Dialog Detail User Level */}
            <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
              <DialogContent className="max-w-lg">
                <DialogHeader>
                  <DialogTitle>Detail User Level</DialogTitle>
                  <DialogDescription>
                    Informasi lengkap dari user level ID: {detailData?.id}
                  </DialogDescription>
                </DialogHeader>

                {detailData ? (
                  <div className="space-y-3 mt-4">
                    <p>
                      <span className="font-medium">Name:</span>{" "}
                      {detailData.aliasName}
                    </p>
                    <p>
                      <span className="font-medium">Group:</span>{" "}
                      {detailData.group}
                    </p>
                    <p>
                      <span className="font-medium">Parent Level:</span>{" "}
                      {detailData.parentLevelName || "-"}
                    </p>
                    <p>
                      <span className="font-medium">Created At:</span>{" "}
                      {detailData.createdAt
                        ? new Date(detailData.createdAt).toLocaleString("id-ID")
                        : "-"}
                    </p>
                  </div>
                ) : (
                  <p className="text-gray-500 mt-4">Memuat data...</p>
                )}

                <div className="flex justify-end mt-5">
                  <Button onClick={() => setIsDialogOpen(false)}>Tutup</Button>
                </div>
              </DialogContent>
            </Dialog>
          </DropdownMenu>
        );
      },
    },
  ];

  return columns;
};

export default useTableColumns;