// Rahmen der Bot-Produktseite — eigene Navigation, gleiche Marke wie der Hub.
// Das Dashboard ist dieselbe Config-Seite wie bisher, nur unter /dashboard.
import { useEffect, useState } from 'react';
import { Routes, Route, NavLink, Navigate, useLocation } from 'react-router-dom';
import { apiGet } from './api.js';
import BotLanding from './pages/BotLanding.jsx';
import BotFeatures from './pages/BotFeatures.jsx';
import BotCommands from './pages/BotCommands.jsx';
import Settings from './pages/Settings.jsx';
import Impressum from './pages/Impressum.jsx';
import Datenschutz from './pages/Datenschutz.jsx';
import { IconMenu, IconX } from './icons.jsx';
import { useT, LangSwitch } from './i18n.jsx';

export default function BotApp() {
    const [me, setMe] = useState({ user: null, admin: false, scopes: [], loading: true });
    const [drawer, setDrawer] = useState(false);
    const [hub, setHub] = useState(null);
    // Seiten wie die Nutzungsbedingungen liegen auf dem Hub — verlinkt
    // wird deshalb absolut, und nur wenn es einen Hub gibt.
    const [pages, setPages] = useState([]);
    const location = useLocation();
    const { t } = useT();

    useEffect(() => { setDrawer(false); }, [location.pathname]);

    useEffect(() => {
        apiGet('/api/me')
            .then((data) => setMe({ scopes: [], ...data, loading: false }))
            .catch(() => setMe({ user: null, admin: false, scopes: [], loading: false }));
        apiGet('/api/legal').then((d) => setHub(d.split ? d.hubUrl : null)).catch(() => {});
        apiGet('/api/pages').then((d) => setPages(d.pages)).catch(() => {});
    }, []);

    const canDashboard = me.admin || me.scopes?.length > 0;

    return (
        <div className="app">
            {/* Die Leiste ist immer kompakt — kein Zustandswechsel beim Scrollen */}
            <header className="nav">
                <NavLink to="/" className="nav-logo">
                    <img className="nav-mark" src="/brand/mark.png" alt="" />
                    D4RKBOT<span>_</span>
                </NavLink>

                <nav className="nav-links">
                    <NavLink to="/features">{t('nav.features')}</NavLink>
                    <NavLink to="/commands">{t('nav.commands')}</NavLink>
                    {canDashboard && <NavLink to="/dashboard">{t('nav.dashboard')}</NavLink>}
                    {hub && <a href={hub}>{t('nav.community')}</a>}
                </nav>

                <div className="auth">
                    <LangSwitch />
                    {me.loading ? null : me.user ? (
                        <span className="user-chip">
                            {me.user.avatar && <img className="avatar" src={me.user.avatar} alt="" />}
                            <span className="username">{me.user.username}</span>
                            <a className="logout" href="/auth/logout" title={t('nav.signOut')}>
                                <IconX size={13} />
                            </a>
                        </span>
                    ) : (
                        <a className="btn-login" href="/auth/login">{t('nav.signIn')}</a>
                    )}
                </div>

                <button className="burger" onClick={() => setDrawer((d) => !d)} aria-label={t('nav.menu')}>
                    {drawer ? <IconX size={20} /> : <IconMenu size={20} />}
                </button>
            </header>

            {drawer && (
                <nav className="drawer" onClick={() => setDrawer(false)}>
                    <NavLink to="/features">{t('nav.features')}</NavLink>
                    <NavLink to="/commands">{t('nav.commands')}</NavLink>
                    {canDashboard && <NavLink to="/dashboard">{t('nav.dashboard')}</NavLink>}
                    {hub && <a href={hub}>{t('nav.community')}</a>}
                    {me.user
                        ? <a href="/auth/logout">{t('nav.signOut')}</a>
                        : <a href="/auth/login">{t('nav.signIn')}</a>}
                    {/* Auf schmalen Schirmen ist .auth ausgeblendet — der
                        Sprachwechsel muss trotzdem erreichbar bleiben. */}
                    <div className="drawer-lang" onClick={(e) => e.stopPropagation()}>
                        <LangSwitch />
                    </div>
                </nav>
            )}

            <main className="main">
                <Routes>
                    <Route path="/" element={<BotLanding />} />
                    <Route path="/features" element={<BotFeatures />} />
                    <Route path="/commands" element={<BotCommands />} />
                    <Route path="/dashboard" element={<Settings me={me} />} />
                    <Route path="/impressum" element={<Impressum />} />
                    <Route path="/datenschutz" element={<Datenschutz />} />
                    <Route path="*" element={<Navigate to="/" replace />} />
                </Routes>
            </main>

            <footer className="footer">
                <span className="footer-logo">
                    <img className="footer-mark" src="/brand/mark.png" alt="" />
                    D4RKBOT<span>_</span>
                </span>
                <a href="https://git.d4rkst3r.de/D4rkst3r/d4rkbot" target="_blank" rel="noreferrer">
                    {t('footer.source')}
                </a>
                {hub && <a href={`${hub}/status`}>{t('footer.status')}</a>}
                <span className="footer-right">
                    <NavLink to="/impressum">{t('footer.imprint')}</NavLink>
                    <NavLink to="/datenschutz">{t('footer.privacy')}</NavLink>
                    {hub && pages.map((p) => (
                        <a href={`${hub}/${p.slug}`} key={p.slug}>{p.title}</a>
                    ))}
                </span>
            </footer>
        </div>
    );
}