import React, { useState, useEffect, useRef } from 'react' import ReactDOM from 'react-dom' import { Link, useNavigate, useLocation } from 'react-router-dom' import { useAuthStore } from '../../store/authStore' import { useSettingsStore } from '../../store/settingsStore' import { useTranslation } from '../../i18n' import { addonsApi } from '../../api/client' import { Plane, LogOut, Settings, ChevronDown, Shield, ArrowLeft, Users, Moon, Sun, Monitor, CalendarDays, Briefcase, Globe } from 'lucide-react' import type { LucideIcon } from 'lucide-react' const ADDON_ICONS: Record = { CalendarDays, Briefcase, Globe } interface NavbarProps { tripTitle?: string tripId?: string onBack?: () => void showBack?: boolean onShare?: () => void } interface Addon { id: string name: string icon: string type: string } export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }: NavbarProps): React.ReactElement { const { user, logout } = useAuthStore() const { settings, updateSetting } = useSettingsStore() const { t, locale } = useTranslation() const navigate = useNavigate() const location = useLocation() const [userMenuOpen, setUserMenuOpen] = useState(false) const [appVersion, setAppVersion] = useState(null) const [globalAddons, setGlobalAddons] = useState([]) const darkMode = settings.dark_mode const dark = darkMode === true || darkMode === 'dark' || (darkMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) const loadAddons = () => { if (user) { addonsApi.enabled().then(data => { setGlobalAddons(data.addons.filter(a => a.type === 'global')) }).catch(() => {}) } } useEffect(loadAddons, [user, location.pathname]) // Listen for addon changes from AddonManager useEffect(() => { const handler = () => loadAddons() window.addEventListener('addons-changed', handler) return () => window.removeEventListener('addons-changed', handler) }, [user]) useEffect(() => { import('../../api/client').then(({ authApi }) => { authApi.getAppConfig?.().then(c => setAppVersion(c?.version)).catch(() => {}) }) }, []) const handleLogout = () => { logout() navigate('/login') } const toggleDarkMode = () => { updateSetting('dark_mode', dark ? 'light' : 'dark').catch(() => {}) } const getAddonName = (addon: Addon): string => { const key = `admin.addons.catalog.${addon.id}.name` const translated = t(key) return translated !== key ? translated : addon.name } return ( ) }