import { useEffect, useState, type FormEvent } from 'react'
import { AlertTriangle, Check, Copy, KeyRound, Loader2, PenLine, Plus, Trash2 } from 'lucide-react'
import { api, type NewToken, type TokenRow } from '../api'
import { run, useStore } from '../store'
import { bytes, zeit } from '../format'
import { Feld, Karte, Knopf, Leer, Nachfrage, useKopieren } from '../components/Bausteine'
import { TokenBearbeiten } from '../components/TokenBearbeiten'

export function Tokens() {
    const note = useStore((s) => s.note)
    const [rows, setRows] = useState<TokenRow[] | null>(null)
    const [laedt, setLaedt] = useState(true)

    const [name, setName] = useState('')
    const [prefix, setPrefix] = useState('')
    const [darfLoeschen, setDarfLoeschen] = useState(false)
    const [maxMb, setMaxMb] = useState('')
    const [quotaMb, setQuotaMb] = useState('')
    const [gueltigTage, setGueltigTage] = useState('')
    const [arten, setArten] = useState<string[]>([])
    const [legtAn, setLegtAn] = useState(false)

    const [frisch, setFrisch] = useState<NewToken | null>(null)
    const [weg, setWeg] = useState<TokenRow | null>(null)
    const [bearbeiten, setBearbeiten] = useState<TokenRow | null>(null)
    const [loescht, setLoescht] = useState(false)
    const [ohneToken, setOhneToken] = useState<{ dateien: number; bytes: number } | null>(null)
    const { kopiert, kopieren } = useKopieren()

    async function laden() {
        setLaedt(true)
        try {
            const antwort = await api.tokens()
            setRows(antwort.items)
            setOhneToken(antwort.ohneToken)
        } catch (err) {
            note('fehler', err instanceof Error ? err.message : 'Unbekannt')
        } finally {
            setLaedt(false)
        }
    }

    useEffect(() => {
        void laden()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    async function anlegen(e: FormEvent) {
        e.preventDefault()
        setLegtAn(true)
        const neu = await run(
            () =>
                api.createToken({
                    name: name.trim(),
                    prefix: prefix.trim(),
                    canDelete: darfLoeschen,
                    maxMb: maxMb.trim(),
                    quotaMb: quotaMb.trim(),
                    arten,
                    gueltigTage: gueltigTage.trim(),
                }),
            (t) => `Token "${t.name}" angelegt.`,
        )
        setLegtAn(false)
        if (neu) {
            setFrisch(neu)
            setName('')
            setPrefix('')
            setDarfLoeschen(false)
            setMaxMb('')
            setGueltigTage('')
            setArten([])
            void laden()
        }
    }

    async function loeschen() {
        if (!weg) return
        setLoescht(true)
        const ok = await run(() => api.deleteToken(weg.id), `Token "${weg.name}" gelöscht.`)
        setLoescht(false)
        setWeg(null)
        if (ok) void laden()
    }

    return (
        <div className="flex flex-col gap-4">
            <Karte titel="Neuen Token anlegen">
                <form onSubmit={anlegen} className="flex flex-col gap-3">
                    <div className="grid gap-3 sm:grid-cols-2">
                        <Feld
                            label="Name"
                            value={name}
                            placeholder="d4rk_photostudio"
                            hinweis="Nur zur Wiedererkennung in dieser Liste."
                            onChange={(e) => setName(e.target.value)}
                        />
                        <Feld
                            label="Präfix (optional)"
                            value={prefix}
                            placeholder="vehicles"
                            hinweis="Der Token darf dann nur darunter schreiben."
                            onChange={(e) => setPrefix(e.target.value)}
                        />
                    </div>

                    <div className="grid gap-3 sm:grid-cols-2">
                        <Feld
                            label="Größte Datei (MB, optional)"
                            type="number"
                            min={0}
                            step="0.5"
                            value={maxMb}
                            placeholder="leer = Grenze des Dienstes"
                            hinweis="Ein Token für Fahrzeugbilder braucht keine 64 MB."
                            onChange={(e) => setMaxMb(e.target.value)}
                        />
                        <Feld
                            label="Kontingent insgesamt (MB, optional)"
                            type="number"
                            min={0}
                            step="1"
                            value={quotaMb}
                            placeholder="leer = unbegrenzt"
                            hinweis="Die Grenze links gilt je Datei. Diese hier gilt für alles zusammen — ohne sie kann ein Token die Platte füllen, es braucht nur genug kleine Dateien."
                            onChange={(e) => setQuotaMb(e.target.value)}
                        />
                        <Feld
                            label="Gültig für (Tage, optional)"
                            type="number"
                            min={1}
                            value={gueltigTage}
                            placeholder="leer = unbefristet"
                            hinweis="Danach antwortet der Dienst mit einer Meldung, die das sagt."
                            onChange={(e) => setGueltigTage(e.target.value)}
                        />
                    </div>

                    <div>
                        <span className="mb-1 block text-xs font-medium text-schrift-leise">
                            Erlaubte Arten (optional)
                        </span>
                        <div className="flex flex-wrap gap-1.5">
                            {(
                                [
                                    ['bild', 'Bilder'],
                                    ['video', 'Video'],
                                    ['ton', 'Ton'],
                                    ['dokument', 'Dokumente'],
                                    ['andere', 'Anderes'],
                                ] as const
                            ).map(([wert, text]) => {
                                const an = arten.includes(wert)
                                return (
                                    <button
                                        key={wert}
                                        type="button"
                                        onClick={() =>
                                            setArten((a) =>
                                                an ? a.filter((x) => x !== wert) : [...a, wert],
                                            )
                                        }
                                        className={`rounded-md border px-2.5 py-1 text-xs transition-colors ${
                                            an
                                                ? 'border-akzent bg-akzent/15 text-schrift'
                                                : 'border-rand text-schrift-leise hover:text-schrift'
                                        }`}
                                    >
                                        {text}
                                    </button>
                                )
                            })}
                        </div>
                        <span className="mt-1 block text-xs text-schrift-leise">
                            Nichts gewählt heißt: alles erlaubt. Ein Token, der nur Bilder darf,
                            kann kein Video hochladen — auch wenn er abhandenkommt.
                        </span>
                    </div>

                    <label className="flex items-start gap-2 text-sm">
                        <input
                            type="checkbox"
                            checked={darfLoeschen}
                            onChange={(e) => setDarfLoeschen(e.target.checked)}
                            className="mt-0.5 accent-akzent"
                        />
                        <span>
                            darf löschen
                            <span className="block text-xs text-schrift-leise">
                                Ohne dieses Häkchen kann der Token nur schreiben. Ein Werkzeug,
                                das nur Bilder ablegt, braucht es nicht.
                            </span>
                        </span>
                    </label>

                    <div>
                        <Knopf
                            art="haupt"
                            type="submit"
                            wartet={legtAn}
                            disabled={!name.trim()}
                            kind={
                                <>
                                    <Plus size={15} />
                                    Anlegen
                                </>
                            }
                        />
                    </div>
                </form>
            </Karte>

            <Karte titel="Vorhandene Token">
                {laedt ? (
                    <div className="flex justify-center py-8">
                        <Loader2 className="animate-spin text-schrift-leise" />
                    </div>
                ) : !rows || rows.length === 0 ? (
                    <Leer
                        kind={<KeyRound size={26} className="text-schrift-leise/50" />}
                        text="Noch kein Token angelegt."
                    />
                ) : (
                    <table className="w-full text-sm">
                        <thead>
                            <tr className="text-left text-xs text-schrift-leise">
                                <th className="pb-2 font-medium">Name</th>
                                <th className="pb-2 font-medium">Präfix</th>
                                <th className="pb-2 font-medium">Rechte</th>
                                <th className="pb-2 font-medium">Grenzen</th>
                                {/* Was mit dem Token wirklich abgelegt wurde.
                                    `token_id` steht seit dem ersten Tag in jeder
                                    Zeile und war bis hierhin NIRGENDS zu sehen —
                                    dabei ist es die Auskunft, die vor dem
                                    Löschen zählt. */}
                                <th className="pb-2 text-right font-medium">Abgelegt</th>
                                <th className="pb-2 font-medium">Angelegt</th>
                                <th className="pb-2 font-medium">Zuletzt benutzt</th>
                                <th className="pb-2" />
                            </tr>
                        </thead>
                        <tbody>
                            {rows.map((t) => (
                                <tr
                                    key={t.id}
                                    className={`border-t border-rand ${t.abgelaufen ? 'opacity-50' : ''}`}
                                >
                                    <td className="py-2 font-medium">
                                        {t.name}
                                        {t.abgelaufen && (
                                            <span className="ml-2 rounded bg-schlecht/15 px-1.5 py-0.5 text-[11px] text-schlecht">
                                                abgelaufen
                                            </span>
                                        )}
                                    </td>
                                    <td className="py-2 font-mono text-schrift-leise">
                                        {t.prefix ? `${t.prefix}/` : '— (überall)'}
                                    </td>
                                    <td className="py-2">
                                        {t.can_delete ? (
                                            <span className="rounded bg-warn/15 px-1.5 py-0.5 text-xs text-warn">
                                                schreiben + löschen
                                            </span>
                                        ) : (
                                            <span className="text-xs text-schrift-leise">
                                                nur schreiben
                                            </span>
                                        )}
                                    </td>
                                    <td className="py-2 text-xs text-schrift-leise">
                                        {[
                                            t.max_bytes ? `max ${bytes(t.max_bytes)}/Datei` : null,
                                            t.quota_bytes
                                                ? `${bytes(t.bytes)} von ${bytes(t.quota_bytes)}`
                                                : null,
                                            t.arten ? t.arten.replaceAll(',', ', ') : null,
                                            t.expires_at
                                                ? `bis ${zeit(t.expires_at).slice(0, 10)}`
                                                : null,
                                        ]
                                            .filter(Boolean)
                                            .join(' · ') || '—'}
                                    </td>
                                    <td className="py-2 text-right whitespace-nowrap">
                                        {t.dateien === 0 ? (
                                            <span className="text-xs text-schrift-leise">—</span>
                                        ) : (
                                            <span title={
                                                t.zuletztAbgelegt
                                                    ? `zuletzt ${zeit(t.zuletztAbgelegt)}`
                                                    : undefined
                                            }>
                                                <span className="tabular-nums">{t.dateien}</span>
                                                <span className="text-xs text-schrift-leise">
                                                    {' '}
                                                    · {bytes(t.bytes)}
                                                </span>
                                            </span>
                                        )}
                                    </td>
                                    <td className="py-2 text-schrift-leise">
                                        {zeit(t.created_at)}
                                    </td>
                                    <td className="py-2 text-schrift-leise">
                                        {zeit(t.last_used_at)}
                                    </td>
                                    <td className="py-2 text-right whitespace-nowrap">
                                        <button
                                            onClick={() => setBearbeiten(t)}
                                            className="mr-1 rounded border border-rand px-2 py-1 text-schrift-leise
                                                       hover:bg-flaeche-hoch hover:text-schrift"
                                            aria-label={`Token ${t.name} bearbeiten`}
                                            title="Grenzen bearbeiten"
                                        >
                                            <PenLine size={13} />
                                        </button>
                                        <button
                                            onClick={() => setWeg(t)}
                                            className="rounded border border-rand px-2 py-1 text-schrift-leise
                                                       hover:bg-schlecht/15 hover:text-schlecht"
                                            aria-label={`Token ${t.name} löschen`}
                                        >
                                            <Trash2 size={13} />
                                        </button>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                )}

                {ohneToken && ohneToken.dateien > 0 && (
                    <p className="mt-3 border-t border-rand pt-3 text-xs text-schrift-leise">
                        Dazu kommen <strong className="text-schrift">{ohneToken.dateien}</strong>{' '}
                        Dateien ({bytes(ohneToken.bytes)}) <strong>ohne</strong> Token — aus dem
                        Dashboard hochgeladen. Dort gibt es eine Sitzung und keinen Token;
                        ohne diese Zeile ginge die Summe nicht auf.
                    </p>
                )}
            </Karte>

            {/* Der Klartext — genau einmal.
                Deshalb ein Dialog, den man bewusst schließen muss, und kein
                Zettel, der nach vier Sekunden verschwindet. */}
            {frisch && (
                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
                    <div className="w-full max-w-lg rounded-lg border border-rand bg-flaeche shadow-xl">
                        <h3 className="flex items-center gap-2 border-b border-rand px-4 py-3 text-sm font-semibold">
                            <KeyRound size={16} className="text-akzent" />
                            Token „{frisch.name}" angelegt
                        </h3>

                        <div className="px-4 py-4">
                            <p className="mb-3 flex items-start gap-2 rounded-md border border-warn/40 bg-warn/10 px-3 py-2 text-sm text-warn">
                                <AlertTriangle size={16} className="mt-0.5 shrink-0" />
                                <span className="text-schrift">
                                    Dies ist das einzige Mal, dass der Token im Klartext zu sehen
                                    ist. Danach steht nur noch sein Hash in der Datenbank — auch
                                    der Dienst kann ihn nicht mehr zeigen.
                                </span>
                            </p>

                            <div className="flex items-center gap-2">
                                <code className="flex-1 overflow-x-auto rounded border border-rand bg-grund px-3 py-2 font-mono text-sm">
                                    {frisch.token}
                                </code>
                                <Knopf
                                    art="haupt"
                                    onClick={async () => {
                                        const ok = await kopieren(frisch.token, 'neu')
                                        if (!ok)
                                            note(
                                                'fehler',
                                                'Die Zwischenablage ist gesperrt — bitte von Hand markieren.',
                                            )
                                    }}
                                    kind={
                                        kopiert === 'neu' ? (
                                            <>
                                                <Check size={15} />
                                                kopiert
                                            </>
                                        ) : (
                                            <>
                                                <Copy size={15} />
                                                Kopieren
                                            </>
                                        )
                                    }
                                />
                            </div>

                            <p className="mt-3 text-xs text-schrift-leise">
                                Präfix: <code className="font-mono">{frisch.prefix || '—'}</code>{' '}
                                · Löschen: {frisch.canDelete ? 'erlaubt' : 'nicht erlaubt'}
                            </p>
                        </div>

                        <div className="flex justify-end border-t border-rand px-4 py-3">
                            <Knopf
                                onClick={() => setFrisch(null)}
                                kind="Habe ich mir notiert"
                            />
                        </div>
                    </div>
                </div>
            )}

            {bearbeiten && (
                <TokenBearbeiten
                    token={bearbeiten}
                    onAbbruch={() => setBearbeiten(null)}
                    onFertig={() => {
                        setBearbeiten(null)
                        void laden()
                    }}
                />
            )}

            <Nachfrage
                offen={weg !== null}
                titel="Token löschen?"
                bestaetigung="Token löschen"
                wartet={loescht}
                onNein={() => setWeg(null)}
                onJa={() => void loeschen()}
                text={
                    <>
                        <p>
                            „{weg?.name}" wird sofort ungültig. Was ihn benutzt — etwa der
                            Fotostudio — bekommt ab dann 401 und lädt nichts mehr hoch.
                        </p>
                        <p className="mt-2">Hochgeladene Dateien bleiben.</p>
                    </>
                }
            />
        </div>
    )
}