'use client';
import { useState, useEffect, useRef } from 'react';
import {
  fetchUsers, fetchDepartments, createUser, updateUser, deactivateUser,
  resetUserPassword, hashPassword, generateTempPassword, sendWelcomeEmail, promoteEmployee,
} from '../../lib/admin-api';
import { useAuth } from '../../lib/authContext';

interface SystemUser {
  id: string;
  username: string;
  name: string;
  email: string;
  role: string;
  dept: string | null;
  position: string | null;
  is_active: boolean;
  is_first_login: boolean;
  last_login_at: string | null;
  created_at: string;
}

interface Dept {
  id: string;
  name: string;
  code: string;
}

const ROLE_OPTIONS = [
  { key: 'admin', label: 'Super Admin' },
  { key: 'hr', label: 'HR Manager' },
  { key: 'hod', label: 'HOD / Dept Manager' },
  { key: 'hos', label: 'Head of Secretariat' },
  { key: 'finance', label: 'Finance Officer' },
  { key: 'employee', label: 'Employee' },
  { key: 'intern', label: 'Intern' },
];

const ROLE_COLORS: Record<string, string> = {
  admin: 'bg-red-100 text-red-700',
  hr: 'bg-purple-100 text-purple-700',
  hod: 'bg-blue-100 text-blue-700',
  hos: 'bg-indigo-100 text-indigo-700',
  finance: 'bg-green-100 text-green-700',
  employee: 'bg-gray-100 text-gray-600',
  intern: 'bg-orange-100 text-orange-700',
};

const BRAND = '#b828a0';

function UserModal({
  user: editUser, onClose, onSave, departments, isNew,
}: {
  user?: SystemUser | null;
  onClose: () => void;
  onSave: (data: Partial<SystemUser> & { tempPassword?: string }) => Promise<void>;
  departments: Dept[];
  isNew?: boolean;
}) {
  const [form, setForm] = useState({
    name: editUser?.name || '',
    email: editUser?.email || '',
    username: editUser?.username || '',
    role: editUser?.role || 'employee',
    dept: editUser?.dept || '',
    position: editUser?.position || '',
    is_active: editUser?.is_active !== undefined ? editUser.is_active : true,
  });
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');

  const handleSave = async () => {
    if (!form.name || !form.email || !form.username) {
      setError('Name, email and username are required');
      return;
    }
    setSaving(true);
    setError('');
    try {
      await onSave(form);
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : 'Failed to save');
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg p-6 max-h-[90vh] overflow-y-auto">
        <div className="flex items-center justify-between mb-5">
          <h3 className="text-base font-bold text-gray-800">{isNew ? 'Add New System User' : 'Edit System User'}</h3>
          <button onClick={onClose} className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 cursor-pointer">
            <i className="ri-close-line text-gray-500"></i>
          </button>
        </div>
        {error && <div className="mb-4 bg-red-50 border border-red-200 rounded-xl px-3 py-2 text-xs text-red-700">{error}</div>}
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="text-xs font-semibold text-gray-600 block mb-1">Full Name *</label>
              <input value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
                className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-pink-400"
                placeholder="e.g. Jane Wanjiru" />
            </div>
            <div>
              <label className="text-xs font-semibold text-gray-600 block mb-1">Email Address *</label>
              <input type="email" value={form.email} onChange={e => setForm(f => ({ ...f, email: e.target.value }))}
                className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-pink-400"
                placeholder="user@uwezo.go.ke" />
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="text-xs font-semibold text-gray-600 block mb-1">Username *</label>
              <input value={form.username} onChange={e => setForm(f => ({ ...f, username: e.target.value }))}
                className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-pink-400"
                placeholder="e.g. jane.wanjiru" />
            </div>
            <div>
              <label className="text-xs font-semibold text-gray-600 block mb-1">System Role *</label>
              <select value={form.role} onChange={e => setForm(f => ({ ...f, role: e.target.value }))}
                className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-pink-400 pr-8 cursor-pointer">
                {ROLE_OPTIONS.map(r => <option key={r.key} value={r.key}>{r.label}</option>)}
              </select>
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="text-xs font-semibold text-gray-600 block mb-1">Department</label>
              <select value={form.dept} onChange={e => setForm(f => ({ ...f, dept: e.target.value }))}
                className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-pink-400 pr-8 cursor-pointer">
                <option value="">No department</option>
                {departments.map(d => <option key={d.id} value={d.name}>{d.name}</option>)}
              </select>
            </div>
            <div>
              <label className="text-xs font-semibold text-gray-600 block mb-1">Position / Title</label>
              <input value={form.position} onChange={e => setForm(f => ({ ...f, position: e.target.value }))}
                className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-pink-400"
                placeholder="e.g. HR Officer" />
            </div>
          </div>
          <div>
            <label className="text-xs font-semibold text-gray-600 block mb-2">Account Status</label>
            <div className="flex gap-2">
              {[{ v: true, l: 'Active' }, { v: false, l: 'Inactive' }].map(s => (
                <button key={String(s.v)} onClick={() => setForm(f => ({ ...f, is_active: s.v }))}
                  className="flex-1 py-2 rounded-xl text-xs font-semibold cursor-pointer border transition-all"
                  style={form.is_active === s.v ? { background: BRAND, color: '#fff', borderColor: BRAND } : { background: '#f9f9f9', color: '#666', borderColor: '#e5e7eb' }}>
                  {s.l}
                </button>
              ))}
            </div>
          </div>
          {isNew && (
            <div className="bg-amber-50 border border-amber-200 rounded-xl px-3 py-2.5">
              <p className="text-xs text-amber-800"><i className="ri-information-line mr-1"></i>A temporary password will be auto-generated and a welcome email sent to the user.</p>
            </div>
          )}
        </div>
        <div className="flex gap-3 mt-5">
          <button onClick={onClose} className="flex-1 py-2.5 rounded-xl border border-gray-200 text-sm font-medium text-gray-600 hover:bg-gray-50 cursor-pointer whitespace-nowrap">Cancel</button>
          <button onClick={handleSave} disabled={saving}
            className="flex-1 py-2.5 rounded-xl text-white text-sm font-semibold cursor-pointer whitespace-nowrap disabled:opacity-70 flex items-center justify-center gap-2"
            style={{ background: BRAND }}>
            {saving ? <><div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div> Saving...</> : (isNew ? 'Create User' : 'Save Changes')}
          </button>
        </div>
      </div>
    </div>
  );
}

function BulkUploadModal({ onClose, onCreated, departments }: {
  onClose: () => void;
  onCreated: (count: number) => void;
  departments: Dept[];
}) {
  const [entries, setEntries] = useState([{ fullName: '', email: '', department: '', roleKey: 'employee' }]);
  const [step, setStep] = useState<'form' | 'preview' | 'done'>('form');
  const [created, setCreated] = useState<{ fullName: string; email: string; department: string; roleKey: string; username: string; tempPassword: string }[]>([]);
  const [processing, setProcessing] = useState(false);
  const fileRef = useRef<HTMLInputElement>(null);

  const setField = (i: number, k: string, v: string) =>
    setEntries(prev => prev.map((e, idx) => idx === i ? { ...e, [k]: v } : e));

  const handleCSV = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = ev => {
      const text = ev.target?.result as string;
      const lines = text.split('\n').filter(l => l.trim());
      const parsed = lines.slice(1).map(line => {
        const cols = line.split(',').map(c => c.trim().replace(/^"|"$/g, ''));
        return { fullName: cols[0] || '', email: cols[1] || '', department: cols[2] || '', roleKey: cols[3] || 'employee' };
      }).filter(e => e.fullName);
      setEntries(prev => [...prev, ...parsed]);
    };
    reader.readAsText(file);
  };

  const handlePreview = () => {
    const valid = entries.filter(e => e.fullName.trim() && e.email.trim());
    const withCreds = valid.map(e => {
      const username = e.email.split('@')[0].toLowerCase().replace(/[^a-z0-9.]/g, '.');
      const tempPassword = `${username}@${new Date().getFullYear()}`;
      return { ...e, username, tempPassword };
    });
    setCreated(withCreds);
    setStep('preview');
  };

  const handleConfirm = async () => {
    setProcessing(true);
    let count = 0;
    for (const e of created) {
      try {
        const passwordHash = await hashPassword(e.tempPassword);
        await createUser({
          username: e.username,
          password_hash: passwordHash,
          email: e.email,
          name: e.fullName,
          role: e.roleKey,
          dept: e.department || undefined,
        });
        await sendWelcomeEmail({ to: e.email, name: e.fullName, username: e.username, password: e.tempPassword, role: e.roleKey, dept: e.department });
        count++;
      } catch {}
    }
    setProcessing(false);
    onCreated(count);
    setStep('done');
  };

  const downloadCodes = () => {
    const header = 'Full Name,Email,Department,Role,Username,Temp Password\n';
    const rows = created.map(e => `"${e.fullName}","${e.email}","${e.department}","${e.roleKey}","${e.username}","${e.tempPassword}"`).join('\n');
    const blob = new Blob([header + rows], { type: 'text/csv' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `bulk_users_credentials_${Date.now()}.csv`;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-3xl p-6 max-h-[90vh] flex flex-col">
        <div className="flex items-center justify-between mb-4 flex-shrink-0">
          <div className="flex items-center gap-3">
            <div className="w-9 h-9 flex items-center justify-center rounded-xl" style={{ background: BRAND }}>
              <i className="ri-group-line text-white text-base"></i>
            </div>
            <div>
              <h3 className="text-base font-bold text-gray-800">Bulk User Upload</h3>
              <p className="text-xs text-gray-400">Add multiple users — each gets credentials sent by email</p>
            </div>
          </div>
          <button onClick={onClose} className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 cursor-pointer">
            <i className="ri-close-line text-gray-500"></i>
          </button>
        </div>

        <div className="flex items-center gap-2 mb-5 flex-shrink-0">
          {['Add Users', 'Preview', 'Done'].map((s, i) => (
            <div key={s} className="flex items-center gap-2">
              <div className={`w-6 h-6 flex items-center justify-center rounded-full text-xs font-bold ${(step === 'form' && i === 0) || (step === 'preview' && i === 1) || (step === 'done' && i === 2) ? 'text-white' : 'bg-gray-100 text-gray-400'}`}
                style={(step === 'form' && i === 0) || (step === 'preview' && i === 1) || (step === 'done' && i === 2) ? { background: BRAND } : {}}>
                {i + 1}
              </div>
              <span className="text-xs text-gray-500">{s}</span>
              {i < 2 && <i className="ri-arrow-right-s-line text-gray-300"></i>}
            </div>
          ))}
        </div>

        {step === 'form' && (
          <div className="flex-1 overflow-y-auto">
            <div className="flex items-center gap-3 mb-4">
              <div className="flex-1 bg-blue-50 border border-blue-200 rounded-xl px-3 py-2.5 text-xs text-blue-700">
                <strong>CSV Format:</strong> Full Name, Email, Department, RoleKey (e.g. employee/intern/hod)
              </div>
              <button onClick={() => fileRef.current?.click()} className="flex items-center gap-2 px-4 py-2.5 rounded-xl border border-gray-200 text-sm text-gray-600 hover:bg-gray-50 cursor-pointer whitespace-nowrap">
                <i className="ri-upload-2-line"></i> Import CSV
              </button>
              <input ref={fileRef} type="file" accept=".csv" className="hidden" onChange={handleCSV} />
            </div>
            <div className="space-y-2">
              <div className="grid grid-cols-12 gap-2 text-xs font-semibold text-gray-500 px-1">
                <div className="col-span-3">Full Name</div>
                <div className="col-span-3">Email</div>
                <div className="col-span-2">Department</div>
                <div className="col-span-3">Role</div>
                <div className="col-span-1"></div>
              </div>
              {entries.map((e, i) => (
                <div key={i} className="grid grid-cols-12 gap-2 items-center">
                  <div className="col-span-3">
                    <input value={e.fullName} onChange={ev => setField(i, 'fullName', ev.target.value)}
                      className="w-full border border-gray-200 rounded-xl px-3 py-2 text-xs outline-none focus:border-pink-400" placeholder="Full name" />
                  </div>
                  <div className="col-span-3">
                    <input value={e.email} onChange={ev => setField(i, 'email', ev.target.value)}
                      className="w-full border border-gray-200 rounded-xl px-3 py-2 text-xs outline-none focus:border-pink-400" placeholder="email@uwezo.go.ke" />
                  </div>
                  <div className="col-span-2">
                    <select value={e.department} onChange={ev => setField(i, 'department', ev.target.value)}
                      className="w-full border border-gray-200 rounded-xl px-2 py-2 text-xs outline-none pr-6 cursor-pointer">
                      <option value="">Dept</option>
                      {departments.map(d => <option key={d.id} value={d.name}>{d.name}</option>)}
                    </select>
                  </div>
                  <div className="col-span-3">
                    <select value={e.roleKey} onChange={ev => setField(i, 'roleKey', ev.target.value)}
                      className="w-full border border-gray-200 rounded-xl px-2 py-2 text-xs outline-none pr-6 cursor-pointer">
                      {ROLE_OPTIONS.map(r => <option key={r.key} value={r.key}>{r.label}</option>)}
                    </select>
                  </div>
                  <div className="col-span-1 flex justify-center">
                    {entries.length > 1 && (
                      <button onClick={() => setEntries(prev => prev.filter((_, idx) => idx !== i))}
                        className="w-7 h-7 flex items-center justify-center rounded-lg hover:bg-red-50 cursor-pointer">
                        <i className="ri-delete-bin-line text-red-400 text-xs"></i>
                      </button>
                    )}
                  </div>
                </div>
              ))}
            </div>
            <button onClick={() => setEntries(prev => [...prev, { fullName: '', email: '', department: '', roleKey: 'employee' }])}
              className="mt-3 flex items-center gap-2 px-3 py-2 rounded-xl border border-dashed border-gray-300 text-xs text-gray-500 hover:border-pink-400 hover:text-pink-600 cursor-pointer whitespace-nowrap">
              <i className="ri-add-line"></i> Add Another Row
            </button>
          </div>
        )}

        {step === 'preview' && (
          <div className="flex-1 overflow-y-auto">
            <div className="bg-amber-50 border border-amber-200 rounded-xl px-4 py-3 mb-4 text-xs text-amber-800">
              <strong>Review & Confirm.</strong> Credentials auto-generated. Welcome emails will be sent on confirmation.
            </div>
            <table className="w-full text-xs">
              <thead>
                <tr className="border-b border-gray-100 bg-gray-50">
                  {['Full Name', 'Email', 'Dept', 'Role', 'Username', 'Temp Password'].map(h => (
                    <th key={h} className="text-left text-xs font-semibold text-gray-500 px-3 py-2">{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {created.map((e, i) => (
                  <tr key={i} className="border-b border-gray-50">
                    <td className="px-3 py-2 font-medium text-gray-800">{e.fullName}</td>
                    <td className="px-3 py-2 text-gray-500">{e.email}</td>
                    <td className="px-3 py-2 text-gray-500">{e.department}</td>
                    <td className="px-3 py-2"><span className="px-2 py-0.5 rounded-full bg-pink-100 text-pink-700 font-semibold">{e.roleKey}</span></td>
                    <td className="px-3 py-2 font-mono">{e.username}</td>
                    <td className="px-3 py-2 font-mono font-bold" style={{ color: BRAND }}>{e.tempPassword}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {step === 'done' && (
          <div className="flex-1 flex flex-col items-center justify-center py-8">
            <div className="w-16 h-16 flex items-center justify-center rounded-2xl mb-4" style={{ background: BRAND }}>
              <i className="ri-checkbox-circle-line text-3xl text-white"></i>
            </div>
            <h4 className="text-base font-bold text-gray-800 mb-1">{created.length} Users Created!</h4>
            <p className="text-sm text-gray-500 mb-6 text-center">Welcome emails with credentials sent. Download CSV for your records.</p>
            <div className="flex gap-3">
              <button onClick={downloadCodes}
                className="flex items-center gap-2 px-5 py-2.5 rounded-xl border text-sm font-semibold cursor-pointer whitespace-nowrap"
                style={{ borderColor: BRAND, color: BRAND }}>
                <i className="ri-download-2-line"></i> Download Credentials CSV
              </button>
              <button onClick={onClose} className="px-5 py-2.5 rounded-xl text-white text-sm font-semibold cursor-pointer whitespace-nowrap" style={{ background: BRAND }}>
                Done
              </button>
            </div>
          </div>
        )}

        {step !== 'done' && (
          <div className="flex justify-between gap-3 mt-4 pt-4 border-t border-gray-100 flex-shrink-0">
            <button onClick={onClose} className="px-5 py-2.5 rounded-xl border border-gray-200 text-sm text-gray-600 hover:bg-gray-50 cursor-pointer whitespace-nowrap">Cancel</button>
            {step === 'form' && (
              <button onClick={handlePreview} disabled={!entries.some(e => e.fullName.trim() && e.email.trim())}
                className="flex items-center gap-2 px-5 py-2.5 rounded-xl text-white text-sm font-semibold cursor-pointer disabled:opacity-50 whitespace-nowrap"
                style={{ background: BRAND }}>
                Preview <i className="ri-arrow-right-line"></i>
              </button>
            )}
            {step === 'preview' && (
              <div className="flex gap-3">
                <button onClick={() => setStep('form')} className="px-5 py-2.5 rounded-xl border border-gray-200 text-sm text-gray-600 cursor-pointer whitespace-nowrap">Back</button>
                <button onClick={handleConfirm} disabled={processing}
                  className="flex items-center gap-2 px-5 py-2.5 rounded-xl text-white text-sm font-semibold cursor-pointer disabled:opacity-50 whitespace-nowrap"
                  style={{ background: BRAND }}>
                  {processing ? <><div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div> Creating...</> : 'Confirm & Create All'}
                </button>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

export default function UserManagementTab() {
  const { user: currentUser } = useAuth();
  const [users, setUsers] = useState<SystemUser[]>([]);
  const [departments, setDepartments] = useState<Dept[]>([]);
  const [loading, setLoading] = useState(true);
  const [modal, setModal] = useState(false);
  const [editing, setEditing] = useState<SystemUser | null>(null);
  const [bulkModal, setBulkModal] = useState(false);
  const [toast, setToast] = useState('');
  const [toastType, setToastType] = useState<'success' | 'error'>('success');
  const [search, setSearch] = useState('');
  const [resetModal, setResetModal] = useState<SystemUser | null>(null);
  const [newPw, setNewPw] = useState('');
  const [deleteModal, setDeleteModal] = useState<SystemUser | null>(null);
  const [promoteModal, setPromoteModal] = useState<SystemUser | null>(null);
  const [promoteRole, setPromoteRole] = useState('employee');

  const showToast = (msg: string, type: 'success' | 'error' = 'success') => {
    setToast(msg);
    setToastType(type);
    setTimeout(() => setToast(''), 4000);
  };

  const load = async () => {
    try {
      const [us, depts] = await Promise.all([fetchUsers(), fetchDepartments()]);
      // Ensure users is always an array
      setUsers(Array.isArray(us) ? us : []);
      setDepartments(Array.isArray(depts) ? depts : []);
    } catch (error) {
      console.error('Error loading data:', error);
      setUsers([]);
      setDepartments([]);
    }
    setLoading(false);
  };

  useEffect(() => { load(); }, []);

  const handleSave = async (formData: Partial<SystemUser> & { tempPassword?: string }) => {
    if (editing) {
      await updateUser(editing.id, {
        name: formData.name,
        email: formData.email,
        username: formData.username,
        role: formData.role,
        dept: formData.dept || null,
        position: formData.position || null,
        is_active: formData.is_active,
      });
      showToast('User updated successfully');
    } else {
      const tempPw = generateTempPassword(formData.username || 'user');
      const passwordHash = await hashPassword(tempPw);
      await createUser({
        username: formData.username!,
        password_hash: passwordHash,
        email: formData.email!,
        name: formData.name!,
        role: formData.role || 'employee',
        dept: formData.dept || undefined,
        position: formData.position || undefined,
      });
      await sendWelcomeEmail({
        to: formData.email!,
        name: formData.name!,
        username: formData.username!,
        password: tempPw,
        role: formData.role || 'employee',
        dept: formData.dept || undefined,
      });
      showToast('User created. Welcome email sent.');
    }
    setModal(false);
    setEditing(null);
    await load();
  };

  const handleToggleStatus = async (u: SystemUser) => {
    await updateUser(u.id, { is_active: !u.is_active });
    showToast(`User ${u.is_active ? 'deactivated' : 'activated'}`);
    await load();
  };

  const handleDelete = async (userId: string) => {
    await deactivateUser(userId);
    setDeleteModal(null);
    showToast('User deactivated');
    await load();
  };

  const handleResetPw = async () => {
    if (!resetModal || newPw.length < 6) return;
    const hash = await hashPassword(newPw);
    await resetUserPassword(resetModal.id, hash, currentUser?.name || 'Admin');
    await sendWelcomeEmail({ to: resetModal.email, name: resetModal.name, username: resetModal.username, password: newPw, role: resetModal.role, dept: resetModal.dept || undefined });
    setResetModal(null);
    setNewPw('');
    showToast(`Password reset for ${resetModal.name}. Email notification sent.`);
    await load();
  };

  const handlePromote = async () => {
    if (!promoteModal) return;
    await updateUser(promoteModal.id, { role: promoteRole });
    await promoteEmployee({
      employeeId: promoteModal.id,
      employeeName: promoteModal.name,
      fromRole: promoteModal.role,
      toRole: promoteRole,
      fromDept: promoteModal.dept || undefined,
      authorizedByName: currentUser?.name || 'Admin',
    });
    setPromoteModal(null);
    showToast(`${promoteModal.name} role updated to ${promoteRole}`);
    await load();
  };

  // Safe access - ensure users is an array before using .find
  const usersArray = Array.isArray(users) ? users : [];
  const financeOfficer = usersArray.find(u => u.role === 'finance' && u.is_active);
  
  // Safe filter - ensure users is an array
  const filteredUsers = usersArray.filter(u =>
    u.name?.toLowerCase().includes(search.toLowerCase()) ||
    u.email?.toLowerCase().includes(search.toLowerCase()) ||
    (u.dept || '').toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div className="space-y-5">
      {toast && (
        <div className={`fixed top-20 right-6 z-[100] px-5 py-3 rounded-xl shadow-lg text-sm font-medium flex items-center gap-2 text-white ${toastType === 'success' ? 'bg-green-600' : 'bg-red-600'}`}>
          <i className={`text-lg ${toastType === 'success' ? 'ri-checkbox-circle-line' : 'ri-error-warning-line'}`}></i>
          {toast}
        </div>
      )}

      {financeOfficer ? (
        <div className="bg-green-50 border border-green-200 rounded-2xl p-4 flex items-start gap-4">
          <div className="w-10 h-10 flex items-center justify-center rounded-xl bg-green-100 flex-shrink-0">
            <i className="ri-money-dollar-circle-line text-xl text-green-700"></i>
          </div>
          <div className="flex-1">
            <p className="text-sm font-bold text-green-800">Finance Officer Configured</p>
            <p className="text-xs text-green-700 mt-0.5"><strong>{financeOfficer.name}</strong> ({financeOfficer.email}) is the designated Finance Officer with budget approval authority.</p>
          </div>
          <span className="px-2.5 py-1 rounded-full text-xs font-semibold bg-green-200 text-green-800">Active</span>
        </div>
      ) : (
        <div className="bg-amber-50 border border-amber-200 rounded-2xl p-4 flex items-start gap-4">
          <div className="w-10 h-10 flex items-center justify-center rounded-xl bg-amber-100 flex-shrink-0">
            <i className="ri-alert-line text-xl text-amber-700"></i>
          </div>
          <div>
            <p className="text-sm font-bold text-amber-800">No Finance Officer Configured</p>
            <p className="text-xs text-amber-700 mt-0.5">Training budget approvals require a Finance Officer account. Add one below.</p>
          </div>
        </div>
      )}

      <div className="bg-white rounded-2xl border border-gray-100 shadow-sm">
        <div className="px-5 py-4 border-b border-gray-100 flex items-center justify-between flex-wrap gap-3">
          <div>
            <h3 className="font-bold text-gray-800">System Users</h3>
            <p className="text-xs text-gray-500 mt-0.5">{usersArray.filter(u => u.is_active).length} active users</p>
          </div>
          <div className="flex items-center gap-2 flex-wrap">
            <div className="relative">
              <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search users..."
                className="border border-gray-200 rounded-xl px-4 py-2 text-sm outline-none w-48" />
              <div className="w-4 h-4 flex items-center justify-center absolute right-3 top-1/2 -translate-y-1/2">
                <i className="ri-search-line text-gray-400 text-sm"></i>
              </div>
            </div>
            <button onClick={() => setBulkModal(true)}
              className="flex items-center gap-2 px-4 py-2 rounded-xl border text-sm font-semibold cursor-pointer whitespace-nowrap"
              style={{ borderColor: BRAND, color: BRAND }}>
              <i className="ri-group-2-line"></i> Bulk Add
            </button>
            <button onClick={() => { setEditing(null); setModal(true); }}
              className="flex items-center gap-2 px-4 py-2 rounded-xl text-white text-sm font-semibold cursor-pointer whitespace-nowrap"
              style={{ background: BRAND }}>
              <i className="ri-user-add-line"></i> Add User
            </button>
          </div>
        </div>

        {loading ? (
          <div className="flex justify-center py-12">
            <div className="w-8 h-8 border-2 border-pink-300 border-t-pink-600 rounded-full animate-spin"></div>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b border-gray-100 bg-gray-50">
                  {['User', 'Role', 'Department', 'Status', 'Last Login', 'Actions'].map(h => (
                    <th key={h} className="text-left text-xs font-semibold text-gray-500 px-4 py-3 whitespace-nowrap">{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {filteredUsers.map(u => (
                  <tr key={u.id} className="border-b border-gray-50 hover:bg-gray-50 transition-colors">
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-3">
                        <div className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0" style={{ background: BRAND }}>
                          {u.name.split(' ').map(n => n[0]).join('').slice(0, 2)}
                        </div>
                        <div>
                          <p className="text-sm font-semibold text-gray-800">{u.name}</p>
                          <p className="text-xs text-gray-400">{u.email}</p>
                        </div>
                      </div>
                    </td>
                    <td className="px-4 py-3">
                      <span className={`px-2.5 py-1 rounded-full text-xs font-semibold ${ROLE_COLORS[u.role] || 'bg-gray-100 text-gray-600'}`}>
                        {ROLE_OPTIONS.find(r => r.key === u.role)?.label || u.role}
                      </span>
                    </td>
                    <td className="px-4 py-3 text-sm text-gray-600">{u.dept || <span className="text-gray-300">—</span>}</td>
                    <td className="px-4 py-3">
                      <span className={`px-2 py-1 rounded-full text-xs font-semibold ${u.is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}`}>
                        {u.is_active ? 'Active' : 'Inactive'}
                      </span>
                    </td>
                    <td className="px-4 py-3 text-xs text-gray-500">
                      {u.last_login_at ? new Date(u.last_login_at).toLocaleDateString('en-KE', { day: 'numeric', month: 'short', year: '2-digit', hour: '2-digit', minute: '2-digit' }) : <span className="text-gray-300">Never</span>}
                    </td>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-1">
                        <button onClick={() => { setEditing(u); setModal(true); }}
                          className="w-7 h-7 flex items-center justify-center rounded-lg hover:bg-blue-50 cursor-pointer" title="Edit">
                          <i className="ri-edit-2-line text-blue-500 text-xs"></i>
                        </button>
                        <button onClick={() => setResetModal(u)}
                          className="w-7 h-7 flex items-center justify-center rounded-lg hover:bg-amber-50 cursor-pointer" title="Reset Password">
                          <i className="ri-key-2-line text-amber-500 text-xs"></i>
                        </button>
                        {u.role !== 'admin' && (
                          <>
                            <button onClick={() => handleToggleStatus(u)}
                              className="w-7 h-7 flex items-center justify-center rounded-lg cursor-pointer hover:bg-red-50" title={u.is_active ? 'Deactivate' : 'Activate'}>
                              <i className={`text-xs ${u.is_active ? 'ri-user-forbid-line text-red-500' : 'ri-user-follow-line text-green-500'}`}></i>
                            </button>
                            <button onClick={() => { setPromoteModal(u); setPromoteRole(u.role); }}
                              className="w-7 h-7 flex items-center justify-center rounded-lg hover:bg-green-50 cursor-pointer" title="Change Role">
                              <i className="ri-arrow-up-down-line text-green-500 text-xs"></i>
                            </button>
                            <button onClick={() => setDeleteModal(u)}
                              className="w-7 h-7 flex items-center justify-center rounded-lg hover:bg-red-50 cursor-pointer" title="Deactivate">
                              <i className="ri-delete-bin-line text-red-500 text-xs"></i>
                            </button>
                          </>
                        )}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {modal && (
        <UserModal
          user={editing}
          isNew={!editing}
          departments={departments}
          onClose={() => { setModal(false); setEditing(null); }}
          onSave={handleSave}
        />
      )}

      {bulkModal && (
        <BulkUploadModal
          departments={departments}
          onClose={() => setBulkModal(false)}
          onCreated={(count) => {
            setBulkModal(false);
            showToast(`${count} users created and welcome emails sent`);
            load();
          }}
        />
      )}

      {resetModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-sm p-6">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 flex items-center justify-center rounded-xl bg-amber-100">
                <i className="ri-key-2-line text-xl text-amber-600"></i>
              </div>
              <div>
                <p className="text-sm font-bold text-gray-800">Reset Password</p>
                <p className="text-xs text-gray-500">{resetModal.name}</p>
              </div>
            </div>
            <input type="password" value={newPw} onChange={e => setNewPw(e.target.value)}
              placeholder="Enter new password (min. 6 chars)"
              className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none mb-4" />
            <p className="text-xs text-gray-500 mb-4">Employee will receive an email notification and must change this password on next login.</p>
            <div className="flex gap-3">
              <button onClick={() => { setResetModal(null); setNewPw(''); }} className="flex-1 py-2.5 rounded-xl border border-gray-200 text-sm text-gray-600 cursor-pointer whitespace-nowrap">Cancel</button>
              <button onClick={handleResetPw} disabled={newPw.length < 6}
                className="flex-1 py-2.5 rounded-xl text-white text-sm font-semibold cursor-pointer disabled:opacity-50 whitespace-nowrap"
                style={{ background: BRAND }}>
                Reset & Notify
              </button>
            </div>
          </div>
        </div>
      )}

      {deleteModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-sm p-6">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 flex items-center justify-center rounded-xl bg-red-100">
                <i className="ri-delete-bin-line text-xl text-red-600"></i>
              </div>
              <div>
                <p className="text-sm font-bold text-gray-800">Deactivate User</p>
                <p className="text-xs text-gray-500">{deleteModal.name}</p>
              </div>
            </div>
            <p className="text-sm text-gray-600 mb-5">This will deactivate the account. The user will no longer be able to log in. This action can be reversed.</p>
            <div className="flex gap-3">
              <button onClick={() => setDeleteModal(null)} className="flex-1 py-2.5 rounded-xl border border-gray-200 text-sm text-gray-600 cursor-pointer whitespace-nowrap">Cancel</button>
              <button onClick={() => handleDelete(deleteModal.id)}
                className="flex-1 py-2.5 rounded-xl bg-red-600 text-white text-sm font-semibold cursor-pointer whitespace-nowrap">
                Deactivate
              </button>
            </div>
          </div>
        </div>
      )}

      {promoteModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-sm p-6">
            <h3 className="font-bold text-gray-800 mb-1">Change User Role</h3>
            <p className="text-sm text-gray-500 mb-4">{promoteModal.name} — currently <strong>{promoteModal.role}</strong></p>
            <label className="text-xs font-semibold text-gray-600 block mb-2">Select New Role</label>
            <div className="space-y-2 mb-4 max-h-[280px] overflow-y-auto">
              {ROLE_OPTIONS.map(r => (
                <button key={r.key} onClick={() => setPromoteRole(r.key)}
                  className={`w-full text-left px-3 py-2.5 rounded-xl text-sm border cursor-pointer transition-all ${promoteRole === r.key ? 'text-white' : 'hover:bg-pink-50 border-gray-100'}`}
                  style={promoteRole === r.key ? { background: BRAND, borderColor: BRAND } : {}}>
                  <span className="font-medium">{r.label}</span>
                  {r.key === promoteModal.role && <span className="text-xs ml-2 opacity-60">(current)</span>}
                </button>
              ))}
            </div>
            <div className="flex gap-3">
              <button onClick={() => setPromoteModal(null)} className="flex-1 py-2.5 rounded-xl border border-gray-200 text-sm text-gray-600 cursor-pointer whitespace-nowrap">Cancel</button>
              <button onClick={handlePromote}
                className="flex-1 py-2.5 rounded-xl text-white text-sm font-semibold cursor-pointer whitespace-nowrap"
                style={{ background: BRAND }}>
                Apply Change
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}