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, CalendarDays, Briefcase, Globe } from 'lucide-react' const ADDON_ICONS = { CalendarDays, Briefcase, Globe } export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }) { 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 dark = settings.dark_mode 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 toggleDark = () => { updateSetting('dark_mode', !dark).catch(() => {}) } return ( ) }