import React, { useEffect, useState, useMemo } from 'react';
import { ApiService, SmtpSettings, SystemInfo } from '../api';
import { NguoiDung, VaiTro, QuyenHan, NhatKy } from '../types';

type TabType = 'users' | 'permissions' | 'logs' | 'settings' | 'ai_ocr';

const UserPage: React.FC = () => {
  const [activeTab, setActiveTab] = useState<TabType>('users');
  const [users, setUsers] = useState<NguoiDung[]>([]);
  const [permissions, setPermissions] = useState<QuyenHan[]>([]);
  const [logs, setLogs] = useState<NhatKy[]>([]);
  const [smtpSettings, setSmtpSettings] = useState<SmtpSettings | null>(null);
  const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(null);

  // States cho tính năng gộp/mở rộng Logs
  const [expandedDates, setExpandedDates] = useState<Record<string, boolean>>({});

  const [editingUser, setEditingUser] = useState<NguoiDung | null>(null);
  const [confirmResetUser, setConfirmResetUser] = useState<NguoiDung | null>(null);
  const [resettingUser, setResettingUser] = useState<NguoiDung | null>(null);
  const [newGeneratedPassword, setNewGeneratedPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [isSavingPerms, setIsSavingPerms] = useState(false);
  const [isSavingSettings, setIsSavingSettings] = useState(false);
  const [isTestingSmtp, setIsTestingSmtp] = useState(false);
  const [testEmail, setTestEmail] = useState('');

  // AI OCR Settings
  const [aiSettings, setAiSettings] = useState<any>({
    provider: 'gemini',
    gemini: { apiKey: '', model: 'gemini-2.0-flash' },
    ollama: { url: 'http://localhost:11434', model: 'llama3.2-vision' },
    anythingLLM: { url: 'http://localhost:3001', apiKey: '', workspace: '' }
  });
  const [isSavingAi, setIsSavingAi] = useState(false);

  useEffect(() => {
    refreshData();
  }, [activeTab]);

  const refreshData = async () => {
    setLoading(true);
    try {
      if (activeTab === 'users') {
        setUsers(await ApiService.getUsers());
      } else if (activeTab === 'permissions') {
        setPermissions(await ApiService.getPermissions());
      } else if (activeTab === 'logs') {
        const lData = await ApiService.getLogs();
        const sorted = lData.sort((a, b) => new Date(b.thoiGian).getTime() - new Date(a.thoiGian).getTime());
        setLogs(sorted);

        // Mặc định mở rộng ngày gần nhất
        if (sorted.length > 0) {
          const latestDate = new Date(sorted[0].thoiGian).toLocaleDateString('vi-VN', { year: 'numeric', month: 'long', day: 'numeric' });
          setExpandedDates(prev => ({ ...prev, [latestDate]: true }));
        }
      } else if (activeTab === 'settings') {
        // Fetch concurrently and don't let one failure block the other
        ApiService.getSettings().then(s => {
          setSmtpSettings(s.smtp || { host: '', port: 587, user: '', pass: '', fromEmail: '', secure: true });
        }).catch(err => console.error("Lỗi tải settings:", err));

        ApiService.getSystemInfo().then(info => {
          setSystemInfo(info);
        }).catch(err => console.error("Lỗi tải system info:", err));
      } else if (activeTab === 'ai_ocr') {
        const settings: any = await ApiService.getSettings();
        if (settings.ai) {
          setAiSettings(settings.ai);
        }
      }
    } catch (err: any) {
      console.error("Lỗi tải dữ liệu:", err);
      alert('Không thể tải dữ liệu: ' + (err.message || 'Lỗi không xác định'));
    } finally {
      setLoading(false);
    }
  };

  const startNew = () => {
    setEditingUser({ id: '', username: '', fullName: '', email: '', role: VaiTro.NHAN_VIEN_XU_LY, isActive: true, password: '' });
  };

  const handleToggleUserStatus = async (id: string, e: React.MouseEvent) => {
    e.stopPropagation();
    try {
      await ApiService.toggleUserStatus(id);
      refreshData();
    } catch (error: any) {
      alert('Lỗi cập nhật trạng thái: ' + (error.message || 'Không thể cập nhật trạng thái người dùng'));
    }
  };

  const handleDeleteUser = async (id: string, e: React.MouseEvent) => {
    e.stopPropagation();
    if (id === ApiService.currentUser?.id) return alert('Không thể xóa chính mình!');
    if (window.confirm('Xác nhận xóa tài khoản?')) {
      try {
        await ApiService.deleteUser(id);
        refreshData();
      } catch (error: any) {
        alert('Lỗi xóa người dùng: ' + (error.message || 'Không thể xóa người dùng'));
      }
    }
  };

  const handleResetPassword = (user: NguoiDung, e: React.MouseEvent) => {
    e.stopPropagation();
    setConfirmResetUser(user);
  };

  const executeResetPassword = async () => {
    if (!confirmResetUser) return;
    const user = confirmResetUser;
    setLoading(true);
    try {
      const pass = await ApiService.resetPassword(user.id);
      setNewGeneratedPassword(pass);
      setResettingUser(user);
      setConfirmResetUser(null);
    } catch (error: any) {
      alert('Lỗi reset mật khẩu: ' + (error.message || 'Không thể reset mật khẩu'));
    } finally {
      setLoading(false);
    }
  };

  const saveUser = async () => {
    if (!editingUser?.username || !editingUser?.fullName) {
      return alert('Vui lòng điền đầy đủ tên đăng nhập và họ tên!');
    }
    
    if (editingUser.username.trim().length < 3) {
      return alert('Tên đăng nhập phải có ít nhất 3 ký tự!');
    }
    
    if (!/^[a-z0-9_]+$/.test(editingUser.username)) {
      return alert('Tên đăng nhập chỉ được chứa chữ thường, số và dấu gạch dưới!');
    }
    
    if (editingUser.fullName.trim().length < 2) {
      return alert('Họ tên phải có ít nhất 2 ký tự!');
    }
    
    if (!editingUser.id && !editingUser.password) {
      return alert('Vui lòng nhập mật khẩu cho tài khoản mới!');
    }
    
    if (editingUser.password && editingUser.password.length < 6) {
      return alert('Mật khẩu phải có ít nhất 6 ký tự!');
    }
    
    try {
      await ApiService.saveUser(editingUser);
      setEditingUser(null);
      refreshData();
    } catch (error: any) {
      alert('Lỗi lưu người dùng: ' + (error.message || 'Không thể lưu thông tin người dùng'));
    }
  };

  const togglePermission = (permId: string, role: VaiTro) => {
    if (role === VaiTro.QUAN_TRI_VIEN) return;
    setPermissions(prev => prev.map(p => {
      if (p.id === permId) {
        const hasRole = p.allowedRoles.includes(role);
        const newRoles = hasRole
          ? p.allowedRoles.filter(r => r !== role)
          : [...p.allowedRoles, role];
        return { ...p, allowedRoles: newRoles };
      }
      return p;
    }));
  };

  const savePermissions = async () => {
    setIsSavingPerms(true);
    try {
      await ApiService.savePermissions(permissions);
      alert('Đã cập nhật ma trận phân quyền hệ thống thành công!');
    } catch (err: any) {
      alert(err.message);
    } finally {
      setIsSavingPerms(false);
    }
  };

  const resetPermissionsToDefault = async () => {
    if (window.confirm('Bạn có chắc chắn muốn khôi phục phân quyền về mặc định ban đầu?')) {
      setLoading(true);
      try {
        const defaults = await ApiService.resetPermissions();
        setPermissions(defaults);
      } catch (error: any) {
        alert('Lỗi reset phân quyền: ' + (error.message || 'Không thể reset phân quyền'));
      } finally {
        setLoading(false);
      }
    }
  };

  const clearLogs = async () => {
    if (window.confirm('Xác nhận dọn sạch toàn bộ nhật ký hệ thống?')) {
      try {
        await ApiService.clearLogs();
        refreshData();
      } catch (error: any) {
        alert('Lỗi xóa logs: ' + (error.message || 'Không thể xóa nhật ký'));
      }
    }
  };

  const toggleDateExpansion = (date: string) => {
    setExpandedDates(prev => ({
      ...prev,
      [date]: !prev[date]
    }));
  };

  const groupedLogs = useMemo(() => {
    const groups: Record<string, NhatKy[]> = {};
    logs.forEach(log => {
      const dateKey = new Date(log.thoiGian).toLocaleDateString('vi-VN', { year: 'numeric', month: 'long', day: 'numeric' });
      if (!groups[dateKey]) groups[dateKey] = [];
      groups[dateKey].push(log);
    });
    return groups;
  }, [logs]);

  const saveSmtpSettings = async () => {
    if (!smtpSettings) return;
    setIsSavingSettings(true);
    try {
      await ApiService.saveSettings({ smtp: smtpSettings });
      alert('Đã lưu cài đặt SMTP!');
    } catch (error: any) {
      alert('Lỗi lưu cài đặt: ' + (error.message || 'Không thể lưu cài đặt SMTP'));
    } finally {
      setIsSavingSettings(false);
    }
  };

  const handleTestSmtp = async () => {
    if (!smtpSettings || !testEmail) {
      return alert('Vui lòng nhập địa chỉ email để kiểm tra');
    }

    // Validate email format
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(testEmail)) {
      return alert('Địa chỉ email không hợp lệ');
    }

    setIsTestingSmtp(true);
    try {
      const result = await ApiService.testSmtp(testEmail, smtpSettings);
      alert(result.message || 'Thành công! Email đã được gửi.');
    } catch (err: any) {
      alert(err.message || 'Lỗi khi gửi email. Vui lòng kiểm tra lại cấu hình SMTP.');
    } finally {
      setIsTestingSmtp(false);
    }
  };

  const saveAiSettings = async () => {
    setIsSavingAi(true);
    try {
      const currentSettings: any = await ApiService.getSettings();
      await ApiService.saveSettings({ ...currentSettings, ai: aiSettings });
      alert('Đã cập nhật cấu hình AI OCR!');
    } catch (error: any) {
      alert('Lỗi lưu cấu hình AI: ' + (error.message || 'Không thể lưu cấu hình'));
    } finally {
      setIsSavingAi(false);
    }
  };

  return (
    <div className="space-y-6 animate-in fade-in duration-500">
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
          <h2 className="text-2xl font-black text-slate-800 dark:text-white tracking-tight">Trung tâm Quản trị</h2>
          <p className="text-sm text-slate-500 dark:text-slate-400 font-medium">Cấu hình hệ thống, bảo mật và tài khoản.</p>
        </div>
        <div className="flex items-center space-x-3">
          {activeTab === 'logs' && (
            <button onClick={clearLogs} className="px-5 py-3 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-[10px] font-black uppercase tracking-widest rounded-2xl hover:bg-red-100 transition-all border border-red-100 dark:border-red-900/30">
              Dọn sạch Log
            </button>
          )}
          {activeTab === 'users' && (
            <button onClick={startNew} className="bg-blue-600 hover:bg-blue-700 text-white font-black py-3 px-6 rounded-2xl shadow-xl shadow-blue-500/20 transition-all active:scale-95 flex items-center">
              + TẠO TÀI KHOẢN
            </button>
          )}
        </div>
      </div>

      <div className="flex bg-gray-100 dark:bg-slate-900/80 p-1.5 rounded-2xl w-fit border border-gray-200 dark:border-slate-800 shadow-sm overflow-x-auto">
        {[
          { id: 'users', label: 'Thành viên' },
          { id: 'permissions', label: 'Phân quyền' },
          { id: 'logs', label: 'Audit log' },
          { id: 'settings', label: 'Cài đặt' },
          { id: 'ai_ocr', label: 'AI OCR' }
        ].map((tab) => (
          <button key={tab.id} onClick={() => setActiveTab(tab.id as TabType)} className={`px-6 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all whitespace-nowrap ${activeTab === tab.id ? 'bg-white dark:bg-slate-800 text-blue-600 dark:text-blue-400 shadow-xl' : 'text-slate-500 hover:text-slate-800 dark:hover:text-slate-200'}`}>
            {tab.label}
          </button>
        ))}
      </div>

      {activeTab === 'users' && (
        <div className="bg-white dark:bg-slate-900 rounded-[2rem] border border-gray-200 dark:border-slate-800 overflow-hidden shadow-sm">
          <div className="overflow-x-auto">
            <table className="w-full text-left">
              <thead className="bg-gray-50/50 dark:bg-slate-800/50 border-b border-gray-100 dark:border-slate-800">
                <tr>
                  <th className="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Thành viên</th>
                  <th className="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Email</th>
                  <th className="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Vai trò</th>
                  <th className="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest text-right">Thao tác</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100 dark:divide-slate-800">
                {users.map(u => (
                  <tr key={u.id} className="hover:bg-gray-50/50 dark:hover:bg-slate-800/30 transition-colors group">
                    <td className="px-8 py-5 flex items-center">
                      <div className="w-10 h-10 rounded-xl bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 font-black mr-4">{u.fullName.charAt(0)}</div>
                      <div>
                        <p className="text-sm font-black text-slate-800 dark:text-slate-200">{u.fullName}</p>
                        <p className="text-xs text-slate-400 font-mono">@{u.username}</p>
                      </div>
                    </td>
                    <td className="px-8 py-5">
                      {u.email ? (
                        <p className="text-sm text-slate-600 dark:text-slate-300">{u.email}</p>
                      ) : (
                        <p className="text-sm text-slate-400 italic">Chưa có</p>
                      )}
                    </td>
                    <td className="px-8 py-5">
                      <span className={`px-3 py-1 rounded-lg text-[9px] font-black uppercase ${u.role === VaiTro.QUAN_TRI_VIEN ? 'bg-purple-100 text-purple-700' : u.role === VaiTro.NHAN_VIEN_XU_LY ? 'bg-blue-100 text-blue-700' : 'bg-slate-100 text-slate-600'}`}>
                        {u.role.replace(/_/g, ' ')}
                      </span>
                    </td>
                    <td className="px-8 py-5 text-right space-x-2">
                      <button onClick={(e) => handleResetPassword(u, e)} className="p-2 text-orange-500 hover:bg-orange-50 dark:hover:bg-orange-900/20 rounded-xl">🔑</button>
                      <button onClick={() => setEditingUser(u)} className="p-2 text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-xl">✎</button>
                      <button onClick={(e) => handleDeleteUser(u.id, e)} className="p-2 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl">🗑</button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {activeTab === 'permissions' && (
        <div className="space-y-6">
          <div className="bg-white dark:bg-slate-900 rounded-[2rem] border border-gray-200 dark:border-slate-800 overflow-hidden shadow-sm">
            <div className="overflow-x-auto">
              <table className="w-full text-left">
                <thead className="bg-gray-50/50 dark:bg-slate-800/50 border-b border-gray-100 dark:border-slate-800">
                  <tr>
                    <th className="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Quyền hạn hệ thống</th>
                    <th className="px-8 py-5 text-center text-[10px] font-black text-purple-600 uppercase tracking-widest">Quản trị</th>
                    <th className="px-8 py-5 text-center text-[10px] font-black text-blue-600 uppercase tracking-widest">Nhân viên</th>
                    <th className="px-8 py-5 text-center text-[10px] font-black text-slate-500 uppercase tracking-widest">Người xem</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-100 dark:divide-slate-800 font-sans">
                  {permissions.map(p => (
                    <tr key={p.id} className="hover:bg-gray-50/50 dark:hover:bg-slate-800/30 transition-colors">
                      <td className="px-8 py-5">
                        <div className="flex items-center space-x-3">
                          <span className="text-[8px] font-black px-1.5 py-0.5 bg-slate-100 dark:bg-slate-800 text-slate-400 rounded-md border border-slate-200 dark:border-slate-700 uppercase">{p.nhom}</span>
                          <p className="text-sm font-black text-slate-800 dark:text-white">{p.ten}</p>
                        </div>
                        <p className="text-[11px] text-slate-400 mt-1">{p.moTa}</p>
                      </td>
                      {[VaiTro.QUAN_TRI_VIEN, VaiTro.NHAN_VIEN_XU_LY, VaiTro.NGUOI_XEM].map(role => (
                        <td key={role} className="px-8 py-5 text-center">
                          <button
                            disabled={role === VaiTro.QUAN_TRI_VIEN}
                            onClick={() => togglePermission(p.id, role)}
                            className={`w-10 h-10 rounded-2xl flex items-center justify-center mx-auto transition-all ${p.allowedRoles.includes(role)
                              ? (role === VaiTro.QUAN_TRI_VIEN ? 'bg-purple-600 text-white' : role === VaiTro.NHAN_VIEN_XU_LY ? 'bg-blue-600 text-white' : 'bg-slate-600 text-white')
                              : 'bg-slate-50 dark:bg-slate-800 text-slate-200 dark:text-slate-700 border border-dashed border-slate-200 dark:border-slate-700'
                              }`}
                          >
                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7" /></svg>
                          </button>
                        </td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
          <div className="flex flex-col sm:flex-row justify-end space-y-3 sm:space-y-0 sm:space-x-4">
            <button
              onClick={resetPermissionsToDefault}
              className="px-8 py-4 bg-white dark:bg-slate-900 border-2 border-slate-100 dark:border-slate-800 text-slate-500 font-black text-[10px] uppercase rounded-2xl hover:bg-red-50 hover:text-red-500 hover:border-red-100 transition-all"
            >
              Khôi phục mặc định
            </button>
            <button
              disabled={isSavingPerms}
              onClick={savePermissions}
              className="px-12 py-4 bg-blue-600 text-white font-black text-[10px] uppercase rounded-2xl shadow-xl shadow-blue-500/30 hover:bg-blue-700 transition-all flex items-center justify-center min-w-[200px]"
            >
              {isSavingPerms ? 'Đang cập nhật...' : 'Lưu ma trận phân quyền'}
            </button>
          </div>
        </div>
      )}

      {activeTab === 'logs' && (
        <div className="space-y-8 relative pl-6">
          {/* Line timeline dọc */}
          <div className="absolute left-[7px] top-4 bottom-0 w-0.5 bg-slate-200 dark:bg-slate-700"></div>

          {Object.entries(groupedLogs).map(([date, items]) => {
            const isExpanded = expandedDates[date];
            return (
              <div key={date} className="relative">
                {/* Chấm tròn mốc thời gian */}
                <div className="absolute -left-[23px] top-1.5 w-4 h-4 rounded-full bg-blue-600 dark:bg-blue-500 border-2 border-white dark:border-slate-900 z-10 shadow-lg dark:shadow-blue-500/20"></div>

                {/* Header ngày với chức năng đóng/mở */}
                <button
                  onClick={() => toggleDateExpansion(date)}
                  className="flex items-center space-x-3 mb-4 group cursor-pointer focus:outline-none"
                >
                  <h3 className="text-[10px] font-black text-blue-600 dark:text-blue-400 uppercase tracking-[0.2em] bg-blue-50 dark:bg-blue-900/20 px-3 py-1 rounded-lg border border-blue-100 dark:border-blue-900/30">
                    {date}
                  </h3>
                  <div className="flex items-center text-slate-400 dark:text-slate-500 text-[10px] font-bold uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">
                    <span>{(items as any[]).length} thao tác</span>
                    <svg className={`w-3 h-3 ml-2 transform transition-transform ${isExpanded ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M19 9l-7 7-7-7" />
                    </svg>
                  </div>
                </button>

                {/* Danh sách log (Accordion Content) */}
                <div className={`space-y-3 overflow-hidden transition-all duration-300 ease-in-out ${isExpanded ? 'max-h-[5000px] opacity-100' : 'max-h-0 opacity-0'}`}>
                  {(items as NhatKy[]).map(log => (
                    <div key={log.id} className="p-5 bg-white dark:bg-slate-900 rounded-2xl border border-gray-100 dark:border-slate-800 shadow-sm hover:border-blue-200 dark:hover:border-blue-900/40 transition-all group">
                      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                        <div className="flex items-start space-x-4">
                          <div className="text-[10px] font-mono font-black text-slate-400 dark:text-slate-400 min-w-[60px] pt-1">
                            {new Date(log.thoiGian).toLocaleTimeString('vi-VN', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
                          </div>
                          <div>
                            <div className="flex items-center space-x-2">
                              <span className="text-sm font-black text-slate-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">{log.nguoiThucHien}</span>
                              <span className={`text-[9px] font-black uppercase px-2 py-0.5 rounded-lg border ${log.hanhDong.includes('Xóa') ? 'bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 border-red-100 dark:border-red-900/30' :
                                log.hanhDong.includes('Tạo') ? 'bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 border-green-100 dark:border-green-900/30' :
                                  log.hanhDong.includes('Đăng nhập') ? 'bg-purple-50 dark:bg-purple-900/20 text-purple-600 dark:text-purple-400 border-purple-100 dark:border-purple-900/30' :
                                    'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 border-blue-100 dark:border-blue-900/30'
                                }`}>
                                {log.hanhDong}
                              </span>
                            </div>
                            <p className="text-xs text-slate-500 dark:text-slate-400 mt-1.5 leading-relaxed">{log.chiTiet}</p>
                          </div>
                        </div>
                        <div className="flex items-center space-x-4 ml-auto md:ml-0">
                          <span className="text-[9px] font-mono font-bold text-slate-600 dark:text-slate-300 bg-gray-50 dark:bg-slate-800/50 px-3 py-1.5 rounded-md border border-gray-200 dark:border-slate-700">
                            🌐 {log.ipAddress}
                          </span>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
          {logs.length === 0 && (
            <div className="py-20 text-center">
              <div className="text-4xl mb-4">📜</div>
              <p className="text-xs font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest">Hệ thống chưa ghi nhận thao tác nào</p>
            </div>
          )}
        </div>
      )}

      {activeTab === 'settings' && (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 animate-in slide-in-from-bottom-4 duration-500">
          <div className="bg-white dark:bg-slate-900 rounded-[2rem] border border-gray-200 dark:border-slate-800 p-8 shadow-sm space-y-6">
            <div className="flex items-center space-x-3 mb-2">
              <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-xl flex items-center justify-center text-blue-600">📧</div>
              <h3 className="text-lg font-black text-slate-800 dark:text-white uppercase tracking-tighter">Cấu hình SMTP</h3>
            </div>
            {smtpSettings ? (
              <div className="space-y-4">
                <div className="space-y-1">
                  <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-2">Máy chủ (Host)</label>
                  <input className="w-full px-5 py-4 rounded-xl border border-slate-100 dark:border-slate-800 bg-gray-50 dark:bg-slate-800 text-sm font-bold dark:text-white outline-none focus:ring-2 focus:ring-blue-500/20" value={smtpSettings.host} onChange={e => setSmtpSettings({ ...smtpSettings, host: e.target.value })} placeholder="smtp.gmail.com" />
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-1">
                    <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-2">Cổng (Port)</label>
                    <input type="number" className="w-full px-5 py-4 rounded-xl border border-slate-100 dark:border-slate-800 bg-gray-50 dark:bg-slate-800 text-sm font-bold dark:text-white outline-none focus:ring-2 focus:ring-blue-500/20" value={smtpSettings.port} onChange={e => setSmtpSettings({ ...smtpSettings, port: parseInt(e.target.value) })} />
                  </div>
                  <div className="space-y-1">
                    <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-2">Bảo mật</label>
                    <select className="w-full px-5 py-4 rounded-xl border border-slate-100 dark:border-slate-800 bg-gray-50 dark:bg-slate-800 text-sm font-bold dark:text-white outline-none focus:ring-2 focus:ring-blue-500/20" value={smtpSettings.secure ? 'true' : 'false'} onChange={e => setSmtpSettings({ ...smtpSettings, secure: e.target.value === 'true' })}>
                      <option value="true">SSL / TLS</option>
                      <option value="false">STARTTLS</option>
                    </select>
                  </div>
                </div>
                <div className="space-y-1">
                  <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-2">Tên đăng nhập</label>
                  <input className="w-full px-5 py-4 rounded-xl border border-slate-100 dark:border-slate-800 bg-gray-50 dark:bg-slate-800 text-sm font-bold dark:text-white outline-none focus:ring-2 focus:ring-blue-500/20" value={smtpSettings.user} onChange={e => setSmtpSettings({ ...smtpSettings, user: e.target.value })} placeholder="user@gmail.com" />
                </div>
                <div className="space-y-1">
                  <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-2">Mật khẩu ứng dụng</label>
                  <input type="password" className="w-full px-5 py-4 rounded-xl border border-slate-100 dark:border-slate-800 bg-gray-50 dark:bg-slate-800 text-sm font-bold dark:text-white outline-none focus:ring-2 focus:ring-blue-500/20" value={smtpSettings.pass} onChange={e => setSmtpSettings({ ...smtpSettings, pass: e.target.value })} placeholder="••••••••••••" />
                </div>

                <div className="pt-4 space-y-3">
                  <button onClick={saveSmtpSettings} disabled={isSavingSettings} className="w-full py-4 bg-blue-600 text-white font-black rounded-xl shadow-lg shadow-blue-500/20 hover:bg-blue-700 transition-all active:scale-95 flex items-center justify-center">
                    {isSavingSettings ? 'ĐANG LƯU...' : 'CẬP NHẬT CẤU HÌNH'}
                  </button>

                  <div className="space-y-2">
                    <div className="flex gap-2">
                      <input 
                        type="email"
                        className="flex-1 px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100 text-xs font-bold placeholder:text-slate-400 dark:placeholder:text-slate-500 outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-300 dark:focus:border-blue-600 transition-all" 
                        placeholder="Email nhận thử (VD: test@example.com)" 
                        value={testEmail} 
                        onChange={e => setTestEmail(e.target.value)}
                        onKeyPress={e => {
                          if (e.key === 'Enter' && !isTestingSmtp && testEmail && smtpSettings) {
                            handleTestSmtp();
                          }
                        }}
                      />
                      <button 
                        onClick={handleTestSmtp} 
                        disabled={isTestingSmtp || !testEmail || !smtpSettings?.host || !smtpSettings?.user || !smtpSettings?.pass} 
                        className="px-6 py-3 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 text-[10px] font-black uppercase tracking-widest rounded-xl hover:bg-slate-200 dark:hover:bg-slate-700 hover:text-slate-700 dark:hover:text-slate-100 transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-slate-100 disabled:dark:hover:bg-slate-800 flex items-center justify-center min-w-[120px]"
                      >
                        {isTestingSmtp ? (
                          <>
                            <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                            ĐANG GỬI...
                          </>
                        ) : 'KIỂM TRA'}
                      </button>
                    </div>
                    <p className="text-[10px] text-slate-400 dark:text-slate-500 px-2">
                      Nhập email để nhận thư kiểm tra cấu hình SMTP
                    </p>
                  </div>
                </div>
              </div>
            ) : (
              <div className="py-20 text-center space-y-4">
                <div className="animate-spin w-10 h-10 border-4 border-blue-600 border-t-transparent rounded-full mx-auto"></div>
                <p className="text-xs font-black text-slate-400 uppercase tracking-widest">Đang tải cấu hình SMTP...</p>
              </div>
            )}
          </div>

          <div className="bg-slate-50 dark:bg-slate-900 rounded-[2rem] border border-gray-200 dark:border-slate-800 p-8 shadow-sm space-y-6">
            <div className="flex items-center space-x-3 mb-2">
              <div className="w-10 h-10 bg-purple-100 dark:bg-purple-900/30 rounded-xl flex items-center justify-center text-purple-600">⚙️</div>
              <h3 className="text-lg font-black text-slate-800 dark:text-white uppercase tracking-tighter">Thông tin hệ thống</h3>
            </div>
            {systemInfo ? (
              <div className="space-y-4">
                <div className="flex justify-between p-5 bg-white dark:bg-slate-800 rounded-2xl border border-gray-100 dark:border-slate-700 shadow-sm transition-transform hover:scale-[1.02]">
                  <span className="text-xs font-bold text-slate-400 uppercase tracking-widest">Dung lượng DB</span>
                  <span className="text-sm font-black text-blue-600">{systemInfo.storageUsed}</span>
                </div>
                <div className="flex justify-between p-5 bg-white dark:bg-slate-800 rounded-2xl border border-gray-100 dark:border-slate-700 shadow-sm transition-transform hover:scale-[1.02]">
                  <span className="text-xs font-bold text-slate-400 uppercase tracking-widest">Phiên bản lõi</span>
                  <span className="text-sm font-black text-slate-800 dark:text-white">{systemInfo.version}</span>
                </div>
                <div className="flex justify-between p-5 bg-white dark:bg-slate-800 rounded-2xl border border-gray-100 dark:border-slate-700 shadow-sm transition-transform hover:scale-[1.02]">
                  <span className="text-xs font-bold text-slate-400 uppercase tracking-widest">Môi trường</span>
                  <span className="text-sm font-black text-green-600">Production</span>
                </div>
                <div className="flex justify-between p-5 bg-white dark:bg-slate-800 rounded-2xl border border-gray-100 dark:border-slate-700 shadow-sm transition-transform hover:scale-[1.02]">
                  <span className="text-xs font-bold text-slate-400 uppercase tracking-widest">Sao lưu cuối</span>
                  <span className="text-sm font-black text-slate-800 dark:text-white">{systemInfo.lastBackup}</span>
                </div>

                <div className="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-900/30 rounded-2xl">
                  <p className="text-[10px] text-blue-600 font-bold uppercase tracking-wide leading-relaxed">
                    Hệ thống đang hoạt động ổn định trên kiến trúc Cloud Hybrid. Tất cả dữ liệu được mã hóa AES-256.
                  </p>
                </div>
              </div>
            ) : (
              <div className="py-20 text-center space-y-4">
                <div className="animate-spin w-10 h-10 border-4 border-purple-600 border-t-transparent rounded-full mx-auto"></div>
                <p className="text-xs font-black text-slate-400 uppercase tracking-widest">Đang kết nối trái tim hệ thống...</p>
              </div>
            )}
          </div>
        </div>
      )}

      {activeTab === 'ai_ocr' && (
        <div className="space-y-8 max-w-4xl">
          <div className="bg-white dark:bg-slate-900 rounded-[2.5rem] border border-gray-200 dark:border-slate-800 p-10 shadow-sm space-y-8">
            <div className="flex items-center space-x-4 mb-4">
              <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center text-blue-600 text-2xl">🤖</div>
              <div>
                <h3 className="text-xl font-black text-slate-800 dark:text-white uppercase tracking-tighter">Cấu hình Trí tuệ nhân tạo</h3>
                <p className="text-xs text-slate-400 font-bold uppercase tracking-widest">Lựa chọn bộ não xử lý hồ sơ</p>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {[
                { id: 'gemini', name: 'Google Gemini', icon: '✨', desc: 'Cloud AI (Cần API Key)' },
                { id: 'ollama', name: 'Ollama Local', icon: '🦙', desc: 'Chạy nội bộ trên máy' },
                { id: 'anything_llm', name: 'AnythingLLM', icon: '📦', desc: 'Enterprise Workspace' }
              ].map(p => (
                <button
                  key={p.id}
                  onClick={() => setAiSettings({ ...aiSettings, provider: p.id })}
                  className={`p-6 rounded-[2rem] border-2 transition-all flex flex-col items-center text-center space-y-2 group ${aiSettings.provider === p.id
                    ? 'border-blue-600 bg-blue-50/50 dark:bg-blue-900/20'
                    : 'border-slate-100 dark:border-slate-800 hover:border-blue-200'
                    }`}
                >
                  <span className="text-3xl group-hover:scale-110 transition-transform">{p.icon}</span>
                  <span className="text-sm font-black text-slate-800 dark:text-white">{p.name}</span>
                  <span className="text-[10px] text-slate-400 font-medium">{p.desc}</span>
                </button>
              ))}
            </div>

            <div className="pt-6 space-y-6">
              {aiSettings.provider === 'gemini' && (
                <div className="space-y-4 animate-in slide-in-from-bottom-2">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-2">Gemini API Key</label>
                      <input
                        type="password"
                        className="w-full px-6 py-4 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/50 font-bold text-sm dark:text-white outline-none focus:ring-4 focus:ring-blue-500/10"
                        value={aiSettings.gemini.apiKey}
                        onChange={e => setAiSettings({ ...aiSettings, gemini: { ...aiSettings.gemini, apiKey: e.target.value } })}
                        placeholder="AIzaSy..."
                      />
                    </div>
                    <div className="space-y-2">
                      <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-2">Model</label>
                      <input
                        className="w-full px-6 py-4 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/50 font-bold text-sm dark:text-white outline-none focus:ring-4 focus:ring-blue-500/10"
                        value={aiSettings.gemini.model}
                        onChange={e => setAiSettings({ ...aiSettings, gemini: { ...aiSettings.gemini, model: e.target.value } })}
                        placeholder="gemini-2.0-flash"
                      />
                    </div>
                  </div>
                </div>
              )}

              {aiSettings.provider === 'ollama' && (
                <div className="space-y-4 animate-in slide-in-from-bottom-2">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-2">Ollama URL</label>
                      <input
                        className="w-full px-6 py-4 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/50 font-bold text-sm dark:text-white outline-none focus:ring-4 focus:ring-blue-500/10"
                        value={aiSettings.ollama.url}
                        onChange={e => setAiSettings({ ...aiSettings, ollama: { ...aiSettings.ollama, url: e.target.value } })}
                        placeholder="http://localhost:11434"
                      />
                    </div>
                    <div className="space-y-2">
                      <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-2">Vision Model</label>
                      <input
                        className="w-full px-6 py-4 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/50 font-bold text-sm dark:text-white outline-none focus:ring-4 focus:ring-blue-500/10"
                        value={aiSettings.ollama.model}
                        onChange={e => setAiSettings({ ...aiSettings, ollama: { ...aiSettings.ollama, model: e.target.value } })}
                        placeholder="llama3.2-vision"
                      />
                    </div>
                  </div>
                  <div className="p-4 bg-orange-50 dark:bg-orange-900/20 border border-orange-100 dark:border-orange-900/30 rounded-2xl">
                    <p className="text-[10px] text-orange-600 font-bold uppercase tracking-wide flex items-center">
                      <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                      Đảm bảo bạn đã cài đặt model Vision và Ollama cho phép truy cập từ Browser.
                    </p>
                  </div>
                </div>
              )}

              {aiSettings.provider === 'anything_llm' && (
                <div className="space-y-4 animate-in slide-in-from-bottom-2">
                  <div className="space-y-2">
                    <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-2">Endpoint URL</label>
                    <input
                      className="w-full px-6 py-4 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/50 font-bold text-sm dark:text-white outline-none focus:ring-4 focus:ring-blue-500/10"
                      value={aiSettings.anythingLLM.url}
                      onChange={e => setAiSettings({ ...aiSettings, anythingLLM: { ...aiSettings.anythingLLM, url: e.target.value } })}
                      placeholder="http://localhost:3001"
                    />
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-2">API Key</label>
                      <input
                        type="password"
                        className="w-full px-6 py-4 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/50 font-bold text-sm dark:text-white outline-none focus:ring-4 focus:ring-blue-500/10"
                        value={aiSettings.anythingLLM.apiKey}
                        onChange={e => setAiSettings({ ...aiSettings, anythingLLM: { ...aiSettings.anythingLLM, apiKey: e.target.value } })}
                      />
                    </div>
                    <div className="space-y-2">
                      <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-2">Workspace Slug</label>
                      <input
                        className="w-full px-6 py-4 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/50 font-bold text-sm dark:text-white outline-none focus:ring-4 focus:ring-blue-500/10"
                        value={aiSettings.anythingLLM.workspace}
                        onChange={e => setAiSettings({ ...aiSettings, anythingLLM: { ...aiSettings.anythingLLM, workspace: e.target.value } })}
                        placeholder="ten-workspace"
                      />
                    </div>
                  </div>
                </div>
              )}
            </div>

            <div className="pt-8 border-t border-slate-50 dark:border-slate-800">
              <button
                onClick={saveAiSettings}
                disabled={isSavingAi}
                className="w-full py-5 bg-blue-600 text-white font-black rounded-3xl shadow-2xl shadow-blue-500/30 hover:bg-blue-700 transition-all active:scale-95 disabled:opacity-50 flex items-center justify-center space-x-2"
              >
                <span>{isSavingAi ? 'ĐANG LƯU HỆ THỐNG...' : 'LƯU CẤU HÌNH AI OCR'}</span>
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Modals */}
      {editingUser && (
        <div className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-[500] p-4 animate-in fade-in duration-200">
          <div className="bg-white dark:bg-slate-800 rounded-3xl shadow-2xl w-full max-w-md overflow-hidden animate-in zoom-in duration-300">
            <div className="p-6 border-b border-gray-100 dark:border-slate-700 flex justify-between items-center bg-gray-50 dark:bg-slate-900/50">
              <h3 className="font-black text-gray-800 dark:text-white uppercase tracking-tighter">{editingUser.id ? 'Cập nhật tài khoản' : 'Thành viên mới'}</h3>
              <button onClick={() => setEditingUser(null)} className="p-2 text-gray-400 hover:text-red-500 transition-colors"><svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg></button>
            </div>
            <div className="p-8 space-y-6">
              <div>
                <label className="block text-[10px] font-black uppercase text-slate-400 tracking-widest mb-2 px-1">Họ và tên</label>
                <input className="w-full px-5 py-4 rounded-2xl border border-gray-100 dark:border-slate-600 bg-white dark:bg-slate-700 text-sm font-bold text-gray-800 dark:text-white outline-none focus:ring-4 focus:ring-blue-500/10 transition-all" value={editingUser.fullName} onChange={e => setEditingUser({ ...editingUser, fullName: e.target.value })} placeholder="VD: Nguyễn Văn A" />
              </div>
              <div>
                <label className="block text-[10px] font-black uppercase text-slate-400 tracking-widest mb-2 px-1">Tên đăng nhập</label>
                <input className="w-full px-5 py-4 rounded-2xl border border-gray-100 dark:border-slate-600 bg-white dark:bg-slate-700 text-sm font-bold text-gray-800 dark:text-white outline-none focus:ring-4 focus:ring-blue-500/10 transition-all" value={editingUser.username} onChange={e => setEditingUser({ ...editingUser, username: e.target.value.toLowerCase().replace(/\s+/g, '') })} placeholder="VD: vana_hanoi" />
              </div>
              <div>
                <label className="block text-[10px] font-black uppercase text-slate-400 tracking-widest mb-2 px-1">Email</label>
                <input type="email" className="w-full px-5 py-4 rounded-2xl border border-gray-100 dark:border-slate-600 bg-white dark:bg-slate-700 text-sm font-bold text-gray-800 dark:text-white outline-none focus:ring-4 focus:ring-blue-500/10 transition-all" value={editingUser.email || ''} onChange={e => setEditingUser({ ...editingUser, email: e.target.value })} placeholder="VD: vana@example.com" />
              </div>
              {!editingUser.id && (
                <div>
                  <div className="flex justify-between items-center mb-2">
                    <label className="text-[10px] font-black uppercase text-slate-400 tracking-widest px-1">Mật khẩu ban đầu</label>
                    <button onClick={() => setEditingUser({ ...editingUser, password: ApiService.generateStrongPassword() })} className="text-[9px] font-black text-blue-600 dark:text-blue-400 flex items-center hover:underline uppercase tracking-tighter">Mật khẩu mạnh</button>
                  </div>
                  <input type="text" className="w-full px-5 py-4 rounded-2xl border border-gray-100 dark:border-slate-600 bg-gray-50 dark:bg-slate-900 text-sm font-mono font-bold text-blue-600 outline-none transition-all" value={editingUser.password || ''} onChange={e => setEditingUser({ ...editingUser, password: e.target.value })} />
                </div>
              )}
              <div>
                <label className="block text-[10px] font-black uppercase text-slate-400 tracking-widest mb-2 px-1">Vai trò</label>
                <select className="w-full px-5 py-4 rounded-2xl border border-gray-100 dark:border-slate-600 bg-white dark:bg-slate-700 text-sm font-bold text-gray-800 dark:text-white outline-none transition-all cursor-pointer" value={editingUser.role} onChange={e => setEditingUser({ ...editingUser, role: e.target.value as VaiTro })}>
                  <option value={VaiTro.QUAN_TRI_VIEN}>Quản trị viên</option>
                  <option value={VaiTro.NHAN_VIEN_XU_LY}>Nhân viên xử lý</option>
                  <option value={VaiTro.NGUOI_XEM}>Người xem</option>
                </select>
              </div>
            </div>
            <div className="p-6 border-t border-gray-100 dark:border-slate-700 bg-gray-50 dark:bg-slate-900/50 flex space-x-4">
              <button onClick={() => setEditingUser(null)} className="flex-1 py-4 font-black text-xs text-slate-500 hover:bg-gray-200 dark:hover:bg-slate-700 rounded-2xl transition-all">HỦY</button>
              <button onClick={saveUser} className="flex-[2] py-4 bg-blue-600 text-white font-black text-xs rounded-2xl shadow-xl hover:bg-blue-700 transition-all active:scale-95">XÁC NHẬN LƯU</button>
            </div>
          </div>
        </div>
      )}

      {confirmResetUser && (
        <div className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-[500] p-4 animate-in fade-in duration-200">
          <div className="bg-white dark:bg-slate-800 rounded-[2.5rem] shadow-2xl w-full max-w-sm overflow-hidden animate-in zoom-in duration-300">
            <div className="p-8 text-center space-y-6">
              <div className="w-20 h-20 bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 rounded-3xl flex items-center justify-center mx-auto rotate-12 group-hover:rotate-0 transition-transform">
                <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" /></svg>
              </div>
              <div>
                <h3 className="text-xl font-black text-slate-800 dark:text-white uppercase tracking-tighter">Cấp lại mật khẩu?</h3>
                <p className="text-sm text-slate-500 dark:text-slate-400 mt-2">Xác nhận reset mật khẩu cho người dùng <span className="font-bold text-slate-800 dark:text-slate-200">@{confirmResetUser.username}</span>?</p>
              </div>
              <div className="flex flex-col space-y-3">
                <button
                  disabled={loading}
                  onClick={executeResetPassword}
                  className="w-full py-4 bg-orange-500 hover:bg-orange-600 text-white font-black text-xs uppercase tracking-widest rounded-2xl shadow-lg shadow-orange-500/20 transition-all active:scale-95 flex items-center justify-center"
                >
                  {loading ? (
                    <svg className="animate-spin h-5 w-5 text-white" viewBox="0 0 24 24">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                  ) : 'XÁC NHẬN CẤP LẠI'}
                </button>
                <button onClick={() => setConfirmResetUser(null)} className="w-full py-4 bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-300 font-black text-xs uppercase tracking-widest rounded-2xl hover:bg-slate-200 transition-all">THOÁT</button>
              </div>
            </div>
          </div>
        </div>
      )}

      {resettingUser && (
        <div className="fixed inset-0 bg-slate-950/80 backdrop-blur-md z-[999] flex items-center justify-center p-4 animate-in fade-in duration-300">
          <div className="bg-white dark:bg-slate-900 rounded-[3rem] shadow-2xl w-full max-w-md p-10 text-center space-y-10 animate-in zoom-in duration-500">
            <div className="relative">
              <div className="absolute inset-0 bg-orange-500 blur-3xl opacity-20 animate-pulse"></div>
              <div className="w-24 h-24 bg-gradient-to-tr from-orange-500 to-amber-400 text-white rounded-full flex items-center justify-center mx-auto shadow-2xl relative z-10">
                <svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
              </div>
            </div>
            <div>
              <h3 className="text-3xl font-black text-slate-800 dark:text-white tracking-tighter uppercase">Két sắt đã mở!</h3>
              <p className="text-sm text-slate-500 dark:text-slate-400 mt-2">Mật khẩu mới đã được tạo cho <span className="font-black text-orange-600">@{resettingUser.username}</span></p>
            </div>
            <div className="group relative">
              <div className="bg-slate-50 dark:bg-slate-800 p-8 rounded-[2rem] border-2 border-dashed border-slate-200 dark:border-slate-700 font-mono text-2xl font-black text-blue-600 tracking-widest break-all">
                {newGeneratedPassword}
              </div>
              <button
                onClick={() => { navigator.clipboard.writeText(newGeneratedPassword); }}
                className="absolute -top-3 -right-3 w-10 h-10 bg-white dark:bg-slate-700 shadow-xl rounded-full flex items-center justify-center text-slate-400 hover:text-blue-600 transition-colors border border-slate-100 dark:border-slate-600"
                title="Sao chép"
              >
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" /></svg>
              </button>
            </div>
            <button onClick={() => { setResettingUser(null); setNewGeneratedPassword(''); }} className="w-full py-5 bg-slate-900 border-b-4 border-slate-700 dark:bg-blue-600 dark:border-blue-800 text-white font-black rounded-3xl shadow-2xl hover:translate-y-1 hover:border-b-0 transition-all">HOÀN TẤT & ĐÓNG</button>
          </div>
        </div>
      )}
    </div>
  );
};

export default UserPage;