import React, { useState, useEffect } from 'react';
import Sidebar, { View } from './fleet/Sidebar';
import Topbar from './fleet/Topbar';
import Dashboard from './fleet/Dashboard';
import DispatchBoard from './fleet/DispatchBoard';
import LoadsView from './fleet/LoadsView';
import DriversView from './fleet/DriversView';
import FleetView from './fleet/FleetView';
import FinancialsView from './fleet/FinancialsView';
import BrokersView from './fleet/BrokersView';
import AIAssistant from './fleet/AIAssistant';
import NewLoadModal from './fleet/NewLoadModal';
import DemoModal from './fleet/DemoModal';
import AuthModal from './fleet/AuthModal';
import { useAuth, roleViews } from '@/contexts/AuthContext';
import { Sparkles } from 'lucide-react';

const viewMeta: Record<View, { title: string; subtitle: string }> = {
  dashboard: { title: 'Fleet Dashboard', subtitle: 'Real-time overview of your operation' },
  dispatch: { title: 'Dispatch Board', subtitle: 'Drag loads between stages to update status' },
  loads: { title: 'Load Management', subtitle: 'Create, assign and track every load' },
  drivers: { title: 'Drivers', subtitle: 'Profiles, compliance & performance' },
  fleet: { title: 'Fleet', subtitle: 'Trucks, trailers & maintenance' },
  financials: { title: 'Financials', subtitle: 'Revenue, expenses & profitability' },
  brokers: { title: 'Broker CRM', subtitle: 'Credit ratings, payments & contacts' },
  ai: { title: 'AI Dispatcher', subtitle: 'Smart, profit-optimized load matching' },
};

// Views visible to guests (not signed in) — preview only
const guestViews: string[] = ['dashboard', 'loads'];

const AppLayout: React.FC = () => {
  const { profile, role, signOut } = useAuth();
  const [active, setActive] = useState<View>('dashboard');
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [newLoadOpen, setNewLoadOpen] = useState(false);
  const [demoOpen, setDemoOpen] = useState(false);
  const [authOpen, setAuthOpen] = useState(false);

  const allowedViews = role ? roleViews[role] : guestViews;

  // If current view becomes disallowed (e.g. after sign out), fall back to dashboard
  useEffect(() => {
    if (!allowedViews.includes(active)) {
      setActive('dashboard');
    }
  }, [allowedViews, active]);

  const meta = viewMeta[active];

  return (
    <div className="flex h-screen bg-slate-50 overflow-hidden">
      <Sidebar
        active={active}
        setActive={setActive}
        open={sidebarOpen}
        close={() => setSidebarOpen(false)}
        allowedViews={allowedViews}
        userName={profile?.full_name || profile?.email || null}
        userRole={role}
        onSignOut={signOut}
        onSignIn={() => setAuthOpen(true)}
      />

      <div className="flex-1 flex flex-col min-w-0">
        <Topbar
          title={meta.title}
          subtitle={meta.subtitle}
          openSidebar={() => setSidebarOpen(true)}
          onNewLoad={() => setNewLoadOpen(true)}
          userName={profile?.full_name || profile?.email || null}
          userRole={role}
          onSignIn={() => setAuthOpen(true)}
          onSignOut={signOut}
        />

        <main className="flex-1 overflow-y-auto p-4 sm:p-6">
          {!role && (
            <div className="mb-5 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 rounded-xl bg-[#0B3D91] text-white px-5 py-4">
              <div>
                <p className="font-semibold">You're viewing a limited preview</p>
                <p className="text-sm text-blue-200">Sign in to unlock dispatch, drivers, fleet, financials & AI tools.</p>
              </div>
              <button
                onClick={() => setAuthOpen(true)}
                className="bg-[#00C853] hover:bg-[#00b34a] text-white text-sm font-semibold px-4 py-2 rounded-lg whitespace-nowrap"
              >
                Sign In / Sign Up
              </button>
            </div>
          )}

          {active === 'dashboard' && <Dashboard />}
          {active === 'dispatch' && <DispatchBoard />}
          {active === 'loads' && <LoadsView />}
          {active === 'drivers' && <DriversView />}
          {active === 'fleet' && <FleetView />}
          {active === 'financials' && <FinancialsView />}
          {active === 'brokers' && <BrokersView />}
          {active === 'ai' && <AIAssistant />}

          <footer className="mt-10 border-t border-slate-200 pt-6 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-slate-400">
            <p>© 2026 FleetFlow Dispatch · Built for owner-operators & small fleets</p>
            <button
              onClick={() => setDemoOpen(true)}
              className="flex items-center gap-1.5 text-[#0B3D91] font-medium hover:underline"
            >
              <Sparkles className="w-4 h-4" /> Request a Demo
            </button>
          </footer>
        </main>
      </div>

      <NewLoadModal open={newLoadOpen} close={() => setNewLoadOpen(false)} />
      <DemoModal open={demoOpen} close={() => setDemoOpen(false)} />
      <AuthModal open={authOpen} close={() => setAuthOpen(false)} />
    </div>
  );
};

export default AppLayout;