import React, { useState, useMemo, memo } from 'react';
import { Save, RefreshCw, Plus, Pencil, Trash2, Shield, CheckSquare, Square, AlertTriangle, Search, Copy } from 'lucide-react';
import { IRole } from '../../../types';
import Button from '../../../components/common/Button';
import Modal from '../../../components/Modal';
import Input from '../../../components/common/Input';
import { validateRole } from '../utils/validation';
import { RoleCardSkeleton } from './LoadingSkeleton';

interface PermissionsSettingsProps {
  roles: IRole[];
  permissionKeys: string[];
  permissionLabels: Record<string, string>;
  loading: boolean;
  saving: boolean;
  onTogglePermission: (roleId: string, permKey: string) => void;
  onCreateRole: (role: Partial<IRole>) => Promise<boolean>;
  onUpdateRole: (roleId: string, role: Partial<IRole>) => Promise<boolean>;
  onDeleteRole: (roleId: string) => Promise<boolean>;
  onSaveAll: () => void;
}

const PermissionsSettings: React.FC<PermissionsSettingsProps> = ({
  roles,
  permissionKeys,
  permissionLabels,
  loading,
  saving,
  onTogglePermission,
  onCreateRole,
  onUpdateRole,
  onDeleteRole,
  onSaveAll
}) => {
  const [editingRole, setEditingRole] = useState<IRole | null>(null);
  const [isCreateRoleModalOpen, setIsCreateRoleModalOpen] = useState(false);
  const [deletingRoleId, setDeletingRoleId] = useState<string | null>(null);
  const [searchQuery, setSearchQuery] = useState('');

  const defaultPermissionLabels: Record<string, string> = {
    view_dashboard: 'Xem Dashboard Tổng quan',
    manage_assets: 'Quản lý Tài sản (Thêm/Sửa/Xóa)',
    manage_users: 'Quản trị Người dùng & Phân quyền',
    view_finance: 'Xem Báo cáo Tài chính & ROI',
    approve_tickets: 'Phê duyệt & Đóng Phiếu sự cố',
    config_system: 'Cấu hình Hệ thống (Settings)'
  };

  const labels = useMemo(() => {
    return { ...defaultPermissionLabels, ...permissionLabels };
  }, [permissionLabels]);

  const filteredRoles = useMemo(() => {
    if (!searchQuery) return roles.filter(r => r.isActive);
    const query = searchQuery.toLowerCase();
    return roles.filter(r => 
      r.isActive && (
        r.name.toLowerCase().includes(query) ||
        r.code?.toLowerCase().includes(query) ||
        r.description?.toLowerCase().includes(query)
      )
    );
  }, [roles, searchQuery]);

  const handleOpenCreateRoleModal = () => {
    setEditingRole({
      _id: '',
      name: '',
      code: '',
      description: '',
      permissions: {},
      isSystem: false,
      isActive: true
    });
    setIsCreateRoleModalOpen(true);
  };

  const handleOpenEditRoleModal = (role: IRole) => {
    setEditingRole({ ...role });
    setIsCreateRoleModalOpen(true);
  };

  const [roleErrors, setRoleErrors] = useState<Record<string, string>>({});

  const handleCreateRole = async () => {
    if (!editingRole) return;
    
    const validation = validateRole(editingRole);
    if (!validation.isValid) {
      setRoleErrors(validation.errors);
      return;
    }
    
    setRoleErrors({});
    const success = await onCreateRole(editingRole);
    if (success) {
      setIsCreateRoleModalOpen(false);
      setEditingRole(null);
    }
  };

  const handleUpdateRole = async () => {
    if (!editingRole || !editingRole._id) return;
    
    const validation = validateRole(editingRole);
    if (!validation.isValid) {
      setRoleErrors(validation.errors);
      return;
    }
    
    setRoleErrors({});
    const success = await onUpdateRole(editingRole._id, editingRole);
    if (success) {
      setIsCreateRoleModalOpen(false);
      setEditingRole(null);
    }
  };

  const handleDeleteRole = async () => {
    if (!deletingRoleId) return;
    const success = await onDeleteRole(deletingRoleId);
    if (success) {
      setDeletingRoleId(null);
    }
  };

  const duplicateRole = (role: IRole) => {
    setEditingRole({
      _id: '',
      name: `${role.name} (Copy)`,
      code: `${role.code}_COPY`,
      description: role.description,
      permissions: { ...role.permissions },
      isSystem: false,
      isActive: true
    });
    setIsCreateRoleModalOpen(true);
  };

  if (loading) {
    return (
      <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
        <div className="space-y-6">
          <RoleCardSkeleton />
          <RoleCardSkeleton />
        </div>
      </div>
    );
  }

  return (
    <>
      <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 bg-slate-50 dark:bg-slate-800/50 flex justify-between items-center">
          <div>
            <h2 className="text-lg font-bold text-slate-800 dark:text-white">Phân quyền Vai trò (RBAC)</h2>
            <p className="text-sm text-slate-500 dark:text-slate-400">
              Định nghĩa quyền truy cập chi tiết cho từng vai trò trong hệ thống.
            </p>
          </div>
          <div className="flex gap-2">
            <Button onClick={handleOpenCreateRoleModal} icon={<Plus size={16} />}>
              Thêm vai trò
            </Button>
            <Button onClick={onSaveAll} disabled={saving} isLoading={saving} icon={<Save size={16} />}>
              Lưu tất cả
            </Button>
          </div>
        </div>

        <div className="p-6">
          {/* Search Bar */}
          <div className="mb-4">
            <Input
              placeholder="Tìm kiếm vai trò..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              rightIcon={<Search size={16} />}
            />
          </div>

          {filteredRoles.length === 0 ? (
            <div className="text-center py-12">
              <Shield size={48} className="mx-auto text-slate-400 mb-4" />
              <p className="text-slate-500 dark:text-slate-400">
                {searchQuery ? 'Không tìm thấy vai trò nào' : 'Chưa có vai trò nào. Hãy tạo vai trò đầu tiên.'}
              </p>
            </div>
          ) : (
            <div className="grid grid-cols-1 gap-6">
              {filteredRoles.map(role => (
                <div key={role._id} className="border border-slate-200 dark:border-slate-700 rounded-lg overflow-hidden">
                  <div className="bg-slate-100 dark:bg-slate-700 px-4 py-3 border-b border-slate-200 dark:border-slate-700 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <h3 className="font-bold text-slate-800 dark:text-white flex items-center gap-2">
                        <Shield size={16} className="text-blue-600 dark:text-blue-400" />
                        {role.name}
                      </h3>
                      {role.isSystem && (
                        <span className="text-xs bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 px-2 py-1 rounded border border-purple-200 dark:border-purple-800">
                          Hệ thống
                        </span>
                      )}
                      {role.code && (
                        <span className="text-xs font-mono bg-white dark:bg-slate-800 px-2 py-1 rounded text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-slate-600">
                          {role.code}
                        </span>
                      )}
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="text-xs font-mono bg-white dark:bg-slate-800 px-2 py-1 rounded text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-slate-600">
                        {Object.keys(role.permissions || {}).filter(k => role.permissions[k]).length} quyền
                      </span>
                      <button
                        onClick={() => handleOpenEditRoleModal(role)}
                        className="p-1.5 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded"
                        title="Chỉnh sửa"
                      >
                        <Pencil size={16} />
                      </button>
                      {!role.isSystem && (
                        <>
                          <button
                            onClick={() => duplicateRole(role)}
                            className="p-1.5 text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20 rounded"
                            title="Nhân đôi"
                          >
                            <Copy size={16} />
                          </button>
                          <button
                            onClick={() => setDeletingRoleId(role._id)}
                            className="p-1.5 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded"
                            title="Xóa"
                          >
                            <Trash2 size={16} />
                          </button>
                        </>
                      )}
                    </div>
                  </div>
                  {role.description && (
                    <div className="px-4 py-2 bg-slate-50 dark:bg-slate-800/50 border-b border-slate-200 dark:border-slate-700">
                      <p className="text-sm text-slate-600 dark:text-slate-400">{role.description}</p>
                    </div>
                  )}
                  <div className="p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                    {permissionKeys.length === 0 ? (
                      <p className="text-sm text-slate-500 dark:text-slate-400 col-span-full">
                        Chưa có quyền nào được định nghĩa
                      </p>
                    ) : (
                      permissionKeys.map(permKey => {
                        const isChecked = role.permissions?.[permKey] || false;
                        const label = labels[permKey] || permKey;
                        return (
                          <div
                            key={`${role._id}-${permKey}`}
                            className={`flex items-center gap-3 p-2 rounded cursor-pointer transition-colors ${
                              isChecked
                                ? 'bg-blue-50 dark:bg-blue-900/20'
                                : 'hover:bg-slate-50 dark:hover:bg-slate-800'
                            }`}
                            onClick={() => onTogglePermission(role._id, permKey)}
                          >
                            <div
                              className={`flex-shrink-0 ${isChecked ? 'text-blue-600 dark:text-blue-400' : 'text-slate-400'}`}
                            >
                              {isChecked ? <CheckSquare size={18} /> : <Square size={18} />}
                            </div>
                            <span
                              className={`text-sm ${
                                isChecked
                                  ? 'font-medium text-slate-900 dark:text-white'
                                  : 'text-slate-600 dark:text-slate-400'
                              }`}
                            >
                              {label}
                            </span>
                          </div>
                        );
                      })
                    )}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* CREATE/EDIT ROLE MODAL */}
      <Modal
        isOpen={isCreateRoleModalOpen}
        onClose={() => {
          setIsCreateRoleModalOpen(false);
          setEditingRole(null);
        }}
        title={editingRole?._id ? 'Chỉnh sửa vai trò' : 'Thêm vai trò mới'}
        maxWidth="lg"
        footer={
          <>
            <Button onClick={editingRole?._id ? handleUpdateRole : handleCreateRole}>
              {editingRole?._id ? 'Cập nhật' : 'Tạo mới'}
            </Button>
            <Button
              variant="secondary"
              onClick={() => {
                setIsCreateRoleModalOpen(false);
                setEditingRole(null);
              }}
              className="ml-2"
            >
              Hủy
            </Button>
          </>
        }
      >
        {editingRole && (
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <Input
                label="Tên vai trò *"
                placeholder="Ví dụ: System Administrator"
                value={editingRole.name}
                onChange={(e) => {
                  setEditingRole({ ...editingRole, name: e.target.value });
                  if (roleErrors.name) setRoleErrors({ ...roleErrors, name: '' });
                }}
                error={roleErrors.name}
              />
              <Input
                label="Mã vai trò *"
                placeholder="Ví dụ: ADMIN"
                value={editingRole.code}
                onChange={(e) => {
                  setEditingRole({ ...editingRole, code: e.target.value.toUpperCase() });
                  if (roleErrors.code) setRoleErrors({ ...roleErrors, code: '' });
                }}
                error={roleErrors.code}
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Mô tả</label>
              <textarea
                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"
                rows={3}
                value={editingRole.description || ''}
                onChange={(e) => setEditingRole({ ...editingRole, description: e.target.value })}
                placeholder="Mô tả về vai trò này..."
              />
            </div>
            {editingRole.isSystem && (
              <div className="bg-yellow-50 dark:bg-yellow-900/20 p-3 rounded border border-yellow-200 dark:border-yellow-800 flex gap-2 text-sm text-yellow-800 dark:text-yellow-200">
                <AlertTriangle size={18} className="flex-shrink-0" />
                <span>Đây là vai trò hệ thống và không thể xóa.</span>
              </div>
            )}
            {permissionKeys.length > 0 && (
              <div>
                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
                  Phân quyền
                </label>
                <div className="border border-slate-300 dark:border-slate-600 rounded-md p-3 bg-slate-50 dark:bg-slate-900/50 max-h-64 overflow-y-auto">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                    {permissionKeys.map(permKey => {
                      const isChecked = editingRole.permissions?.[permKey] || false;
                      const label = labels[permKey] || permKey;
                      return (
                        <label
                          key={permKey}
                          className="flex items-center gap-2 p-2 rounded cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-800"
                        >
                          <input
                            type="checkbox"
                            checked={isChecked}
                            onChange={(e) => {
                              setEditingRole({
                                ...editingRole,
                                permissions: {
                                  ...editingRole.permissions,
                                  [permKey]: e.target.checked
                                }
                              });
                            }}
                            className="rounded border-slate-300 text-blue-600 focus:ring-blue-500"
                          />
                          <span className="text-sm text-slate-700 dark:text-slate-300">{label}</span>
                        </label>
                      );
                    })}
                  </div>
                </div>
              </div>
            )}
          </div>
        )}
      </Modal>

      {/* DELETE ROLE MODAL */}
      <Modal
        isOpen={!!deletingRoleId}
        onClose={() => setDeletingRoleId(null)}
        title="Xóa vai trò"
        footer={
          <>
            <Button variant="danger" onClick={handleDeleteRole}>
              Xóa
            </Button>
            <Button variant="secondary" onClick={() => setDeletingRoleId(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 vai trò này không? Vai trò sẽ bị vô hiệu hóa và không thể sử dụng nữa.
            </p>
          </div>
        </div>
      </Modal>
    </>
  );
};

export default PermissionsSettings;
export { PermissionsSettings };