'use client';

import { useState } from 'react';
import { Shield, Plus, Search, X, Edit, Trash2, Copy, Check, ChevronDown, ChevronRight, BookOpen, FileSearch, Settings, BarChart3, Bike, Users, Briefcase, Truck, Store, BatteryCharging, Building2, Wrench, DollarSign, TrendingUp, UserCog, Bell, MessageSquare } from 'lucide-react';

interface Permission {
  key: string;
  label: string;
  enabled: boolean;
  divider?: boolean;
  pair?: boolean;
}

interface PermissionPair {
  label: string;
  view: Permission;
  edit: Permission;
}

interface PermissionGroup {
  id: string;
  title: string;
  description: string;
  icon: React.ComponentType<{ className?: string }>;
  permissions: Permission[];
  permissionPairs?: PermissionPair[];
}

interface Role {
  id: string;
  name: string;
  description: string;
  isDefault: boolean;
  permissionGroups: PermissionGroup[];
}

const buildDefaultGroups = (): PermissionGroup[] => [
  {
    id: 'kyc',
    title: 'KYC Requests & Verification',
    description: 'The Biker user will request from the app. Biker, Investor, Shop, Merchant will request from the website. Front desk officers (hub/head office) can request for Biker, Investor, Shop, Merchant, and can upload remaining documents. Admin managers (head office) will approve or reject documents with notes and "make a Biker | Investor | Shop | Merchant".',
    icon: FileSearch,
    permissions: [
      { key: 'kyc.request', label: 'KYC Request', enabled: false },
      { key: 'kyc.view', label: 'View KYC Requests', enabled: false },
      { key: 'kyc.doc_upload', label: 'Document Upload', enabled: false },
      { key: 'kyc.doc_approve', label: 'Document Approve', enabled: false },
      { key: 'kyc.doc_reject', label: 'Document Reject', enabled: false },
      { key: 'kyc.make_valid_user', label: 'Make a Biker | Make an Investor | Make a Swap Station | Make a Merchant', enabled: false },
    ]
  },
  {
    id: 'settings',
    title: 'Settings',
    description: 'Manage KYC documents, plans, company policies, and system configuration',
    icon: Settings,
    permissionPairs: [
      {
        label: 'KYC Documents',
        view: { key: 'settings.kyc_documents_view', label: 'View', enabled: false },
        edit: { key: 'settings.kyc_documents_config', label: 'Config', enabled: false },
      },
      {
        label: 'Plan Selection with EV Condition',
        view: { key: 'settings.plan_selection_with_condition_view', label: 'View', enabled: false },
        edit: { key: 'settings.plan_selection_with_condition_config', label: 'Config', enabled: false },
      },
      {
        label: 'EV Investment Plan',
        view: { key: 'settings.investment_plan_view', label: 'View', enabled: false },
        edit: { key: 'settings.investment_plan_config', label: 'Config', enabled: false },
      },
      {
        label: 'Battery Investment Plan',
        view: { key: 'settings.battery_investment_plan_view', label: 'View', enabled: false },
        edit: { key: 'settings.battery_investment_plan_config', label: 'Config', enabled: false },
      },
      {
        label: 'Swap Station Plan',
        view: { key: 'settings.swap_station_plan_view', label: 'View', enabled: false },
        edit: { key: 'settings.swap_station_plan_config', label: 'Config', enabled: false },
      },
      {
        label: 'Rider Request Plan for Merchant',
        view: { key: 'settings.rider_request_plan_for_merchant_view', label: 'View', enabled: false },
        edit: { key: 'settings.rider_request_plan_for_merchant_config', label: 'Config', enabled: false },
      },
      {
        label: 'Company Policy',
        view: { key: 'settings.company_policy_view', label: 'View', enabled: false },
        edit: { key: 'settings.company_policy_config', label: 'Config', enabled: false },
      },
      {
        label: 'Email & SMS Templates',
        view: { key: 'settings.es_templates_view', label: 'View', enabled: false },
        edit: { key: 'settings.es_templates_config', label: 'Config', enabled: false },
      },
      {
        label: 'EV Parts',
        view: { key: 'settings.ev_parts_view', label: 'View', enabled: false },
        edit: { key: 'settings.ev_parts_config', label: 'Config', enabled: false },
      },
    ],
    permissions: [],
  },
  {
    id: 'dashboard',
    title: 'Dashboard',
    description: 'Access to main dashboard insights and summary metrics.',
    icon: BarChart3,
    permissions: [
      { key: 'dashboard.view', label: 'View Dashboard', enabled: false },
    ]
  },
  {
    id: 'rentals',
    title: 'Rentals',
    description: 'Front desk officers can select user, rental type, contract duration, bike, hub and payment methods to create rentals. Bikers can accept or reject rentals. Managers can edit, cancel, lock, or unlock rentals and view default and penalty fee tracking.',
    icon: Bike,
    permissions: [
      { key: 'rental.view', label: 'View Rentals', enabled: false },
      { key: 'rental.create', label: 'Create Rental', enabled: false },
      { key: 'rental.requset', label: 'Rental Request', enabled: false },
      { key: 'rental.accept', label: 'Accept Rental', enabled: false },
      { key: 'rental.reject', label: 'Reject Rental', enabled: false },
      { key: 'rental.edit', label: 'Edit Rental', enabled: false },
      { key: 'rental.cancel', label: 'Cancel Rental', enabled: false },
      { key: 'rental.image_approve', label: 'Image Approve', enabled: false },
      { key: 'rental.lock', label: 'Lock Rental', enabled: false },
      { key: 'rental.unlock', label: 'Unlock Rental', enabled: false },
    ]
  },
  {
    id: 'bikers',
    title: 'Bikers Management',
    description: 'Handle automatic biker profile creation after KYC approval, basic detail updates, status/membership changes, document uploads/removals, internal notes and activity tracking.',
    icon: Users,
    permissions: [
      { key: 'biker.view', label: 'View Biker Profile', enabled: false },
      { key: 'biker.create', label: 'Create Biker Profile', enabled: false },
      { key: 'biker.edit', label: 'Edit Biker Profile', enabled: false },
      { key: 'biker.delete', label: 'Soft Delete / Deactivate Biker', enabled: false },
      { key: 'biker.status_change', label: 'Change Biker Status', enabled: false },
      { key: 'biker.membership_change', label: 'Change Biker Membership', enabled: false },
      { key: 'biker.kyc_view', label: 'View Biker KYC Info', enabled: false },
      { key: 'biker.kyc_update', label: 'Update Biker KYC Info', enabled: false },
      { key: 'biker.activity_view', label: 'View Biker Activity Logs', enabled: false },
      { key: 'biker.document_view', label: 'View Biker Documents', enabled: false },
      { key: 'biker.document_upload', label: 'Upload Biker Documents', enabled: false },
      { key: 'biker.document_delete', label: 'Remove Biker Documents', enabled: false },
      { key: 'biker.rental_history_view', label: 'View Biker Rental History', enabled: false },
      { key: 'biker.payment_history_view', label: 'View Biker Payment History', enabled: false },
      { key: 'biker.wallet_view', label: 'View Biker Wallet Balance', enabled: false },
      { key: 'biker.note_add', label: 'Add Biker Internal Notes', enabled: false },
      { key: 'biker.note_view', label: 'View Biker Internal Notes', enabled: false },
      { key: 'biker.export', label: 'Export Biker Reports & Data', enabled: false },
      { key: 'biker.make_valid_user', label: 'Make Biker Active & Valid', enabled: false },
      { key: 'biker.lock', label: 'Lock Biker Account', enabled: false },
      { key: 'biker.unlock', label: 'Unlock Biker Account', enabled: false },
    ]
  },
  {
    id: 'investors',
    title: 'Investors Management',
    description: 'Manage automatically created profiles, assign EV & Battery Investment plans, oversee bank accounts/tax logs, track daily rental shares, process withdrawal requests and notifications.',
    icon: Briefcase,
    permissions: [
      { key: 'investor.view', label: 'View Investors', enabled: false },
      { key: 'investor.create', label: 'Create Investor Profile', enabled: false },
      { key: 'investor.edit', label: 'Edit Investor Details', enabled: false },
      { key: 'investor.delete', label: 'Soft Delete Investor', enabled: false },
      { key: 'investor.plan_assign', label: 'Assign Investment Plans', enabled: false },
      { key: 'investor.bank_edit', label: 'Manage Bank & Tax Info', enabled: false },
      { key: 'investor.withdraw_request', label: 'Withdrawal Requests', enabled: false },
      { key: 'investor.document_upload', label: 'Upload Investor Documents', enabled: false },
      { key: 'investor.document_approve', label: 'Approve Investor Documents', enabled: false },
      { key: 'investor.notification_view', label: 'View Investor Notifications', enabled: false },
    ]
  },
  {
    id: 'battery',
    title: 'Battery Management',
    description: 'Add new battery assets with pricing, deposit, daily rent, and BMS identifiers. Oversee ownership history, rental transactions, damage logs, maintenance, and data exports.',
    icon: BatteryCharging,
    permissions: [
      { key: 'battery.view', label: 'View Batteries', enabled: false },
      { key: 'battery.create', label: 'Add Battery & BMS Config', enabled: false },
      { key: 'battery.edit', label: 'Edit Battery details', enabled: false },
      { key: 'battery.delete', label: 'Delete Battery Record', enabled: false },
      { key: 'battery.export', label: 'Export Battery History', enabled: false },
    ]
  },
  {
    id: 'fleet',
    title: 'Fleet Management',
    description: 'Register new EV bikes, configure GPS details, associate battery packs, view rental transactions, maintenance, damage history, investor ownership logs, and activity trackers.',
    icon: Truck,
    permissions: [
      { key: 'fleet.view', label: 'View Fleet Vehicles', enabled: false },
      { key: 'fleet.create', label: 'Register New Bike', enabled: false },
      { key: 'fleet.edit', label: 'Edit Fleet Vehicle', enabled: false },
      { key: 'fleet.delete', label: 'Soft Delete Bike', enabled: false },
      { key: 'fleet.gps_config', label: 'Configure Vehicle GPS', enabled: false },
      { key: 'fleet.export', label: 'Export Fleet Records', enabled: false },
    ]
  },
  {
    id: 'service_centers',
    title: 'Service Centers',
    description: 'Add and manage service center listings, locations, and capacity. Track fleet service logs, maintenance logs, and uploaded dealer/biker invoices.',
    icon: Wrench,
    permissions: [
      { key: 'service_center.view', label: 'View Service Centers', enabled: false },
      { key: 'service_center.create', label: 'Create Service Center', enabled: false },
      { key: 'service_center.edit', label: 'Edit Service Center Details', enabled: false },
      { key: 'service_center.delete', label: 'Remove Service Center', enabled: false },
    ]
  },
  {
    id: 'maintenance',
    title: 'Damage & Maintenance',
    description: 'Report damage or technical issues from the biker side, and manage repairs, spare parts inventory, claim notifications, and service schedules on the admin side.',
    icon: Settings,
    permissions: [
      { key: 'maintenance.view', label: 'View Damage Logs', enabled: false },
      { key: 'maintenance.create', label: 'Report Damage/Claim Free Service', enabled: false },
      { key: 'maintenance.edit', label: 'Update Repair Details', enabled: false },
      { key: 'maintenance.delete', label: 'Delete Repair Log', enabled: false },
    ]
  },
  {
    id: 'accounting',
    title: 'Accounting',
    description: 'Oversee automatic journals generated by rentals, verify battery rental deposits, maintain general ledgers, and process and verify investor withdrawal requests.',
    icon: DollarSign,
    permissions: [
      { key: 'accounting.view', label: 'View Financial Ledger', enabled: false },
      { key: 'accounting.create', label: 'Create Financial Entry', enabled: false },
      { key: 'accounting.edit', label: 'Modify Financial Entry', enabled: false },
      { key: 'accounting.delete', label: 'Void Financial Entry', enabled: false },
      { key: 'accounting.withdraw_process', label: 'Process & Pay Withdrawal', enabled: false },
    ]
  },
  {
    id: 'hubs',
    title: 'Hubs Management',
    description: 'Admin can create and manage geographic hubs, assign dedicated Hub Managers, allocate bike/battery inventory, and process hub-specific rentals and KYC checkups.',
    icon: Building2,
    permissions: [
      { key: 'hub.view', label: 'View Hubs', enabled: false },
      { key: 'hub.create', label: 'Create New Hub', enabled: false },
      { key: 'hub.edit', label: 'Edit Hub Details & Staff', enabled: false },
      { key: 'hub.delete', label: 'Deactivate Hub', enabled: false },
    ]
  },
  {
    id: 'reports',
    title: 'Reports & Analytics',
    description: 'Generate, schedule, view, and export comprehensive administrative reports for KYC, fleet, investment payouts, rentals, and general ledger operations.',
    icon: TrendingUp,
    permissions: [
      { key: 'reports.view', label: 'View Reports', enabled: false },
      { key: 'reports.export', label: 'Export Reports (CSV/PDF)', enabled: false },
    ]
  },
  {
    id: 'users',
    title: 'Users & Staff Management',
    description: 'Admin-only module for managing internal administrative users, hub managers, front desk staff, accountants, and Super Admins.',
    icon: UserCog,
    permissions: [
      { key: 'users.view', label: 'View System Users', enabled: false },
      { key: 'users.create', label: 'Create Staff User', enabled: false },
      { key: 'users.edit', label: 'Edit Staff details', enabled: false },
      { key: 'users.delete', label: 'Deactivate Staff User', enabled: false },
    ]
  },
  {
    id: 'roles',
    title: 'Roles & Access Permissions',
    description: 'Super Admin-only module to construct custom administrative roles and configure fine-grained permissions.',
    icon: Shield,
    permissions: [
      { key: 'roles.view', label: 'View Roles list', enabled: false },
      { key: 'roles.config', label: 'Configure & Update Roles', enabled: false },
    ]
  },
  {
    id: 'notifications',
    title: 'Notifications & Messaging',
    description: 'Access system logs, alerts (KYC Verification, Rentals, Vehicle Service, Cabinet, Ledger), compose custom system notifications, broadcast messages, and schedule notifications.',
    icon: Bell,
    permissions: [
      { key: 'notifications.view', label: 'View Notifications', enabled: false },
      { key: 'messaging.compose', label: 'Compose Message', enabled: false },
      { key: 'messaging.broadcast', label: 'Broadcast message', enabled: false },
      { key: 'messaging.schedule', label: 'Schedule notification', enabled: false },
    ]
  }
];

const mockRoles: Role[] = [
  {
    id: 'ROLE-001',
    name: 'Admin',
    description: 'Full system access with all permissions',
    isDefault: false,
    permissionGroups: buildDefaultGroups().map(g => ({
      ...g,
      permissions: g.permissions.map(p => ({ ...p, enabled: true })),
      permissionPairs: g.permissionPairs?.map(p => ({
        ...p,
        view: { ...p.view, enabled: true },
        edit: { ...p.edit, enabled: true }
      }))
    }))
  },
  {
    id: 'ROLE-002',
    name: 'Manager',
    description: 'Management access with limited delete permissions',
    isDefault: false,
    permissionGroups: buildDefaultGroups().map(g => ({
      ...g,
      permissions: g.permissions.map(p => ({
        ...p,
        enabled: !p.key.includes('delete')
      })),
      permissionPairs: g.permissionPairs?.map(p => ({
        ...p,
        view: { ...p.view, enabled: true },
        edit: { ...p.edit, enabled: !p.edit.key.includes('config') && !p.edit.key.includes('delete') }
      }))
    }))
  },
  {
    id: 'ROLE-003',
    name: 'Front Desk Officer',
    description: 'Hub/head office officer - can request KYC, create rentals and upload documents',
    isDefault: false,
    permissionGroups: buildDefaultGroups().map(g => {
      if (g.id === 'kyc') {
        return {
          ...g,
          permissions: g.permissions.map(p => ({
            ...p,
            enabled: ['kyc.request', 'kyc.view', 'kyc.doc_upload'].includes(p.key)
          }))
        };
      }
      if (g.id === 'rentals') {
        return {
          ...g,
          permissions: g.permissions.map(p => ({
            ...p,
            enabled: ['rental.view', 'rental.create', 'rental.image_approve'].includes(p.key)
          }))
        };
      }
      if (g.id === 'bikers') {
        return {
          ...g,
          permissions: g.permissions.map(p => ({
            ...p,
            enabled: ['biker.view', 'biker.edit', 'biker.kyc_view', 'biker.kyc_update', 'biker.activity_view', 'biker.document_view', 'biker.document_upload', 'biker.rental_history_view', 'biker.payment_history_view', 'biker.wallet_view', 'biker.note_add', 'biker.note_view'].includes(p.key)
          }))
        };
      }
      if (g.id === 'investors') {
        return {
          ...g,
          permissions: g.permissions.map(p => ({
            ...p,
            enabled: ['investor.view', 'investor.document_upload'].includes(p.key)
          }))
        };
      }
      if (g.id === 'settings') {
        return {
          ...g,
          permissionPairs: g.permissionPairs?.map(p => ({
            ...p,
            view: { ...p.view, enabled: true },
            edit: { ...p.edit, enabled: false }
          }))
        };
      }
      if (g.id === 'dashboard') {
        return { ...g, permissions: g.permissions.map(p => ({ ...p, enabled: true })) };
      }
      if (['battery', 'fleet', 'service_centers', 'maintenance', 'accounting', 'hubs', 'reports'].includes(g.id)) {
        return {
          ...g,
          permissions: g.permissions.map(p => ({
            ...p,
            enabled: p.key.includes('view')
          }))
        };
      }
      return g;
    })
  },
  {
    id: 'ROLE-004',
    name: 'Admin Officer',
    description: 'Head office officer - can approve/reject KYC documents and make valid users',
    isDefault: false,
    permissionGroups: buildDefaultGroups().map(g => {
      if (g.id === 'kyc') {
        return {
          ...g,
          permissions: g.permissions.map(p => ({
            ...p,
            enabled: ['kyc.view', 'kyc.doc_approve', 'kyc.doc_reject', 'kyc.make_valid_user'].includes(p.key)
          }))
        };
      }
      if (g.id === 'dashboard') {
        return { ...g, permissions: g.permissions.map(p => ({ ...p, enabled: true })) };
      }
      return g;
    })
  },
  {
    id: 'ROLE-005',
    name: 'Biker',
    description: 'Limited access for bike riders - can view dashboard, request KYC, manage rentals',
    isDefault: false,
    permissionGroups: buildDefaultGroups().map(g => {
      if (g.id === 'dashboard') {
        return { ...g, permissions: g.permissions.map(p => ({ ...p, enabled: true })) };
      }
      if (g.id === 'kyc') {
        return {
          ...g,
          permissions: g.permissions.map(p => ({
            ...p,
            enabled: ['kyc.request', 'kyc.view'].includes(p.key)
          }))
        };
      }
      if (g.id === 'rentals') {
        return {
          ...g,
          permissions: g.permissions.map(p => ({
            ...p,
            enabled: ['rental.requset', 'rental.accept', 'rental.reject', 'rental.view'].includes(p.key)
          }))
        };
      }
      if (g.id === 'bikers') {
        return {
          ...g,
          permissions: g.permissions.map(p => ({
            ...p,
            enabled: ['biker.view'].includes(p.key)
          }))
        };
      }
      return g;
    })
  },
];

function Toggle({ checked, onChange, color = 'blue' }: { checked: boolean; onChange: () => void; color?: string }) {
  const colors: Record<string, string> = {
    blue: checked ? 'bg-blue-600' : 'bg-slate-200',
    green: checked ? 'bg-green-600' : 'bg-slate-200',
    amber: checked ? 'bg-amber-600' : 'bg-slate-200',
    red: checked ? 'bg-red-600' : 'bg-slate-200',
  };
  return (
    <button
      onClick={onChange}
      className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${colors[color] || colors.blue}`}
    >
      <span
        className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${checked ? 'translate-x-4' : 'translate-x-1'
          }`}
      />
    </button>
  );
}

export default function RolesPage() {
  const [roles, setRoles] = useState<Role[]>(mockRoles);
  const [search, setSearch] = useState('');
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [editingRole, setEditingRole] = useState<Role | null>(null);
  const [selectedRole, setSelectedRole] = useState<Role | null>(null);
  const [expandedGroups, setExpandedGroups] = useState<Record<string, boolean>>({});
  const [formData, setFormData] = useState({ name: '', description: '' });

  const filteredRoles = roles.filter(r =>
    r.name.toLowerCase().includes(search.toLowerCase()) ||
    r.description.toLowerCase().includes(search.toLowerCase())
  );

  const handleSave = () => {
    if (!formData.name) return;
    if (editingRole) {
      setRoles(roles.map(r => r.id === editingRole.id ? { ...r, ...formData, isDefault: false } : r));
    } else {
      const newRole: Role = {
        id: `ROLE-${String(roles.length + 1).padStart(3, '0')}`,
        ...formData,
        isDefault: false,
        permissionGroups: buildDefaultGroups()
      };
      setRoles([...roles, newRole]);
    }
    setShowCreateModal(false);
    setEditingRole(null);
    setFormData({ name: '', description: '' });
  };

  const handleDelete = (id: string) => {
    if (confirm('Are you sure you want to delete this role?')) {
      setRoles(roles.filter(r => r.id !== id));
      setSelectedRole(null);
    }
  };

  const handleDuplicate = (role: Role) => {
    const newRole: Role = {
      id: `ROLE-${String(roles.length + 1).padStart(3, '0')}`,
      name: `${role.name} (Copy)`,
      description: role.description,
      isDefault: false,
      permissionGroups: role.permissionGroups.map(g => ({
        ...g,
        permissions: g.permissions.map(p => ({ ...p }))
      }))
    };
    setRoles([...roles, newRole]);
    setSelectedRole(newRole);
  };

  const openEdit = (role: Role) => {
    setEditingRole(role);
    setFormData({ name: role.name, description: role.description });
    setShowCreateModal(true);
  };

  const togglePermission = (groupIndex: number, permIndex: number) => {
    if (!selectedRole) return;
    const updated = [...selectedRole.permissionGroups];
    const perm = updated[groupIndex].permissions[permIndex];
    perm.enabled = !perm.enabled;
    setSelectedRole({ ...selectedRole, permissionGroups: updated });
    setRoles(roles.map(r => r.id === selectedRole.id ? { ...selectedRole, permissionGroups: updated } : r));
  };

  const togglePermissionPair = (groupIndex: number, pairIndex: number, type: 'view' | 'edit') => {
    if (!selectedRole) return;
    const updated = [...selectedRole.permissionGroups];
    const pair = updated[groupIndex].permissionPairs![pairIndex];
    pair[type].enabled = !pair[type].enabled;
    setSelectedRole({ ...selectedRole, permissionGroups: updated });
    setRoles(roles.map(r => r.id === selectedRole.id ? { ...selectedRole, permissionGroups: updated } : r));
  };

  const toggleGroupAll = (groupIndex: number, enabled: boolean) => {
    if (!selectedRole) return;
    const updated = [...selectedRole.permissionGroups];
    const group = updated[groupIndex];
    if (group.permissionPairs) {
      group.permissionPairs = group.permissionPairs.map(p => ({
        ...p,
        view: { ...p.view, enabled },
        edit: { ...p.edit, enabled },
      }));
    } else {
      group.permissions = group.permissions.map(p => ({ ...p, enabled }));
    }
    setSelectedRole({ ...selectedRole, permissionGroups: updated });
    setRoles(roles.map(r => r.id === selectedRole.id ? { ...selectedRole, permissionGroups: updated } : r));
  };

  const isGroupAllEnabled = (group: PermissionGroup) => {
    if (group.permissionPairs) {
      return group.permissionPairs.every(p => p.view.enabled && p.edit.enabled);
    }
    return group.permissions.every(p => p.enabled);
  };

  const getEnabledCount = (group: PermissionGroup) => {
    if (group.permissionPairs) {
      return group.permissionPairs.filter(p => p.view.enabled && p.edit.enabled).length;
    }
    return group.permissions.filter(p => p.enabled).length;
  };

  const getTotalCount = (group: PermissionGroup) => {
    if (group.permissionPairs) {
      return group.permissionPairs.length;
    }
    return group.permissions.length;
  };

  const getTotalEnabled = (role: Role) => role.permissionGroups.reduce((a, g) => {
    if (g.permissionPairs) {
      return a + g.permissionPairs.filter(p => p.view.enabled && p.edit.enabled).length;
    }
    return a + g.permissions.filter(p => p.enabled).length;
  }, 0);

  const toggleGroup = (groupId: string) => {
    setExpandedGroups(prev => ({ ...prev, [groupId]: !prev[groupId] }));
  };

  return (
    <div className="p-4 lg:p-6">
      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
        <div>
          <h1 className="text-2xl lg:text-3xl font-extrabold text-slate-800">Roles & Permissions</h1>
          <p className="text-sm text-slate-500 mt-1">Manage roles and access permissions</p>
        </div>
        <button
          onClick={() => {
            setEditingRole(null);
            setFormData({ name: '', description: '' });
            setShowCreateModal(true);
          }}
          className="py-2.5 px-4 bg-accent text-white rounded-lg font-semibold text-sm hover:bg-accent-dark transition-colors flex items-center gap-2"
        >
          <Plus className="w-4 h-4" /> Create Role
        </button>
      </div>

      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
          <p className="text-2xl font-extrabold text-slate-800">{roles.length}</p>
          <p className="text-sm text-slate-500">Total Roles</p>
        </div>
        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
          <p className="text-2xl font-extrabold text-green-600">{roles.filter(r => r.isDefault).length}</p>
          <p className="text-sm text-slate-500">Default Roles</p>
        </div>
        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
          <p className="text-2xl font-extrabold text-blue-600">{roles.reduce((a, r) => a + getTotalEnabled(r), 0)}</p>
          <p className="text-sm text-slate-500">Total Permissions</p>
        </div>
        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
          <p className="text-2xl font-extrabold text-purple-600">{selectedRole ? getTotalEnabled(selectedRole) : '-'}</p>
          <p className="text-sm text-slate-500">Selected Role Perms</p>
        </div>
      </div>

      <div className="grid lg:grid-cols-3 gap-6">
        <div className="lg:col-span-1 bg-white rounded-xl shadow-sm border border-slate-100">
          <div className="p-4 border-b border-slate-100">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
              <input
                type="text"
                placeholder="Search roles..."
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                className="w-full pl-10 pr-4 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
              />
            </div>
          </div>
          <div className="divide-y divide-slate-50 max-h-[600px] overflow-y-auto">
            {filteredRoles.map(role => (
              <div
                key={role.id}
                className={`p-4 hover:bg-slate-50 cursor-pointer transition-colors ${selectedRole?.id === role.id ? 'bg-accent-light' : ''}`}
                onClick={() => setSelectedRole(role)}
              >
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-slate-700">{role.name}</p>
                    <p className="text-xs text-slate-400 truncate">{role.description}</p>
                  </div>
                  {role.isDefault && (
                    <span className="text-xs px-2 py-0.5 bg-accent-light text-accent rounded-full">Default</span>
                  )}
                </div>
                <div className="flex items-center gap-2 mt-2 text-xs text-slate-400">
                  <span>{getTotalEnabled(role)} permissions</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="lg:col-span-2 bg-white rounded-xl shadow-sm border border-slate-100">
          {selectedRole ? (
            <>
              <div className="p-4 border-b border-slate-100 flex items-center justify-between">
                <div>
                  <h3 className="text-lg font-semibold text-slate-800">{selectedRole.name}</h3>
                  <p className="text-sm text-slate-500">{selectedRole.description}</p>
                </div>
                <div className="flex gap-2">
                  <button onClick={() => handleDuplicate(selectedRole)} className="p-2 hover:bg-slate-100 rounded-lg text-slate-600">
                    <Copy className="w-4 h-4" />
                  </button>
                  <button onClick={() => openEdit(selectedRole)} className="p-2 hover:bg-slate-100 rounded-lg text-slate-600">
                    <Edit className="w-4 h-4" />
                  </button>
                  {!selectedRole.isDefault && (
                    <button onClick={() => handleDelete(selectedRole.id)} className="p-2 hover:bg-red-50 rounded-lg text-red-500">
                      <Trash2 className="w-4 h-4" />
                    </button>
                  )}
                </div>
              </div>
              <div className="p-4 space-y-3 max-h-[600px] overflow-y-auto">
                {selectedRole.permissionGroups.map((group, gi) => (
                  <div key={group.id} className="border border-slate-200 rounded-lg">
                    <div
                      className="flex items-center justify-between p-3 cursor-pointer hover:bg-slate-50"
                      onClick={() => toggleGroup(group.id)}
                    >
                      <div className="flex items-center gap-3">
                        <group.icon className="w-5 h-5 text-slate-600" />
                        <div>
                          <p className="text-sm font-medium text-slate-700">{group.title}</p>
                          <p className="text-xs text-slate-400">{getEnabledCount(group)}/{getTotalCount(group)} enabled</p>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <button
                          onClick={(e) => {
                            e.stopPropagation();
                            toggleGroupAll(gi, !isGroupAllEnabled(group));
                          }}
                          className="text-xs px-2 py-1 bg-slate-100 hover:bg-slate-200 rounded text-slate-600"
                        >
                          {isGroupAllEnabled(group) ? 'Uncheck All' : 'Check All'}
                        </button>
                        {expandedGroups[group.id] ? (
                          <ChevronDown className="w-4 h-4 text-slate-400" />
                        ) : (
                          <ChevronRight className="w-4 h-4 text-slate-400" />
                        )}
                      </div>
                    </div>
                    {expandedGroups[group.id] && (
                      <div className="border-t border-slate-200">
                        <div className="px-3 py-2 bg-slate-50">
                          <p className="text-xs text-slate-500">{group.description}</p>
                        </div>
                        {group.permissionPairs ? (
                          <div className="divide-y divide-slate-200">
                            {group.permissionPairs.map((pair, pairIdx) => (
                              <div key={pair.label}>
                                <div className="flex items-center justify-between px-3 py-2.5">
                                  <span className="text-sm font-medium text-slate-700">{pair.label}</span>
                                  <div className="flex items-center gap-4">
                                    <div className="flex items-center gap-2">
                                      {pair.view.enabled ? (
                                        <Check className="w-4 h-4 text-green-600" />
                                      ) : (
                                        <X className="w-4 h-4 text-slate-300" />
                                      )}
                                      <span className="text-xs text-slate-600">{pair.view.label}</span>
                                      <Toggle
                                        checked={pair.view.enabled}
                                        onChange={() => togglePermissionPair(gi, pairIdx, 'view')}
                                      />
                                    </div>
                                    <div className="flex items-center gap-2">
                                      {pair.edit.enabled ? (
                                        <Check className="w-4 h-4 text-green-600" />
                                      ) : (
                                        <X className="w-4 h-4 text-slate-300" />
                                      )}
                                      <span className="text-xs text-slate-600">{pair.edit.label}</span>
                                      <Toggle
                                        checked={pair.edit.enabled}
                                        onChange={() => togglePermissionPair(gi, pairIdx, 'edit')}
                                      />
                                    </div>
                                  </div>
                                </div>
                                {/* {pairIdx < (group.permissionPairs?.length || 0) - 1 && (
                                    <hr className="my-2 border-slate-200" />
                                  )} */}
                              </div>
                            ))}
                          </div>
                        ) : (
                          // <div className="divide-y divide-slate-100">
                          <div className="divide-y divide-slate-100">
                            {group.permissions.map((perm, pi) => (
                              <div key={perm.key} className="flex items-center justify-between px-3 py-2.5">
                                <div className="flex items-center gap-2">
                                  {perm.enabled ? (
                                    <Check className="w-4 h-4 text-green-600" />
                                  ) : (
                                    <X className="w-4 h-4 text-slate-300" />
                                  )}
                                  <span className="text-sm text-slate-700">{perm.label}</span>
                                  <span className="text-xs text-slate-400 font-mono">{perm.key}</span>
                                </div>
                                <Toggle
                                  checked={perm.enabled}
                                  onChange={() => togglePermission(gi, pi)}
                                />
                              </div>
                            ))}
                          </div>
                        )}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </>
          ) : (
            <div className="p-12 text-center text-slate-500">
              <Shield className="w-12 h-12 mx-auto mb-4 text-slate-300" />
              <p className="text-sm">Select a role to view and edit permissions</p>
            </div>
          )}
        </div>
      </div>

      {showCreateModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
              <h3 className="font-semibold text-slate-800">{editingRole ? 'Edit Role' : 'Create New Role'}</h3>
              <button onClick={() => setShowCreateModal(false)} className="text-slate-400 hover:text-slate-600">
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="p-4 space-y-4">
              <div>
                <label className="text-sm text-slate-600">Role Name *</label>
                <input
                  type="text"
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  placeholder="e.g., Super Manager"
                />
              </div>
              <div>
                <label className="text-sm text-slate-600">Description</label>
                <textarea
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  rows={2}
                  placeholder="Describe what this role can do"
                />
              </div>
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
              <button
                onClick={() => setShowCreateModal(false)}
                className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm"
              >
                Cancel
              </button>
              <button
                onClick={handleSave}
                disabled={!formData.name}
                className="px-4 py-2 bg-accent text-white rounded-lg text-sm disabled:opacity-50"
              >
                {editingRole ? 'Update' : 'Create'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}