import { Navigate, Outlet, useLocation } from 'react-router-dom';
import { useAuthStore } from '../store/authStore';
import {
  LogOut, LayoutDashboard, FolderTree, Users,
  FileText, DollarSign, Eye, History, User as ClientIcon, Search
} from 'lucide-react';

export default function ProtectedLayout() {
  const { isAuthenticated, role, logout } = useAuthStore();
  const location = useLocation();

  if (!isAuthenticated) return <Navigate to="/login" replace />;

  // Definición de permisos por ruta
  const menuItems = [
    { label: 'Dashboard', href: '/', icon: <LayoutDashboard size={20} />, roles: ['Admin', 'Cajero'] },
    { label: 'Moderación', href: '/moderation', icon: <Eye size={20} />, roles: ['Admin', 'Moderador'] },
    { label: 'Explorador', href: '/listings', icon: <Search size={20} />, roles: ['Admin', 'Cajero', 'Moderador'] },
    { label: 'Clientes', href: '/clients', icon: <ClientIcon size={20} />, roles: ['Admin', 'Cajero'] },
    { label: 'Categorías', href: '/categories', icon: <FolderTree size={20} />, roles: ['Admin'] },
    { label: 'Usuarios', href: '/users', icon: <Users size={20} />, roles: ['Admin'] },
    { label: 'Tarifas', href: '/pricing', icon: <DollarSign size={20} />, roles: ['Admin'] },
    { label: 'Diagramación', href: '/diagram', icon: <FileText size={20} />, roles: ['Admin', 'Diagramador'] },
    { label: 'Auditoría', href: '/audit', icon: <History size={20} />, roles: ['Admin'] },
  ];

  return (
    <div className="flex h-screen bg-gray-100 overflow-hidden">
      <aside className="w-64 bg-gray-900 text-white flex flex-col shadow-xl">
        <div className="p-6 text-xl font-black border-b border-gray-800 tracking-tighter italic text-blue-500">
          SIG-CM <span className="text-[10px] text-gray-500 not-italic font-medium">ADMIN</span>
        </div>

        <nav className="flex-1 p-4 space-y-1">
          {menuItems.map((item) => {
            // FILTRO DE SEGURIDAD UI: Solo mostrar si el rol del usuario está permitido
            if (!item.roles.includes(role || '')) return null;

            return (
              <a
                key={item.href}
                href={item.href}
                className={`flex items-center gap-3 p-3 rounded-xl transition-all ${location.pathname === item.href
                    ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20'
                    : 'text-gray-400 hover:bg-gray-800 hover:text-white'
                  }`}
              >
                {item.icon}
                <span className="font-medium text-sm">{item.label}</span>
              </a>
            );
          })}
        </nav>

        <div className="p-4 border-t border-gray-800">
          <div className="mb-4 px-3 py-2 bg-gray-800/50 rounded-lg">
            <p className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Sesión actual</p>
            <p className="text-xs font-bold text-blue-400">{role}</p>
          </div>
          <button onClick={logout} className="flex items-center gap-3 text-red-400 hover:text-red-300 w-full p-2 transition-colors text-sm font-bold">
            <LogOut size={18} /> Cerrar Sesión
          </button>
        </div>
      </aside>

      <main className="flex-1 overflow-y-auto p-8 relative">
        <Outlet />
      </main>
    </div>
  );
}