'use client'; import { Home, Phone, Ticket, HelpCircle, Moon, Sun, KeyRound, LogOut, ChevronDown, Check, } from 'lucide-react'; import Link from 'next/link'; import Image from 'next/image'; import dynamic from 'next/dynamic'; import { usePathname } from 'next/navigation'; import { useEffect, useState } from 'react'; import { useAuthStore } from '@/lib/auth-store'; import { BOOKING_STEPS } from '@/components/ProgressIndicator'; // AppSidebar renders on every page via the root layout, so anything imported // here ships to every visitor's first load — but this modal is only ever // reachable by an already-authenticated user opening the account dropdown. // Code-split it out instead of paying for it on every page/every visitor. const ChangePasswordModal = dynamic(() => import('@/components/ChangePasswordModal'), { ssr: false }); // Mirrors booking/layout.tsx's stepMap — the linear booking flow routes that // get a vertical step list instead of the standard nav highlighting. const BOOKING_STEP_MAP: Record = { '/booking/search': 'search', '/booking/results': 'results', '/booking/auth-check': 'passengers', '/booking/passengers': 'passengers', '/booking/seats': 'seats', '/booking/review': 'review', '/booking/payment': 'payment', '/booking/confirmation': 'confirmation', }; const NAV_LINKS = [ { href: '/', label: 'Home', icon: Home }, { href: '/booking/lookup', label: 'My Bookings', icon: Ticket }, { href: '/contact', label: 'Contact', icon: Phone }, { href: '/help', label: 'Help', icon: HelpCircle }, ]; export default function AppSidebar() { const pathname = usePathname(); const [isDark, setIsDark] = useState(false); const [showUserMenu, setShowUserMenu] = useState(false); const [showChangePassword, setShowChangePassword] = useState(false); const { user, isAuthenticated, initialize, logout } = useAuthStore(); useEffect(() => { setIsDark(document.documentElement.classList.contains('dark')); initialize(); }, [initialize]); const toggleTheme = () => { const html = document.documentElement; const nextDark = !html.classList.contains('dark'); html.classList.toggle('dark', nextDark); localStorage.setItem('theme', nextDark ? 'dark' : 'light'); setIsDark(nextDark); }; const currentStepId = BOOKING_STEP_MAP[pathname ?? '']; const currentStepIndex = currentStepId ? BOOKING_STEPS.findIndex((s) => s.id === currentStepId) : -1; return ( ); }