'use client';

import { useEffect, useState, useCallback, useRef } from 'react';
import type { PaginationState } from '@tanstack/react-table';
import { useRouter } from 'next/navigation';
import { api } from '@/lib/api';
import type { AdminUser, PermissionItem, Role } from '@/types';
import { useAuth } from '@/components/auth-context';
import { toast } from 'react-toastify';
import { showConfirmDelete } from '@/lib/confirm';
import GroupAssignmentModal from '@/components/GroupAssignmentModal';
import GroupBadges from '@/components/GroupBadges';
import { DataTable } from '@/components/data-table/DataTable';
import { DataTableActions } from '@/components/data-table/DataTableActions';
import SearchableSelect from '@/components/SearchableSelect';
import BackToDashboard from '@/components/BackToDashboard';
import { PageLoader } from '@/components/DotLoader';
import { formatDate, formatDateTime } from '@/lib/dates';

const ROLES: Role[] = ['ADMIN', 'RECRUITER', 'INTERVIEWER', 'CANDIDATE'];

const ROLE_BADGE: Record<string, string> = {
  ADMIN: 'text-rose-600 dark:text-rose-400 bg-rose-50 dark:bg-rose-950/40 border-rose-200 dark:border-rose-900/50',
  RECRUITER: 'text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-950/40 border-indigo-200 dark:border-indigo-900/50',
  INTERVIEWER: 'text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/40 border-amber-200 dark:border-amber-900/50',
  CANDIDATE: 'text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/40 border-emerald-200 dark:border-emerald-900/50',
  USER: 'text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800 border-slate-200 dark:border-slate-700',
};

const inputCls =
  'w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 focus:border-indigo-500 rounded-none px-4 py-2.5 text-sm focus:outline-none transition text-slate-900 dark:text-white';
const labelCls =
  'block text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1';

// Utility function to export to CSV
function exportToCsv(filename: string, headers: string[], rows: (string | number)[][]) {
  const content = [
    headers.map(h => `"${String(h).replace(/"/g, '""')}"`).join(','),
    ...rows.map(row => row.map(cell => `"${String(cell ?? '').replace(/"/g, '""')}"`).join(','))
  ].join('\n');

  const blob = new Blob(['\ufeff' + content], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.setAttribute('href', url);
  link.setAttribute('download', filename);
  link.style.visibility = 'hidden';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

export default function AdminUsersPage() {
  const router = useRouter();
  const { user: me } = useAuth();
  const [users, setUsers] = useState<AdminUser[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [roleFilter, setRoleFilter] = useState('');
  const [statusFilter, setStatusFilter] = useState('');
  const [pagination, setPagination] = useState<PaginationState>({ pageIndex: 0, pageSize: 20 });
  const [total, setTotal] = useState(0);

  // Create/Edit modal
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingId, setEditingId] = useState<number | null>(null);
  const [email, setEmail] = useState('');
  const [fullName, setFullName] = useState('');
  const [phone, setPhone] = useState('');
  const [role, setRole] = useState<Role>('CANDIDATE');
  const [password, setPassword] = useState('');
  const [isActive, setIsActive] = useState(true);
  const [employeeId, setEmployeeId] = useState('');
  const [department, setDepartment] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [fullNameError, setFullNameError] = useState('');
  const [phoneError, setPhoneError] = useState('');

  // Permissions modal
  const [permUser, setPermUser] = useState<AdminUser | null>(null);
  const [catalog, setCatalog] = useState<PermissionItem[]>([]);
  const [extraPerms, setExtraPerms] = useState<Set<string>>(new Set());
  const [effectivePerms, setEffectivePerms] = useState<string[]>([]);
  const [permSaving, setPermSaving] = useState(false);
  const [permSearch, setPermSearch] = useState('');

  // Groups modal
  const [isGroupsModalOpen, setIsGroupsModalOpen] = useState(false);
  const [groupsUser, setGroupsUser] = useState<AdminUser | null>(null);

  const [roleNames, setRoleNames] = useState<string[]>([...ROLES]);

  const isAdmin = me?.role === 'ADMIN';
  const perms = me?.permissions || [];
  const canView = isAdmin || perms.includes('users.view_user');
  const canAdd = isAdmin || perms.includes('users.add_user');
  const canChange = isAdmin || perms.includes('users.change_user');
  const canDelete = isAdmin || perms.includes('users.delete_user');
  const roleOptions = roleNames.filter((r) => r !== 'ADMIN');

  const columns = [
    {
      id: 'srNo',
      header: 'S.No.',
      cell: ({ row, table }: any) => {
        const pageIndex = table.getState().pagination.pageIndex;
        const pageSize = table.getState().pagination.pageSize;
        return <span className="font-semibold text-slate-500 dark:text-slate-400">{pageIndex * pageSize + row.index + 1}</span>;
      },
    },
    {
      accessorKey: 'employee_id',
      header: 'Employee ID',
      cell: ({ row }: any) => <span className="font-semibold text-slate-700 dark:text-slate-350">{row.original.employee_id || '—'}</span>,
    },
    {
      accessorKey: 'full_name',
      header: 'Full Name',
      cell: ({ row }: any) => <span className="font-semibold text-slate-800 dark:text-white">{row.original.full_name || '—'}</span>,
    },
    {
      accessorKey: 'email',
      header: 'Email',
      cell: ({ row }: any) => <span className="text-slate-600 dark:text-slate-400">{row.original.email}</span>,
    },
    {
      accessorKey: 'phone',
      header: 'Mobile Number',
      cell: ({ row }: any) => <span className="text-slate-600 dark:text-slate-400">{row.original.phone || '—'}</span>,
    },
    {
      accessorKey: 'role',
      header: 'Role',
      cell: ({ row }: any) => {
        const u = row.original;
        return (
          <span className={`text-[10px] tracking-widest font-black uppercase px-2 py-0.5 rounded-full border ${ROLE_BADGE[u.role] || ROLE_BADGE.USER}`}>
            {u.role}
          </span>
        );
      },
    },
    {
      accessorKey: 'department',
      header: 'Department',
      cell: ({ row }: any) => <span className="text-slate-600 dark:text-slate-400">{row.original.department || '—'}</span>,
    },
    {
      accessorKey: 'is_active',
      header: 'Status',
      cell: ({ row }: any) => {
        const u = row.original;
        return (
          <div className="flex flex-col gap-1">
            {u.is_active ? (
              <span className="inline-flex items-center gap-1.5 text-xs text-emerald-600 dark:text-emerald-400 font-semibold bg-emerald-50 dark:bg-emerald-950/30 px-2 py-0.5 rounded-full w-fit">
                <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" /> Active
              </span>
            ) : (
              <span className="inline-flex items-center gap-1.5 text-xs text-slate-400 font-semibold bg-slate-100 dark:bg-slate-800/50 px-2 py-0.5 rounded-full w-fit">
                <span className="w-1.5 h-1.5 rounded-full bg-slate-400" /> Inactive
              </span>
            )}
            {u.is_locked && (
              <span className="inline-flex items-center gap-1.5 text-xs text-amber-700 dark:text-amber-400 font-semibold bg-amber-50 dark:bg-amber-950/30 px-2 py-0.5 rounded-full w-fit">
                <i className="fa-solid fa-lock text-[9px]" /> Locked
              </span>
            )}
          </div>
        );
      },
    },
    {
      accessorKey: 'date_joined',
      header: 'Created Date',
      cell: ({ row }: any) => {
        const d = row.original.date_joined;
        return <span className="text-xs text-slate-500 dark:text-slate-400">{formatDate(d)}</span>;
      },
    },
    {
      accessorKey: 'last_login',
      header: 'Last Login',
      cell: ({ row }: any) => {
        const d = row.original.last_login;
        return <span className="text-xs text-slate-500 dark:text-slate-400">{formatDateTime(d)}</span>;
      },
    },
    {
      id: 'actions',
      header: () => <div className="text-right">Actions</div>,
      cell: ({ row }: any) => {
        const u = row.original;
        return (
          <DataTableActions
            onEdit={canChange && (isAdmin || u.role !== 'ADMIN') ? () => openEdit(u) : undefined}
            onDelete={canDelete && (isAdmin || u.role !== 'ADMIN') ? () => handleDelete(u) : undefined}
            customActions={
              <>
                {isAdmin && (
                  <button
                    onClick={() => openPerms(u)}
                    className="bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 text-xs font-bold px-3 py-2 rounded-none transition cursor-pointer flex items-center justify-center border border-slate-200/40 dark:border-slate-850"
                    title="Permissions"
                  >
                    <i className="fa-solid fa-key"></i>
                  </button>
                )}
                {isAdmin && (
                  <button
                    onClick={() => { setGroupsUser(u); setIsGroupsModalOpen(true); }}
                    className="bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 text-xs font-bold px-3 py-2 rounded-none transition cursor-pointer flex items-center justify-center border border-slate-200/40 dark:border-slate-850"
                    title="Groups"
                  >
                    <i className="fa-solid fa-users"></i>
                  </button>
                )}
                {isAdmin && u.id !== me?.id && (
                  <button
                    onClick={() => handleToggleLock(u)}
                    className={`text-xs font-bold px-3 py-2 rounded-none transition cursor-pointer flex items-center justify-center border ${u.is_locked
                      ? 'bg-amber-500 hover:bg-amber-600 text-white border-amber-500'
                      : 'bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 border-slate-200/40 dark:border-slate-850'
                      }`}
                    title={u.is_locked ? 'Unlock account' : 'Lock account'}
                  >
                    <i className={`fa-solid ${u.is_locked ? 'fa-lock-open' : 'fa-lock'}`}></i>
                  </button>
                )}
              </>
            }
          />
        );
      },
    },
  ];

  const loadUsers = useCallback(async () => {
    const params = new URLSearchParams();
    params.set('page', String(pagination.pageIndex + 1));
    params.set('page_size', String(pagination.pageSize));
    if (search.trim()) params.set('search', search.trim());
    if (roleFilter) params.set('role', roleFilter);
    if (statusFilter) params.set('is_active', statusFilter);
    const res = await api.get(`/users/admin/users/?${params.toString()}`) as any;
    const d = res.data;
    if (d && Array.isArray(d.results)) {
      setUsers(d.results);
      setTotal(d.count ?? d.results.length);
    } else {
      const arr = Array.isArray(d) ? d : [];
      setUsers(arr);
      setTotal(arr.length);
    }
  }, [search, roleFilter, statusFilter, pagination]);

  useEffect(() => {
    if (!me) return;
    (async () => {
      setLoading(true);
      try {
        const p = me.permissions || [];
        if (me.role === 'ADMIN' || p.includes('users.view_user')) {
          await loadUsers();
        }
        if (me.role === 'ADMIN') {
          (api.get('/users/admin/roles/') as Promise<any>)
            .then((r) => setRoleNames((r.data || []).map((x: { role: string }) => x.role)))
            .catch(() => { });
        }
      } finally {
        setLoading(false);
      }
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [me]);

  // Reset to page 1 whenever a filter changes.
  useEffect(() => {
    setPagination((p) => (p.pageIndex === 0 ? p : { ...p, pageIndex: 0 }));
  }, [search, roleFilter, statusFilter]);

  // Re-query on filter/pagination change (the first load is handled above).
  const didInitialUserLoad = useRef(false);
  useEffect(() => {
    if (!canView) return;
    if (!didInitialUserLoad.current) { didInitialUserLoad.current = true; return; }
    const t = setTimeout(() => { loadUsers().catch(() => { }); }, 300);
    return () => clearTimeout(t);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [search, roleFilter, statusFilter, pagination]);

  const openCreate = () => {
    setEditingId(null);
    setEmail(''); setFullName(''); setPhone(''); setRole('CANDIDATE');
    setPassword(''); setIsActive(true);
    setEmployeeId(''); setDepartment('');
    setFullNameError('');
    setPhoneError('');
    setIsModalOpen(true);
  };

  const openEdit = async (u: AdminUser) => {
    setEditingId(u.id);
    setFullName(u.full_name || '');
    setRole(u.role); setPassword(''); setIsActive(u.is_active);
    setEmployeeId(u.employee_id || ''); setDepartment(u.department || '');
    setFullNameError('');
    setPhoneError('');
    setIsModalOpen(true);
    // List row has masked email/phone — fetch the full record for editing so
    // we never save the masked value back.
    let full: any = u;
    try {
      const res = (await api.get(`/users/admin/users/${u.id}/`)) as any;
      full = res?.data ?? u;
    } catch { /* fall back to the row */ }
    setEmail(full.email || ''); setPhone(full.phone || '');
  };

  const handleFullNameChange = (value: string) => {
    const sanitizedValue = value.replace(/[^A-Za-z\s]/g, '');
    setFullName(sanitizedValue);

    if (!value.trim()) {
      setFullNameError('');
      return;
    }

    if (value !== sanitizedValue) {
      setFullNameError('Wrong format');
    } else {
      setFullNameError('');
    }
  };

  const handlePhoneChange = (value: string) => {
    const sanitizedValue = value.replace(/\D/g, '').slice(0, 10);
    setPhone(sanitizedValue);

    if (!value.trim()) {
      setPhoneError('');
      return;
    }

    if (sanitizedValue.length !== 10) {
      setPhoneError('Phone number must be exactly 10 digits.');
    } else {
      setPhoneError('');
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (fullName.trim() && !/^[A-Za-z\s]+$/.test(fullName)) {
      setFullNameError('Full name can only contain letters and spaces.');
      setSubmitting(false);
      return;
    }

    if (phone.trim().length !== 10) {
      setPhoneError('Wrong format');
      setSubmitting(false);
      return;
    }

    setSubmitting(true);
    try {
      if (editingId) {
        const payload: Record<string, unknown> = {
          full_name: fullName,
          phone,
          role,
          is_active: isActive,
          department,
        };
        if (password.trim()) payload.password = password;
        await api.patch(`/users/admin/users/${editingId}/`, payload);
        toast.success('User updated ✓');
      } else {
        if (!email.trim() || !password.trim()) {
          toast.warning('Email and password are required.');
          setSubmitting(false);
          return;
        }
        await api.post('/users/admin/users/', {
          email,
          full_name: fullName,
          phone,
          role,
          password,
          department,
        });
        toast.success('User created ✓');
      }
      setIsModalOpen(false);
      await loadUsers();
    } catch (err: any) {
      const data = err?.data ?? err;
      let msg = '';

      if (data && typeof data === 'object') {
        if (data.email) {
          const emailMsg = Array.isArray(data.email) ? data.email[0] : data.email;
          if (typeof emailMsg === 'string' && emailMsg.trim()) {
            msg = emailMsg.toLowerCase().includes('already exists')
              ? 'A user with this email address already exists.'
              : `Email: ${emailMsg}`;
          }
        } else if (data.detail && typeof data.detail === 'string' && data.detail.trim()) {
          msg = data.detail;
        } else if (data.message && typeof data.message === 'string' && data.message.trim() && data.message !== 'Request failed') {
          msg = data.message;
        } else {
          for (const [key, val] of Object.entries(data)) {
            if (key === 'status' || key === 'status_code') continue;
            const first = Array.isArray(val) ? val[0] : val;
            if (typeof first === 'string' && first.trim()) {
              if (key === 'non_field_errors') {
                msg = first;
              } else {
                const fieldName = key.replace(/_/g, ' ');
                const formattedField = fieldName.charAt(0).toUpperCase() + fieldName.slice(1);
                msg = `${formattedField}: ${first}`;
              }
              break;
            }
          }
        }
      }

      if (!msg && err instanceof Error && err.message && err.message !== 'Request failed') {
        msg = err.message;
      }

      toast.error(msg || 'A user with this email address already exists.');
    } finally {
      setSubmitting(false);
    }
  };

  const handleDelete = (u: AdminUser) => {
    if (u.id === me?.id) { toast.error('You cannot delete your own account.'); return; }
    showConfirmDelete(`Delete ${u.email}? This also removes them from the auth service.`, async () => {
      try {
        await api.delete(`/users/admin/users/${u.id}/`);
        toast.success('User deleted ✓');
        await loadUsers();
      } catch (err) {
        toast.error(err instanceof Error ? err.message : 'Delete failed');
      }
    });
  };

  const handleToggleLock = async (u: AdminUser) => {
    if (u.id === me?.id) { toast.error('You cannot lock or unlock your own account.'); return; }
    const lock = !u.is_locked;
    try {
      await api.post(`/users/admin/users/${u.id}/lock/`, { locked: lock });
      toast.success(lock ? `${u.email} locked` : `${u.email} unlocked`);
      await loadUsers();
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Could not update lock status');
    }
  };

  const openPerms = async (u: AdminUser) => {
    setPermUser(u);
    try {
      if (catalog.length === 0) {
        const cat = await api.get('/users/admin/permissions/') as any;
        setCatalog(cat.data ?? []);
      }
      const res = await api.get(`/users/admin/users/${u.id}/permissions/`) as any;
      setExtraPerms(new Set(res.data.extra_permissions ?? []));
      setEffectivePerms(res.data.effective_permissions ?? []);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to load permissions');
      setPermUser(null);
    }
  };

  const toggleExtra = (key: string) => {
    setExtraPerms((prev) => {
      const next = new Set(prev);
      if (next.has(key)) next.delete(key); else next.add(key);
      return next;
    });
  };

  const savePerms = async () => {
    if (!permUser) return;
    setPermSaving(true);
    try {
      const res = await api.put(`/users/admin/users/${permUser.id}/permissions/`, {
        permissions: Array.from(extraPerms),
      }) as any;
      setEffectivePerms(res.data.effective_permissions ?? []);
      toast.success(`Permissions updated for ${permUser.email} ✓`);
      setPermUser(null);
      await loadUsers();
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to save permissions');
    } finally {
      setPermSaving(false);
    }
  };

  if (loading) return <PageLoader />;

  if (me && !canView) {
    return (
      <main className="flex-1 flex items-center justify-center p-8">
        <div className="max-w-md w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none p-8 text-center shadow-xl space-y-4">
          <h3 className="text-xl font-bold">Permission required</h3>
          <p className="text-sm text-slate-500 dark:text-slate-400">You need the <code className="px-1.5 py-0.5 rounded-none bg-slate-100 dark:bg-slate-800 text-rose-600 dark:text-rose-400 font-mono text-xs">users.view_user</code> permission to access user management.</p>
          <button onClick={() => router.push('/dashboard')} className="w-full bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold py-3 rounded-none transition cursor-pointer">Go to Dashboard</button>
        </div>
      </main>
    );
  }

  // Permissions grouped by app for the modal
  const grouped = catalog.reduce<Record<string, PermissionItem[]>>((acc, p) => {
    (acc[p.app_label] ||= []).push(p);
    return acc;
  }, {});

  const filteredGrouped = Object.keys(grouped).reduce<Record<string, PermissionItem[]>>((acc, app) => {
    const matchedItems = grouped[app].filter(p =>
      p.name.toLowerCase().includes(permSearch.toLowerCase()) ||
      p.key.toLowerCase().includes(permSearch.toLowerCase()) ||
      app.toLowerCase().includes(permSearch.toLowerCase())
    );
    if (matchedItems.length > 0) {
      acc[app] = matchedItems;
    }
    return acc;
  }, {});

  const handleExport = () => {
    const headers = [
      'Employee ID',
      'Full Name',
      'Email',
      'Mobile Number',
      'Role',
      'Department',
      'Status',
      'Created Date',
      'Last Login'
    ];
    const rows = users.map(u => [
      u.employee_id || '—',
      u.full_name || '—',
      u.email,
      u.phone || '—',
      u.role,
      u.department || '—',
      u.is_active ? 'Active' : 'Inactive',
      u.date_joined ? formatDate(u.date_joined) : '—',
      u.last_login ? formatDateTime(u.last_login) : '—'
    ]);
    exportToCsv('Users_List.csv', headers, rows);
  };

  return (
    <>
      <main className="flex-1 p-8 overflow-y-auto w-full space-y-6 max-w-7xl mx-auto">
        <BackToDashboard />
        <div className="flex flex-wrap justify-between items-center gap-3">
          <p className="text-sm text-slate-500 dark:text-slate-400">Create accounts, assign roles, and grant extra per-user permissions.</p>
          <div className="flex items-center gap-2">
            <button
              type="button"
              onClick={handleExport}
              className="bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-semibold px-5 py-2.5 rounded-none shadow-lg hover:shadow-emerald-500/20 transition flex items-center gap-2 cursor-pointer"
            >
              <i className="fa-solid fa-file-excel text-xs"></i> Export
            </button>
            {canAdd && (
              <button onClick={openCreate} className="bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold px-5 py-2.5 rounded-none shadow-lg hover:shadow-indigo-500/20 transition flex items-center gap-2 cursor-pointer"><i className="fa-solid fa-plus text-xs"></i> Add User</button>
            )}
          </div>
        </div>

        <DataTable
          columns={columns}
          data={users}
          loading={loading}
          pageCount={Math.max(1, Math.ceil(total / pagination.pageSize))}
          controlledPagination={pagination}
          onPaginationChange={setPagination}
          searchPlaceholder="Search by email or name..."
          controlledGlobalFilter={search}
          onGlobalFilterChange={setSearch}
          emptyStateTitle="No Users Found"
          emptyStateDescription="Try adjusting your search terms or filters to find users."
          renderAdditionalActions={() => (
            <div className="flex items-center gap-2 flex-wrap">
              <SearchableSelect
                value={roleFilter}
                onChange={setRoleFilter}
                className="w-48"
                placeholder="All roles"
                isClearable={true}
                options={roleNames.filter((r) => r !== 'ADMIN').map((r) => ({ value: r, label: r }))}
              />
              <SearchableSelect
                value={statusFilter}
                onChange={setStatusFilter}
                className="w-48"
                placeholder="All status"
                isClearable={true}
                options={[
                  { value: 'true', label: 'Active' },
                  { value: 'false', label: 'Inactive' }
                ]}
              />
            </div>
          )}
        />
      </main>

      {/* Create / Edit modal */}
      {isModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="fixed inset-0 bg-slate-950/40 dark:bg-slate-950/80 backdrop-blur-sm" onClick={() => { setIsModalOpen(false); setFullNameError(''); setPhoneError(''); }}></div>
          <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 w-full max-w-lg rounded-none p-6 relative z-10 shadow-2xl text-slate-800 dark:text-slate-100">
            <h3 className="text-xl font-bold mb-4 text-slate-900 dark:text-white">{editingId ? 'Edit User' : 'Create User'}</h3>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className={labelCls}>Email *</label>
                <input value={email} type="email" disabled={!!editingId} onChange={(e) => setEmail(e.target.value)} placeholder="user@company.com" className={`${inputCls} disabled:opacity-60`} required />
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className={labelCls}>Full Name *</label>
                  <input
                    value={fullName}
                    onChange={(e) => handleFullNameChange(e.target.value)}
                    className={`${inputCls} ${fullNameError ? 'border-rose-500 focus:border-rose-500' : ''}`}
                    placeholder="John Doe"
                    required
                  />
                  {fullNameError ? <p className="mt-1 text-xs text-rose-600 dark:text-rose-400">{fullNameError}</p> : null}
                </div>
                <div>
                  <label className={labelCls}>Phone *</label>
                  <input
                    value={phone}
                    onChange={(e) => handlePhoneChange(e.target.value)}
                    className={`${inputCls} ${phoneError ? 'border-rose-500 focus:border-rose-500' : ''}`}
                    placeholder="9876543210"
                    inputMode="numeric"
                    maxLength={10}
                    required
                  />
                  {phoneError ? <p className="mt-1 text-xs text-rose-600 dark:text-rose-400">{phoneError}</p> : null}
                </div>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {/* <div>
                  <label className={labelCls}>Employee ID</label>
                  <input
                    value={editingId ? (employeeId || '—') : 'Auto-generated on creation'}
                    readOnly
                    disabled
                    title="Employee IDs are generated automatically by the system and cannot be edited."
                    className={`${inputCls} cursor-not-allowed opacity-70 bg-slate-100 dark:bg-slate-800`}
                  />
                  {!editingId && (
                    <p className="mt-1 text-xs text-slate-400">Assigned automatically (e.g. EMP-0001) when the user is created.</p>
                  )}
              </div> */}
                {/* <div>
                  <label className={labelCls}>Department *</label>
                  <input value={department} onChange={(e) => setDepartment(e.target.value)} placeholder="e.g. HR, Sales, IT" className={inputCls} required />
                </div> */}
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className={labelCls}>Role *</label>
                  <SearchableSelect
                    value={role}
                    onChange={(val) => setRole(val as Role)}
                    isClearable={false}
                    options={roleOptions.map((r) => ({ value: r, label: r }))}
                  />
                </div>
                <div>
                  <label className={labelCls}>{editingId ? 'New Password (optional)' : 'Password'}</label>
                  <input value={password} type="password" onChange={(e) => setPassword(e.target.value)} placeholder={editingId ? 'Leave blank to keep' : '••••••••'} className={inputCls} required />
                </div>
              </div>
              {editingId && (
                <label className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-300">
                  <input type="checkbox" checked={isActive} onChange={(e) => setIsActive(e.target.checked)} className="accent-indigo-600 w-4 h-4" />
                  Account active
                </label>
              )}

              <div className="flex justify-end gap-3 pt-4 border-t border-slate-100 dark:border-slate-850">
                <button type="button" onClick={() => { setIsModalOpen(false); setFullNameError(''); setPhoneError(''); }} className="px-4 py-2 text-sm text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-white transition cursor-pointer">Cancel</button>
                <button type="submit" disabled={submitting} className="bg-indigo-600 hover:bg-indigo-500 disabled:bg-indigo-400 text-white text-sm font-semibold px-5 py-2.5 rounded-none shadow-lg transition cursor-pointer">{submitting ? 'Saving...' : editingId ? 'Save Changes' : 'Create'}</button>
              </div>
            </form>
          </div >
        </div >
      )
      }

      {/* Per-user permissions modal */}
      {
        permUser && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
            <div className="fixed inset-0 bg-slate-950/40 dark:bg-slate-950/80 backdrop-blur-sm" onClick={() => { setPermUser(null); setPermSearch(''); }}></div>
            <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 w-full max-w-2xl rounded-none p-6 relative z-10 shadow-2xl text-slate-850 dark:text-slate-100 max-h-[85vh] flex flex-col">
              <h3 className="text-xl font-bold text-slate-900 dark:text-white">Extra Permissions</h3>
              <p className="text-sm text-slate-500 dark:text-slate-400 mt-1 mb-4">
                <span className="font-semibold">{permUser.email}</span> — role <span className={`text-[10px] tracking-widest font-black uppercase px-1.5 py-0.5 rounded-none border ${ROLE_BADGE[permUser.role] || ROLE_BADGE.CANDIDATE}`}>{permUser.role}</span>. Checked = granted on top of the role.
              </p>

              {/* Small professional search bar */}
              <div className="relative mb-4">
                <span className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-slate-400 dark:text-slate-500">
                  <i className="fa-solid fa-magnifying-glass text-xs"></i>
                </span>
                <input
                  type="text"
                  placeholder="Search permissions or apps..."
                  value={permSearch}
                  onChange={(e) => setPermSearch(e.target.value)}
                  className="w-full bg-slate-50 dark:bg-slate-955 border border-slate-200 dark:border-slate-800 rounded-none pl-9 pr-4 py-2 text-xs focus:outline-none focus:ring-2 focus:ring-indigo-500/20 text-slate-800 dark:text-white transition-all duration-200"
                />
                {permSearch && (
                  <button
                    type="button"
                    onClick={() => setPermSearch('')}
                    className="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 cursor-pointer"
                  >
                    <i className="fa-solid fa-xmark text-xs"></i>
                  </button>
                )}
              </div>

              <div className="flex-1 overflow-y-auto space-y-5 pr-1 custom-scrollbar">
                {Object.keys(filteredGrouped).length === 0 ? (
                  <div className="text-center text-slate-405 dark:text-slate-500 py-8 font-semibold text-xs">
                    No permissions match your search query.
                  </div>
                ) : (
                  Object.keys(filteredGrouped).sort().map((app) => (
                    <div key={app}>
                      <div className="text-xs font-black uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-2">{app}</div>
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-1.5">
                        {filteredGrouped[app].map((p) => {
                          const fromRole = effectivePerms.includes(p.key) && !extraPerms.has(p.key);
                          return (
                            <label key={p.key} className={`flex items-start gap-2 text-sm px-2 py-1.5 rounded-none ${fromRole ? 'opacity-60' : 'hover:bg-slate-50 dark:hover:bg-slate-800/40 cursor-pointer'}`} title={fromRole ? 'Granted by the role' : p.key}>
                              <input type="checkbox" disabled={fromRole} checked={extraPerms.has(p.key) || fromRole} onChange={() => toggleExtra(p.key)} className="accent-indigo-600 w-4 h-4 mt-0.5" />
                              <span className="leading-tight">
                                <span className="text-slate-700 dark:text-slate-200">{p.name}</span>
                                {fromRole && <span className="ml-1 text-[10px] text-indigo-500">(role)</span>}
                              </span>
                            </label>
                          );
                        })}
                      </div>
                    </div>
                  ))
                )}
              </div>
              <div className="flex justify-end gap-3 pt-4 mt-2 border-t border-slate-100 dark:border-slate-800">
                <button type="button" onClick={() => { setPermUser(null); setPermSearch(''); }} className="px-4 py-2 text-sm text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-white transition cursor-pointer">Cancel</button>
                <button onClick={savePerms} disabled={permSaving} className="bg-indigo-600 hover:bg-indigo-500 disabled:bg-indigo-400 text-white text-sm font-semibold px-5 py-2.5 rounded-none shadow-lg transition cursor-pointer">{permSaving ? 'Saving...' : 'Save Permissions'}</button>
              </div>
            </div>
          </div>
        )
      }

      {/* Group assignment modal */}
      {
        groupsUser && (
          <GroupAssignmentModal
            isOpen={isGroupsModalOpen}
            userId={groupsUser.id}
            user={groupsUser}
            onClose={() => {
              setIsGroupsModalOpen(false);
              setGroupsUser(null);
            }}
            onSuccess={() => {
              loadUsers();
            }}
          />
        )
      }
    </>
  );
}