"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 { Badge } from "@/components/ui/badge";
import { format } from "date-fns";
import { useRouter } from "next/navigation";
import { deleteMedia } from "@/service/content/content";
import { error } from "@/lib/swal";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import Link from "next/link";

const useTableColumns = () => {
  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);

        async function doDelete(id: any) {
          const data = { id };
          const response = await deleteMedia(data);
          if (response?.error) {
            error(response.message);
            return false;
          }
          success();
        }

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

        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]);

        return (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                size="icon"
                className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
              >
                <span className="sr-only">Open menu</span>
                <MoreVertical className="h-4 w-4 text-default-800" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="p-0 hover:text-black" align="end">
              <Link
                href={`/admin/content/image/detail/${row.original.id}`}
                className="hover:text-black"
              >
                <DropdownMenuItem className="p-2 border-b text-default-700 rounded-none">
                  <Eye className="w-4 h-4 me-1.5" />
                  View
                </DropdownMenuItem>
              </Link>
              {/* {(Number(row.original.uploadedById) === Number(userId) || isMabesApprover) && ( */}
                <Link href={`/admin/content/image/update/${row.original.id}`}>
                  <DropdownMenuItem className="p-2 border-b text-default-700 rounded-none">
                    <SquarePen className="w-4 h-4 me-1.5" />
                    Edit
                  </DropdownMenuItem>
                </Link>
              {/* )} */}
              <DropdownMenuItem
                onClick={() => 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>
          </DropdownMenu>
        );
      },
    },
  ];

  return columns;
};

export default useTableColumns;