import React, { useEffect, useState, useMemo, useCallback } from 'react';
import { dataService } from '../services/dataService';
import { IUser, IAuditLog, IProject, IRole } from '../types';
import { Shield, UserPlus, Key, Pencil, Trash2, AlertTriangle, Check, Eye, EyeOff, RefreshCw, Copy, Info, Search, Download, Users, FileText, Loader2, MoreVertical, Clock, ChevronDown, ChevronRight } from 'lucide-react';
import Modal from '../components/Modal';
import Button from '../components/common/Button';
import Input from '../components/common/Input';
import { useUIStore } from '../store/useUIStore';

// Constants
const PASSWORD_LENGTH = 12;
const LOGS_PER_PAGE = 50;

// Utility: Generate strong password
const generateStrongPassword = (): string => {
  const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+";
  let retVal = "";
  // Đảm bảo đủ độ mạnh
  retVal += "ABC";
  retVal += "abc";
  retVal += "123";
  retVal += "!@#";

  // Fill phần còn lại
  for (let i = 0, n = charset.length; i < PASSWORD_LENGTH - 4; ++i) {
    retVal += charset.charAt(Math.floor(Math.random() * n));
  }

  // Xáo trộn
  return retVal.split('').sort(() => 0.5 - Math.random()).join('');
};

// Component: Password Generator Control
const PasswordGeneratorControl: React.FC<{
  password: string;
  onRegenerate: () => void;
  showPassword: boolean;
  onTogglePassword: () => void;
  isCopied: boolean;
  onCopy: () => void;
}> = ({ password, onRegenerate, showPassword, onTogglePassword, isCopied, onCopy }) => (
  <div>
    <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
      Mật khẩu tự sinh ({PASSWORD_LENGTH} ký tự) <span className="text-red-500">*</span>
    </label>
    <div className="flex gap-2">
      <div className="relative flex-1">
        <input
          type={showPassword ? "text" : "password"}
          value={password}
          readOnly
          className="w-full border border-slate-300 dark:border-slate-600 rounded-md p-2 bg-slate-100 dark:bg-slate-900 text-slate-900 dark:text-white font-mono tracking-wider pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <button
          onClick={onTogglePassword}
          className="absolute right-2 top-2.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"
          type="button"
          title={showPassword ? "Ẩn mật khẩu" : "Hiện mật khẩu"}
        >
          {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
        </button>
      </div>
      <button
        onClick={onRegenerate}
        className="p-2 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-300 transition-colors"
        title="Tạo lại mật khẩu mới"
        type="button"
      >
        <RefreshCw size={20} />
      </button>
      <button
        onClick={onCopy}
        className={`p-2 border rounded transition-colors ${isCopied ? 'bg-green-100 border-green-300 text-green-600 dark:bg-green-900/30 dark:text-green-400' : 'bg-blue-50 border-blue-200 text-blue-600 hover:bg-blue-100 dark:bg-blue-900/20 dark:border-blue-800 dark:text-blue-400'}`}
        title="Sao chép"
        type="button"
      >
        {isCopied ? <Check size={20} /> : <Copy size={20} />}
      </button>
    </div>
    <p className="text-xs text-slate-500 mt-1 flex items-center gap-1">
      <Shield size={12} className="text-green-500" /> Mật khẩu mạnh bao gồm: Chữ hoa, thường, số và ký tự đặc biệt.
    </p>
  </div>
);

// Component: Scope Selector
const ScopeSelector: React.FC<{
  projects: IProject[];
  selectedScope: string[];
  onChange: (scope: string[]) => void;
}> = ({ projects, selectedScope, onChange }) => {
  const hasAllAccess = selectedScope.includes('Tất cả');
  const [searchQuery, setSearchQuery] = useState('');

  // Filter projects based on search query
  const filteredProjects = projects.filter(project => {
    if (!searchQuery.trim()) return true;
    const query = searchQuery.toLowerCase();
    return (
      project.name.toLowerCase().includes(query) ||
      (project.code && project.code.toLowerCase().includes(query))
    );
  });

  return (
    <div>
      <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
        Phạm vi truy cập dự án
      </label>
      <div className="border border-slate-300 dark:border-slate-600 rounded-md p-3 bg-slate-50 dark:bg-slate-900/50">
        {/* Search Input */}
        {!hasAllAccess && projects.length > 0 && (
          <div className="mb-3">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" size={16} />
              <input
                type="text"
                placeholder="Tìm kiếm dự án theo tên hoặc mã..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-9 pr-3 py-2 text-sm border border-slate-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>
          </div>
        )}
        
        <div className="space-y-2 max-h-48 overflow-y-auto">
          <label className="flex items-center space-x-2 cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-800 p-2 rounded">
            <input
              type="checkbox"
              checked={hasAllAccess}
              onChange={(e) => {
                onChange(e.target.checked ? ['Tất cả'] : []);
                setSearchQuery(''); // Clear search when selecting "All"
              }}
              className="rounded border-slate-300 text-blue-600 focus:ring-blue-500"
            />
            <span className="text-sm text-slate-700 dark:text-slate-300 font-medium">Tất cả dự án</span>
          </label>
          {!hasAllAccess && (
            <>
              {filteredProjects.length === 0 ? (
                <div className="text-sm text-slate-500 dark:text-slate-400 text-center py-4">
                  {searchQuery ? 'Không tìm thấy dự án nào.' : 'Không có dự án nào.'}
                </div>
              ) : (
                filteredProjects.map((project) => (
                  <label key={project._id} className="flex items-center space-x-2 cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-800 p-2 rounded">
                    <input
                      type="checkbox"
                      checked={selectedScope.includes(project._id)}
                      onChange={(e) => {
                        if (e.target.checked) {
                          onChange([...selectedScope, project._id]);
                        } else {
                          onChange(selectedScope.filter(id => id !== project._id));
                        }
                      }}
                      className="rounded border-slate-300 text-blue-600 focus:ring-blue-500"
                    />
                    <span className="text-sm text-slate-700 dark:text-slate-300">
                      {project.name} {project.code && `(${project.code})`}
                    </span>
                  </label>
                ))
              )}
            </>
          )}
        </div>
      </div>
      <p className="text-xs text-slate-500 mt-1">Chọn các dự án mà người dùng có thể truy cập. Chọn "Tất cả" để cấp quyền truy cập toàn bộ.</p>
    </div>
  );
};

// Helper functions
const formatScopeDisplay = (scope: any[]): string => {
  if (!scope || scope.length === 0) return 'Không có';
  
  return scope.map((item: any) => {
    if (typeof item === 'string') {
      return item;
    } else if (item && typeof item === 'object') {
      if (item.name) {
        return item.code ? `${item.name} (${item.code})` : item.name;
      }
      return item._id || String(item);
    }
    return String(item);
  }).join(', ');
};

const getScopeProjectId = (item: any): string => {
  if (typeof item === 'string') {
    return item;
  } else if (item && typeof item === 'object' && item._id) {
    return item._id;
  }
  return '';
};

const isScopeItemSelected = (scope: any[], projectId: string): boolean => {
  if (!scope || scope.length === 0) return false;
  return scope.some(item => {
    const itemId = getScopeProjectId(item);
    return itemId === projectId || item === projectId;
  });
};

const Governance: React.FC = () => {
  const [users, setUsers] = useState<IUser[]>([]);
  const [logs, setLogs] = useState<IAuditLog[]>([]);
  const [projects, setProjects] = useState<IProject[]>([]);
  const [roles, setRoles] = useState<IRole[]>([]);
  const { addNotification } = useUIStore();

  // Loading & Error States
  const [isLoading, setIsLoading] = useState(false);
  const [isLoadingLogs, setIsLoadingLogs] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);

  // When CSM manages identity, this page is read-only (create/edit/delete/reset moved to CSM).
  const [csmManaged, setCsmManaged] = useState(false);

  // Modal States
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
  const [isResetPasswordModalOpen, setIsResetPasswordModalOpen] = useState(false);
  const [editingUser, setEditingUser] = useState<IUser | null>(null);
  const [deletingUserId, setDeletingUserId] = useState<string | null>(null);
  const [actionMenuUser, setActionMenuUser] = useState<IUser | null>(null);
  const [isHistoryModalOpen, setIsHistoryModalOpen] = useState(false);
  const [historyUser, setHistoryUser] = useState<IUser | null>(null);
  const [historyLogs, setHistoryLogs] = useState<IAuditLog[]>([]);
  const [expandedDates, setExpandedDates] = useState<Set<string>>(new Set());

  // Form Data
  const [createFormData, setCreateFormData] = useState({
    name: '',
    email: '',
    role: '',
    department: '',
    password: '',
    scope: [] as string[],
    active: true
  });

  const [resetPasswordData, setResetPasswordData] = useState({
    userId: '',
    userName: '',
    newPassword: '',
  });

  // Password UI State
  const [showPassword, setShowPassword] = useState(false);
  const [isCopied, setIsCopied] = useState(false);

  // Search & Filter States
  const [userSearchQuery, setUserSearchQuery] = useState('');

  // Load data with parallel API calls
  const loadData = useCallback(async () => {
    setIsLoading(true);
    try {
      const [u, p, r] = await Promise.all([
        dataService.getUsers(),
        dataService.getProjects(),
        dataService.getRoles()
      ]);
      
      setUsers(u);
      setProjects(p);
      setRoles(r);
      
      // Set default role if not set and roles are loaded
      if (r.length > 0 && !createFormData.role) {
        const defaultRole = r.find(role => role.isActive && role.code === 'TECHNICIAN') || r.find(role => role.isActive) || null;
        if (defaultRole) {
          setCreateFormData(prev => ({ ...prev, role: defaultRole.name }));
        }
      }
    } catch (error: any) {
      addNotification('error', error.message || 'Lỗi khi tải dữ liệu.');
    } finally {
      setIsLoading(false);
    }
  }, [addNotification, createFormData.role]);

  const loadUserHistory = useCallback(async (userId: string) => {
    setIsLoadingLogs(true);
    try {
      const result = await dataService.getLogs(userId, 1, 1000);
      setHistoryLogs(result.data || []);
    } catch (error: any) {
      addNotification('error', error.message || 'Lỗi khi tải lịch sử người dùng.');
    } finally {
      setIsLoadingLogs(false);
    }
  }, [addNotification]);

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

  useEffect(() => {
    dataService.isCsmManaged().then(setCsmManaged).catch(() => setCsmManaged(false));
  }, []);

  // Filtered users
  const filteredUsers = useMemo(() => {
    if (!userSearchQuery.trim()) return users;
    const query = userSearchQuery.toLowerCase();
    return users.filter(user => 
      user.name.toLowerCase().includes(query) ||
      user.email.toLowerCase().includes(query) ||
      user.role.toLowerCase().includes(query) ||
      (user.department && user.department.toLowerCase().includes(query))
    );
  }, [users, userSearchQuery]);

  // Group history logs by date
  const groupedHistoryLogs = useMemo(() => {
    const grouped: Record<string, IAuditLog[]> = {};
    historyLogs.forEach(log => {
      const date = new Date(log.timestamp).toLocaleDateString('vi-VN');
      if (!grouped[date]) {
        grouped[date] = [];
      }
      grouped[date].push(log);
    });
    // Sort dates descending
    return Object.keys(grouped)
      .sort((a, b) => new Date(b).getTime() - new Date(a).getTime())
      .reduce((acc, date) => {
        acc[date] = grouped[date].sort((a, b) => 
          new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
        );
        return acc;
      }, {} as Record<string, IAuditLog[]>);
  }, [historyLogs]);

  const copyToClipboard = useCallback((text: string) => {
    navigator.clipboard.writeText(text);
    setIsCopied(true);
    addNotification('success', 'Đã sao chép mật khẩu vào bộ nhớ tạm');
    setTimeout(() => setIsCopied(false), 2000);
  }, [addNotification]);

  const handleOpenCreateModal = useCallback(() => {
    const defaultRole = roles.find(r => r.isActive && r.code === 'TECHNICIAN') || roles.find(r => r.isActive) || null;
    setCreateFormData({
      name: '',
      email: '',
      role: defaultRole?.name || '',
      department: '',
      password: generateStrongPassword(),
      scope: ['Tất cả'], // Mặc định là 'Tất cả' thay vì mảng rỗng
      active: true
    });
    setShowPassword(false);
    setIsCreateModalOpen(true);
  }, [roles]);

  const handleCreateUser = useCallback(async () => {
    // Chặn double-submit: nếu đang gửi thì bỏ qua các lần bấm tiếp theo.
    // Nếu không, lần bấm thứ 2 có thể tạo ra race và báo "Email already exists"
    // dù user đã được tạo thành công ở lần bấm đầu.
    if (isSubmitting) return;

    if (!createFormData.name || !createFormData.email || !createFormData.password) {
      addNotification('error', 'Vui lòng điền đầy đủ thông tin bắt buộc.');
      return;
    }
    // Chuẩn hóa email: bỏ khoảng trắng thừa và đưa về chữ thường (khớp với schema backend).
    const normalizedEmail = createFormData.email.trim().toLowerCase();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(normalizedEmail)) {
      addNotification('error', 'Email không hợp lệ.');
      return;
    }

    setIsSubmitting(true);
    try {
      // Đảm bảo scope luôn có giá trị, mặc định là ['Tất cả']
      // Kiểm tra kỹ: nếu scope là mảng rỗng hoặc undefined, dùng ['Tất cả']
      const finalScope = (createFormData.scope && Array.isArray(createFormData.scope) && createFormData.scope.length > 0)
        ? createFormData.scope
        : ['Tất cả'];

      const userData = {
        name: createFormData.name.trim(),
        email: normalizedEmail,
        role: createFormData.role,
        department: createFormData.department || undefined,
        scope: finalScope,
        password: createFormData.password,
        status: 'Active' as IUser['status'],
      };

      await dataService.createUser(userData);
      addNotification('success', 'Thêm người dùng thành công.');
      setIsCreateModalOpen(false);
      loadData();
    } catch (error: any) {
      addNotification('error', error.message || 'Lỗi khi tạo người dùng.');
    } finally {
      setIsSubmitting(false);
    }
  }, [createFormData, addNotification, loadData, isSubmitting]);

  const handleEditSave = useCallback(async () => {
    if (editingUser) {
      try {
        await dataService.updateUser(editingUser);
        addNotification('success', 'Cập nhật thông tin thành công.');
        await loadData();
        setEditingUser(null);
      } catch (error: any) {
        addNotification('error', error.message || 'Lỗi khi cập nhật người dùng.');
      }
    }
  }, [editingUser, addNotification, loadData]);

  const handleDeleteConfirm = useCallback(async () => {
    if (deletingUserId) {
      try {
        await dataService.deleteUser(deletingUserId);
        addNotification('success', 'Đã xóa người dùng.');
        await loadData();
        setDeletingUserId(null);
      } catch (error: any) {
        addNotification('error', error.message || 'Lỗi khi xóa người dùng.');
      }
    }
  }, [deletingUserId, addNotification, loadData]);

  const handleOpenResetPassword = useCallback((user: IUser) => {
    setResetPasswordData({
      userId: user._id,
      userName: user.name,
      newPassword: generateStrongPassword(),
    });
    setShowPassword(false);
    setIsResetPasswordModalOpen(true);
  }, []);

  const handleResetPasswordSubmit = useCallback(async () => {
    try {
      await dataService.resetUserPassword(resetPasswordData.userId, resetPasswordData.newPassword);
      addNotification('success', `Đã reset mật khẩu cho user ${resetPasswordData.userName}.`);
      setIsResetPasswordModalOpen(false);
    } catch (error: any) {
      addNotification('error', error.message || 'Có lỗi xảy ra khi reset mật khẩu.');
    }
  }, [resetPasswordData, addNotification]);

  const handleEditScopeChange = useCallback((scope: string[]) => {
    if (!editingUser) return;
    setEditingUser({ ...editingUser, scope });
  }, [editingUser]);

  const handleActionMenuClick = useCallback((user: IUser, event: React.MouseEvent) => {
    event.stopPropagation();
    setActionMenuUser(actionMenuUser?._id === user._id ? null : user);
  }, [actionMenuUser]);

  const handleOpenHistory = useCallback(async (user: IUser) => {
    setHistoryUser(user);
    setIsHistoryModalOpen(true);
    setExpandedDates(new Set());
    await loadUserHistory(user._id);
  }, [loadUserHistory]);

  const toggleDateExpand = useCallback((date: string) => {
    setExpandedDates(prev => {
      const next = new Set(prev);
      if (next.has(date)) {
        next.delete(date);
      } else {
        next.add(date);
      }
      return next;
    });
  }, []);

  // Close action menu when clicking outside
  useEffect(() => {
    const handleClickOutside = () => {
      setActionMenuUser(null);
    };
    if (actionMenuUser) {
      document.addEventListener('click', handleClickOutside);
      return () => document.removeEventListener('click', handleClickOutside);
    }
  }, [actionMenuUser]);

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold text-slate-800 dark:text-white">Quản trị người dùng</h1>
      </div>

      {/* Users Section */}
      <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden">
          <div className="p-6 border-b border-slate-200 dark:border-slate-700">
            <div className="flex justify-between items-center mb-4">
              <div>
                <h2 className="text-lg font-bold text-slate-800 dark:text-white">Người dùng hệ thống (RBAC)</h2>
                <p className="text-sm text-slate-500 dark:text-slate-400">Quản lý vai trò và quyền truy cập.</p>
              </div>
              {csmManaged ? (
                <span className="flex items-center gap-2 px-3 py-2 rounded-lg text-xs bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 border border-amber-200 dark:border-amber-800">
                  <Info size={14} /> Quản lý người dùng tại CSM (chỉ xem)
                </span>
              ) : (
                <button
                  onClick={handleOpenCreateModal}
                  className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 shadow-sm"
                >
                  <UserPlus size={16} />
                  <span>Thêm người dùng</span>
                </button>
              )}
            </div>
            
            {/* Search */}
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" size={18} />
              <Input
                placeholder="Tìm kiếm theo tên, email, vai trò..."
                value={userSearchQuery}
                onChange={(e) => setUserSearchQuery(e.target.value)}
                className="pl-10"
              />
            </div>
          </div>

          {isLoading ? (
            <div className="flex justify-center items-center py-12">
              <Loader2 className="animate-spin text-blue-600" size={32} />
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-slate-200 dark:divide-slate-700">
                <thead className="bg-slate-50 dark:bg-slate-700/50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Người dùng</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Vai trò</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Phạm vi</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Trạng thái</th>
                    <th className="px-6 py-3 text-right text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Thao tác</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-200 dark:divide-slate-700">
                  {filteredUsers.length === 0 ? (
                    <tr>
                      <td colSpan={5} className="px-6 py-8 text-center text-slate-500 dark:text-slate-400">
                        {userSearchQuery ? 'Không tìm thấy người dùng nào.' : 'Chưa có người dùng nào.'}
                      </td>
                    </tr>
                  ) : (
                    filteredUsers.map((user, index) => (
                      <tr key={user._id || index} className="hover:bg-slate-50 dark:hover:bg-slate-700/50">
                        <td className="px-6 py-4">
                          <div className="flex items-center">
                            <div className="h-8 w-8 rounded-full bg-slate-200 dark:bg-slate-600 flex items-center justify-center text-xs font-bold text-slate-600 dark:text-slate-200">
                              {user.name.charAt(0)}
                            </div>
                            <div className="ml-3">
                              <div className="text-sm font-medium text-slate-900 dark:text-white">{user.name}</div>
                              <div className="text-sm text-slate-500 dark:text-slate-400">{user.email}</div>
                            </div>
                          </div>
                        </td>
                        <td className="px-6 py-4 text-sm text-slate-700 dark:text-slate-300">
                          <span className="flex items-center gap-1"><Shield size={14} className="text-blue-500" /> {user.role}</span>
                        </td>
                        <td className="px-6 py-4 text-sm text-slate-500 dark:text-slate-400">
                          <div className="flex flex-wrap gap-1">
                            {user.scope && user.scope.length > 0 ? (
                              user.scope.map((item: any, idx: number) => {
                                const displayText = typeof item === 'string' 
                                  ? item 
                                  : (item?.name ? (item.code ? `${item.name} (${item.code})` : item.name) : item?._id || String(item));
                                return (
                                  <span 
                                    key={idx}
                                    className="inline-flex items-center px-2 py-1 rounded-md bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 text-xs font-medium"
                                  >
                                    {displayText}
                                  </span>
                                );
                              })
                            ) : (
                              <span className="text-slate-400 dark:text-slate-500 italic">Không có</span>
                            )}
                          </div>
                        </td>
                        <td className="px-6 py-4">
                          <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${(user.active || user.status === 'Active') ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300' : 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300'}`}>
                            {(user.active || user.status === 'Active') ? 'Hoạt động' : 'Vô hiệu'}
                          </span>
                        </td>
                        <td className="px-6 py-4 text-right text-sm font-medium">
                          <div className="relative flex justify-end">
                            <button
                              onClick={(e) => handleActionMenuClick(user, e)}
                              className="p-1 rounded hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200"
                              title="Thao tác"
                            >
                              <MoreVertical size={18} />
                            </button>
                            {actionMenuUser?._id === user._id && (
                              <div 
                                className="absolute right-0 top-8 z-50 mt-1 w-48 bg-white dark:bg-slate-800 rounded-md shadow-lg border border-slate-200 dark:border-slate-700 py-1"
                                onClick={(e) => e.stopPropagation()}
                              >
                                {!csmManaged && (
                                  <button
                                    onClick={() => {
                                      setEditingUser(user);
                                      setActionMenuUser(null);
                                    }}
                                    className="w-full text-left px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 flex items-center gap-2"
                                  >
                                    <Pencil size={16} />
                                    <span>Chỉnh sửa</span>
                                  </button>
                                )}
                                {!csmManaged && (
                                  <button
                                    onClick={() => {
                                      handleOpenResetPassword(user);
                                      setActionMenuUser(null);
                                    }}
                                    className="w-full text-left px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 flex items-center gap-2"
                                  >
                                    <Key size={16} />
                                    <span>Reset mật khẩu</span>
                                  </button>
                                )}
                                <button
                                  onClick={() => {
                                    handleOpenHistory(user);
                                    setActionMenuUser(null);
                                  }}
                                  className="w-full text-left px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 flex items-center gap-2"
                                >
                                  <Clock size={16} />
                                  <span>Lịch sử</span>
                                </button>
                                {!csmManaged && (
                                  <button
                                    onClick={() => {
                                      setDeletingUserId(user._id);
                                      setActionMenuUser(null);
                                    }}
                                    className="w-full text-left px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-slate-100 dark:hover:bg-slate-700 flex items-center gap-2"
                                  >
                                    <Trash2 size={16} />
                                    <span>Xóa</span>
                                  </button>
                                )}
                              </div>
                            )}
                          </div>
                        </td>
                      </tr>
                    ))
                  )}
                </tbody>
              </table>
            </div>
          )}
        </div>

      {/* CREATE USER MODAL */}
      <Modal
        isOpen={isCreateModalOpen}
        onClose={() => setIsCreateModalOpen(false)}
        title="Thêm người dùng mới"
        maxWidth="lg"
        footer={
          <div className="flex flex-row-reverse gap-4">
            <Button onClick={handleCreateUser} disabled={isSubmitting}>
              {isSubmitting ? 'Đang tạo...' : 'Xác nhận'}
            </Button>
            <Button variant="secondary" onClick={() => setIsCreateModalOpen(false)} disabled={isSubmitting}>Hủy</Button>
          </div>
        }
      >
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <Input
              label="Họ và tên *"
              placeholder="Nguyễn Văn A"
              value={createFormData.name}
              onChange={e => setCreateFormData({ ...createFormData, name: e.target.value })}
            />
            <Input
              label="Email đăng nhập *"
              type="email"
              placeholder="name@company.com"
              value={createFormData.email}
              onChange={e => setCreateFormData({ ...createFormData, email: e.target.value })}
            />
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Vai trò</label>
              <select
                className="w-full border border-slate-300 dark:border-slate-600 rounded-md p-2 bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
                value={createFormData.role}
                onChange={e => setCreateFormData({ ...createFormData, role: e.target.value })}
              >
                {roles.filter(r => r.isActive).length === 0 ? (
                  <option value="">Đang tải vai trò...</option>
                ) : (
                  roles.filter(r => r.isActive).map(role => (
                    <option key={role._id} value={role.name}>{role.name}</option>
                  ))
                )}
              </select>
            </div>
            <Input
              label="Phòng ban"
              placeholder="e.g. Kỹ thuật"
              value={createFormData.department}
              onChange={e => setCreateFormData({ ...createFormData, department: e.target.value })}
            />
          </div>

          <PasswordGeneratorControl
            password={createFormData.password}
            onRegenerate={() => setCreateFormData({ ...createFormData, password: generateStrongPassword() })}
            showPassword={showPassword}
            onTogglePassword={() => setShowPassword(!showPassword)}
            isCopied={isCopied}
            onCopy={() => copyToClipboard(createFormData.password)}
          />
          <p className="text-xs text-slate-500 italic mt-1">Mật khẩu này sẽ được sử dụng cho lần đăng nhập đầu tiên.</p>

          <ScopeSelector
            projects={projects}
            selectedScope={createFormData.scope || []}
            onChange={(scope) => {
              setCreateFormData(prev => ({ ...prev, scope: scope || [] }));
            }}
          />
        </div>
      </Modal>

      {/* RESET PASSWORD MODAL */}
      <Modal
        isOpen={isResetPasswordModalOpen}
        onClose={() => setIsResetPasswordModalOpen(false)}
        title="Reset Mật Khẩu"
        footer={
          <>
            <Button onClick={handleResetPasswordSubmit} variant="danger">Lưu & Reset</Button>
            <Button variant="secondary" onClick={() => setIsResetPasswordModalOpen(false)} className="ml-2">Đóng</Button>
          </>
        }
      >
        <div className="space-y-4">
          <div className="bg-yellow-50 dark:bg-yellow-900/20 p-4 rounded border border-yellow-200 dark:border-yellow-800 flex gap-3 text-sm text-yellow-800 dark:text-yellow-200">
            <AlertTriangle className="flex-shrink-0" size={20} />
            <div>
              <strong>Chú ý quan trọng:</strong>
              <ul className="list-disc list-inside mt-1 space-y-1 opacity-90">
                <li>Bạn đang reset mật khẩu cho tài khoản: <b>{resetPasswordData.userName}</b>.</li>
                <li>Người dùng sẽ bị đăng xuất khỏi tất cả các thiết bị.</li>
                <li>Vui lòng <b>SAO CHÉP</b> mật khẩu bên dưới và gửi an toàn cho người dùng.</li>
              </ul>
            </div>
          </div>

          <PasswordGeneratorControl
            password={resetPasswordData.newPassword}
            onRegenerate={() => setResetPasswordData({ ...resetPasswordData, newPassword: generateStrongPassword() })}
            showPassword={showPassword}
            onTogglePassword={() => setShowPassword(!showPassword)}
            isCopied={isCopied}
            onCopy={() => copyToClipboard(resetPasswordData.newPassword)}
          />
        </div>
      </Modal>

      {/* EDIT MODAL */}
      <Modal
        isOpen={!!editingUser}
        onClose={() => setEditingUser(null)}
        title="Chỉnh sửa người dùng"
        footer={
          <>
            <Button onClick={handleEditSave}>Lưu thay đổi</Button>
            <Button variant="secondary" onClick={() => setEditingUser(null)} className="ml-2">Hủy</Button>
          </>
        }
      >
        {editingUser && (
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Tên người dùng</label>
              <input
                type="text"
                className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                value={editingUser.name}
                onChange={(e) => setEditingUser({ ...editingUser, name: e.target.value })}
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Email</label>
              <input
                type="email"
                className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                value={editingUser.email}
                onChange={(e) => setEditingUser({ ...editingUser, email: e.target.value })}
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Vai trò</label>
              <select
                className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                value={editingUser.role}
                onChange={(e) => setEditingUser({ ...editingUser, role: e.target.value })}
              >
                {roles.filter(r => r.isActive).length === 0 ? (
                  <option value={editingUser.role}>{editingUser.role}</option>
                ) : (
                  roles.filter(r => r.isActive).map(role => (
                    <option key={role._id} value={role.name}>{role.name}</option>
                  ))
                )}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Trạng thái</label>
              <select
                className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                value={editingUser.active ? 'true' : 'false'}
                onChange={(e) => setEditingUser({ ...editingUser, active: e.target.value === 'true' })}
              >
                <option value="true">Hoạt động</option>
                <option value="false">Vô hiệu</option>
              </select>
            </div>

            <ScopeSelector
              projects={projects}
              selectedScope={(editingUser.scope || []).map((item: any) => {
                if (typeof item === 'string') return item;
                return getScopeProjectId(item);
              })}
              onChange={handleEditScopeChange}
            />
          </div>
        )}
      </Modal>

      {/* DELETE MODAL */}
      <Modal
        isOpen={!!deletingUserId}
        onClose={() => setDeletingUserId(null)}
        title="Xóa người dùng"
        footer={
          <>
            <Button variant="danger" onClick={handleDeleteConfirm}>Xóa</Button>
            <Button variant="secondary" onClick={() => setDeletingUserId(null)} className="ml-2">Hủy</Button>
          </>
        }
      >
        <div className="flex items-center space-x-3">
          <div className="flex-shrink-0 bg-red-100 dark:bg-red-900/30 rounded-full p-2">
            <AlertTriangle className="h-6 w-6 text-red-600 dark:text-red-400" />
          </div>
          <div>
            <p className="text-sm text-slate-500 dark:text-slate-400">
              Bạn có chắc chắn muốn xóa người dùng này không? Hành động này không thể hoàn tác.
            </p>
          </div>
        </div>
      </Modal>

      {/* HISTORY MODAL */}
      <Modal
        isOpen={isHistoryModalOpen}
        onClose={() => {
          setIsHistoryModalOpen(false);
          setHistoryUser(null);
          setHistoryLogs([]);
          setExpandedDates(new Set());
        }}
        title={`Lịch sử hoạt động - ${historyUser?.name || ''}`}
        maxWidth="4xl"
        footer={
          <Button variant="secondary" onClick={() => {
            setIsHistoryModalOpen(false);
            setHistoryUser(null);
            setHistoryLogs([]);
            setExpandedDates(new Set());
          }}>Đóng</Button>
        }
      >
        {isLoadingLogs ? (
          <div className="flex justify-center items-center py-12">
            <Loader2 className="animate-spin text-blue-600" size={32} />
          </div>
        ) : (
          <div className="space-y-2 max-h-[600px] overflow-y-auto">
            {Object.keys(groupedHistoryLogs).length === 0 ? (
              <div className="text-center py-8 text-slate-500 dark:text-slate-400">
                Không có lịch sử hoạt động nào.
              </div>
            ) : (
              Object.entries(groupedHistoryLogs).map(([date, dateLogs]) => {
                const isExpanded = expandedDates.has(date);
                return (
                  <div key={date} className="border border-slate-200 dark:border-slate-700 rounded-lg overflow-hidden">
                    <button
                      onClick={() => toggleDateExpand(date)}
                      className="w-full px-4 py-3 bg-slate-50 dark:bg-slate-700/50 hover:bg-slate-100 dark:hover:bg-slate-700 flex items-center justify-between text-left"
                    >
                      <div className="flex items-center gap-3">
                        {isExpanded ? (
                          <ChevronDown size={18} className="text-slate-500 dark:text-slate-400" />
                        ) : (
                          <ChevronRight size={18} className="text-slate-500 dark:text-slate-400" />
                        )}
                        <span className="font-semibold text-slate-700 dark:text-slate-300">{date}</span>
                        <span className="text-sm text-slate-500 dark:text-slate-400">
                          ({dateLogs.length} hoạt động)
                        </span>
                      </div>
                    </button>
                    {isExpanded && (
                      <div className="divide-y divide-slate-200 dark:divide-slate-700">
                        {dateLogs.map((log) => {
                          // Try to extract IP from details or use a placeholder
                          // Assuming IP might be in details like "IP: 192.168.1.1" or similar
                          let ipAddress = 'N/A';
                          if (log.details) {
                            const ipMatch = log.details.match(/\b(?:\d{1,3}\.){3}\d{1,3}\b/);
                            if (ipMatch) {
                              ipAddress = ipMatch[0];
                            }
                          }
                          // Also check if there's an ip field in the log (even if not in type definition)
                          const logAny = log as any;
                          if (logAny.ip || logAny.ipAddress || logAny.wanIP) {
                            ipAddress = logAny.ip || logAny.ipAddress || logAny.wanIP;
                          }

                          // Get target display name - if it's a user, show user name instead of "users: u1"
                          let targetDisplay = '';
                          if (log.targetCollection.toLowerCase() === 'users' && log.targetId) {
                            const targetUser = users.find(u => u._id === log.targetId);
                            targetDisplay = targetUser ? targetUser.name : log.targetId;
                          } else {
                            targetDisplay = log.targetCollection;
                            if (log.targetId) {
                              targetDisplay += `: ${log.targetId}`;
                            }
                          }

                          return (
                            <div key={log._id} className="px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-800/50">
                              <div className="flex items-start justify-between gap-4">
                                <div className="flex-1">
                                  <div className="flex items-center gap-2 mb-1">
                                    <span className={`px-2 py-1 rounded text-xs font-bold border ${
                                      log.action === 'DELETE' ? 'bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300 border-red-200 dark:border-red-800' :
                                      log.action === 'UPDATE' ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800' :
                                      log.action === 'CREATE' ? 'bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300 border-green-200 dark:border-green-800' :
                                      'bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 border-slate-300 dark:border-slate-600'
                                    }`}>
                                      {log.action}
                                    </span>
                                    {log.targetCollection.toLowerCase() === 'users' ? (
                                      <span className="text-sm text-slate-600 dark:text-slate-400">
                                        Người dùng: {targetDisplay}
                                      </span>
                                    ) : (
                                      <span className="text-sm text-slate-600 dark:text-slate-400">
                                        {targetDisplay}
                                      </span>
                                    )}
                                  </div>
                                  {log.details && (
                                    <p className="text-sm text-slate-600 dark:text-slate-400 mt-1">
                                      {log.details.replace(/\b(?:\d{1,3}\.){3}\d{1,3}\b/g, '').trim() || log.details}
                                    </p>
                                  )}
                                </div>
                                <div className="text-right">
                                  <div className="text-xs text-slate-500 dark:text-slate-400 font-mono">
                                    {new Date(log.timestamp).toLocaleTimeString('vi-VN')}
                                  </div>
                                  <div className="text-xs text-slate-500 dark:text-slate-400 mt-1">
                                    IP: <span className="font-mono">{ipAddress}</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          );
                        })}
                      </div>
                    )}
                  </div>
                );
              })
            )}
          </div>
        )}
      </Modal>
    </div>
  );
};

export default Governance;