"use client";

import { useState } from "react";
import { TableColumn } from "react-data-table-component";
import { FaEdit, FaEye, FaTrash } from "react-icons/fa";
import { AiOutlineCheck, AiOutlineClose } from "react-icons/ai";

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 { useStateContext } from "@/src/context/admin/StateContext";
import { useTableActions } from "@/src/hooks/admin/useTableAction";




export default function UserList() {
  const { refresh } = useStateContext();
  const { deleteItemAction, editItem } = useTableActions("tbl_users"); 

  /* =========================
     STATIC DATA (Sample Response)
  ========================== */
const userSampleResponse = {
  recordsFiltered: 4,
  data: [
    {
      id: 1,
      sr_no: "1",
      full_name: "Rahul Sharma",
      contact_no: "9876543210",
      email: "rahul.sharma@gmail.com",
      address: "Flat 302, Shree Residency, Andheri East, Mumbai, Maharashtra",
      designation:"Manager",
      department:"Administration",
      gender:"Male",
      image:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFwCMS1udCgItE5RcdeVvVhVAo2p4s4QmJlA&s",
      status: 1,
    },
    {
      id: 2,
      sr_no: "2",
      full_name: "Priya Verma",
      contact_no: "8877665544",
      email: "priya.verma@yahoo.com",
      address: "B-12, Laxmi Nagar, Near Metro Station, Delhi",
      designation:"Team Leader",
      department:"Finance",
      gender:"Female",
      image:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQZqFHY4cLfx_qIxvp9lzEWAAZaMvgqAa-AJA&s",
      status: 0,
    },
    {
      id: 3,
      sr_no: "3",
      full_name: "Amit Patil",
      contact_no: "7766554433",
      email: "amit.patil@outlook.com",
      address: "Row House 5, Sinhagad Road, Pune, Maharashtra",
      designation:"Executive",
      department:"Accounts",
      gender:"Male",
      image:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS38-4FAu-jsUXP4OSWoNX1o8wM0AAUvCB_ZA&s",
      status: 1,
    },
    {
      id: 4,
      sr_no: "4",
      full_name: "Neha Iyer",
      contact_no: "9900112233",
      email: "neha.iyer@rediffmail.com",
      address: "No. 21, 3rd Cross, Indiranagar, Bengaluru, Karnataka",
      designation:"Officer",
      department:"Sales",
      gender:"Female",
      image:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFgZoHsxXInwRZ1wrxETkmjn8sj5J8_ghyLA&s",
      status: 1,
    },
  ],
};


  const columns: TableColumn<any>[] = [
    {
      name: "Sr. No.",
      selector: (row) => row.sr_no,
      width: "80px",
      
    },
    {
      name: "Full Name",
      selector: (row) => row.full_name,
      
      width: "130px",
    },
    {
      name: "Contact No",
      selector: (row) => row.contact_no,
      width: "130px",
    },
    {
      name: "Email",
      selector: (row) => row.email,
      
      width: "180px",
    },
    {
      name: "Address",
      selector: (row) => row.address,
      
      width: "180px",
    },
    {
      name: "Designation",
      selector: (row) => row.designation,
      
      width: "130px",
    },
    {
      name: "Department",
      selector: (row) => row.department,
      
      width: "130px",
    },
    {
      name: "Gender",
      selector: (row) => row.gender,
      
      width: "130px",
    },  
  {
  name: "Image",
  cell: (row) => {
    const imgUrl =
      row.image ||
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFgZoHsxXInwRZ1wrxETkmjn8sj5J8_ghyLA&s";

    return (
      <div className="relative group">
        <img
          src={imgUrl}
          alt={row.full_name}
          className="w-28 h-16 object-cover rounded border m-1"
        />
        <a
          href={imgUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 flex items-center justify-center"
        >
          <FaEye className="text-white" />
        </a>
      </div>
    );
  },
  width: "160px",
},



    // {
    //   name: "Status",
    //   cell: (row) => <StatusBadge isActive={row.status === 1} />,
    //   width: "120px",
    // },
    {
      name: "Actions",
      cell: (row) => (
        <ActionGroup>
          <ActionButton
            variant="edit"
            onClick={() => console.log("Edit ID:", row.id)}
            title="Edit"
          >
            <FaEdit size={15} />
          </ActionButton>

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


          {/* <ActionButton
            variant="active"
            onClick={() => console.log("Toggle Status for ID:", row.id)}
            title="Toggle Status"
          >
            {row.status === 1 ? <AiOutlineCheck /> : <AiOutlineClose />}
          </ActionButton> */}
        </ActionGroup>
      ),
      width: "200px",
      ignoreRowClick: true,
    },
  ];

  return (
    <div className="table-container max-w-full">
      <CustomDataTable
        tableName="User List"
        url="" // Empty URL because we are in demo mode
        columns={columns}
        refresh={refresh}
        demoMode={true} // Enabled Demo Mode
        sampleResponse={userSampleResponse} // Passed static data here
        search={true}
      />
    </div>
  );
}