import React, { useState } from 'react';
import { useAuth } from '../context/AuthContext';
import { useNavigate } from 'react-router-dom';
import { LayoutDashboard, Utensils, Box, PieChart, LogOut, DollarSign, UtensilsCrossed, Users, Clock } from 'lucide-react';
import DashboardOverview from '../components/admin/DashboardOverview';
import MenuEditor from '../components/admin/MenuEditor';
import InventoryControl from '../components/admin/InventoryControl';
import Reports from '../components/admin/Reports';
import FinanceManager from '../components/admin/FinanceManager';
import UserManager from '../components/admin/UserManager';
import TableManager from '../components/admin/TableManager';
import EmployeeSchedules from '../components/admin/EmployeeSchedules';

export default function AdminDashboard() {
  const { logout, currentUser } = useAuth();
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState('overview');

  const handleLogout = async () => {
    await logout();
    navigate('/login');
  };

  const navItems = [
    { id: 'overview', label: 'Resumen', icon: <LayoutDashboard size={20} /> },
    { id: 'menu', label: 'Menú & Precios', icon: <Utensils size={20} /> },
    { id: 'inventory', label: 'Control de Stock', icon: <Box size={20} /> },
    { id: 'reports', label: 'Reportes y Analítica', icon: <PieChart size={20} /> },
    { id: 'cash', label: 'Caja y Finanzas', icon: <DollarSign size={20} /> },
    { id: 'users', label: 'Equipo y Roles', icon: <Users size={20} /> },
    { id: 'horarios', label: 'Horarios Personal', icon: <Clock size={20} /> },
    { id: 'tables', label: 'Diseño Salón', icon: <LayoutDashboard size={20} /> },
    { id: 'kitchen', label: 'Pantalla Cocina', icon: <UtensilsCrossed size={20} />, action: () => window.open('/kitchen', '_blank') },
    { id: 'menu_public', label: 'Carta Digital', icon: <Utensils size={20} />, action: () => window.open('/menu', '_blank') }
  ];

  return (
    <div className="app-container">
      {/* Sidebar */}
      <aside className="glass-panel" style={{ width: '280px', borderRadius: '0', borderRight: '1px solid var(--border-subtle)', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '2.5rem 1.5rem', borderBottom: '1px solid rgba(255,255,255,0.05)', textAlign: 'center' }}>
          <img src="/images/logo.png" alt="Logo" style={{ height: '50px', marginBottom: '1rem', filter: 'drop-shadow(0 0 10px var(--primary-glow))' }} />
          <h1 className="text-gradient" style={{ fontSize: '1.5rem', fontWeight: '900', letterSpacing: '-1px' }}>ADMIN<span style={{color:'var(--primary)'}}>OS</span></h1>
          <p style={{ color: 'var(--text-muted)', fontSize: '0.75rem', marginTop: '0.25rem', opacity: 0.7 }}>{currentUser?.email}</p>
        </div>

        <nav style={{ flex: 1, padding: '1.5rem 1rem', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
          {navItems.map(item => (
             <button
              key={item.id}
              onClick={() => {
                if (item.action) item.action();
                else setActiveTab(item.id);
              }}
              style={{
                display: 'flex', alignItems: 'center', gap: '1rem', padding: '0.8rem 1rem', width: '100%',
                borderRadius: 'var(--radius-sm)', transition: 'all var(--transition-fast)',
                background: activeTab === item.id ? 'rgba(255,90,95,0.1)' : 'transparent',
                color: activeTab === item.id ? 'var(--primary)' : 'var(--text-muted)',
                fontWeight: activeTab === item.id ? '600' : '500',
                borderLeft: activeTab === item.id ? '3px solid var(--primary)' : '3px solid transparent'
              }}
            >
              {item.icon}
              {item.label}
            </button>
          ))}
        </nav>

        <div style={{ padding: '1.5rem 1rem' }}>
          <button onClick={handleLogout} className="btn-glass" style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem' }}>
            <LogOut size={18} /> Salir
          </button>
        </div>
      </aside>

      {/* Main Content Area */}
      <main className="main-content" style={{ overflowY: 'auto', background: 'var(--bg-base)' }}>
        <div className="animate-fade-in" style={{ width: '100%', maxWidth: '1200px', margin: '0 auto', padding: '2rem' }}>
          {activeTab === 'overview' && <DashboardOverview setActiveTab={setActiveTab} />}
          {activeTab === 'menu' && <MenuEditor />}
          {activeTab === 'inventory' && <InventoryControl />}
          {activeTab === 'reports' && <Reports />}
          {activeTab === 'cash' && <FinanceManager />}
          {activeTab === 'users' && <UserManager />}
          {activeTab === 'horarios' && <EmployeeSchedules />}
          {activeTab === 'tables' && <TableManager />}
        </div>
      </main>
    </div>
  );
}