'use client';

import { useState } from 'react';
import { routes } from '@/config/routes';

import TableLayout from '../../table-layout';
import PermissionsTable from '../../../components/tables/permission-table';
import PageTabs from '../../../components/common/page-tabs';
import PrimaryButton from '../../../components/common/primary-button';
import { PiPlusBold } from 'react-icons/pi';
import RoleModal from '@/components/modals/user_role/RoleModal';
import ConfirmModal from '@/components/common/confirm-modal';

type Permission = {
  module: string;
  add: boolean;
  edit: boolean;
  delete: boolean;
  view: boolean;
};

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

export default function Page() {
  const [openModal, setOpenModal] = useState(false);
  const [editingRole, setEditingRole] = useState<any>(null);
  const [deleteRole, setDeleteRole] = useState<any>(null);

  const handleCreateRole = (values: any) => {
    console.log('Role Data:', values);
    
  };

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

  const handleDeleteRole = () => {
    setRoles((prev) =>
      prev.filter((r) => r.id !== deleteRole.id)
    );

    setDeleteRole(null);
  };

  const permissions = [
    { module: 'Dashboard', add: true, edit: true, delete: false, view: true },
    { module: 'Lead Management', add: true, edit: true, delete: false, view: true },
    { module: 'Labour Management', add: true, edit: false, delete: false, view: true },
    { module: 'User Management', add: true, edit: true, delete: true, view: true },
    { module: 'Accounts', add: false, edit: false, delete: false, view: true },
  ];

  const [roles, setRoles] = useState([
    {
      id: 1,
      role_name: 'Admin',
      usersCount: 5,
      description: 'Full access',
      permissions: [
        { module: 'Dashboard', add: true, edit: true, delete: true, view: true },
        { module: 'Lead Management', add: true, edit: true, delete: false, view: true },
      ],
    },
  ]);


  return (
    <>
      <TableLayout
        title={pageHeader.title}
        breadcrumb={pageHeader.breadcrumb}
        data={[]}
        fileName="roles_permissions"
        header="Module,Add,Edit,Delete,View"
        showExport={false}
        showImport={false}
      >
        <div className="space-y-6">
          <div className="flex items-start justify-end">
            <PrimaryButton onClick={() => setOpenModal(true)}>
              <PiPlusBold className="h-4 w-4" />
              Create Role
            </PrimaryButton>
          </div>
          <div className="rounded-lg border bg-white shadow-sm">
            <PermissionsTable
              permissions={roles}
              onEdit={(role: any) => {
                setEditingRole(role);
                setOpenModal(true);
              }}
              onDelete={(role) => {
                setDeleteRole(role);
              }}
            />
          </div>
        </div>
      </TableLayout>

      <RoleModal
        open={openModal}
        onClose={() => {
          setOpenModal(false);
          setEditingRole(null);
        }}
        onSubmit={(data: any) => {
          if (editingRole) {
            handleEditRole(data);
          } else {
            handleCreateRole(data);
          }
        }}
        initialData={editingRole}
      />

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