import { useEffect } from 'react'
import {
    Code2,
    Gauge,
    HardDrive,
    History,
    Images,
    KeyRound,
    PieChart,
    Settings,
    Trash2,
} from 'lucide-react'
import { useStore } from './store'
import { Anmelden } from './pages/Anmelden'
import { Start } from './pages/Start'
import { Galerie } from './pages/Galerie'
import { Speicher } from './pages/Speicher'
import { Tokens } from './pages/Tokens'
import { Konto } from './pages/Konto'
import { Einstellungen } from './pages/Einstellungen'
import { Verlauf } from './pages/Verlauf'
import { Api } from './pages/Api'
import { Papierkorb } from './pages/Papierkorb'
import { Freigabe } from './pages/Freigabe'
import { Meldungen } from './components/Meldungen'
import { gehZu, usePfad } from './router'
import { Kontomenue } from './components/Kontomenue'
import { dienstName, useMarke } from './marke'

/** Die Breite des Inhalts — an EINER Stelle.
 *
 *  Sie stand vorher zweimal da (Kopfzeile und Inhalt), und zwei Seiten setzten
 *  zusätzlich ihre eigene: dadurch waren Konto und Einstellungen schmaler als
 *  der Rest, und die Kopfzeile lief über beiden anders. Formulare werden
 *  stattdessen INNERHALB ihrer Karte begrenzt.
 */
const BREITE = 'mx-auto w-full max-w-7xl px-4'

const seiten = [
    { pfad: '/', name: 'Start', kind: Gauge, Inhalt: Start },
    { pfad: '/galerie', name: 'Galerie', kind: Images, Inhalt: Galerie },
    { pfad: '/verlauf', name: 'Verlauf', kind: History, Inhalt: Verlauf },
    { pfad: '/speicher', name: 'Speicher', kind: PieChart, Inhalt: Speicher },
    { pfad: '/papierkorb', name: 'Papierkorb', kind: Trash2, Inhalt: Papierkorb },
    { pfad: '/tokens', name: 'Token', kind: KeyRound, Inhalt: Tokens },
    { pfad: '/api', name: 'API', kind: Code2, Inhalt: Api },
    { pfad: '/einstellungen', name: 'Einstellungen', kind: Settings, Inhalt: Einstellungen },
] as const

/** Seiten OHNE Reiter. Sie sind ueber die Adresse und ueber das Kontomenue
 *  erreichbar -- ein Lesezeichen auf /konto soll nicht ins Leere fuehren, nur
 *  weil der Reiter verschwunden ist. */
const versteckt = [{ pfad: '/konto', Inhalt: Konto }] as const

export function App() {
    // Einzeln ausgewählt und nicht als ganzer Laden: `useStore()` ohne
    // Auswahlfunktion abonniert ALLES, und dann zeichnet jede Meldung das
    // ganze Dashboard neu — bei 60 Kacheln mit Bildern ist das spürbar.
    const user = useStore((s) => s.user)
    const checking = useStore((s) => s.checking)
    const checkSession = useStore((s) => s.checkSession)
    const pfad = usePfad()
    const marke = useMarke()

    useEffect(() => {
        void checkSession()
    }, [checkSession])

    // EINE FREIGABE GEHT VOR ALLEM ANDEREN -- vor dem Prüfen der Sitzung, vor
    // dem Anmeldeformular, vor der Kopfzeile. Wer einen Link bekommen hat, ist
    // kein Benutzer dieses Dashboards; ihm ein Anmeldeformular zu zeigen wäre
    // die falsche Antwort auf "sieh dir das an".
    //
    // Und deshalb steht das hier VOR dem `checking`-Zweig: sonst blitzt für
    // einen Moment das Rädchen der Sitzungsprüfung auf, die es gar nicht
    // braucht.
    if (pfad.startsWith('/s/')) {
        return <Freigabe schluessel={decodeURIComponent(pfad.slice(3))} />
    }

    // Solange nicht feststeht, ob eine Sitzung besteht, wird NICHTS gezeigt.
    // Sonst blitzt bei jedem Neuladen kurz das Anmeldeformular auf, obwohl man
    // angemeldet ist — und das sieht aus wie ein Fehler.
    if (checking) {
        return (
            <div className="flex min-h-full items-center justify-center">
                <HardDrive className="animate-pulse text-schrift-leise" />
                <Meldungen />
            </div>
        )
    }

    if (!user) {
        return (
            <>
                <Anmelden />
                <Meldungen />
            </>
        )
    }

    const ohneReiter = versteckt.find((s) => s.pfad === pfad)
    const aktiv = seiten.find((s) => s.pfad === pfad) ?? seiten[0]
    const Inhalt = ohneReiter ? ohneReiter.Inhalt : aktiv.Inhalt

    return (
        <div className="flex min-h-full flex-col">
            <header className="sticky top-0 z-40 border-b border-rand bg-flaeche/80 backdrop-blur">
                <div className={`${BREITE} flex flex-wrap items-center gap-x-6 gap-y-2 py-2.5`}>
                    <a
                        href="/"
                        onClick={(e) => {
                            e.preventDefault()
                            gehZu('/')
                        }}
                        className="flex items-center gap-2 font-semibold"
                    >
                        <HardDrive size={18} className="text-akzent" />
                        {dienstName(marke)}
                    </a>

                    <nav className="flex flex-1 gap-1">
                        {seiten.map((s) => {
                            const an = s.pfad === aktiv.pfad
                            return (
                                <a
                                    key={s.pfad}
                                    href={s.pfad}
                                    onClick={(e) => {
                                        e.preventDefault()
                                        gehZu(s.pfad)
                                    }}
                                    className={`relative flex items-center gap-1.5 rounded-md px-2.5 py-1.5
                                                text-sm transition-colors ${
                                                    an
                                                        ? 'bg-flaeche-hoch text-schrift after:absolute after:inset-x-2.5 after:-bottom-[9px] after:h-0.5 after:rounded-full after:bg-akzent'
                                                        : 'text-schrift-leise hover:bg-flaeche-hoch/40 hover:text-schrift'
                                                }`}
                                >
                                    <s.kind size={15} />
                                    {s.name}
                                </a>
                            )
                        })}
                    </nav>

                    <Kontomenue />

                </div>
            </header>

            <main key={aktiv.pfad} className={`auftauchen ${BREITE} flex-1 py-5`}>
                <Inhalt />
            </main>

            <Meldungen />
        </div>
    )
}