"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { TableColumn } from "react-data-table-component";
import { FaEdit, FaTrash } from "react-icons/fa";
import { AiOutlineCheck, AiOutlineClose } from "react-icons/ai";
import { Shield } from "lucide-react";

import CustomDataTable from "@/src/components/admin/tables/customTableComponent";
import StatusBadge from "@/src/components/admin/StatusBadge";
import ActionGroup from "@/src/components/admin/ui/button/ActionGroup";
import ActionButton from "@/src/components/admin/ui/button/ActionButton";
import AdminUserFilters from "./admin-filters";
import SideDrawer from "@/src/components/admin/SideDrawer";
import UserPermissionAssignmentDrawer from "./UserPermissionAssignmentDrawer";

import { useTableActions } from "@/src/hooks/admin/useTableAction";
import { useStateContext } from "@/src/context/admin/StateContext";

export default function AdminUserList() {
  const router = useRouter();
  const [filteredUrl, setFilteredUrl] = useState<string>("/admin-user/ajax/list");
  const [permissionDrawerOpen, setPermissionDrawerOpen] = useState(false);
  const [selectedUser, setSelectedUser] = useState<{ id: number; name: string }>({
    id: 0,
    name: "",
  });

  const { refresh } = useStateContext();
  const { toggleStatus, deleteItemAction } = useTableActions("user");

  const handleEdit = (id: number) => {
    router.push(`/admin/admin-user/${id}`);
  };

  const handleAssignPrivileges = (user: { id: number; name: string }) => {
    setSelectedUser(user);
    setPermissionDrawerOpen(true);
  };

  const columns: TableColumn<any>[] = [
    {
      name: "Sr. No.",
      selector: (row) => row.serial || "—",
      width: "90px",
    },
    {
      name: "Full Name",
      selector: (row) => row.name || "—",
      width: "170px",
    },
    {
      name: "Email",
      selector: (row) => row.email || "—",
    },
    {
      name: "Contact",
      selector: (row) => row.phone || "—",
    },
    {
      name: "Department",
      selector: (row) => row.department || "—",
    },
    {
      name: "Designation",
      selector: (row) => row.designation || "—",
    },
    {
      name: "Status",
      cell: (row) => <StatusBadge isActive={row.status === 1} />,
      width: "120px",
    },
    {
      name: "Actions",
      cell: (row) => (
        <ActionGroup>
          <ActionButton variant="edit" onClick={() => handleEdit(row.id)} title="Edit User">
            <FaEdit size={15} />
          </ActionButton>

          <ActionButton
            variant="view"
            onClick={() => handleAssignPrivileges({ id: row.id, name: row.name })}
            title="Assign Privileges"
          >
            <Shield size={15} />
          </ActionButton>

          <ActionButton
            variant="delete"
            onClick={() => deleteItemAction(row.id)}
            title="Delete User"
          >
            <FaTrash size={15} />
          </ActionButton>

          <ActionButton
            variant="active"
            onClick={() => toggleStatus(row.id, row.status)}
            title={row.status === 1 ? "Deactivate" : "Activate"}
          >
            {row.status === 1 ? <AiOutlineCheck /> : <AiOutlineClose />}
          </ActionButton>
        </ActionGroup>
      ),
      width: "250px",
      ignoreRowClick: true,
    },
  ];

  const ADMIN_USER_LIST_EXCEL_CONFIG = {
    fileName: "Admin User List Sheet" as string,
    headers: [
      "Sr. No.",
      "Full Name",
      "Email",
      "Contact",
      "Department",
      "Designation",
      "Status",
    ] as const,
    rowMapper: (row: any) => {
      return [
        row?.serial || "—",
        row?.name || "—",
        row?.email || "—",
        row?.phone || "—",
        row?.department || "—",
        row?.designation || "—",
        row?.status === 1 ? "Active" : "Inactive", // match StatusBadge
      ];
    },
  } satisfies {
    fileName: string;
    headers: string[];
    rowMapper: (r: any) => any[];
  };

  return (
    <>
      <div className="space-y-6">
        <AdminUserFilters filteredUrl="/admin-user/ajax/list" setFilteredUrl={setFilteredUrl} />

        <div className="table-container max-w-full overflow-x-auto">
          <CustomDataTable
            tableName="Admin Users"
            url={filteredUrl}
            columns={columns}
            refresh={refresh}
            search={true}
            enableExport={true}
            EXCEL_CONFIG={ADMIN_USER_LIST_EXCEL_CONFIG}
          />
        </div>
      </div>

      <SideDrawer
        isOpen={permissionDrawerOpen}
        onClose={() => {
          setPermissionDrawerOpen(false);
          setSelectedUser({ id: 0, name: "" });
        }}
        title={`Assign Privileges - ${selectedUser.name}`}
        width="xxxl"
      >
        <UserPermissionAssignmentDrawer userId={selectedUser.id} userName={selectedUser.name} />
      </SideDrawer>
    </>
  );
}