'use client';

import { useEffect, useState, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import { api } from '@/lib/api';
import type { RoleInfo, PermissionItem } from '@/types';
import { useAuth } from '@/components/auth-context';
import { hasPermission } from '@/lib/auth';
import { toast } from 'react-toastify';
import { showConfirmDelete } from '@/lib/confirm';
import RoleUsersModal from '@/components/RoleUsersModal';
import { DataTable } from '@/components/data-table/DataTable';
import { DataTableActions } from '@/components/data-table/DataTableActions';
import BackToDashboard from '@/components/BackToDashboard';
import { PageLoader } from '@/components/DotLoader';

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',
  HIRING_MANAGER: 'text-sky-600 dark:text-sky-400 bg-sky-50 dark:bg-sky-950/40 border-sky-200 dark:border-sky-900/50',
  PROJECT_MANAGER: 'text-violet-600 dark:text-violet-400 bg-violet-50 dark:bg-violet-950/40 border-violet-200 dark:border-violet-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',
};

export default function AdminRolesPage() {
  const router = useRouter();
  const { user: me } = useAuth();
  const [roles, setRoles] = useState<RoleInfo[]>([]);
  const [catalog, setCatalog] = useState<PermissionItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [viewMode, setViewMode] = useState<'card' | 'table'>('table');

  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: 'role',
      header: 'Role Name',
      cell: ({ row }: any) => {
        const r = row.original;
        return (
          <span className="inline-block min-w-[180px] whitespace-nowrap">
            <span className={`inline-flex items-center gap-1.5 text-xs tracking-widest font-black uppercase px-2.5 py-1 rounded-none border whitespace-nowrap ${ROLE_BADGE[r.role] || 'text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-slate-800 border-slate-200 dark:border-slate-700'}`}>
              {r.role}
              {!r.is_seed && <span className="opacity-60 normal-case tracking-normal font-bold">• custom</span>}
            </span>
          </span>
        );
      },
    },
    {
      accessorKey: 'user_count',
      header: 'Active Users',
      cell: ({ row }: any) => {
        const r = row.original;
        return (
          <button
            onClick={() => {
              setSelectedRole(r);
              setIsRoleUsersModalOpen(true);
            }}
            className="text-xs text-[#405189] dark:text-indigo-400 hover:text-[#364574] dark:hover:text-indigo-300 font-extrabold cursor-pointer transition flex items-center gap-1.5"
          >
            <i className="fa-solid fa-users text-slate-400"></i> {r.user_count} user{r.user_count === 1 ? '' : 's'}
          </button>
        );
      },
    },
    {
      accessorKey: 'permission_count',
      header: 'Baseline Permissions Count',
      cell: ({ row }: any) => {
        const r = row.original;
        return (
          <span className="text-xs font-bold text-slate-650 dark:text-slate-400">
            {r.is_admin ? 'Full access' : `${r.permission_count} permission${r.permission_count === 1 ? '' : 's'}`}
          </span>
        );
      },
    },
    {
      accessorKey: 'permissions',
      header: 'Baseline Permissions (Sample)',
      cell: ({ row }: any) => {
        const r = row.original;
        if (r.is_admin) {
          return <span className="text-xs italic text-slate-400 font-semibold">All permissions (not editable)</span>;
        }
        if (r.permissions.length === 0) {
          return <span className="text-xs text-slate-400">No permissions</span>;
        }
        return (
          <div className="flex flex-wrap gap-1.5 max-w-sm">
            {r.permissions.slice(0, 5).map((p: string) => (
              <span key={p} className="text-[10px] font-mono bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 px-1.5 py-0.5 rounded-none">
                {p}
              </span>
            ))}
            {r.permissions.length > 5 && (
              <span className="text-[10px] text-slate-400 font-extrabold">
                +{r.permissions.length - 5} more
              </span>
            )}
          </div>
        );
      },
    },
    {
      id: 'actions',
      header: () => <div className="text-right">Actions</div>,
      cell: ({ row }: any) => {
        const r = row.original;
        if (r.is_admin) return <span className="text-xs text-slate-400 italic">None</span>;
        if (!canChange && !canDelete && !canAdd) return <span className="text-xs text-slate-400 italic">None</span>;
        return (
          <DataTableActions
            onEdit={canChange ? () => openEdit(r) : undefined}
            viewLabel="Edit Permissions"
            onDelete={r.is_seed || !canDelete ? undefined : () => deleteRole(r)}
            customActions={
              canAdd ? (
                <button
                  onClick={(e) => { e.stopPropagation(); cloneRole(r); }}
                  title={`Copy ${r.role}`}
                  className="bg-indigo-50 hover:bg-indigo-100 text-indigo-600 dark:bg-indigo-950/40 dark:hover:bg-indigo-900/50 dark:text-indigo-400 text-xs font-extrabold px-3 py-2 rounded-none transition cursor-pointer flex items-center justify-center"
                >
                  <i className="fa-solid fa-copy"></i>
                </button>
              ) : undefined
            }
          />
        );
      },
    },
  ];

  // Role Users Modal
  const [isRoleUsersModalOpen, setIsRoleUsersModalOpen] = useState(false);
  const [selectedRole, setSelectedRole] = useState<RoleInfo | null>(null);

  // Editing a role
  const [editRole, setEditRole] = useState<RoleInfo | null>(null);
  const [selected, setSelected] = useState<Set<string>>(new Set());
  const [saving, setSaving] = useState(false);
  const [permSearch, setPermSearch] = useState('');

  // Creating a role
  const [createOpen, setCreateOpen] = useState(false);
  const [newName, setNewName] = useState('');
  const [newSelected, setNewSelected] = useState<Set<string>>(new Set());
  const [creating, setCreating] = useState(false);

  const isAdmin = me?.role === 'ADMIN';
  // Access is permission-driven, same as every other admin module: an ADMIN
  // always has full access, and a non-admin gets access once their group is
  // granted the matching Django auth.Group permission. The ADMIN role itself
  // stays immutable regardless (enforced on the backend).
  const canView = isAdmin || hasPermission(me, 'auth.view_group');
  const canAdd = isAdmin || hasPermission(me, 'auth.add_group');
  const canChange = isAdmin || hasPermission(me, 'auth.change_group');
  const canDelete = isAdmin || hasPermission(me, 'auth.delete_group');

  const loadRoles = useCallback(async () => {
    const res = await api.get('/users/admin/roles/') as any;
    setRoles(res.data ?? []);
  }, []);

  useEffect(() => {
    if (!me) return;
    (async () => {
      setLoading(true);
      try {
        if (canView) {
          await loadRoles();
          const cat = await api.get('/users/admin/permissions/') as any;
          setCatalog(cat.data ?? []);
        }
      } finally {
        setLoading(false);
      }
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [me]);

  const openEdit = (r: RoleInfo) => {
    setPermSearch('');
    setEditRole(r);
    setSelected(new Set(r.permissions));
  };

  const toggle = (key: string) => {
    setSelected((prev) => {
      const next = new Set(prev);
      if (next.has(key)) next.delete(key); else next.add(key);
      return next;
    });
  };
const toggleGroup = (app: string) => {
  const groupPermissions = grouped[app].map((p) => p.key);

  setSelected((prev) => {
    const next = new Set(prev);

    const allSelected = groupPermissions.every((key) => next.has(key));

    if (allSelected) {
      groupPermissions.forEach((key) => next.delete(key));
    } else {
      groupPermissions.forEach((key) => next.add(key));
    }

    return next;
  });
};
  const save = async () => {
    if (!editRole) return;
    setSaving(true);
    try {
      await api.put(`/users/admin/roles/${editRole.role}/permissions/`, {
        permissions: Array.from(selected),
      });
      toast.success(`Permissions for ${editRole.role} saved ✓`);
      setEditRole(null);
      await loadRoles();
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to save');
    } finally {
      setSaving(false);
    }
  };

  const resetRole = (r: RoleInfo) => {
    showConfirmDelete(`Reset ${r.role} to its default permissions?`, async () => {
      try {
        await api.post(`/users/admin/roles/${r.role}/reset/`);
        toast.success(`${r.role} reset to defaults ✓`);
        await loadRoles();
      } catch (err) {
        toast.error(err instanceof Error ? err.message : 'Reset failed');
      }
    });
  };

  const openCreate = () => {
    setPermSearch('');
    setNewName(''); setNewSelected(new Set());
    setCreateOpen(true);
  };

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

  const createRole = async () => {
    if (!newName.trim()) { toast.warning('Role name is required.'); return; }
    setCreating(true);
    try {
      const res = await api.post('/users/admin/roles/', {
        name: newName, permissions: Array.from(newSelected),
      }) as any;
      toast.success(`Role ${res.data.role} created ✓`);
      setCreateOpen(false);
      await loadRoles();
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to create role');
    } finally {
      setCreating(false);
    }
  };

  const cloneRole = (r: RoleInfo) => {
    showConfirmDelete(`Are you sure you want to clone the ${r.role} role?`, async () => {
      try {
        const res = (await api.post(`/users/admin/roles/${encodeURIComponent(r.role)}/clone/`, {})) as any;
        toast.success(`Role cloned successfully — created ${res?.data?.role ?? 'copy'} ✓`);
        await loadRoles();
      } catch (err) {
        toast.error(err instanceof Error ? err.message : 'Clone failed');
      }
    });
  };

  const deleteRole = (r: RoleInfo) => {
    showConfirmDelete(`Delete the ${r.role} role? This cannot be undone.`, async () => {
      try {
        await api.delete(`/users/admin/roles/${r.role}/`);
        toast.success(`Role ${r.role} deleted ✓`);
        await loadRoles();
      } catch (err) {
        toast.error(err instanceof Error ? err.message : 'Delete failed');
      }
    });
  };

  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-vz-border dark:border-slate-800 rounded-none p-8 text-center shadow-xl space-y-4">
          <h3 className="text-xl font-bold">Access restricted</h3>
          <p className="text-sm text-slate-500 dark:text-slate-400">You don&apos;t have permission to view Groups &amp; Permissions. Ask an admin to grant your group the &quot;view group&quot; permission.</p>
          <button onClick={() => router.push('/dashboard')} className="w-full bg-[#405189] hover:bg-[#364574] text-white text-sm font-semibold py-3 rounded-none transition cursor-pointer">Go to Dashboard</button>
        </div>
      </main>
    );
  }

  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 displayGrouped = permSearch.trim() === '' ? grouped : filteredGrouped;

  return (
    <>
        <main className="flex-1 p-4 sm: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 max-w-xl">Each role grants a baseline permission set to every user who holds it. Admins always have full access. You can create custom roles.</p>
            <div className="flex items-center gap-3 shrink-0">
              {viewMode === 'card' && (
                <button
                  onClick={() => setViewMode('table')}
                  className="bg-slate-105 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-750 dark:text-slate-200 text-xs font-bold px-4 py-2.5 rounded-none shadow transition flex items-center gap-2 cursor-pointer border border-slate-200/40 dark:border-slate-850"
                >
                  <i className="fa-solid fa-table"></i> Table View
                </button>
              )}
              {canAdd && (
                <button onClick={openCreate} className="bg-[#405189] hover:bg-[#364574] text-white text-sm font-semibold px-5 py-2.5 rounded-none shadow-lg transition flex items-center gap-2 cursor-pointer shrink-0"><i className="fa-solid fa-plus text-xs"></i> Create Role</button>
              )}
            </div>
          </div>

          {viewMode === 'table' ? (
            <DataTable
              columns={columns}
              data={roles}
              loading={loading}
              searchPlaceholder="Search roles..."
              emptyStateTitle="No Roles Defined"
              emptyStateDescription="Create a custom role to define unique baseline permissions for your team."
              renderAdditionalActions={() => (
                <button
                  onClick={() => setViewMode('card')}
                  className="bg-slate-50 hover:bg-slate-100 dark:bg-slate-950 dark:hover:bg-slate-800 border border-slate-200 dark:border-slate-800 rounded-none px-4 py-2.5 text-xs font-bold transition text-slate-700 dark:text-slate-300 flex items-center gap-1.5 cursor-pointer"
                >
                  <i className="fa-solid fa-grip"></i> Card View
                </button>
              )}
            />
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {roles.map((r) => (
                <div key={r.role} className="bg-white dark:bg-slate-900 border border-vz-border dark:border-slate-800 rounded-none p-6 flex flex-col">
                  <div className="flex items-center justify-between mb-3">
                    <span className={`inline-flex items-center gap-1.5 text-xs tracking-widest font-black uppercase px-2.5 py-1 rounded-none border whitespace-nowrap ${ROLE_BADGE[r.role] || 'text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-slate-800 border-slate-200 dark:border-slate-700'}`}>{r.role}{!r.is_seed && <span className="opacity-60 normal-case tracking-normal font-bold">• custom</span>}</span>
                    <button onClick={() => { setSelectedRole(r); setIsRoleUsersModalOpen(true); }} className="text-xs text-[#405189] dark:text-indigo-400 hover:text-[#364574] dark:hover:text-indigo-300 font-semibold cursor-pointer transition flex items-center gap-1.5">
                      <i className="fa-solid fa-users"></i> {r.user_count} user{r.user_count === 1 ? '' : 's'}
                    </button>
                  </div>
                  <p className="text-sm text-slate-500 dark:text-slate-400 mb-4">
                    {r.is_admin ? 'Full access to everything.' : `${r.permission_count} permission${r.permission_count === 1 ? '' : 's'} granted.`}
                  </p>
                  <div className="flex-1 mb-4">
                    {r.is_admin ? (
                      <span className="text-xs italic text-slate-400">All permissions (not editable)</span>
                    ) : (
                      <div className="flex flex-wrap gap-1.5">
                        {r.permissions.length === 0 && <span className="text-xs text-slate-400">No permissions.</span>}
                        {r.permissions.slice(0, 8).map((p) => (
                          <span key={p} className="text-[11px] font-mono bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 px-1.5 py-0.5 rounded-none">{p}</span>
                        ))}
                        {r.permissions.length > 8 && <span className="text-[11px] text-slate-400">+{r.permissions.length - 8} more</span>}
                      </div>
                    )}
                  </div>
                  {!r.is_admin && (canChange || canAdd || canDelete) && (
                    <div className="flex gap-2 border-t border-slate-100 dark:border-slate-850 pt-4 mt-auto">
                      {canChange && (
                        <button onClick={() => openEdit(r)} className="flex-1 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 py-2 rounded-none transition cursor-pointer flex items-center justify-center gap-1.5"><i className="fa-solid fa-pen-to-square"></i> Edit Permissions</button>
                      )}
                      {canAdd && (
                        <button onClick={() => cloneRole(r)} title={`Copy ${r.role}`} className="bg-indigo-50 hover:bg-indigo-100 dark:bg-indigo-950/30 dark:hover:bg-indigo-900/50 border border-indigo-200 dark:border-indigo-900/40 text-indigo-600 dark:text-indigo-400 text-xs font-bold px-3.5 py-2 rounded-none transition cursor-pointer flex items-center justify-center"><i className="fa-solid fa-copy"></i></button>
                      )}
                      {!r.is_seed && canDelete && (
                        <button onClick={() => deleteRole(r)} title="Delete role" className="bg-rose-50 hover:bg-rose-100/70 dark:bg-rose-950/30 dark:hover:bg-rose-900/50 border border-rose-200 dark:border-rose-900/40 text-xs font-bold px-3.5 py-2 rounded-none transition cursor-pointer flex items-center justify-center"><i className="fa-solid fa-trash"></i></button>
                      )}
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}
        </main>

      {editRole && (
        <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={() => setEditRole(null)}></div>
          <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-850 w-full max-w-5xl rounded-none p-6 relative z-10 shadow-2xl text-slate-850 dark:text-slate-100 max-h-[90vh] flex flex-col">
            <h3 className="text-xl font-bold text-slate-900 dark:text-white">Edit Permissions — <span className={`text-sm tracking-widest font-black uppercase px-2 py-0.5 rounded-none border ${ROLE_BADGE[editRole.role] || ROLE_BADGE.CANDIDATE}`}>{editRole.role}</span></h3>
            <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">Applies to all {editRole.user_count} user{editRole.user_count === 1 ? '' : 's'} with this role.</p>

            {/* Search bar (same as Create Role modal) */}
            <div className="relative mt-3">
              <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-950 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-[#405189]/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 items-center gap-2 mt-3 mb-3">
              <button
                type="button"
                onClick={() => setSelected(new Set())}
                className="px-3 py-1.5 text-xs font-bold rounded-none border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 transition cursor-pointer"
              >
                <i className="fa-solid fa-xmark mr-1.5" />
                Clear All
              </button>
              <span className="ml-auto text-xs text-slate-400 dark:text-slate-500">
                {selected.size} / {catalog.length} selected
              </span>
            </div>
            <div className="flex-1 overflow-y-auto space-y-5 pr-1 custom-scrollbar">
              {Object.keys(displayGrouped).length === 0 && (
                <div className="text-center text-slate-400 dark:text-slate-500 py-8 font-semibold text-xs">
                  No permissions match your search query.
                </div>
              )}
              {Object.keys(displayGrouped).sort().map((app) => (
                <div key={app}>
                  <div className="mb-2">
                    <label className="flex items-center gap-2 cursor-pointer mb-2">
                      <input
                        type="checkbox"
                        checked={displayGrouped[app].every((p) => selected.has(p.key))}
                        onChange={() => toggleGroup(app)}
                        className="accent-[#405189]"
                      />
                      <span className="text-xs font-black uppercase tracking-wider text-slate-450 dark:text-slate-500">
                        {app}
                      </span>
                    </label>
                  </div>
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-1.5">
                    {displayGrouped[app].map((p) => (
                      <label key={p.key} className="flex items-start gap-2 text-sm px-2 py-1.5 rounded-none hover:bg-slate-50 dark:hover:bg-slate-800/40 cursor-pointer" title={p.key}>
                        <input type="checkbox" checked={selected.has(p.key)} onChange={() => toggle(p.key)} className="accent-[#405189] w-4 h-4 mt-0.5" />
                        <span className="leading-tight text-slate-700 dark:text-slate-200">{p.name}</span>
                      </label>
                    ))}
                  </div>
                </div>
              ))}
            </div>
            <div className="flex justify-end gap-3 pt-4 mt-2 border-t border-slate-100 dark:border-slate-850">
              <button type="button" onClick={() => { setEditRole(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={save} disabled={saving} className="bg-[#405189] hover:bg-[#364574] disabled:bg-indigo-400 text-white text-sm font-semibold px-5 py-2.5 rounded-none shadow-lg transition cursor-pointer">{saving ? 'Saving...' : 'Save Permissions'}</button>
            </div>
          </div>
        </div>
      )}

      {/* Create role modal */}
      {createOpen && (
        <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={() => { setCreateOpen(false); setPermSearch(''); }}></div>
          <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-850 w-full max-w-5xl rounded-none p-6 relative z-10 shadow-2xl text-slate-855 dark:text-slate-100 max-h-[90vh] flex flex-col">
            <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-1">Create Role</h3>
            <p className="text-sm text-slate-500 dark:text-slate-400 mb-4">Name is saved in UPPER_SNAKE_CASE (e.g. “manager” → MANAGER).</p>
            <div className="mb-4">
              <label className="block text-xs font-bold uppercase tracking-wider text-slate-550 dark:text-slate-400 mb-1">Role Name</label>
              <input value={newName} onChange={(e) => setNewName(e.target.value)} placeholder="e.g. Manager" className="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 focus:border-[#405189] rounded-none px-4 py-2.5 text-sm focus:outline-none transition text-slate-900 dark:text-white" />
            </div>
            <div className="text-xs font-bold uppercase tracking-wider text-slate-450 dark:text-slate-500 mb-2">Permissions</div>

            {/* 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-[#405189]/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="flex items-center justify-between mb-2">
                      <div className="text-xs font-black uppercase tracking-wider text-slate-450 dark:text-slate-500">
                        {app}
                      </div>
                      <label className="flex items-center gap-2 text-xs cursor-pointer">
                        <input
                          type="checkbox"
                          checked={filteredGrouped[app].every((p) => newSelected.has(p.key))}
                          onChange={() => {
                            const groupKeys = filteredGrouped[app].map((p) => p.key);
                            const allSelected = groupKeys.every((k) => newSelected.has(k));
                            setNewSelected((prev) => {
                              const next = new Set(prev);
                              groupKeys.forEach((k) => {
                                if (allSelected) next.delete(k);
                                else next.add(k);
                              });
                              return next;
                            });
                          }}
                          className="accent-[#405189]"
                        />
                      </label>
                    </div>
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-1.5">
                      {filteredGrouped[app].map((p) => (
                        <label key={p.key} className="flex items-start gap-2 text-sm px-2 py-1.5 rounded-none hover:bg-slate-50 dark:hover:bg-slate-800/40 cursor-pointer" title={p.key}>
                          <input type="checkbox" checked={newSelected.has(p.key)} onChange={() => toggleNew(p.key)} className="accent-[#405189] w-4 h-4 mt-0.5" />
                          <span className="leading-tight text-slate-700 dark:text-slate-200">{p.name}</span>
                        </label>
                      ))}
                    </div>
                  </div>
                ))
              )}
            </div>
            <div className="flex justify-end gap-3 pt-4 mt-2 border-t border-slate-100 dark:border-slate-850">
              <button type="button" onClick={() => { setCreateOpen(false); 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={createRole} disabled={creating} className="bg-[#405189] hover:bg-[#364574] disabled:bg-indigo-400 text-white text-sm font-semibold px-5 py-2.5 rounded-none shadow-lg transition cursor-pointer">{creating ? 'Creating...' : 'Create Role'}</button>
            </div>
          </div>
        </div>
      )}

      {/* Role Users Modal */}
      {selectedRole && (
        <RoleUsersModal
          isOpen={isRoleUsersModalOpen}
          roleId={selectedRole.role.toLowerCase()}
          roleName={selectedRole.role}
          onClose={() => {
            setIsRoleUsersModalOpen(false);
            setSelectedRole(null);
          }}
        />
      )}
    </>
  );
}