ToBePlayed-Frontend/src/components/AppHeader.jsx

import {Link, NavLink, useLocation} from 'react-router-dom';
import {useTranslation} from 'react-i18next';
import {Dices, Languages, LayoutDashboard, Library, LogOut, Moon, Settings, Sun} from 'lucide-react';

import {Button} from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {usePreferences} from '@/context/PreferencesContext.jsx';
import {cn} from '@/lib/utils';
import Logo from './Logo.jsx';
import PageContainer from './PageContainer.jsx';
import SteamAvatar from './SteamAvatar.jsx';
import useSteamProfile from '../hooks/useSteamProfile.js';

const NAV_ITEMS = [
    {to: '/dashboard', labelKey: 'NAV.DASHBOARD', Icon: LayoutDashboard},
    // The wishlist is a tab of the library.
    {to: '/library', labelKey: 'NAV.LIBRARY', Icon: Library, alsoActiveOn: ['/wishlist']},
    {to: '/play-next', labelKey: 'NAV.PLAY_NEXT', Icon: Dices},
];

const navLinkClass = (isActive) => cn(
    'flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
    isActive
        ? 'bg-accent text-accent-foreground'
        : 'text-muted-foreground hover:bg-muted hover:text-foreground',
);

export default function AppHeader({isAuthenticated, onLogout}) {
    const {t, i18n} = useTranslation();
    const {isDarkMode, setDarkMode, setLanguage} = usePreferences();
    const {pathname} = useLocation();
    const steamProfile = useSteamProfile(isAuthenticated);

    const toggleLanguage = () => setLanguage(i18n.language === 'de' ? 'en' : 'de');
    const toggleTheme = () => setDarkMode(!isDarkMode);
    const ThemeIcon = isDarkMode ? Sun : Moon;

    return (
        <header className="sticky top-0 z-50 border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
            <PageContainer className="flex h-16 items-center gap-2 px-4 md:px-8">
                <Link to={isAuthenticated ? '/dashboard' : '/'} aria-label="ToBePlayed" className="mr-2 flex items-center gap-2 font-bold tracking-tight whitespace-nowrap">
                    <Logo className="h-8 w-auto shrink-0"/>
                    {/* On a narrow phone the menu and buttons need the room; the logo alone stays. */}
                    <span className="hidden text-lg min-[380px]:inline">ToBePlayed</span>
                </Link>

                {isAuthenticated && (
                    <nav className="flex items-center gap-1">
                        {NAV_ITEMS.map(({to, labelKey, Icon, alsoActiveOn = []}) => (
                            <NavLink key={to} to={to} title={t(labelKey)}
                                     className={({isActive}) => navLinkClass(isActive || alsoActiveOn.includes(pathname))}>
                                <Icon className="size-4"/>
                                <span className="hidden sm:inline">{t(labelKey)}</span>
                            </NavLink>
                        ))}
                    </nav>
                )}

                <div className="ml-auto flex items-center gap-1">
                    {isAuthenticated ? (
                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <Button variant="ghost" size="icon" aria-label={t('NAV.MENU')} title={steamProfile?.personaName ?? undefined}>
                                    <SteamAvatar url={steamProfile?.avatarUrl}/>
                                </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end" className="w-52">
                                <DropdownMenuItem asChild>
                                    <Link to="/settings"><Settings/>{t('NAV.SETTINGS')}</Link>
                                </DropdownMenuItem>
                                <DropdownMenuItem onSelect={toggleLanguage}>
                                    <Languages/>{t('NAV.LANGUAGE')}: {i18n.language.toUpperCase()}
                                </DropdownMenuItem>
                                <DropdownMenuItem onSelect={toggleTheme}>
                                    <ThemeIcon/>{t(isDarkMode ? 'NAV.LIGHT_MODE' : 'NAV.DARK_MODE')}
                                </DropdownMenuItem>
                                <DropdownMenuSeparator/>
                                <DropdownMenuItem variant="destructive" onSelect={onLogout}>
                                    <LogOut/>{t('MAIN.LOGOUT')}
                                </DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    ) : (
                        <>
                            <Button variant="ghost" size="sm" onClick={toggleLanguage}>
                                {i18n.language.toUpperCase()}
                            </Button>
                            <Button variant="ghost" size="icon" onClick={toggleTheme} aria-label={t(isDarkMode ? 'NAV.LIGHT_MODE' : 'NAV.DARK_MODE')}>
                                <ThemeIcon className="size-5"/>
                            </Button>
                            <Button asChild className="ml-1">
                                <Link to="/login">{t('MAIN.LOGIN')}</Link>
                            </Button>
                        </>
                    )}
                </div>
            </PageContainer>
        </header>
    );
}