/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useState, useEffect } from 'react';
import { 
  Shield, Users, Key, Check, AlertCircle, Save, 
  CheckSquare, Square, RefreshCw, Info, Plus, 
  Edit2, Trash2, Lock, X, Building, CheckCircle, Search, Filter, ArrowRight, UserCheck, Eye, ShieldAlert, CheckCircle2, ChevronDown, ChevronUp, ArrowUpDown, Phone
} from 'lucide-react';
import { User, Role, Permission } from '../types';

interface RoleWithPermissions extends Role {
  permissions: Permission[];
}

interface UserManagementPanelProps {
  currentUser: User | null;
  onUserUpdate?: () => void;
  initialTab?: 'users' | 'roles' | 'permissions';
}

export default function UserManagementPanel({ currentUser, onUserUpdate, initialTab = 'users' }: UserManagementPanelProps) {
  // Navigation & Data State
  const [activeTab, setActiveTab] = useState<'users' | 'roles' | 'permissions'>(initialTab);
  const [users, setUsers] = useState<User[]>([]);
  const [roles, setRoles] = useState<RoleWithPermissions[]>([]);
  const [permissions, setPermissions] = useState<Permission[]>([]);
  const [properties, setProperties] = useState<{ id: string; name: string }[]>([]);
  
  // Search & Filters
  const [searchQuery, setSearchQuery] = useState('');
  const [roleFilter, setRoleFilter] = useState('all');
  const [searchPermQuery, setSearchPermQuery] = useState('');
  const [permCategoryFilter, setPermCategoryFilter] = useState<'all' | 'view' | 'action' | 'system'>('all');
  
  // Sorting & Search states for Users, Roles, and Master Permissions
  const [userSortField, setUserSortField] = useState<'fullName' | 'username' | 'roleId' | 'propertyId'>('fullName');
  const [userSortOrder, setUserSortOrder] = useState<'asc' | 'desc'>('asc');
  
  const [searchRoleQuery, setSearchRoleQuery] = useState('');
  const [roleSortField, setRoleSortField] = useState<'roleName' | 'description' | 'id' | 'permissions'>('roleName');
  const [roleSortOrder, setRoleSortOrder] = useState<'asc' | 'desc'>('asc');

  const [searchMasterPermQuery, setSearchMasterPermQuery] = useState('');
  const [masterPermSortField, setMasterPermSortField] = useState<'permissionKey' | 'description'>('permissionKey');
  const [masterPermSortOrder, setMasterPermSortOrder] = useState<'asc' | 'desc'>('asc');
  
  // Matrix Role selection
  const [selectedRoleId, setSelectedRoleId] = useState<string>('1');
  const [selectedRolePerms, setSelectedRolePerms] = useState<string[]>([]);
  
  // Interactive User Detail panel for permissions verification
  const [selectedUserId, setSelectedUserId] = useState<string | null>(null);

  // UI states
  const [loading, setLoading] = useState(false);
  const [savingRoleId, setSavingRoleId] = useState<string | null>(null);
  const [message, setMessage] = useState<{ text: string; type: 'success' | 'error' } | null>(null);

  // Modal control & form state for Users
  const [isUserModalOpen, setIsUserModalOpen] = useState(false);
  const [editingUser, setEditingUser] = useState<User | null>(null);
  const [userForm, setUserForm] = useState({
    fullName: '',
    username: '',
    email: '',
    phone: '',
    roleId: '2',
    propertyId: ''
  });

  // Modal control & form state for Roles
  const [isRoleModalOpen, setIsRoleModalOpen] = useState(false);
  const [editingRole, setEditingRole] = useState<Role | null>(null);
  const [roleForm, setRoleForm] = useState({
    roleName: '',
    description: ''
  });

  // Modal control & form state for Permissions
  const [isPermModalOpen, setIsPermModalOpen] = useState(false);
  const [editingPerm, setEditingPerm] = useState<Permission | null>(null);
  const [permForm, setPermForm] = useState({
    permissionKey: '',
    description: ''
  });

  // Toast message utility
  const showMsg = (text: string, type: 'success' | 'error') => {
    setMessage({ text, type });
    setTimeout(() => setMessage(null), 4000);
  };

  // Fetch initial data (users, roles, permissions, properties)
  const fetchData = async (showLoading: any = false) => {
    if (showLoading === true || users.length === 0) {
      setLoading(true);
    }
    try {
      const [usersRes, rolesRes, permsRes, propsRes] = await Promise.all([
        fetch('/api/users'),
        fetch('/api/roles'),
        fetch('/api/permissions'),
        fetch('/api/properties')
      ]);

      if (usersRes.ok && rolesRes.ok && permsRes.ok) {
        const usersData = await usersRes.json();
        const rolesData = await rolesRes.json();
        const permsData = await permsRes.json();
        
        setUsers(usersData);
        setRoles(rolesData);
        setPermissions(permsData);

        // Sync active permissions mapping in matrix
        const activeRole = rolesData.find((r: any) => r.id === selectedRoleId);
        if (activeRole) {
          setSelectedRolePerms(activeRole.permissions.map((p: any) => p.id));
        }
      }

      if (propsRes.ok) {
        const propsData = await propsRes.json();
        setProperties(propsData);
      }
    } catch (err) {
      console.error("Error fetching RBAC data", err);
      showMsg("Gagal memuat data dari server", "error");
    } finally {
      setLoading(false);
    }
  };

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

  useEffect(() => {
    setActiveTab(initialTab);
  }, [initialTab]);

  // Sync editor when selected role changes
  useEffect(() => {
    const activeRole = roles.find(r => r.id === selectedRoleId);
    if (activeRole) {
      setSelectedRolePerms(activeRole.permissions.map(p => p.id));
    }
  }, [selectedRoleId, roles]);

  // Handle re-assigning role to user directly in table
  const handleAssignRoleDirect = async (userId: string, targetRoleId: string) => {
    try {
      const res = await fetch(`/api/users/${userId}/role`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ roleId: targetRoleId })
      });

      if (res.ok) {
        showMsg("Peran pengguna berhasil diperbarui!", "success");
        fetchData();
        if (onUserUpdate) onUserUpdate();
      } else {
        const err = await res.json();
        showMsg(err.error || "Gagal memperbarui peran", "error");
      }
    } catch (err) {
      showMsg("Koneksi gagal", "error");
    }
  };

  // Toggle permission selection in role matrix editor
  const handleTogglePermission = (permId: string) => {
    if (selectedRolePerms.includes(permId)) {
      setSelectedRolePerms(selectedRolePerms.filter(id => id !== permId));
    } else {
      setSelectedRolePerms([...selectedRolePerms, permId]);
    }
  };

  // Save permissions mapping for a role
  const handleSaveRolePermissions = async () => {
    setSavingRoleId(selectedRoleId);
    try {
      const res = await fetch(`/api/roles/${selectedRoleId}/permissions`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ permissionIds: selectedRolePerms })
      });

      if (res.ok) {
        showMsg("Hubungan peran & hak akses berhasil disimpan!", "success");
        await fetchData();
        if (onUserUpdate) onUserUpdate();
      } else {
        showMsg("Gagal menyinkronkan hak akses peran.", "error");
      }
    } catch (err) {
      showMsg("Koneksi gagal", "error");
    } finally {
      setSavingRoleId(null);
    }
  };

  // ----------------------------------------------------
  // USER CRUD OPERATIONS
  // ----------------------------------------------------
  const handleOpenAddUser = () => {
    setEditingUser(null);
    setUserForm({
      fullName: '',
      username: '',
      email: '',
      phone: '',
      roleId: '2', // default Guest
      propertyId: ''
    });
    setIsUserModalOpen(true);
  };

  const handleOpenEditUser = (user: User) => {
    setEditingUser(user);
    setUserForm({
      fullName: user.fullName,
      username: user.username,
      email: user.email,
      phone: user.phone,
      roleId: user.roleId,
      propertyId: user.propertyId || ''
    });
    setIsUserModalOpen(true);
  };

  const handleSubmitUser = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!userForm.fullName || !userForm.username || !userForm.email || !userForm.phone || !userForm.roleId) {
      showMsg("Harap lengkapi semua bidang wajib!", "error");
      return;
    }
    try {
      const url = editingUser ? `/api/users/${editingUser.id}` : '/api/users';
      const method = editingUser ? 'PUT' : 'POST';
      const res = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(userForm)
      });

      if (res.ok) {
        showMsg(editingUser ? "Data pengguna berhasil diperbarui!" : "Pengguna baru berhasil ditambahkan!", "success");
        setIsUserModalOpen(false);
        fetchData();
        if (onUserUpdate) onUserUpdate();
      } else {
        const err = await res.json();
        showMsg(err.error || "Gagal menyimpan data pengguna", "error");
      }
    } catch (err) {
      showMsg("Koneksi internet bermasalah", "error");
    }
  };

  const handleDeleteUser = async (userId: string) => {
    if (currentUser && currentUser.id === userId) {
      showMsg("Anda tidak bisa menghapus akun Anda sendiri!", "error");
      return;
    }
    if (!window.confirm("Apakah Anda yakin ingin menghapus pengguna ini? Tindakan ini tidak dapat diurungkan.")) {
      return;
    }
    try {
      const res = await fetch(`/api/users/${userId}`, {
        method: 'DELETE'
      });
      if (res.ok) {
        showMsg("Pengguna berhasil dihapus secara permanen!", "success");
        if (selectedUserId === userId) setSelectedUserId(null);
        fetchData();
        if (onUserUpdate) onUserUpdate();
      } else {
        const err = await res.json();
        showMsg(err.error || "Gagal menghapus pengguna", "error");
      }
    } catch (err) {
      showMsg("Koneksi gagal", "error");
    }
  };

  // ----------------------------------------------------
  // ROLE CRUD OPERATIONS
  // ----------------------------------------------------
  const handleOpenAddRole = () => {
    setEditingRole(null);
    setRoleForm({
      roleName: '',
      description: ''
    });
    setIsRoleModalOpen(true);
  };

  const handleOpenEditRole = (role: Role) => {
    setEditingRole(role);
    setRoleForm({
      roleName: role.roleName,
      description: role.description
    });
    setIsRoleModalOpen(true);
  };

  const handleSubmitRole = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!roleForm.roleName || !roleForm.description) {
      showMsg("Harap isi nama peran dan deskripsi singkat!", "error");
      return;
    }
    try {
      const url = editingRole ? `/api/roles/${editingRole.id}` : '/api/roles';
      const method = editingRole ? 'PUT' : 'POST';
      const res = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(roleForm)
      });

      if (res.ok) {
        showMsg(editingRole ? "Peran berhasil diperbarui!" : "Peran baru berhasil ditambahkan!", "success");
        setIsRoleModalOpen(false);
        fetchData();
        if (onUserUpdate) onUserUpdate();
      } else {
        const err = await res.json();
        showMsg(err.error || "Gagal menyimpan peran", "error");
      }
    } catch (err) {
      showMsg("Gagal menyimpan data", "error");
    }
  };

  const handleDeleteRole = async (roleId: string) => {
    if (["1", "2", "3", "4"].includes(roleId)) {
      showMsg("Peran bawaan sistem tidak boleh dihapus demi keamanan simulator!", "error");
      return;
    }
    if (!window.confirm("Apakah Anda yakin ingin menghapus peran ini? Semua pengguna yang memiliki peran ini akan dialihkan ke peran Guest secara otomatis.")) {
      return;
    }
    try {
      const res = await fetch(`/api/roles/${roleId}`, {
        method: 'DELETE'
      });
      if (res.ok) {
        showMsg("Peran berhasil dihapus dari sistem!", "success");
        if (selectedRoleId === roleId) {
          setSelectedRoleId('2');
        }
        fetchData();
        if (onUserUpdate) onUserUpdate();
      } else {
        const err = await res.json();
        showMsg(err.error || "Gagal menghapus peran", "error");
      }
    } catch (err) {
      showMsg("Koneksi gagal", "error");
    }
  };

  // ----------------------------------------------------
  // PERMISSION CRUD OPERATIONS
  // ----------------------------------------------------
  const handleOpenAddPerm = () => {
    setEditingPerm(null);
    setPermForm({
      permissionKey: '',
      description: ''
    });
    setIsPermModalOpen(true);
  };

  const handleOpenEditPerm = (perm: Permission) => {
    setEditingPerm(perm);
    setPermForm({
      permissionKey: perm.permissionKey,
      description: perm.description
    });
    setIsPermModalOpen(true);
  };

  const handleSubmitPerm = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!permForm.permissionKey || !permForm.description) {
      showMsg("Semua kolom izin wajib diisi!", "error");
      return;
    }
    try {
      const url = editingPerm ? `/api/permissions/${editingPerm.id}` : '/api/permissions';
      const method = editingPerm ? 'PUT' : 'POST';
      const res = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(permForm)
      });

      if (res.ok) {
        showMsg(editingPerm ? "Izin sistem berhasil diperbarui!" : "Hak izin baru berhasil ditambahkan!", "success");
        setIsPermModalOpen(false);
        fetchData();
        if (onUserUpdate) onUserUpdate();
      } else {
        const err = await res.json();
        showMsg(err.error || "Gagal menyimpan izin", "error");
      }
    } catch (err) {
      showMsg("Gagal menyimpan data", "error");
    }
  };

  const handleDeletePerm = async (permId: string) => {
    if (!window.confirm("Apakah Anda yakin ingin menghapus hak izin ini? Izin ini juga akan dihapus dari seluruh pemetaan peran.")) {
      return;
    }
    try {
      const res = await fetch(`/api/permissions/${permId}`, {
        method: 'DELETE'
      });
      if (res.ok) {
        showMsg("Hak izin berhasil dihapus!", "success");
        fetchData();
        if (onUserUpdate) onUserUpdate();
      } else {
        const err = await res.json();
        showMsg(err.error || "Gagal menghapus izin", "error");
      }
    } catch (err) {
      showMsg("Koneksi gagal", "error");
    }
  };

  // Filter & Sort logic for Users
  let filteredUsers = users.filter(user => {
    const matchesSearch = user.fullName.toLowerCase().includes(searchQuery.toLowerCase()) || 
                          user.username.toLowerCase().includes(searchQuery.toLowerCase()) || 
                          user.email.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesRole = roleFilter === 'all' || user.roleId === roleFilter;
    return matchesSearch && matchesRole;
  });

  filteredUsers = [...filteredUsers].sort((a, b) => {
    let comparison = 0;
    if (userSortField === 'fullName') {
      comparison = a.fullName.localeCompare(b.fullName);
    } else if (userSortField === 'username') {
      comparison = a.username.localeCompare(b.username);
    } else if (userSortField === 'roleId') {
      const roleA = roles.find(r => r.id === a.roleId)?.roleName || '';
      const roleB = roles.find(r => r.id === b.roleId)?.roleName || '';
      comparison = roleA.localeCompare(roleB);
    } else if (userSortField === 'propertyId') {
      const propA = properties.find(p => p.id === a.propertyId)?.name || '';
      const propB = properties.find(p => p.id === b.propertyId)?.name || '';
      comparison = propA.localeCompare(propB);
    }
    return userSortOrder === 'asc' ? comparison : -comparison;
  });

  const handleToggleUserSort = (field: 'fullName' | 'username' | 'roleId' | 'propertyId') => {
    if (userSortField === field) {
      setUserSortOrder(userSortOrder === 'asc' ? 'desc' : 'asc');
    } else {
      setUserSortField(field);
      setUserSortOrder('asc');
    }
  };

  // Filter & Sort logic for Roles
  let filteredRoles = roles;
  if (searchRoleQuery.trim() !== '') {
    const q = searchRoleQuery.toLowerCase();
    filteredRoles = filteredRoles.filter(role => 
      role.roleName.toLowerCase().includes(q) ||
      role.description.toLowerCase().includes(q)
    );
  }

  filteredRoles = [...filteredRoles].sort((a, b) => {
    let comparison = 0;
    if (roleSortField === 'roleName') {
      comparison = a.roleName.localeCompare(b.roleName);
    } else if (roleSortField === 'description') {
      comparison = a.description.localeCompare(b.description);
    } else if (roleSortField === 'id') {
      comparison = a.id.localeCompare(b.id, undefined, { numeric: true });
    } else if (roleSortField === 'permissions') {
      comparison = (a.permissions?.length || 0) - (b.permissions?.length || 0);
    }
    return roleSortOrder === 'asc' ? comparison : -comparison;
  });

  const handleToggleRoleSort = (field: 'roleName' | 'description' | 'id' | 'permissions') => {
    if (roleSortField === field) {
      setRoleSortOrder(roleSortOrder === 'asc' ? 'desc' : 'asc');
    } else {
      setRoleSortField(field);
      setRoleSortOrder('asc');
    }
  };

  // Filter & categorize permissions
  const categorizePermission = (key: string): 'view' | 'action' | 'system' => {
    if (key.startsWith('view_')) return 'view';
    if (key.includes('property') || key.includes('transaction') || key.includes('booking') || key.startsWith('create') || key.startsWith('edit') || key.startsWith('delete') || key.startsWith('order')) return 'action';
    return 'system';
  };

  const filteredPermissions = permissions.filter(perm => {
    const matchesSearch = perm.permissionKey.toLowerCase().includes(searchPermQuery.toLowerCase()) || 
                          perm.description.toLowerCase().includes(searchPermQuery.toLowerCase());
    const category = categorizePermission(perm.permissionKey);
    const matchesCategory = permCategoryFilter === 'all' || category === permCategoryFilter;
    return matchesSearch && matchesCategory;
  });

  // Filter & Sort logic for Master Permissions List Tab
  let filteredMasterPermissions = permissions;
  if (searchMasterPermQuery.trim() !== '') {
    const q = searchMasterPermQuery.toLowerCase();
    filteredMasterPermissions = filteredMasterPermissions.filter(p => 
      p.permissionKey.toLowerCase().includes(q) ||
      p.description.toLowerCase().includes(q)
    );
  }

  filteredMasterPermissions = [...filteredMasterPermissions].sort((a, b) => {
    let comparison = 0;
    if (masterPermSortField === 'permissionKey') {
      comparison = a.permissionKey.localeCompare(b.permissionKey);
    } else if (masterPermSortField === 'description') {
      comparison = a.description.localeCompare(b.description);
    }
    return masterPermSortOrder === 'asc' ? comparison : -comparison;
  });

  const handleToggleMasterPermSort = (field: 'permissionKey' | 'description') => {
    if (masterPermSortField === field) {
      setMasterPermSortOrder(masterPermSortOrder === 'asc' ? 'desc' : 'asc');
    } else {
      setMasterPermSortField(field);
      setMasterPermSortOrder('asc');
    }
  };

  const getShortLabel = (key: string) => {
    const mapping: Record<string, string> = {
      create_property: "Tambah Properti",
      edit_property: "Ubah/Edit Properti",
      delete_property: "Hapus Properti",
      order_transaction: "Buat Transaksi",
      view_dashboard: "Menu Dashboard",
      manage_roles: "Kelola Peran (Role)",
      view_operations: "Menu Operations Hub",
      view_superadmin: "Menu Superadmin Console",
      view_schema: "Menu Skema MySQL",
      view_users: "Menu Master User",
      view_permissions: "Menu Master Izin",
      view_profiling: "Menu Profiling & Log",
      view_ci3_template: "Menu File Template CI3",
      view_ai_prediction: "Menu Prediksi AI",
      view_cloud_storage: "Menu Storage Hub",
      manage_users: "Kelola Anggota User"
    };
    return mapping[key] || key;
  };

  const getGroupedPermissions = () => {
    const groups = [
      {
        id: "property",
        title: "📦 Manajemen Properti (CRUD)",
        description: "Tambah, ubah, dan hapus data properti utama.",
        color: "border-emerald-100 bg-emerald-50/10 text-emerald-800 animate-in fade-in duration-200",
        items: filteredPermissions.filter(p => p.permissionKey.includes('property'))
      },
      {
        id: "actions",
        title: "👥 Tindakan & Pengguna",
        description: "Operasi transaksi, edit anggota user, dan peran jabatan.",
        color: "border-purple-100 bg-purple-50/10 text-purple-800 animate-in fade-in duration-200",
        items: filteredPermissions.filter(p => p.permissionKey.includes('user') || p.permissionKey.includes('role') || p.permissionKey.includes('transaction'))
      },
      {
        id: "views",
        title: "🔑 Akses Halaman Utama",
        description: "Membuka Dashboard Analisis, Operations Hub, Storage & AI.",
        color: "border-blue-100 bg-blue-50/10 text-blue-800 animate-in fade-in duration-200",
        items: filteredPermissions.filter(p => p.permissionKey.startsWith('view_') && (p.permissionKey.includes('dashboard') || p.permissionKey.includes('operations') || p.permissionKey.includes('prediction') || p.permissionKey.includes('storage')))
      },
      {
        id: "dev",
        title: "🛠️ Menu Developer & Admin",
        description: "Akses konsol superadmin, skema MySQL, log, dan template CI3.",
        color: "border-amber-100 bg-amber-50/10 text-amber-800 animate-in fade-in duration-200",
        items: filteredPermissions.filter(p => p.permissionKey.startsWith('view_') && !(p.permissionKey.includes('dashboard') || p.permissionKey.includes('operations') || p.permissionKey.includes('prediction') || p.permissionKey.includes('storage')))
      }
    ];

    const matchedIds = new Set(groups.flatMap(g => g.items.map(item => item.id)));
    const remaining = filteredPermissions.filter(p => !matchedIds.has(p.id));
    if (remaining.length > 0) {
      groups.push({
        id: "other",
        title: "📌 Hak Akses Lainnya",
        description: "Izin tambahan kustom.",
        color: "border-gray-100 bg-gray-50/50 text-gray-700 animate-in fade-in duration-200",
        items: remaining
      });
    }

    return groups;
  };

  const currentRoleObj = roles.find(r => r.id === selectedRoleId);
  const selectedUserObj = users.find(u => u.id === selectedUserId);
  const selectedUserRoleObj = selectedUserObj ? roles.find(r => r.id === selectedUserObj.roleId) : null;

  // Helper for generating colorful initials avatar
  const getAvatarStyle = (name: string) => {
    const hash = name.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
    const colors = [
      'from-blue-500 to-indigo-600 text-white',
      'from-emerald-500 to-teal-600 text-white',
      'from-violet-500 to-purple-600 text-white',
      'from-amber-500 to-orange-600 text-white',
      'from-rose-500 to-pink-600 text-white',
      'from-cyan-500 to-blue-600 text-white'
    ];
    return colors[hash % colors.length];
  };

  return (
    <div className="space-y-6" id="user-management-section">
      {/* Toast Notification */}
      {message && (
        <div className={`fixed bottom-5 right-5 z-50 flex items-center space-x-2 px-4 py-3 rounded-xl shadow-lg border animate-in slide-in-from-bottom-5 duration-200 ${
          message.type === 'success' 
            ? 'bg-emerald-50 text-emerald-800 border-emerald-200' 
            : 'bg-rose-50 text-rose-800 border-rose-200'
        }`}>
          {message.type === 'success' ? (
            <CheckCircle className="h-5 w-5 text-emerald-600 shrink-0" />
          ) : (
            <AlertCircle className="h-5 w-5 text-rose-600 shrink-0" />
          )}
          <span className="text-xs font-semibold">{message.text}</span>
        </div>
      )}

      {/* 
        ========================================================================
        EXECUTIVE HEADER BANNER WITH STATISTICS (PRODUCING THE GORGEOUS INTUITIVE LOOK)
        ========================================================================
      */}
      <div className="bg-gradient-to-br from-slate-900 to-slate-950 p-6 md:p-8 rounded-3xl text-white border border-slate-800 shadow-xl relative overflow-hidden">
        <div className="absolute right-0 top-0 opacity-10 pointer-events-none translate-x-12 translate-y-[-20px]">
          <Shield className="h-72 w-72 text-blue-400" />
        </div>

        <div className="relative z-10 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
          <div className="space-y-2">
            <div className="flex items-center space-x-2">
              <span className="text-[10px] font-black tracking-wider text-blue-400 bg-blue-500/20 px-2.5 py-1 rounded-full uppercase border border-blue-500/30">
                Access & Security Engine
              </span>
              <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse" />
            </div>
            <h2 className="font-sans font-black text-2xl md:text-3xl tracking-tight leading-tight">
              Pusat Kendali Pengguna & RBAC
            </h2>
            <p className="text-slate-300 text-xs md:text-sm max-w-2xl leading-relaxed">
              Atur hak izin operasional menu, pemetaan peran (role mapping), serta kredensial akun pengguna sistem secara instan demi integritas database properti Anda.
            </p>
          </div>

          <button 
            onClick={() => fetchData(false)} 
            disabled={loading}
            className="flex items-center space-x-1.5 px-4 py-2 rounded-xl bg-white/10 hover:bg-white/20 border border-white/10 active:scale-95 transition-all text-xs font-bold text-white cursor-pointer disabled:opacity-50 self-stretch md:self-auto justify-center"
            id="refresh-rbac-btn"
          >
            <RefreshCw className={`h-3.5 w-3.5 ${loading ? 'animate-spin' : ''}`} />
            <span>Sinkron Data</span>
          </button>
        </div>

        {/* OVERVIEW STATS BOXES inside banner */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-8 pt-6 border-t border-white/10">
          <div>
            <span className="text-slate-400 block text-[10px] uppercase font-bold tracking-wider">Total Pengguna</span>
            <div className="flex items-baseline space-x-2 mt-0.5">
              <strong className="text-white text-xl font-extrabold">{users.length}</strong>
              <span className="text-blue-400 text-[10px] font-bold">Terdaftar</span>
            </div>
          </div>
          <div>
            <span className="text-slate-400 block text-[10px] uppercase font-bold tracking-wider">Tingkat Jabatan (Roles)</span>
            <div className="flex items-baseline space-x-2 mt-0.5">
              <strong className="text-white text-xl font-extrabold">{roles.length}</strong>
              <span className="text-indigo-400 text-[10px] font-bold">Konfigurasi</span>
            </div>
          </div>
          <div>
            <span className="text-slate-400 block text-[10px] uppercase font-bold tracking-wider">Kunci Hak Akses</span>
            <div className="flex items-baseline space-x-2 mt-0.5">
              <strong className="text-white text-xl font-extrabold">{permissions.length}</strong>
              <span className="text-amber-400 text-[10px] font-bold">Otoritas</span>
            </div>
          </div>
          <div>
            <span className="text-slate-400 block text-[10px] uppercase font-bold tracking-wider">Status Keamanan</span>
            <div className="flex items-center space-x-1 mt-1 text-emerald-400 text-xs font-extrabold">
              <UserCheck className="h-4 w-4 shrink-0" />
              <span>Sistem Aman</span>
            </div>
          </div>
        </div>
      </div>

      {/* 
        ========================================================================
        NAVIGATION TAB SWITCHER BAR (BEAUTIFULLY STYLED FOR MOBILE & DESKTOP)
        ========================================================================
      */}
      <div className="bg-white p-2 rounded-2xl border border-gray-100 shadow-xs flex justify-center md:justify-start">
        <div className="flex space-x-1 bg-gray-100 p-1 rounded-xl w-full md:max-w-md">
          <button
            onClick={() => { setActiveTab('users'); setSelectedUserId(null); }}
            className={`flex-1 py-2.5 text-center text-xs font-bold rounded-lg transition-all cursor-pointer flex items-center justify-center space-x-2 ${
              activeTab === 'users' ? 'bg-white text-blue-600 shadow-xs' : 'text-gray-500 hover:text-gray-900'
            }`}
          >
            <Users className="h-4 w-4 shrink-0" />
            <span>Pengguna ({users.length})</span>
          </button>
          <button
            onClick={() => setActiveTab('roles')}
            className={`flex-1 py-2.5 text-center text-xs font-bold rounded-lg transition-all cursor-pointer flex items-center justify-center space-x-2 ${
              activeTab === 'roles' ? 'bg-white text-blue-600 shadow-xs' : 'text-gray-500 hover:text-gray-900'
            }`}
          >
            <Shield className="h-4 w-4 shrink-0" />
            <span>Peran & Izin ({roles.length})</span>
          </button>
          <button
            onClick={() => setActiveTab('permissions')}
            className={`flex-1 py-2.5 text-center text-xs font-bold rounded-lg transition-all cursor-pointer flex items-center justify-center space-x-2 ${
              activeTab === 'permissions' ? 'bg-white text-blue-600 shadow-xs' : 'text-gray-500 hover:text-gray-900'
            }`}
          >
            <Key className="h-4 w-4 shrink-0" />
            <span>Daftar Hak Izin ({permissions.length})</span>
          </button>
        </div>
      </div>

      {/* MAIN VIEW CONTROLLER */}
      <div id="rbac-main-content">
        
        {/* 1. TAB: USERS MANAGEMENT (CONVERTS TO CARDS ON MOBILE & SPLITS DETAIL ON DESKTOP) */}
        {activeTab === 'users' && (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
            
            {/* Left list (Column span 2 on large screens) */}
            <div className="lg:col-span-2 bg-white rounded-3xl border border-gray-100 shadow-xs overflow-hidden flex flex-col">
              {/* Table Header Controls */}
              <div className="p-5 border-b border-gray-100 flex flex-col md:flex-row justify-between items-stretch md:items-center gap-4 bg-gray-50/50">
                <div className="space-y-1">
                  <h3 className="font-sans font-black text-sm text-gray-900 flex items-center gap-2">
                    <Users className="h-4 w-4 text-blue-600" />
                    <span>Daftar Anggota Tim & Otoritas</span>
                  </h3>
                  <p className="text-[10px] text-gray-400">Pilih salah satu nama untuk meninjau secara instan hak akses detailnya.</p>
                </div>
                
                <button
                  onClick={handleOpenAddUser}
                  className="flex items-center justify-center space-x-1.5 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-xl text-xs font-bold transition-all shadow-md shadow-blue-500/10 active:scale-95 cursor-pointer"
                  id="add-new-user-btn"
                >
                  <Plus className="h-4 w-4" />
                  <span>Tambah Pengguna</span>
                </button>
              </div>

              {/* Filtering Controls */}
              <div className="p-4 border-b border-gray-100 bg-white flex flex-col sm:flex-row gap-3">
                <div className="relative flex-1">
                  <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
                  <input
                    type="text"
                    placeholder="Cari berdasarkan nama, email, username..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="w-full bg-gray-50 border border-gray-200 rounded-xl pl-9 pr-4 py-2 text-xs focus:outline-hidden focus:ring-2 focus:ring-blue-100 focus:bg-white focus:border-blue-500 transition-all text-gray-800"
                  />
                </div>
                <div className="flex items-center space-x-2 shrink-0">
                  <Filter className="h-3.5 w-3.5 text-gray-400" />
                  <select
                    value={roleFilter}
                    onChange={(e) => setRoleFilter(e.target.value)}
                    className="bg-gray-50 border border-gray-200 rounded-xl text-xs py-2 px-3 focus:outline-hidden focus:ring-2 focus:ring-blue-100 focus:bg-white focus:border-blue-500 transition-all text-gray-700 font-bold cursor-pointer"
                  >
                    <option value="all">Semua Peran</option>
                    {roles.map(r => (
                      <option key={r.id} value={r.id}>{r.roleName}</option>
                    ))}
                  </select>
                </div>
              </div>

              {/* MOBILE CARD VIEW (Responsive layout for superb appearance on mobile devices) */}
              <div className="block md:hidden divide-y divide-gray-100 p-4 space-y-4">
                {filteredUsers.length === 0 ? (
                  <div className="text-center py-12 text-gray-400 italic text-xs">
                    Tidak ada data pengguna yang cocok.
                  </div>
                ) : (
                  filteredUsers.map((user) => {
                    const assignedProp = properties.find(p => p.id === user.propertyId);
                    const userRole = roles.find(r => r.id === user.roleId);
                    const isSelected = selectedUserId === user.id;
                    return (
                      <div 
                        key={user.id} 
                        onClick={() => setSelectedUserId(user.id)}
                        className={`p-4 rounded-2xl border transition-all flex flex-col space-y-3 cursor-pointer ${
                          isSelected ? 'bg-blue-50/40 border-blue-300 shadow-md' : 'bg-gray-50/50 border-gray-100 hover:border-gray-200'
                        }`}
                      >
                        <div className="flex justify-between items-start">
                          <div className="flex items-center space-x-3">
                            <div className={`h-10 w-10 rounded-full bg-gradient-to-tr ${getAvatarStyle(user.fullName)} flex items-center justify-center font-bold text-sm shrink-0 shadow-sm`}>
                              {user.fullName.substring(0, 2).toUpperCase()}
                            </div>
                            <div>
                              <div className="font-extrabold text-gray-900 flex items-center gap-1.5 text-xs">
                                <span>{user.fullName}</span>
                                {currentUser && currentUser.id === user.id && (
                                  <span className="bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full text-[8px] font-extrabold">Sesi Anda</span>
                                )}
                              </div>
                              <span className="text-[10px] text-gray-400 font-medium font-mono">@{user.username}</span>
                            </div>
                          </div>

                          <div className="inline-flex space-x-1 shrink-0" onClick={(e) => e.stopPropagation()}>
                            <button
                              onClick={() => handleOpenEditUser(user)}
                              className="p-2 hover:bg-blue-50 text-blue-600 rounded-xl transition-all cursor-pointer"
                            >
                              <Edit2 className="h-4 w-4" />
                            </button>
                            <button
                              onClick={() => handleDeleteUser(user.id)}
                              disabled={currentUser && currentUser.id === user.id}
                              className={`p-2 rounded-xl transition-all ${
                                currentUser && currentUser.id === user.id 
                                  ? 'text-gray-200 cursor-not-allowed' 
                                  : 'hover:bg-rose-50 text-rose-600'
                              }`}
                            >
                              <Trash2 className="h-4 w-4" />
                            </button>
                          </div>
                        </div>

                        {/* User quick contact */}
                        <div className="text-[11px] text-gray-500 bg-white p-2.5 rounded-xl border border-gray-100 space-y-1">
                          <div className="flex justify-between"><span className="text-gray-400 font-medium">Email:</span> <span className="font-semibold text-gray-700">{user.email}</span></div>
                          <div className="flex justify-between"><span className="text-gray-400 font-medium">Kontak/WA:</span> <span className="font-semibold text-gray-700">{user.phone}</span></div>
                        </div>

                        {/* Inline Selector & Info */}
                        <div className="flex flex-wrap items-center justify-between gap-2 pt-1">
                          <div className="flex items-center space-x-1 text-gray-700 text-[11px]">
                            <Building className="h-3 w-3 text-amber-500 shrink-0" />
                            <span className="font-medium text-gray-600">{assignedProp ? assignedProp.name : 'Akses Semua Unit'}</span>
                          </div>

                          <div onClick={(e) => e.stopPropagation()} className="shrink-0">
                            <select 
                              value={user.roleId}
                              onChange={(e) => handleAssignRoleDirect(user.id, e.target.value)}
                              className="bg-white border border-gray-200 rounded-lg text-[10px] font-bold text-gray-700 py-1 px-2 outline-hidden focus:ring-2 focus:ring-blue-100 cursor-pointer"
                            >
                              {roles.map((r) => (
                                <option key={r.id} value={r.id}>{r.roleName}</option>
                              ))}
                            </select>
                          </div>
                        </div>
                      </div>
                    );
                  })
                )}
              </div>

              {/* DESKTOP TABLE VIEW */}
              <div className="hidden md:block overflow-hidden">
                <table className="w-full text-left border-collapse table-auto">
                  <thead>
                    <tr className="bg-gray-50/70 border-b border-gray-100 text-[10px] font-bold text-gray-400 uppercase tracking-wider">
                      <th className="px-5 py-3.5 cursor-pointer hover:bg-gray-100 transition-colors select-none w-[50%]" onClick={() => handleToggleUserSort('fullName')}>
                        <div className="flex items-center space-x-1">
                          <span>Identitas & Kontak Gabungan</span>
                          {userSortField === 'fullName' ? (userSortOrder === 'asc' ? <ChevronUp className="h-3 w-3 text-blue-600" /> : <ChevronDown className="h-3 w-3 text-blue-600" />) : <ArrowUpDown className="h-3 w-3 text-gray-300" />}
                        </div>
                      </th>
                      <th className="px-5 py-3.5 cursor-pointer hover:bg-gray-100 transition-colors select-none w-[38%]" onClick={() => handleToggleUserSort('roleId')}>
                        <div className="flex items-center space-x-1">
                          <span>Peran Jabatan & Properti Kelolaan</span>
                          {userSortField === 'roleId' ? (userSortOrder === 'asc' ? <ChevronUp className="h-3 w-3 text-blue-600" /> : <ChevronDown className="h-3 w-3 text-blue-600" />) : <ArrowUpDown className="h-3 w-3 text-gray-300" />}
                        </div>
                      </th>
                      <th className="px-5 py-3.5 text-right w-[12%]">Aksi</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-50 text-xs">
                    {filteredUsers.length === 0 ? (
                      <tr>
                        <td colSpan={3} className="text-center py-12 text-gray-400 italic">
                          Tidak ada data pengguna terdaftar yang sesuai pencarian.
                        </td>
                      </tr>
                    ) : (
                      filteredUsers.map((user) => {
                        const assignedProp = properties.find(p => p.id === user.propertyId);
                        const isSelected = selectedUserId === user.id;
                        
                        // Interactive role styling to make the select element act like a gorgeous colored badge
                        const getRoleBadgeStyle = (roleId: string) => {
                          if (roleId === '1') {
                            return 'bg-purple-50 text-purple-700 border-purple-200 focus:ring-purple-200 hover:bg-purple-100/50';
                          } else if (roleId === '2') {
                            return 'bg-slate-50 text-slate-600 border-slate-200 focus:ring-slate-200 hover:bg-slate-100/50';
                          } else {
                            return 'bg-blue-50 text-blue-700 border-blue-200 focus:ring-blue-200 hover:bg-blue-100/50';
                          }
                        };

                        return (
                          <tr 
                            key={user.id} 
                            onClick={() => setSelectedUserId(user.id)}
                            className={`hover:bg-blue-50/5 transition-colors cursor-pointer border-l-2 ${
                              isSelected ? 'bg-blue-50/20 border-l-blue-500' : 'border-l-transparent'
                            }`}
                          >
                            <td className="px-5 py-4">
                              <div className="flex items-start space-x-3">
                                <div className={`h-9 w-9 rounded-full bg-gradient-to-tr ${getAvatarStyle(user.fullName)} flex items-center justify-center font-bold text-xs shrink-0 shadow-xs mt-0.5 text-white`}>
                                  {user.fullName.substring(0, 2).toUpperCase()}
                                </div>
                                <div className="space-y-1 min-w-0 flex-1">
                                  <div className="font-extrabold text-gray-900 flex items-center gap-1.5 flex-wrap">
                                    <span className="text-sm leading-snug">{user.fullName}</span>
                                    <span className="inline-flex items-center bg-slate-50 border border-slate-100 rounded-lg px-2 py-0.5 font-mono font-bold text-[10px] text-slate-600 shrink-0">
                                      @{user.username}
                                    </span>
                                    {currentUser && currentUser.id === user.id && (
                                      <span className="bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded text-[8px] font-black uppercase tracking-wider shrink-0">Sesi Anda</span>
                                    )}
                                  </div>
                                  <div className="flex items-center space-x-2 text-[11px] text-gray-500 flex-wrap">
                                    <span className="text-gray-700 font-semibold select-all break-all">{user.email}</span>
                                    <span className="text-gray-300">•</span>
                                    <a 
                                      href={`tel:${user.phone}`} 
                                      className="font-bold text-blue-600 hover:text-blue-800 hover:underline select-all flex items-center gap-1 transition-all cursor-pointer bg-blue-50/50 hover:bg-blue-50 px-1.5 py-0.5 rounded-md"
                                      title="Klik untuk menelpon"
                                      onClick={(e) => e.stopPropagation()}
                                    >
                                      <Phone className="h-3 w-3 text-blue-500 shrink-0" />
                                      <span>{user.phone}</span>
                                    </a>
                                  </div>
                                </div>
                              </div>
                            </td>
                            <td className="px-5 py-4">
                              <div className="flex flex-col space-y-1.5 items-start">
                                <div className="flex items-center gap-2 flex-wrap" onClick={(e) => e.stopPropagation()}>
                                  <select 
                                    value={user.roleId}
                                    onChange={(e) => handleAssignRoleDirect(user.id, e.target.value)}
                                    className={`border rounded-xl text-xs font-bold py-1 px-2.5 outline-hidden focus:ring-2 transition-all cursor-pointer ${getRoleBadgeStyle(user.roleId)}`}
                                  >
                                    {roles.map((r) => (
                                      <option key={r.id} value={r.id}>{r.roleName}</option>
                                    ))}
                                  </select>
                                  
                                  {assignedProp ? (
                                    <div className="inline-flex items-center space-x-1 bg-amber-50/50 border border-amber-100 px-2 py-1 rounded-xl text-gray-700 max-w-full">
                                      <Building className="h-3 w-3 text-amber-500 shrink-0" />
                                      <span className="font-semibold text-[10.5px] leading-tight text-gray-800 max-w-[150px] truncate" title={assignedProp.name}>
                                        {assignedProp.name}
                                      </span>
                                    </div>
                                  ) : (
                                    <div className="inline-flex items-center bg-blue-50/80 border border-blue-100 px-2.5 py-1 rounded-xl text-blue-700">
                                      <span className="text-[9px] font-extrabold tracking-wider uppercase">Akses Semua Unit</span>
                                    </div>
                                  )}
                                </div>
                              </div>
                            </td>
                            <td className="px-5 py-4 text-right whitespace-nowrap" onClick={(e) => e.stopPropagation()}>
                              <div className="inline-flex items-center space-x-1 justify-end">
                                <button
                                  onClick={() => handleOpenEditUser(user)}
                                  className="p-1.5 hover:bg-blue-50 hover:text-blue-600 text-gray-400 rounded-lg transition-all cursor-pointer"
                                  title="Edit data pengguna"
                                >
                                  <Edit2 className="h-4 w-4" />
                                </button>
                                <button
                                  onClick={() => handleDeleteUser(user.id)}
                                  disabled={currentUser && currentUser.id === user.id}
                                  className={`p-1.5 rounded-lg transition-all cursor-pointer ${
                                    currentUser && currentUser.id === user.id 
                                      ? 'text-gray-100 cursor-not-allowed bg-transparent' 
                                      : 'hover:bg-rose-50 hover:text-rose-600 text-gray-400'
                                  }`}
                                  title={currentUser && currentUser.id === user.id ? "Tidak bisa menghapus akun sendiri" : "Hapus pengguna"}
                                >
                                  <Trash2 className="h-4 w-4" />
                                </button>
                              </div>
                            </td>
                          </tr>
                        );
                      })
                    )}
                  </tbody>
                </table>
              </div>
            </div>

            {/* Right Interactive Sidebar - User Permission Live Review Drawer */}
            <div className="bg-white rounded-3xl border border-gray-100 p-5 shadow-xs space-y-4 flex flex-col min-h-[420px]">
              <div className="flex items-center space-x-2 border-b border-gray-50 pb-3">
                <Eye className="h-5 w-5 text-indigo-600" />
                <div>
                  <h4 className="font-sans font-extrabold text-sm text-gray-900">Peninjau Hak Akses Detail</h4>
                  <p className="text-[10px] text-gray-400">Verifikasi menu & aksi apa saja yang dapat dibuka user ini</p>
                </div>
              </div>

              {selectedUserId && selectedUserObj ? (
                <div className="space-y-4 animate-in fade-in duration-200">
                  {/* Selected User Header Card */}
                  <div className="p-4 bg-gradient-to-br from-blue-50/50 to-indigo-50/30 border border-blue-100/50 rounded-2xl flex items-center space-x-3.5">
                    <div className={`h-11 w-11 rounded-full bg-gradient-to-tr ${getAvatarStyle(selectedUserObj.fullName)} flex items-center justify-center font-bold text-base shadow-sm shrink-0`}>
                      {selectedUserObj.fullName.substring(0, 2).toUpperCase()}
                    </div>
                    <div className="min-w-0">
                      <span className="font-extrabold text-gray-900 block truncate text-xs">{selectedUserObj.fullName}</span>
                      <span className="text-[10px] text-indigo-600 font-extrabold bg-indigo-50 border border-indigo-100 px-2 py-0.5 rounded-full inline-block mt-0.5">
                        Role: {selectedUserRoleObj?.roleName || 'Tanpa Peran'}
                      </span>
                    </div>
                  </div>

                  {/* Permissions Checklist List */}
                  <div className="space-y-3">
                    <span className="text-[10px] font-black text-gray-400 uppercase tracking-wider block">Menu & Fitur yang Diizinkan:</span>
                    
                    <div className="space-y-1.5 overflow-y-auto max-h-[300px] border border-gray-100 p-3 rounded-2xl bg-gray-50/20 divide-y divide-gray-50">
                      {selectedUserRoleObj && selectedUserRoleObj.permissions && selectedUserRoleObj.permissions.length > 0 ? (
                        selectedUserRoleObj.permissions.map((p) => (
                          <div key={p.id} className="flex items-start space-x-2.5 py-2 first:pt-0">
                            <CheckCircle2 className="h-4 w-4 text-emerald-500 shrink-0 mt-0.5" />
                            <div className="min-w-0">
                              <span className="font-mono font-bold text-gray-700 text-[10px] block truncate">{p.permissionKey}</span>
                              <span className="text-[9px] text-gray-400 block leading-normal mt-0.5">{p.description}</span>
                            </div>
                          </div>
                        ))
                      ) : (
                        <div className="py-8 text-center text-gray-400 italic text-[11px] flex flex-col items-center justify-center space-y-1">
                          <ShieldAlert className="h-6 w-6 text-amber-500" />
                          <span>User Guest / Tidak memiliki hak izin operasional khusus.</span>
                        </div>
                      )}
                    </div>
                  </div>

                  {/* Quick Shortcut Link to Roles tab */}
                  <button 
                    onClick={() => {
                      if (selectedUserRoleObj) setSelectedRoleId(selectedUserRoleObj.id);
                      setActiveTab('roles');
                    }}
                    className="w-full flex items-center justify-center space-x-1.5 py-2.5 rounded-xl border border-indigo-100 hover:bg-indigo-50/50 text-indigo-600 text-[11px] font-bold transition-colors cursor-pointer mt-2"
                  >
                    <span>Sesuaikan Otoritas Role {selectedUserRoleObj?.roleName}</span>
                    <ArrowRight className="h-3.5 w-3.5" />
                  </button>
                </div>
              ) : (
                <div className="flex-1 flex flex-col items-center justify-center text-center py-12 text-gray-400 italic text-xs space-y-2">
                  <Eye className="h-8 w-8 text-gray-300" />
                  <span className="max-w-[200px] leading-relaxed">Silakan pilih salah satu baris pengguna di tabel untuk melihat hak akses menu detailnya secara visual.</span>
                </div>
              )}
            </div>

          </div>
        )}

        {/* 2. TAB: ROLES & PERMISSIONS MATRIX SETUP */}
        {activeTab === 'roles' && (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
            
            {/* Roles List Card selector (1 Column wide on desktop for sidebar-like feel) */}
            <div className="lg:col-span-1 bg-white rounded-3xl border border-gray-100 shadow-xs flex flex-col overflow-hidden">
              <div className="p-5 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
                <div className="space-y-1">
                  <h3 className="font-sans font-black text-sm text-gray-900 flex items-center gap-2">
                    <Shield className="h-4 w-4 text-blue-600" />
                    <span>Konfigurasi Jabatan</span>
                  </h3>
                  <p className="text-[10px] text-gray-400">Pilih peran di bawah ini untuk mengonfigurasi hak aksesnya.</p>
                </div>
                
                <button
                  onClick={handleOpenAddRole}
                  className="flex items-center space-x-1 bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded-xl text-xs font-bold transition-all shadow-xs active:scale-95 cursor-pointer"
                  id="add-new-role-btn"
                >
                  <Plus className="h-3.5 w-3.5" />
                  <span>Tambah</span>
                </button>
              </div>

              {/* Search & Sort for Roles List */}
              <div className="p-3 border-b border-gray-100 space-y-2 bg-gray-50/20">
                <div className="relative">
                  <Search className="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-gray-400" />
                  <input
                    type="text"
                    placeholder="Cari peran..."
                    value={searchRoleQuery}
                    onChange={(e) => setSearchRoleQuery(e.target.value)}
                    className="w-full bg-white border border-gray-200 rounded-lg pl-8 pr-3 py-1.5 text-[11px] focus:outline-hidden focus:ring-2 focus:ring-blue-100 focus:border-blue-500 text-gray-800"
                  />
                </div>
                <div className="flex items-center justify-between gap-1 text-[10px]">
                  <span className="text-gray-400 uppercase font-black tracking-wider">Urutkan Peran:</span>
                  <div className="flex gap-1">
                    <button 
                      onClick={() => handleToggleRoleSort('roleName')}
                      className={`px-1.5 py-0.5 rounded border text-[9px] font-bold cursor-pointer ${roleSortField === 'roleName' ? 'bg-blue-50 text-blue-600 border-blue-200' : 'bg-white text-gray-500 border-gray-200 hover:bg-gray-50'}`}
                    >
                      Nama {roleSortField === 'roleName' ? (roleSortOrder === 'asc' ? '▲' : '▼') : ''}
                    </button>
                    <button 
                      onClick={() => handleToggleRoleSort('permissions')}
                      className={`px-1.5 py-0.5 rounded border text-[9px] font-bold cursor-pointer ${roleSortField === 'permissions' ? 'bg-blue-50 text-blue-600 border-blue-200' : 'bg-white text-gray-500 border-gray-200 hover:bg-gray-50'}`}
                    >
                      Hak Akses {roleSortField === 'permissions' ? (roleSortOrder === 'asc' ? '▲' : '▼') : ''}
                    </button>
                  </div>
                </div>
              </div>

              {/* Roles Cards list */}
              <div className="p-4 space-y-3 max-h-[500px] overflow-y-auto">
                {filteredRoles.map((role) => {
                  const isDefaultRole = ["1", "2", "3", "4"].includes(role.id);
                  const isSelected = selectedRoleId === role.id;
                  return (
                    <div 
                      key={role.id} 
                      onClick={() => setSelectedRoleId(role.id)}
                      className={`p-3.5 rounded-2xl border transition-all flex flex-col justify-between space-y-2.5 cursor-pointer group ${
                        isSelected 
                          ? 'bg-blue-50/40 border-blue-400 shadow-sm' 
                          : 'bg-gray-50/20 border-gray-100 hover:border-gray-200'
                      }`}
                    >
                      <div className="space-y-1">
                        <div className="flex justify-between items-start">
                          <div className="font-extrabold text-gray-900 text-xs flex items-center gap-1.5">
                            <span>{role.roleName}</span>
                            {isDefaultRole && (
                              <span className="inline-flex items-center bg-amber-50 text-amber-700 border border-amber-100/50 px-1.5 py-0.5 rounded text-[8px] font-bold">
                                <Lock className="h-2 w-2 mr-0.5" /> Bawaan
                              </span>
                            )}
                          </div>
                          <span className="text-[9px] font-mono text-gray-400 font-bold">ID: {role.id}</span>
                        </div>
                        <p className="text-[10px] text-gray-500 leading-relaxed font-medium line-clamp-2">
                          {role.description}
                        </p>
                      </div>

                      <div className="flex justify-between items-center pt-2 border-t border-gray-100/30">
                        <span className="bg-blue-100/60 text-blue-800 text-[9px] font-extrabold px-2.5 py-1 rounded-full">
                          {role.permissions ? role.permissions.length : 0} Izin
                        </span>

                        <div className="inline-flex items-center space-x-1" onClick={(e) => e.stopPropagation()}>
                          <button
                            onClick={() => handleOpenEditRole(role)}
                            className="p-1 hover:bg-white border border-transparent hover:border-gray-100 text-gray-400 hover:text-blue-600 rounded-lg transition-all cursor-pointer"
                            title="Edit Peran"
                          >
                            <Edit2 className="h-3.5 w-3.5" />
                          </button>
                          <button
                            onClick={() => handleDeleteRole(role.id)}
                            disabled={isDefaultRole}
                            className={`p-1 border border-transparent rounded-lg transition-all cursor-pointer ${
                              isDefaultRole 
                                ? 'text-gray-100 cursor-not-allowed bg-transparent' 
                                : 'hover:bg-white hover:border-gray-100 text-gray-400 hover:text-rose-600'
                            }`}
                            title={isDefaultRole ? "Peran bawaan sistem tidak bisa dihapus" : "Hapus Peran"}
                          >
                            <Trash2 className="h-3.5 w-3.5" />
                          </button>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

            {/* Matrix Mapping Panel (2 Columns wide on desktop for ultimate space and grouped checkboxes) */}
            <div className="lg:col-span-2 bg-white rounded-3xl border border-gray-100 shadow-xs flex flex-col p-5 space-y-4">
              <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 border-b border-gray-50 pb-3">
                <div className="flex items-center space-x-2.5">
                  <Key className="h-5 w-5 text-indigo-600" />
                  <div>
                    <h3 className="font-sans font-black text-sm text-gray-900">Hubungkan Hak Akses (Matrix Izin)</h3>
                    <p className="text-[10px] text-gray-400">Centang langsung untuk mengizinkan atau menolak hak operasional peran ini</p>
                  </div>
                </div>

                {/* Save Relationship Button (Sticky on top right of matrix for high usability) */}
                <button
                  onClick={handleSaveRolePermissions}
                  disabled={savingRoleId === selectedRoleId}
                  className="flex items-center space-x-1.5 bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-xl text-xs font-bold transition-all shadow-md shadow-emerald-500/10 active:scale-95 cursor-pointer disabled:opacity-50 shrink-0"
                >
                  <Save className="h-4 w-4" />
                  <span>{savingRoleId === selectedRoleId ? 'Menyimpan...' : `Simpan Perubahan`}</span>
                </button>
              </div>

              {/* Selected Role Card banner inside mapping */}
              <div className="bg-gradient-to-r from-blue-50/70 to-indigo-50/40 border border-indigo-100/30 p-4 rounded-2xl flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
                <div className="space-y-1">
                  <span className="text-[9px] font-black text-indigo-500 uppercase tracking-wider block">Otoritas Jabatan Untuk:</span>
                  <span className="font-black text-sm text-gray-950 block">{currentRoleObj?.roleName || 'Pilih Peran...'}</span>
                  <p className="text-[11px] text-gray-500 leading-normal font-medium">{currentRoleObj?.description}</p>
                </div>
                <div className="bg-white/80 border border-indigo-100 px-3 py-1.5 rounded-xl text-[10px] font-bold text-indigo-700 shrink-0 shadow-2xs">
                  {selectedRolePerms.length} dari {permissions.length} Izin Diaktifkan
                </div>
              </div>

              {/* Search & Category Filter bar */}
              <div className="flex flex-col sm:flex-row gap-3">
                <div className="relative flex-1">
                  <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
                  <input
                    type="text"
                    placeholder="Saring atau cari kode hak akses..."
                    value={searchPermQuery}
                    onChange={(e) => setSearchPermQuery(e.target.value)}
                    className="w-full bg-gray-50 border border-gray-200 rounded-xl pl-9 pr-4 py-2 text-xs focus:outline-hidden focus:ring-2 focus:ring-blue-100 focus:bg-white focus:border-blue-500 transition-all text-gray-800"
                  />
                </div>
                <div className="flex items-center space-x-2 shrink-0">
                  <span className="text-[10px] font-black text-gray-400 uppercase tracking-wider">Kategori:</span>
                  <div className="flex bg-gray-100 p-0.5 rounded-lg text-[10px] font-bold">
                    <button 
                      onClick={() => setPermCategoryFilter('all')}
                      className={`px-2 py-1 rounded-md cursor-pointer ${permCategoryFilter === 'all' ? 'bg-white text-blue-600 shadow-xs' : 'text-gray-500 hover:text-gray-900'}`}
                    >
                      Semua
                    </button>
                    <button 
                      onClick={() => setPermCategoryFilter('view')}
                      className={`px-2 py-1 rounded-md cursor-pointer ${permCategoryFilter === 'view' ? 'bg-white text-blue-600 shadow-xs' : 'text-gray-500 hover:text-gray-900'}`}
                    >
                      Menu Saja
                    </button>
                    <button 
                      onClick={() => setPermCategoryFilter('action')}
                      className={`px-2 py-1 rounded-md cursor-pointer ${permCategoryFilter === 'action' ? 'bg-white text-blue-600 shadow-xs' : 'text-gray-500 hover:text-gray-900'}`}
                    >
                      Aksi & CRUD
                    </button>
                  </div>
                </div>
              </div>

              {/* Grouped Permissions Checklist Grid */}
              <div className="space-y-4 max-h-[550px] overflow-y-auto pr-1">
                {searchPermQuery ? (
                  /* FLAT LIST IN GRID IF SEARCHING */
                  <div className="bg-gray-50/50 p-4 rounded-2xl border border-gray-100 space-y-3">
                    <span className="text-[10px] font-black text-gray-400 uppercase tracking-wider block">Hasil Pencarian Izin ({filteredPermissions.length})</span>
                    {filteredPermissions.length === 0 ? (
                      <p className="text-center py-6 text-xs text-gray-400 italic">Tidak ada kunci izin yang cocok.</p>
                    ) : (
                      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2.5">
                        {filteredPermissions.map((p) => {
                          const isChecked = selectedRolePerms.includes(p.id);
                          return (
                            <button
                              key={p.id}
                              onClick={() => handleTogglePermission(p.id)}
                              className={`flex items-center space-x-2.5 p-2.5 rounded-xl border text-left cursor-pointer transition-all ${
                                isChecked 
                                  ? 'bg-blue-50/60 border-blue-200 text-blue-950 shadow-2xs font-semibold' 
                                  : 'bg-white border-gray-100 hover:border-gray-200 text-gray-700 hover:bg-gray-50/50'
                              }`}
                            >
                              {isChecked ? (
                                <CheckSquare className="h-4.5 w-4.5 text-blue-600 shrink-0" />
                              ) : (
                                <Square className="h-4.5 w-4.5 text-gray-300 shrink-0" />
                              )}
                              <div className="min-w-0">
                                <span className="text-xs font-bold block truncate">{getShortLabel(p.permissionKey)}</span>
                                <span className="text-[9px] text-gray-400 block truncate" title={p.description}>{p.description}</span>
                              </div>
                            </button>
                          );
                        })}
                      </div>
                    )}
                  </div>
                ) : (
                  /* ELEGANT GROUPED SECTIONS IF NOT SEARCHING (User request: "CRUD diatas jadi tinggal ceklist") */
                  getGroupedPermissions().map((group) => {
                    if (group.items.length === 0) return null;
                    return (
                      <div key={group.id} className={`p-4 rounded-2xl border ${group.color} space-y-3`}>
                        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-1.5 border-b border-black/[0.04] pb-2">
                          <div>
                            <h4 className="text-xs font-black text-gray-900 flex items-center gap-1.5 uppercase tracking-wider">
                              {group.title}
                            </h4>
                            <p className="text-[10px] text-gray-500 mt-0.5">{group.description}</p>
                          </div>
                          
                          {/* Section Check/Uncheck All Shortcuts */}
                          <div className="flex space-x-2 shrink-0">
                            <button
                              onClick={() => {
                                const groupItemIds = group.items.map(item => item.id);
                                const newPerms = Array.from(new Set([...selectedRolePerms, ...groupItemIds]));
                                setSelectedRolePerms(newPerms);
                              }}
                              className="text-[9px] font-bold text-blue-600 hover:underline bg-white px-2 py-0.5 rounded border border-gray-200/50 cursor-pointer"
                            >
                              Pilih Semua
                            </button>
                            <button
                              onClick={() => {
                                const groupItemIds = group.items.map(item => item.id);
                                const newPerms = selectedRolePerms.filter(id => !groupItemIds.includes(id));
                                setSelectedRolePerms(newPerms);
                              }}
                              className="text-[9px] font-bold text-gray-500 hover:underline bg-white px-2 py-0.5 rounded border border-gray-200/50 cursor-pointer"
                            >
                              Kosongkan
                            </button>
                          </div>
                        </div>

                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2.5">
                          {group.items.map((p) => {
                            const isChecked = selectedRolePerms.includes(p.id);
                            return (
                              <button
                                key={p.id}
                                onClick={() => handleTogglePermission(p.id)}
                                className={`flex items-center space-x-2.5 p-2.5 rounded-xl border text-left cursor-pointer transition-all ${
                                  isChecked 
                                    ? 'bg-blue-50/60 border-blue-200 text-blue-950 shadow-2xs font-semibold' 
                                    : 'bg-white border-gray-100 hover:border-gray-200 text-gray-700 hover:bg-gray-50/50'
                                }`}
                              >
                                {isChecked ? (
                                  <CheckSquare className="h-4.5 w-4.5 text-blue-600 shrink-0" />
                                ) : (
                                  <Square className="h-4.5 w-4.5 text-gray-300 shrink-0" />
                                )}
                                <div className="min-w-0">
                                  <span className="text-xs font-extrabold block truncate">{getShortLabel(p.permissionKey)}</span>
                                  <span className="text-[9px] text-gray-400 block truncate" title={p.description}>{p.description}</span>
                                </div>
                              </button>
                            );
                          })}
                        </div>
                      </div>
                    );
                  })
                )}
              </div>
            </div>
          </div>
        )}

        {/* 3. TAB: MASTER PERMISSIONS LIST */}
        {activeTab === 'permissions' && (
          <div className="bg-white rounded-3xl border border-gray-100 shadow-xs overflow-hidden">
            <div className="p-5 border-b border-gray-100 flex flex-col md:flex-row justify-between items-stretch md:items-center gap-4 bg-gray-50/50">
              <div className="space-y-1">
                <h3 className="font-sans font-black text-sm text-gray-900 flex items-center gap-2">
                  <Key className="h-4 w-4 text-blue-600" />
                  <span>Daftar Kunci Otoritas Global (Master Permissions)</span>
                </h3>
                <p className="text-[10px] text-gray-400">Daftar kunci konstan yang diperiksa oleh sistem pada file PHP CodeIgniter 3 controller / views</p>
              </div>
              <button
                onClick={handleOpenAddPerm}
                className="flex items-center justify-center space-x-1 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-xl text-xs font-bold transition-all shadow-xs cursor-pointer active:scale-95"
                id="add-new-perm-btn"
              >
                <Plus className="h-4 w-4" />
                <span>Tambah Hak Izin</span>
              </button>
            </div>

            {/* Search and Sort panel for Master Permissions */}
            <div className="p-4 border-b border-gray-100 bg-gray-50/20 flex flex-col md:flex-row gap-3 items-center">
              <div className="relative flex-1 w-full">
                <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
                <input
                  type="text"
                  placeholder="Cari kunci izin berdasarkan nama key, deskripsi..."
                  value={searchMasterPermQuery}
                  onChange={(e) => setSearchMasterPermQuery(e.target.value)}
                  className="w-full bg-white border border-gray-200 rounded-xl pl-9 pr-4 py-2 text-xs focus:outline-hidden focus:ring-2 focus:ring-blue-100 focus:bg-white focus:border-blue-500 transition-all text-gray-800 font-medium"
                />
              </div>
              <div className="flex items-center space-x-2 shrink-0 w-full md:w-auto justify-end">
                <span className="text-[10px] font-black text-gray-400 uppercase tracking-wider">Urutkan:</span>
                <select
                  value={`${masterPermSortField}-${masterPermSortOrder}`}
                  onChange={(e) => {
                    const [field, order] = e.target.value.split('-');
                    setMasterPermSortField(field as any);
                    setMasterPermSortOrder(order as any);
                  }}
                  className="bg-white border border-gray-200 rounded-xl text-xs py-2 px-3 focus:outline-hidden focus:ring-2 focus:ring-blue-100 focus:bg-white focus:border-blue-500 transition-all text-gray-700 font-bold cursor-pointer"
                >
                  <option value="permissionKey-asc">Nama Key (A-Z)</option>
                  <option value="permissionKey-desc">Nama Key (Z-A)</option>
                  <option value="description-asc">Deskripsi (A-Z)</option>
                  <option value="description-desc">Deskripsi (Z-A)</option>
                </select>
              </div>
            </div>

            <div className="overflow-x-auto">
              <table className="w-full text-left border-collapse">
                <thead>
                  <tr className="bg-gray-50/70 border-b border-gray-100 text-[10px] font-bold text-gray-400 uppercase tracking-wider">
                    <th className="px-5 py-3.5 cursor-pointer hover:bg-gray-100 transition-colors select-none" onClick={() => handleToggleMasterPermSort('permissionKey')}>
                      <div className="flex items-center space-x-1">
                        <span>Nama Key (Kunci Verifikasi PHP/JS)</span>
                        {masterPermSortField === 'permissionKey' ? (masterPermSortOrder === 'asc' ? <ChevronUp className="h-3 w-3 text-blue-600" /> : <ChevronDown className="h-3 w-3 text-blue-600" />) : <ArrowUpDown className="h-3 w-3 text-gray-300" />}
                      </div>
                    </th>
                    <th className="px-5 py-3.5 cursor-pointer hover:bg-gray-100 transition-colors select-none" onClick={() => handleToggleMasterPermSort('description')}>
                      <div className="flex items-center space-x-1">
                        <span>Deskripsi Tindakan & Kepatuhan</span>
                        {masterPermSortField === 'description' ? (masterPermSortOrder === 'asc' ? <ChevronUp className="h-3 w-3 text-blue-600" /> : <ChevronDown className="h-3 w-3 text-blue-600" />) : <ArrowUpDown className="h-3 w-3 text-gray-300" />}
                      </div>
                    </th>
                    <th className="px-5 py-3.5 text-right">Aksi</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-50 text-xs">
                  {filteredMasterPermissions.length === 0 ? (
                    <tr>
                      <td colSpan={3} className="text-center py-8 text-gray-400 italic">
                        Tidak ada data hak izin master terdaftar yang sesuai pencarian.
                      </td>
                    </tr>
                  ) : (
                    filteredMasterPermissions.map((p) => {
                      const isMenu = p.permissionKey.startsWith('view_');
                      return (
                        <tr key={p.id} className="hover:bg-gray-50/30 transition-colors">
                          <td className="px-5 py-4">
                            <div className="flex flex-col md:flex-row md:items-center gap-2">
                              <span className="font-mono text-xs font-bold text-gray-800 bg-gray-100/80 px-2.5 py-1 rounded-lg border border-gray-200 inline-block shrink-0">
                                {p.permissionKey}
                              </span>
                              <span className={`text-[8px] font-black px-2 py-0.5 rounded-full inline-block uppercase tracking-wider text-center shrink-0 max-w-[120px] ${
                                isMenu ? 'bg-blue-50 text-blue-600 border border-blue-100' : 'bg-purple-50 text-purple-600 border border-purple-100'
                              }`}>
                                {isMenu ? 'Akses Menu' : 'Otoritas Data'}
                              </span>
                            </div>
                          </td>
                          <td className="px-5 py-4 text-gray-500 leading-relaxed font-medium max-w-lg">
                            {p.description}
                          </td>
                          <td className="px-5 py-4 text-right">
                            <div className="inline-flex items-center space-x-1">
                              <button
                                onClick={() => handleOpenEditPerm(p)}
                                className="p-1.5 hover:bg-blue-50 text-blue-600 rounded-lg transition-all cursor-pointer"
                                title="Edit Hak Izin"
                              >
                                <Edit2 className="h-4 w-4" />
                              </button>
                              <button
                                onClick={() => handleDeletePerm(p.id)}
                                className="p-1.5 hover:bg-rose-50 text-rose-600 rounded-lg transition-all cursor-pointer"
                                title="Hapus Hak Izin"
                              >
                                <Trash2 className="h-4 w-4" />
                              </button>
                            </div>
                          </td>
                        </tr>
                      );
                    })
                  )}
                </tbody>
              </table>
            </div>
          </div>
        )}
      </div>

      {/* FOOTER INFORMATIONAL BLOCK ON SCHEMA INTEGRITY */}
      <div className="bg-blue-50/40 p-5 rounded-2xl border border-blue-100/30 flex items-start space-x-3 shadow-2xs">
        <Info className="h-5 w-5 text-indigo-600 mt-0.5 shrink-0 animate-pulse" />
        <div className="text-xs text-indigo-800 space-y-1">
          <span className="font-bold text-indigo-900 block">Informasi Integritas Relasi MySQL Database (Simulated RBAC)</span>
          <p className="leading-relaxed font-medium">
            Perubahan data pada <strong className="text-indigo-950">Pengguna, Peran, dan Izin</strong> di atas secara otomatis merekonsiliasi tabel relasi perantara 
            <code className="bg-indigo-100/50 px-1 rounded text-[11px] font-mono font-bold mx-1">role_permissions</code> secara transaksional dengan klausa 
            <strong className="text-indigo-950 font-mono text-[10px] mx-1">ON DELETE CASCADE</strong>. Jika Anda menghapus peran atau izin, relasi terkait akan dibersihkan tanpa mengorbankan stabilitas database.
          </p>
        </div>
      </div>

      {/* ======================================================================= */}
      {/* USER CRUD MODAL DIALOG */}
      {/* ======================================================================= */}
      {isUserModalOpen && (
        <div className="fixed inset-0 z-50 overflow-y-auto bg-gray-900/40 backdrop-blur-xs flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl border border-gray-100 shadow-xl max-w-md w-full overflow-hidden animate-in fade-in zoom-in-95 duration-150">
            <div className="p-5 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
              <div className="flex items-center space-x-2">
                <Users className="h-5 w-5 text-blue-600" />
                <h4 className="font-sans font-black text-sm text-gray-900">
                  {editingUser ? 'Edit Data Pengguna' : 'Tambah Pengguna Baru'}
                </h4>
              </div>
              <button 
                onClick={() => setIsUserModalOpen(false)}
                className="p-1 hover:bg-gray-100 rounded-lg text-gray-400 hover:text-gray-900 transition-colors cursor-pointer"
              >
                <X className="h-4 w-4" />
              </button>
            </div>

            <form onSubmit={handleSubmitUser} className="p-5 space-y-4">
              <div>
                <label className="text-[10px] font-bold text-gray-400 uppercase tracking-wider block mb-1.5">Nama Lengkap *</label>
                <input
                  type="text"
                  required
                  placeholder="Misal: Budi Santoso"
                  value={userForm.fullName}
                  onChange={(e) => setUserForm({ ...userForm, fullName: e.target.value })}
                  className="w-full bg-gray-50 border border-gray-200 rounded-xl text-xs py-2.5 px-3 focus:outline-hidden focus:ring-2 focus:ring-blue-100 focus:bg-white focus:border-blue-500 transition-all text-gray-800 font-bold"
                />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="text-[10px] font-bold text-gray-400 uppercase tracking-wider block mb-1.5">Username *</label>
                  <input
                    type="text"
                    required
                    placeholder="budi_99"
                    disabled={!!editingUser}
                    value={userForm.username}
                    onChange={(e) => setUserForm({ ...userForm, username: e.target.value.toLowerCase().replace(/\s+/g, '') })}
                    className="w-full bg-gray-50 border border-gray-200 rounded-xl text-xs py-2.5 px-3 focus:outline-hidden focus:ring-2 focus:ring-blue-100 focus:bg-white focus:border-blue-500 transition-all text-gray-800 font-mono disabled:opacity-50 disabled:bg-gray-100 font-bold"
                  />
                </div>
                <div>
                  <label className="text-[10px] font-bold text-gray-400 uppercase tracking-wider block mb-1.5">No. Telepon / WA *</label>
                  <input
                    type="text"
                    required
                    placeholder="0812XXXXXXXX"
                    value={userForm.phone}
                    onChange={(e) => setUserForm({ ...userForm, phone: e.target.value })}
                    className="w-full bg-gray-50 border border-gray-200 rounded-xl text-xs py-2.5 px-3 focus:outline-hidden focus:ring-2 focus:ring-blue-100 focus:bg-white focus:border-blue-500 transition-all text-gray-800 font-bold"
                  />
                </div>
              </div>

              <div>
                <label className="text-[10px] font-bold text-gray-400 uppercase tracking-wider block mb-1.5">Email *</label>
                <input
                  type="email"
                  required
                  placeholder="budi@propertyhub.co.id"
                  value={userForm.email}
                  onChange={(e) => setUserForm({ ...userForm, email: e.target.value })}
                  className="w-full bg-gray-50 border border-gray-200 rounded-xl text-xs py-2.5 px-3 focus:outline-hidden focus:ring-2 focus:ring-blue-100 focus:bg-white focus:border-blue-500 transition-all text-gray-800 font-bold"
                />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="text-[10px] font-bold text-gray-400 uppercase tracking-wider block mb-1.5">Peran Jabatan (Role) *</label>
                  <select
                    value={userForm.roleId}
                    onChange={(e) => setUserForm({ ...userForm, roleId: e.target.value })}
                    className="w-full bg-gray-50 border border-gray-200 rounded-xl text-xs py-2.5 px-3 focus:outline-hidden focus:ring-2 focus:ring-blue-100 focus:bg-white focus:border-blue-500 transition-all text-gray-800 font-bold cursor-pointer"
                  >
                    {roles.map((r) => (
                      <option key={r.id} value={r.id}>{r.roleName}</option>
                    ))}
                  </select>
                </div>

                <div>
                  <label className="text-[10px] font-bold text-gray-400 uppercase tracking-wider block mb-1.5">Properti Kelolaan</label>
                  <select
                    value={userForm.propertyId}
                    onChange={(e) => setUserForm({ ...userForm, propertyId: e.target.value })}
                    className="w-full bg-gray-50 border border-gray-200 rounded-xl text-xs py-2.5 px-3 focus:outline-hidden focus:ring-2 focus:ring-blue-100 focus:bg-white focus:border-blue-500 transition-all text-gray-800 font-bold cursor-pointer"
                  >
                    <option value="">-- Semua Properti --</option>
                    {properties.map((p) => (
                      <option key={p.id} value={p.id}>{p.name}</option>
                    ))}
                  </select>
                </div>
              </div>

              <div className="pt-4 border-t border-gray-100 flex justify-end space-x-2">
                <button
                  type="button"
                  onClick={() => setIsUserModalOpen(false)}
                  className="px-4 py-2 border border-gray-100 hover:bg-gray-50 rounded-xl text-xs font-bold text-gray-600 cursor-pointer"
                >
                  Batal
                </button>
                <button
                  type="submit"
                  className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-xs font-extrabold shadow-md shadow-blue-500/10 cursor-pointer"
                >
                  Simpan Data
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* ======================================================================= */}
      {/* ROLE CRUD MODAL DIALOG */}
      {/* ======================================================================= */}
      {isRoleModalOpen && (
        <div className="fixed inset-0 z-50 overflow-y-auto bg-gray-900/40 backdrop-blur-xs flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl border border-gray-100 shadow-xl max-w-md w-full overflow-hidden animate-in fade-in zoom-in-95 duration-150">
            <div className="p-5 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
              <div className="flex items-center space-x-2">
                <Shield className="h-5 w-5 text-blue-600" />
                <h4 className="font-sans font-black text-sm text-gray-900">
                  {editingRole ? 'Edit Peran (Role)' : 'Tambah Peran Baru'}
                </h4>
              </div>
              <button 
                onClick={() => setIsRoleModalOpen(false)}
                className="p-1 hover:bg-gray-100 rounded-lg text-gray-400 hover:text-gray-900 transition-colors cursor-pointer"
              >
                <X className="h-4 w-4" />
              </button>
            </div>

            <form onSubmit={handleSubmitRole} className="p-5 space-y-4">
              <div>
                <label className="text-[10px] font-bold text-gray-400 uppercase tracking-wider block mb-1.5">Nama Jabatan / Peran (Role Name) *</label>
                <input
                  type="text"
                  required
                  placeholder="Misal: Staff Kebersihan"
                  value={roleForm.roleName}
                  onChange={(e) => setRoleForm({ ...roleForm, roleName: e.target.value })}
                  className="w-full bg-gray-50 border border-gray-200 rounded-xl text-xs py-2.5 px-3 focus:outline-hidden focus:ring-2 focus:ring-blue-100 focus:bg-white focus:border-blue-500 transition-all text-gray-800 font-extrabold"
                />
              </div>

              <div>
                <label className="text-[10px] font-bold text-gray-400 uppercase tracking-wider block mb-1.5">Deskripsi Ringkas Otoritas *</label>
                <textarea
                  required
                  rows={3}
                  placeholder="Deskripsikan ruang lingkup dan tanggung jawab peran ini..."
                  value={roleForm.description}
                  onChange={(e) => setRoleForm({ ...roleForm, description: e.target.value })}
                  className="w-full bg-gray-50 border border-gray-200 rounded-xl text-xs py-2 px-3 focus:outline-hidden focus:ring-2 focus:ring-blue-100 focus:bg-white focus:border-blue-500 transition-all text-gray-800 leading-relaxed font-semibold"
                />
              </div>

              <div className="pt-4 border-t border-gray-100 flex justify-end space-x-2">
                <button
                  type="button"
                  onClick={() => setIsRoleModalOpen(false)}
                  className="px-4 py-2 border border-gray-100 hover:bg-gray-50 rounded-xl text-xs font-bold text-gray-600 cursor-pointer"
                >
                  Batal
                </button>
                <button
                  type="submit"
                  className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-xs font-extrabold shadow-md shadow-blue-500/10 cursor-pointer"
                >
                  Simpan Peran
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* ======================================================================= */}
      {/* PERMISSION CRUD MODAL DIALOG */}
      {/* ======================================================================= */}
      {isPermModalOpen && (
        <div className="fixed inset-0 z-50 overflow-y-auto bg-gray-900/40 backdrop-blur-xs flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl border border-gray-100 shadow-xl max-w-md w-full overflow-hidden animate-in fade-in zoom-in-95 duration-150">
            <div className="p-5 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
              <div className="flex items-center space-x-2">
                <Key className="h-5 w-5 text-blue-600" />
                <h4 className="font-sans font-black text-sm text-gray-900">
                  {editingPerm ? 'Edit Hak Izin (Permission)' : 'Tambah Hak Izin Baru'}
                </h4>
              </div>
              <button 
                onClick={() => setIsPermModalOpen(false)}
                className="p-1 hover:bg-gray-100 rounded-lg text-gray-400 hover:text-gray-900 transition-colors cursor-pointer"
              >
                <X className="h-4 w-4" />
              </button>
            </div>

            <form onSubmit={handleSubmitPerm} className="p-5 space-y-4">
              <div>
                <label className="text-[10px] font-bold text-gray-400 uppercase tracking-wider block mb-1.5">Kunci Izin (Permission Key) *</label>
                <input
                  type="text"
                  required
                  placeholder="Misal: TAMBAH_TRANSAKSI"
                  value={permForm.permissionKey}
                  onChange={(e) => setPermForm({ ...permForm, permissionKey: e.target.value })}
                  className="w-full bg-gray-50 border border-gray-200 rounded-xl text-xs py-2.5 px-3 focus:outline-hidden focus:ring-2 focus:ring-blue-100 focus:bg-white focus:border-blue-500 transition-all text-gray-800 font-mono font-bold"
                />
                <span className="text-[10px] text-gray-400 mt-1.5 block leading-normal">Key akan otomatis divalidasi menjadi UPPERCASE dengan underscore.</span>
              </div>

              <div>
                <label className="text-[10px] font-bold text-gray-400 uppercase tracking-wider block mb-1.5">Deskripsi Izin Operasional *</label>
                <textarea
                  required
                  rows={3}
                  placeholder="Deskripsikan tindakan apa yang diizinkan oleh kunci ini..."
                  value={permForm.description}
                  onChange={(e) => setPermForm({ ...permForm, description: e.target.value })}
                  className="w-full bg-gray-50 border border-gray-200 rounded-xl text-xs py-2 px-3 focus:outline-hidden focus:ring-2 focus:ring-blue-100 focus:bg-white focus:border-blue-500 transition-all text-gray-800 leading-relaxed font-semibold"
                />
              </div>

              <div className="pt-4 border-t border-gray-100 flex justify-end space-x-2">
                <button
                  type="button"
                  onClick={() => setIsPermModalOpen(false)}
                  className="px-4 py-2 border border-gray-100 hover:bg-gray-50 rounded-xl text-xs font-bold text-gray-600 cursor-pointer"
                >
                  Batal
                </button>
                <button
                  type="submit"
                  className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-xs font-extrabold shadow-md shadow-blue-500/10 cursor-pointer"
                >
                  Simpan Hak Izin
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}