'use client';

import { useEffect, useState, useCallback } from 'react';
import { useRouter, useParams } from 'next/navigation';
import { api } from '@/lib/api';
import type { AdminUser, PermissionItem, Role } from '@/types';
import { useAuth } from '@/components/auth-context';
import SearchableSelect from '@/components/SearchableSelect';
import { PageLoader } from '@/components/DotLoader';
import { formatDate } 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';

export default function RoleUsersPage() {
  const router = useRouter();
  const params = useParams();
  const roleId = (params.role as string).toUpperCase();

  const { user: me } = useAuth();
  const [users, setUsers] = useState<AdminUser[]>([]);
  const [loading, setLoading] = useState(true);
  const [errorMsg, setErrorMsg] = useState('');
  const [successMsg, setSuccessMsg] = useState('');
  const [searchName, setSearchName] = useState('');
  const [searchEmail, setSearchEmail] = useState('');
  const [statusFilter, setStatusFilter] = useState('');
  const [sortBy, setSortBy] = useState('name');
  const [selectedUserIds, setSelectedUserIds] = useState<Set<number>>(new Set());
  const [openMenuId, setOpenMenuId] = useState<number | null>(null);
  const [exporting, setExporting] = useState(false);

  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 [submitting, setSubmitting] = useState(false);

  const [confirmModal, setConfirmModal] = useState({
    isOpen: false,
    type: 'delete' as 'delete' | 'remove' | 'activate' | 'deactivate',
    title: '',
    message: '',
    onConfirm: async () => { },
  });

  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 loadUsers = useCallback(async () => {
    const params = new URLSearchParams();
    if (searchName.trim()) params.set('search', searchName.trim());
    if (searchEmail.trim()) params.set('search', searchEmail.trim());
    params.set('role', roleId);
    if (statusFilter) params.set('is_active', statusFilter === 'active' ? 'true' : 'false');
    if (sortBy === 'name') params.set('ordering', 'full_name');
    if (sortBy === 'date') params.set('ordering', '-date_joined');
    const qs = params.toString() ? '?' + params.toString() : '';
    const res = await api.get('/users/admin/users/' + qs) as any;
    const filteredUsers = (res.data?.results || []).filter((u: AdminUser) => u.id !== 1);
    setUsers(filteredUsers);
  }, [roleId, searchName, searchEmail, statusFilter, sortBy]);

  useEffect(() => {
    if (!me) return;
    (async () => {
      setLoading(true);
      try {
        const p = me.permissions || [];
        if (me.role === 'ADMIN' || p.includes('users.view_user')) {
          await loadUsers();
        }
      } finally {
        setLoading(false);
      }
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [me]);

  useEffect(() => {
    if (!canView) return;
    const t = setTimeout(() => { loadUsers().catch(() => { }); }, 300);
    return () => clearTimeout(t);
  }, [searchName, searchEmail, statusFilter, sortBy]);

  const toggleSelect = (id: number) => {
    setSelectedUserIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  const toggleSelectAll = () => {
    if (selectedUserIds.size === users.length) setSelectedUserIds(new Set());
    else setSelectedUserIds(new Set(users.map((u) => u.id)));
  };

  const openCreate = () => {
    setEditingId(null);
    setEmail(''); setFullName(''); setPhone(''); setRole(roleId as Role);
    setPassword(''); setIsActive(true);
    setErrorMsg(''); setSuccessMsg('');
    setIsModalOpen(true);
  };

  const openEdit = (u: AdminUser) => {
    setEditingId(u.id);
    setEmail(u.email); setFullName(u.full_name || ''); setPhone(u.phone || '');
    setRole(u.role); setPassword(''); setIsActive(u.is_active);
    setErrorMsg(''); setSuccessMsg('');
    setIsModalOpen(true);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitting(true); setErrorMsg(''); setSuccessMsg('');
    try {
      if (editingId) {
        const payload: Record<string, unknown> = {
          full_name: fullName, phone, role, is_active: isActive,
        };
        if (password.trim()) payload.password = password;
        await api.patch('/users/admin/users/' + editingId + '/', payload);
        setSuccessMsg('User updated ✓');
      } else {
        if (!email.trim() || !password.trim()) {
          setErrorMsg('Email and password are required.');
          setSubmitting(false);
          return;
        }
        await api.post('/users/admin/users/', {
          email, full_name: fullName, phone, role, password,
        });
        setSuccessMsg('User created ✓');
      }
      setIsModalOpen(false);
      await loadUsers();
    } catch (err) {
      setErrorMsg(err instanceof Error ? err.message : 'Operation failed');
    } finally {
      setSubmitting(false);
    }
  };

  const handleDelete = (u: AdminUser) => {
    if (u.id === me?.id) { setErrorMsg('You cannot delete your own account.'); return; }
    setConfirmModal({
      isOpen: true,
      type: 'delete',
      title: 'Delete ' + u.email + '?',
      message: 'This action will soft delete the user.',
      onConfirm: async () => {
        try {
          await api.delete('/users/admin/users/' + u.id + '/');
          setSuccessMsg('User deleted ✓');
          await loadUsers();
        } catch (err) {
          setErrorMsg(err instanceof Error ? err.message : 'Delete failed');
        }
        setConfirmModal({ ...confirmModal, isOpen: false });
      },
    });
  };

  const handleBulkAction = (type: 'delete' | 'remove' | 'activate' | 'deactivate') => {
    let title = '';
    if (type === 'delete') title = 'Delete ' + selectedUserIds.size + ' user(s)?';
    else if (type === 'remove') title = 'Remove ' + selectedUserIds.size + ' user(s) from ' + roleId + '?';
    else if (type === 'activate') title = 'Activate ' + selectedUserIds.size + ' user(s)?';
    else title = 'Deactivate ' + selectedUserIds.size + ' user(s)?';

    const message = type === 'remove' ? 'Users will lose Recruiter permissions.' :
      type === 'delete' ? 'This action will soft delete the selected users.' : '';

    setConfirmModal({
      isOpen: true,
      type,
      title,
      message,
      onConfirm: async () => {
        try {
          if (type === 'activate' || type === 'deactivate') {
            for (const id of selectedUserIds) {
              await api.patch('/users/admin/users/' + id + '/', { is_active: type === 'activate' });
            }
            setSuccessMsg('Users ' + type + 'd ✓');
          } else if (type === 'remove') {
            for (const id of selectedUserIds) {
              await api.patch('/users/admin/users/' + id + '/', { role: 'CANDIDATE' });
            }
            setSuccessMsg('Users removed from role ✓');
          } else {
            for (const id of selectedUserIds) {
              await api.delete('/users/admin/users/' + id + '/');
            }
            setSuccessMsg('Users deleted ✓');
          }
          setSelectedUserIds(new Set());
          await loadUsers();
        } catch (err) {
          setErrorMsg(err instanceof Error ? err.message : 'Operation failed');
        }
        setConfirmModal({ ...confirmModal, isOpen: false });
      },
    });
  };

  const handleRemoveFromRole = (u: AdminUser) => {
    setConfirmModal({
      isOpen: true,
      type: 'remove',
      title: 'Remove ' + u.email + ' from ' + roleId + '?',
      message: 'User will lose this role\'s permissions.',
      onConfirm: async () => {
        try {
          await api.patch('/users/admin/users/' + u.id + '/', { role: 'CANDIDATE' });
          setSuccessMsg('User removed from role ✓');
          await loadUsers();
        } catch (err) {
          setErrorMsg(err instanceof Error ? err.message : 'Failed to remove user');
        }
        setConfirmModal({ ...confirmModal, isOpen: false });
      },
    });
  };

  const handleActivateDeactivate = (u: AdminUser) => {
    const action = u.is_active ? 'Deactivate' : 'Activate';
    setConfirmModal({
      isOpen: true,
      type: u.is_active ? 'deactivate' : 'activate',
      title: action + ' ' + u.email + '?',
      message: '',
      onConfirm: async () => {
        try {
          await api.patch('/users/admin/users/' + u.id + '/', { is_active: !u.is_active });
          setSuccessMsg('User ' + (u.is_active ? 'deactivated' : 'activated') + ' ✓');
          await loadUsers();
        } catch (err) {
          setErrorMsg(err instanceof Error ? err.message : 'Failed to update user');
        }
        setConfirmModal({ ...confirmModal, isOpen: false });
      },
    });
  };

  const handleExport = async () => {
    setExporting(true);
    try {
      const selectedUsers = users.filter(u => selectedUserIds.has(u.id));
      const csvContent = [
        ['ID', 'Full Name', 'Email', 'Phone', 'Status', 'Created Date', 'Last Login'],
        ...selectedUsers.map(u => [
          u.id,
          u.full_name || '',
          u.email,
          u.phone || '',
          u.is_active ? 'Active' : 'Inactive',
          u.date_joined ? formatDate(u.date_joined) : '',
          u.last_login ? formatDate(u.last_login) : ''
        ])
      ].map(row => row.map(cell => '"' + cell + '"').join(',')).join('\n');

      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.setAttribute('href', url);
      link.setAttribute('download', roleId + '-users-' + Date.now() + '.csv');
      link.style.visibility = 'hidden';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      setSuccessMsg('Users exported ✓');
    } catch (err) {
      setErrorMsg('Failed to export users');
    } finally {
      setExporting(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 users.view_user permission to access this page.</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>
    );
  }

  return (
    <>
        <main className="flex-1 p-8 overflow-y-auto w-full space-y-6 max-w-7xl mx-auto">
          <div className="flex flex-wrap justify-between items-start gap-4">
            <div>
              <h2 className="text-2xl font-bold text-slate-800 dark:text-white">{roleId}</h2>
              <p className="text-sm text-slate-500 dark:text-slate-400">
                Total Users: {users.length}
              </p>
              <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">
                Users assigned to the {roleId} role.
              </p>
            </div>
            <div className="flex flex-wrap gap-2">
              {canAdd && (
                <>
                  <button onClick={() => setIsModalOpen(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-sm font-semibold px-4 py-2.5 rounded-none transition cursor-pointer">
                    + Add Existing User
                  </button>
                  <button onClick={openCreate} className="bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold px-4 py-2.5 rounded-none shadow-lg transition cursor-pointer">
                    + Create User
                  </button>
                </>
              )}
              {selectedUserIds.size > 0 && (
                <button onClick={handleExport} disabled={exporting} className="bg-emerald-600 hover:bg-emerald-500 disabled:bg-emerald-400 text-white text-sm font-semibold px-4 py-2.5 rounded-none transition cursor-pointer">
                  {exporting ? 'Exporting...' : 'Export Selected'}
                </button>
              )}
            </div>
          </div>

          <div className="sticky top-0 z-10 bg-slate-50 dark:bg-slate-950 py-2">
            <div className="flex flex-wrap gap-3 items-center">
              <input value={searchName} onChange={(e) => setSearchName(e.target.value)} placeholder="Search by name..." className={inputCls + " max-w-xs"} />
              <input value={searchEmail} onChange={(e) => setSearchEmail(e.target.value)} placeholder="Search by email..." className={inputCls + " max-w-xs"} />
              <SearchableSelect
                value={statusFilter}
                onChange={setStatusFilter}
                className="max-w-[12rem]"
                placeholder="All statuses"
                options={[
                  { value: '', label: 'All statuses' },
                  { value: 'active', label: 'Active' },
                  { value: 'inactive', label: 'Inactive' },
                ]}
              />
              <SearchableSelect
                value={sortBy}
                onChange={setSortBy}
                className="max-w-[12rem]"
                isClearable={false}
                options={[
                  { value: 'name', label: 'Sort by Name' },
                  { value: 'date', label: 'Sort by Created Date' },
                ]}
              />
            </div>
          </div>

          {successMsg && <div className="p-4 bg-emerald-50 dark:bg-emerald-950/40 border border-emerald-200 dark:border-emerald-800 text-emerald-700 dark:text-emerald-400 text-sm rounded-none">{successMsg}</div>}
          {errorMsg && <div className="p-4 bg-rose-50 dark:bg-rose-950/40 border border-rose-200 dark:border-rose-800 text-rose-700 dark:text-rose-400 text-sm rounded-none">{errorMsg}</div>}

          {selectedUserIds.size > 0 && (
            <div className="fixed bottom-8 left-1/2 transform -translate-x-1/2 z-50 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-none shadow-2xl p-0 w-80 max-h-96 overflow-y-auto">
              {/* Header */}
              <div className="sticky top-0 bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 px-4 py-3">
                <span className="text-sm text-slate-700 dark:text-slate-200 font-bold">
                  {selectedUserIds.size} user{selectedUserIds.size === 1 ? '' : 's'} selected
                </span>
              </div>

              {/* Actions */}
              <div className="flex flex-col divide-y divide-slate-200 dark:divide-slate-700 p-2">
                {/* Activate */}
                <button
                  onClick={() => handleBulkAction('activate')}
                  className="w-full px-4 py-3 text-left text-sm font-semibold text-emerald-700 dark:text-emerald-400 bg-emerald-50 hover:bg-emerald-100 dark:bg-emerald-950/30 dark:hover:bg-emerald-900/50 rounded-none transition cursor-pointer flex items-center gap-2"
                >
                  <span>✓</span>
                  <span>Activate</span>
                </button>

                {/* Deactivate */}
                <button
                  onClick={() => handleBulkAction('deactivate')}
                  className="w-full px-4 py-3 text-left text-sm font-semibold text-amber-700 dark:text-amber-400 bg-amber-50 hover:bg-amber-100 dark:bg-amber-950/30 dark:hover:bg-amber-900/50 rounded-none transition cursor-pointer flex items-center gap-2"
                >
                  <span>✕</span>
                  <span>Deactivate</span>
                </button>

                {/* Remove From Role */}
                <button
                  onClick={() => handleBulkAction('remove')}
                  className="w-full px-4 py-3 text-left text-sm font-semibold text-indigo-700 dark:text-indigo-400 bg-indigo-50 hover:bg-indigo-100 dark:bg-indigo-950/30 dark:hover:bg-indigo-900/50 rounded-none transition cursor-pointer flex items-center gap-2"
                >
                  <span>👤</span>
                  <span>Remove From Role</span>
                </button>

                {/* Delete Selected */}
                {canDelete && (
                  <button
                    onClick={() => handleBulkAction('delete')}
                    className="w-full px-4 py-3 text-left text-sm font-semibold text-rose-600 dark:text-rose-400 bg-rose-50 hover:bg-rose-100 dark:bg-rose-950/30 dark:hover:bg-rose-900/50 rounded-none transition cursor-pointer flex items-center gap-2"
                  >
                    <span>🗑</span>
                    <span>Delete Selected</span>
                  </button>
                )}

                {/* Cancel */}
                <button
                  onClick={() => setSelectedUserIds(new Set())}
                  className="w-full px-4 py-3 text-left text-sm font-semibold text-slate-600 dark:text-slate-400 bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 rounded-none transition cursor-pointer flex items-center gap-2"
                >
                  <span>❌</span>
                  <span>Cancel</span>
                </button>
              </div>
            </div>
          )}

          {users.length === 0 ? (
            <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none p-12 text-center text-slate-400">
              <p>No users are assigned to this role.</p>
              {canAdd && (
                <button onClick={openCreate} className="mt-4 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold px-5 py-2.5 rounded-none transition cursor-pointer">
                  Add User
                </button>
              )}
            </div>
          ) : (
            <>
              <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none overflow-x-auto w-full">
                <div className="min-w-[950px]">
                {/* Table Header */}
                <div className="bg-slate-50 dark:bg-slate-800/50 border-b border-slate-200 dark:border-slate-700 px-6 py-4 flex items-center gap-4 sticky top-0 z-10">
                  <input
                    type="checkbox"
                    checked={selectedUserIds.size === users.length && users.length > 0}
                    onChange={toggleSelectAll}
                    className="accent-indigo-600 w-4 h-4 cursor-pointer"
                  />
                  <div className="grid grid-cols-12 gap-4 flex-1 text-xs font-bold uppercase tracking-wider text-slate-600 dark:text-slate-400">
                    <div className="col-span-1"></div>
                    <div className="col-span-2">Name</div>
                    <div className="col-span-3">Email</div>
                    <div className="col-span-2">Created</div>
                    <div className="col-span-1">Last Login</div>
                    <div className="col-span-1">Role</div>
                    <div className="col-span-1">Status</div>
                    <div className="col-span-1">Actions</div>
                  </div>
                </div>

                {/* Table Rows */}
                <div className="divide-y divide-slate-200 dark:divide-slate-800 pb-28">
                  {users.map((u) => (
                    <div key={u.id} className="px-6 py-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors duration-150 flex items-center gap-4">
                      <input
                        type="checkbox"
                        checked={selectedUserIds.has(u.id)}
                        onChange={() => toggleSelect(u.id)}
                        className="accent-indigo-600 w-4 h-4 cursor-pointer"
                      />
                      
                      <div className="grid grid-cols-12 gap-4 flex-1 items-center">
                        {/* Avatar */}
                        <div className="col-span-1">
                          <div className="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-xs font-bold text-white">
                            {(u.full_name || u.email).charAt(0).toUpperCase()}
                          </div>
                        </div>

                        {/* Full Name */}
                        <div className="col-span-2">
                          <p className="text-sm font-semibold text-slate-900 dark:text-white truncate">
                            {u.full_name || '—'}
                          </p>
                        </div>

                        {/* Email */}
                        <div className="col-span-3">
                          <p className="text-sm text-slate-600 dark:text-slate-400 truncate">
                            {u.email}
                          </p>
                        </div>

                        {/* Created Date */}
                        <div className="col-span-2">
                          <p className="text-sm text-slate-600 dark:text-slate-400">
                            {u.date_joined ? formatDate(u.date_joined) : '—'}
                          </p>
                        </div>

                        {/* Last Login */}
                        <div className="col-span-1">
                          <p className="text-sm text-slate-600 dark:text-slate-400 truncate">
                            {u.last_login ? formatDate(u.last_login) : '—'}
                          </p>
                        </div>

                        {/* Role Badge */}
                        <div className="col-span-1">
                          <span className={"text-xs font-bold px-2 py-1 rounded-none border inline-block " + (ROLE_BADGE[u.role] || ROLE_BADGE.USER)}>
                            {u.role}
                          </span>
                        </div>

                        {/* Status */}
                        <div className="col-span-1">
                          {u.is_active
                            ? <span className="inline-flex items-center gap-1.5 text-xs font-semibold text-emerald-600 dark:text-emerald-400">
                                <span className="w-2 h-2 rounded-full bg-emerald-600 dark:bg-emerald-400"></span>
                                Active
                              </span>
                            : <span className="inline-flex items-center gap-1.5 text-xs font-semibold text-slate-400 dark:text-slate-500">
                                <span className="w-2 h-2 rounded-full bg-slate-400 dark:bg-slate-500"></span>
                                Inactive
                              </span>}
                        </div>

                        {/* Actions Menu */}
                        <div className="col-span-1 relative">
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              setOpenMenuId(openMenuId === u.id ? null : u.id);
                            }}
                            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-2.5 py-1.5 rounded-none transition cursor-pointer"
                          >
                            ⋯
                          </button>
                          {openMenuId === u.id && (
                            <>
                              <div className="fixed inset-0 z-40" onClick={() => setOpenMenuId(null)} />
                              <div className={"absolute right-0 z-50 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-none shadow-2xl w-56 max-h-80 overflow-y-auto scrollbar-thin scrollbar-thumb-slate-300 dark:scrollbar-thumb-slate-600 scrollbar-track-transparent " +
                                (users.indexOf(u) === users.length - 1 && users.length > 1 ? "bottom-full mb-2" : "top-full mt-2")
                              }>
                                {/* Scroll Indicator at Top */}
                                <div className="sticky top-0 h-0 pointer-events-none">
                                  <div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-b from-slate-100 dark:from-slate-700 to-transparent opacity-0 hover:opacity-100 transition-opacity"></div>
                                </div>

                                <button onClick={() => { setOpenMenuId(null); router.push('/admins/users?search=' + encodeURIComponent(u.email)); }} className="w-full px-4 py-2.5 text-left text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition cursor-pointer border-b border-slate-100 dark:border-slate-700/50">
                                  👁 View Profile
                                </button>
                                {canChange && (
                                  <button onClick={() => { setOpenMenuId(null); openEdit(u); }} className="w-full px-4 py-2.5 text-left text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition cursor-pointer border-b border-slate-100 dark:border-slate-700/50">
                                    ✎ Edit User
                                  </button>
                                )}
                                {canChange && (
                                  <button onClick={() => { setOpenMenuId(null); openEdit(u); }} className="w-full px-4 py-2.5 text-left text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition cursor-pointer border-b border-slate-100 dark:border-slate-700/50">
                                    👤 Change Role
                                  </button>
                                )}
                                {canChange && (
                                  <button onClick={() => { setOpenMenuId(null); openEdit(u); }} className="w-full px-4 py-2.5 text-left text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition cursor-pointer border-b border-slate-100 dark:border-slate-700/50">
                                    🔑 Reset Password
                                  </button>
                                )}
                                {canChange && (isAdmin || u.role !== 'ADMIN') && (
                                  <button onClick={() => { setOpenMenuId(null); handleActivateDeactivate(u); }} className="w-full px-4 py-2.5 text-left text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition cursor-pointer border-b border-slate-100 dark:border-slate-700/50">
                                    {u.is_active ? '⏸ Deactivate' : '▶ Activate'}
                                  </button>
                                )}
                                {canChange && (
                                  <button onClick={() => { setOpenMenuId(null); handleRemoveFromRole(u); }} className="w-full px-4 py-2.5 text-left text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition cursor-pointer border-b border-slate-100 dark:border-slate-700/50">
                                    ✕ Remove From Role
                                  </button>
                                )}
                                {canDelete && (isAdmin || u.role !== 'ADMIN') && (
                                  <button onClick={() => { setOpenMenuId(null); handleDelete(u); }} className="w-full px-4 py-2.5 text-left text-sm text-rose-600 dark:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-950/40 transition cursor-pointer">
                                    🗑 Delete User
                                  </button>
                                )}

                                {/* Scroll Indicator at Bottom */}
                                <div className="sticky bottom-0 h-0 pointer-events-none">
                                  <div className="absolute inset-x-0 bottom-0 h-1 bg-gradient-to-t from-slate-100 dark:from-slate-700 to-transparent opacity-0 hover:opacity-100 transition-opacity"></div>
                                </div>
                              </div>
                            </>
                          )}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </>
          )}
        </main>

      {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)} />
          <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"} />
              </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) => setFullName(e.target.value)} className={inputCls} />
                </div>
                <div>
                  <label className={labelCls}>Phone</label>
                  <input value={phone} onChange={(e) => setPhone(e.target.value)} className={inputCls} />
                </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={ROLES.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} />
                </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>
              )}
              {errorMsg && <div className="p-3 bg-rose-50 dark:bg-rose-950/40 border border-rose-200 dark:border-rose-800 text-rose-700 dark:text-rose-400 text-sm rounded-none">{errorMsg}</div>}
              <div className="flex justify-end gap-3 pt-4 border-t border-slate-100 dark:border-slate-800">
                <button type="button" onClick={() => setIsModalOpen(false)} 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>
      )}

      {confirmModal.isOpen && (
        <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={() => setConfirmModal({ ...confirmModal, isOpen: false })} />
          <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 w-full max-w-md rounded-none p-6 relative z-10 shadow-2xl text-slate-800 dark:text-slate-100">
            <h3 className="text-xl font-bold mb-2 text-slate-900 dark:text-white">{confirmModal.title}</h3>
            {confirmModal.message && <p className="text-sm text-slate-500 dark:text-slate-400 mb-6">{confirmModal.message}</p>}
            <div className="flex justify-end gap-3">
              <button type="button" onClick={() => setConfirmModal({ ...confirmModal, isOpen: false })} 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={confirmModal.onConfirm} className={confirmModal.type === 'delete' || confirmModal.type === 'deactivate' || confirmModal.type === 'remove' ?
                'bg-rose-600 hover:bg-rose-500 text-white text-sm font-semibold px-5 py-2.5 rounded-none shadow-lg transition cursor-pointer' :
                'bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-semibold px-5 py-2.5 rounded-none shadow-lg transition cursor-pointer'}>
                {confirmModal.type === 'delete' ? 'Delete' : confirmModal.type === 'remove' ? 'Remove' : confirmModal.type === 'activate' ? 'Activate' : 'Deactivate'}
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}