"use client";

import { useState } from "react";
import { TableColumn } from "react-data-table-component";
import { FaTrash } from "react-icons/fa";

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

import ActionGroup from "@/src/components/admin/ui/button/ActionGroup";
import ActionButton from "@/src/components/admin/ui/button/ActionButton";
import { AiOutlineCheck, AiOutlineClose } from "react-icons/ai";

/* =========================
   Customer Row Type
========================= */
export type CustomerRow = {
  id: number;
  serial: number;
  name: string;
  email: string;
  status: number;
};

export default function CustomerList() {
  const [filteredUrl] = useState("/customer/ajax/customer-list");
  const { refresh } = useStateContext();
  const { deleteItemAction , toggleStatus } = useTableActions("Customer");

  const columns: TableColumn<any>[] = [
    {
      name: "Sr No",
      selector: (row) => row.serial,
      width: "80px",
    },
    {
      name: "User List",
      selector: (row) => row.name || "-",
      
      
    },
    {
      name: "Email",
      selector: (row) => row.email || "-",
      
      
    },
    {
      name: "Action",
      width: "300px",
      cell: (row) => (
        <ActionGroup>
          <ActionButton
            variant="active"
            onClick={() => toggleStatus(row.id, row.status)}
            title="Toggle Status"
          >
            {row.status === 1 ? <AiOutlineCheck /> : <AiOutlineClose />}
          </ActionButton>
          <ActionButton
            variant="delete"
            onClick={() => deleteItemAction(row.id)}
            title="Delete"
          >
            <FaTrash size={15} />
          </ActionButton>
        </ActionGroup>
      ),
    
      ignoreRowClick: true,
    },
  ];

  const CUSTOMER_LIST_EXCEL_CONFIG = {
    fileName: "Customer List Sheet" as string,
    headers: [
      "Sr No",
      "User List",
      "Email",
      "Action",
    ] as const,
    rowMapper: (row: any) => {
      return [
        row?.serial || "—",
        row?.name || "—",
        row?.email || "—",
        row?.status === 1 ? "Active" : "Inactive", // match StatusBadge
      ];
    },
  } satisfies {
    fileName: string;
    headers: string[];
    rowMapper: (r: any) => any[];
  };


  return (
    <div className="table-container max-w-full">

      <CustomDataTable
        tableName="Customer List"
        url={filteredUrl}
        columns={columns}
        refresh={refresh}
        search={true}
        enableExport={true}
        EXCEL_CONFIG={CUSTOMER_LIST_EXCEL_CONFIG}
      />
    </div>
  );
}