import React from 'react';
import { useAuth } from '../context/AuthContext';
import { useNavigate, useLocation } from 'react-router-dom';
import { Siren, Home, Shield, History, LogOut, Building2 } from 'lucide-react';

export default function Layout({ children }) {
  const { user, logout } = useAuth();
  const navigate = useNavigate();
  const location = useLocation();
  const isAdmin = ['admin', 'superadmin', 'gerente'].includes(user?.rol);
  const isSuperAdmin = user?.rol === 'superadmin';

  const navItems = [
    { path: '/', label: 'Panel', icon: Home },
    ...(isAdmin ? [{ path: '/admin', label: 'Admin', icon: Shield }] : []),
    { path: '/historial', label: 'Historial', icon: History },
    ...(isSuperAdmin ? [{ path: '/tenants', label: 'Tenants', icon: Building2 }] : []),
  ];

  return (
    <div className="min-h-screen bg-zinc-50 dark:bg-zinc-950">
      {/* Top bar */}
      <header className="sticky top-0 z-40 bg-white/80 dark:bg-zinc-900/80 backdrop-blur border-b border-zinc-200 dark:border-zinc-800">
        <div className="max-w-5xl mx-auto px-4 h-14 flex items-center justify-between">
          <div className="flex items-center gap-2 cursor-pointer" onClick={() => navigate('/')}>
            <Siren className="h-6 w-6 text-red-500" />
            <span className="font-black text-lg tracking-tight">4Alarm</span>
          </div>
          <div className="flex items-center gap-1">
            <span className="text-xs text-zinc-500 mr-2 hidden sm:block">{user?.nombre}</span>
            <button onClick={() => { logout(); navigate('/login'); }} className="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors" data-testid="btn-logout">
              <LogOut className="h-4 w-4 text-zinc-500" />
            </button>
          </div>
        </div>
      </header>

      {/* Content */}
      <main className="max-w-5xl mx-auto px-4 py-6 pb-24 md:pb-6">
        {children}
      </main>

      {/* Bottom nav (mobile) */}
      <nav className="fixed bottom-0 left-0 right-0 z-40 bg-white/90 dark:bg-zinc-900/90 backdrop-blur border-t border-zinc-200 dark:border-zinc-800 md:hidden">
        <div className="flex items-center justify-around h-16">
          {navItems.map(item => {
            const active = location.pathname === item.path;
            return (
              <button key={item.path} onClick={() => navigate(item.path)}
                className={`flex flex-col items-center gap-1 px-3 py-1 rounded-lg transition-colors ${active ? 'text-red-500' : 'text-zinc-400'}`}
              >
                <item.icon className="h-5 w-5" />
                <span className="text-[10px] font-medium">{item.label}</span>
              </button>
            );
          })}
        </div>
      </nav>
    </div>
  );
}