import React, { useState } from 'react';
import { Outlet, NavLink, useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';

const navItems = [
  { to: '/', label: 'Dashboard', icon: '📊', end: true },
  { to: '/vehicles', label: 'Vehicles', icon: '🚛' },
  { to: '/drivers', label: 'Drivers', icon: '👤' },
  { to: '/trips', label: 'Trips', icon: '🗺️' },
  { to: '/fuel', label: 'Fuel', icon: '⛽' },
  { to: '/maintenance', label: 'Maintenance', icon: '🔧' },
  { to: '/customers', label: 'Customers', icon: '🏢' },
  { to: '/invoices', label: 'Invoices', icon: '📄' },
  { to: '/payments', label: 'Payments', icon: '💳' },
  { to: '/reports', label: 'Reports', icon: '📈' },
];

export default function Layout() {
  const { user, logout } = useAuth();
  const navigate = useNavigate();
  const [sidebarOpen, setSidebarOpen] = useState(true);

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

  return (
    <div className="flex h-screen bg-gray-50 overflow-hidden">
      <aside className={`${sidebarOpen ? 'w-64' : 'w-16'} bg-gray-900 text-white flex flex-col transition-all duration-300 flex-shrink-0`}>
        <div className="p-4 flex items-center gap-3 border-b border-gray-700">
          <span className="text-2xl">🚛</span>
          {sidebarOpen && <div><p className="font-bold text-lg leading-none">SwiftWheels</p><p className="text-xs text-gray-400">Fleet Management</p></div>}
        </div>
        <nav className="flex-1 py-4 overflow-y-auto">
          {navItems.map(item => (
            <NavLink key={item.to} to={item.to} end={item.end}
              className={({ isActive }) => `flex items-center gap-3 px-4 py-2.5 mx-2 rounded-lg transition-colors ${isActive ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white'}`}>
              <span className="text-lg flex-shrink-0">{item.icon}</span>
              {sidebarOpen && <span className="text-sm font-medium">{item.label}</span>}
            </NavLink>
          ))}
        </nav>
        <div className="p-4 border-t border-gray-700">
          {sidebarOpen && <div className="mb-3"><p className="text-sm font-medium">{user?.name}</p><p className="text-xs text-gray-400 capitalize">{user?.role?.replace('_',' ')}</p></div>}
          <button onClick={handleLogout} className="flex items-center gap-2 text-gray-300 hover:text-white text-sm w-full">
            <span>🚪</span>{sidebarOpen && 'Logout'}
          </button>
        </div>
      </aside>

      <div className="flex-1 flex flex-col overflow-hidden">
        <header className="bg-white border-b border-gray-200 px-6 py-3 flex items-center gap-4">
          <button onClick={() => setSidebarOpen(!sidebarOpen)} className="text-gray-500 hover:text-gray-700 text-xl">☰</button>
          <div className="ml-auto flex items-center gap-4">
            <span className="text-sm text-gray-600">Welcome, <strong>{user?.name}</strong></span>
            <span className="badge-info capitalize">{user?.role?.replace('_',' ')}</span>
          </div>
        </header>
        <main className="flex-1 overflow-y-auto p-6">
          <Outlet />
        </main>
      </div>
    </div>
  );
}
