'use client';

import { useState } from 'react';
import { routes } from '@/config/routes';
import { useDrawer } from '@/components/common/Drawer';
import TableLayout from '../../table-layout';
import { PiEye, PiKanban, PiList, PiPencilSimpleLineBold, PiTrashBold } from 'react-icons/pi';
import PrimaryButton from '../../../components/common/primary-button';
import { PiPlusBold } from 'react-icons/pi';
import ConfirmModal from '@/components/common/confirm-modal';
import DataTable from '@/components/common/DataTable';
import user from "../../../../public/auh/user_2.png";
import user1 from "../../../../public/auh/user_4.png";
import user3 from "../../../../public/auh/user_5.png";
import user2 from "../../../../public/auh/user_2.png";
import Image, { StaticImageData } from 'next/image';
import LabourDrawer from '@/components/drawer/manage_labour/LabourDrawer';
import { useRouter, useSearchParams } from 'next/navigation';


type Column<T> = {
  header: string;
  accessor: keyof T;
  render?: (value: any, row: T) => React.ReactNode;
};


type Labour = {
  id: number;
  name: string;
  image: string | StaticImageData;
  role: string;
  mobile: string;
  email: string;
  skill: string;
};

const pageHeader = {
  title: 'Manage Labour',
  breadcrumb: [
    { href: routes.dashboard, name: 'Home' },
    { name: 'Labour Management' },
  ],
};

export default function Page() {
  const [openModal, setOpenModal] = useState(false);
  const [editingRole, setEditingRole] = useState<any>(null);
  const [deleteRole, setDeleteRole] = useState<any>(null);
  const { openDrawer } = useDrawer();
  const handleCreateRole = (values: any) => {
    console.log('Role Data:', values);
    
  };

  const handleEdit = (updatedRole: any) => {
    setLabours((prev) =>
        prev.map((r) => (r.id === updatedRole.id ? updatedRole : r))
    );
    };

  const handleDelete = () => {
    setLabours((prev) =>
        prev.filter((r) => r.id !== deleteRole.id)
    );
    setDeleteRole(null);
  };

    const [labours, setLabours] = useState([
  { id: 1, name: 'Prathap', image: user, role: 'Electrician', mobile: '9876543210', email: 'prathap@example.com', skill: 'Wiring' },
  { id: 2, name: 'Arun Kumar', image: user1, role: 'Plumber', mobile: '9123456780', email: 'arun@example.com', skill: 'Pipe Fixing' },
  { id: 3, name: 'Ravi Kumar', image: user2, role: 'Carpenter', mobile: '9012345678', email: 'ravi@example.com', skill: 'Wood Work' },
  { id: 4, name: 'Suresh Babu', image: user1, role: 'Painter', mobile: '9988776655', email: 'suresh@example.com', skill: 'Wall Painting' },
  { id: 5, name: 'Mani Raj', image: user3, role: 'Welder', mobile: '9871234560', email: 'mani@example.com', skill: 'Arc Welding' },
  { id: 6, name: 'Karthik', image: user1, role: 'Electrician', mobile: '9090909090', email: 'karthik@example.com', skill: 'Circuit Repair' },
  { id: 7, name: 'Vijay', image: user3, role: 'Plumber', mobile: '9191919191', email: 'vijay@example.com', skill: 'Leak Fixing' },
  { id: 8, name: 'Ajith', image: user, role: 'Mason', mobile: '9292929292', email: 'ajith@example.com', skill: 'Brick Work' },
  { id: 9, name: 'Surya', image: user2, role: 'Painter', mobile: '9393939393', email: 'surya@example.com', skill: 'Interior Design' },
  { id: 10, name: 'Prakash', image: user1, role: 'Carpenter', mobile: '9494949494', email: 'prakash@example.com', skill: 'Furniture' },
  { id: 11, name: 'Dinesh', image: user3, role: 'Electrician', mobile: '9595959595', email: 'dinesh@example.com', skill: 'Maintenance' },
  { id: 12, name: 'Saravanan', image: user3, role: 'Welder', mobile: '9696969696', email: 'saravanan@example.com', skill: 'Steel Work' },
  { id: 13, name: 'Ramesh', image: user1, role: 'Plumber', mobile: '9797979797', email: 'ramesh@example.com', skill: 'Drainage' },
  { id: 14, name: 'Mohan', image: user, role: 'Mason', mobile: '9898989898', email: 'mohan@example.com', skill: 'Concrete Work' },
  { id: 15, name: 'Bala', image: user2, role: 'Painter', mobile: '9123456781', email: 'bala@example.com', skill: 'Exterior Painting' },
  { id: 16, name: 'Ganesh', image: user3, role: 'Carpenter', mobile: '9234567890', email: 'ganesh@example.com', skill: 'Cabinet Making' },
  { id: 17, name: 'Hari', image: user, role: 'Electrician', mobile: '9345678901', email: 'hari@example.com', skill: 'Wiring Setup' },
  { id: 18, name: 'Kiran', image: user2, role: 'Welder', mobile: '9456789012', email: 'kiran@example.com', skill: 'Fabrication' },
  { id: 19, name: 'Naveen', image: user1, role: 'Plumber', mobile: '9567890123', email: 'naveen@example.com', skill: 'Pipe Installation' },
  { id: 20, name: 'Santhosh', image: user3, role: 'Mason', mobile: '9678901234', email: 'santhosh@example.com', skill: 'Tile Work' },
]);

    const columns: Column<Labour>[] = [
        {
            header: 'Staff',
            accessor: 'name',
            render: (_, row) => (
            <div className="flex items-center gap-3">
                <Image
                  src={typeof row.image === 'string' ? row.image : row.image.src}
                  alt={row.name}
                  width={40}
                  height={40}
                  className="rounded-full border"
                />
                <span>{row.name}</span>
            </div>
            ),
        },
        {
            header: 'Role',
            accessor: 'role',
        },
        {
            header: 'Mobile',
            accessor: 'mobile',
        },
        {
            header: 'Email',
            accessor: 'email',
        },
        {
            header: 'Skill',
            accessor: 'skill',
        },
        {
            header: 'Actions',
            accessor: 'id',
            render: (_, row) => (
            <div className="flex justify-center gap-2">
                <button onClick={() => console.log('View', row)}>
                        <PiEye/>
                </button>
                <button
                    onClick={() => {
                      openDrawer({
                        view: (
                          <LabourDrawer
                            initialData={row}
                            onSubmit={(data: any) => handleEdit(data)}
                          />
                        ),
                      });
                    }}
                    >
                    <PiPencilSimpleLineBold />
                </button>
               
                <button onClick={() => setDeleteRole(row)}>
                        <PiTrashBold className='text-red-500'/>
                </button>
            </div>
            ),
        },
        ];


  return (
    <>
      <TableLayout
        title={pageHeader.title}
        breadcrumb={pageHeader.breadcrumb}
        data={[]}
        fileName="roles_permissions"
        header="Module,Add,Edit,Delete,View"
        showExport={false}
        showImport={false}
        actions={
          <PrimaryButton
              onClick={() => {
                openDrawer({
                  view: (
                    <LabourDrawer
                      onSubmit={(data: any) => {
                        setLabours((prev) => [...prev, { ...data, id: Date.now() }]);
                      }}
                    />
                  ),
                });
              }}
            >
              <PiPlusBold className="h-4 w-4" />
              Create Labour
          </PrimaryButton>
        }
      >
        <div className="space-y-6">
          <div className="rounded-lg border bg-white shadow-sm">
            <DataTable
                data={labours}
                columns={columns}
                searchAble
                pagination
            />
          </div>
        </div>
      </TableLayout>


      <ConfirmModal
        open={!!deleteRole}
        onClose={() => setDeleteRole(null)}
        onConfirm={handleDelete}
        title="Delete Labour"
        description={`Are you sure you want to delete "${deleteRole?.name}"?`}
      />
    </>
  );
}