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 { useAddonStore } from '../../store/addonStore' import { useTranslation } from '../../i18n' 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 { addons: allAddons, loadAddons } = useAddonStore() const { t, locale } = useTranslation() const navigate = useNavigate() const location = useLocation() const [userMenuOpen, setUserMenuOpen] = useState(false) const [appVersion, setAppVersion] = useState(null) const darkMode = settings.dark_mode const dark = darkMode === true || darkMode === 'dark' || (darkMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) // Only show 'global' type addons in the navbar — 'integration' addons have no dedicated page const globalAddons = allAddons.filter((a: Addon) => a.type === 'global' && a.enabled) useEffect(() => { if (user) loadAddons() }, [user, location.pathname]) 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 ( ) }