import { useEffect, useState } from 'react'
import { Link2, Plus, Trash2 } from 'lucide-react'
import { api, type Vorlage } from '../api'
import { run, useStore } from '../store'
import { Feld, Karte, Knopf } from './Bausteine'

/** Adressvorlagen verwalten.
 *
 *  Eine Vorlage ist der Bauplan einer öffentlichen Adresse:
 *  `vehicles/{model}.webp` wird zu `https://…/f/vehicles/adder.webp`.
 *
 *  Wozu speichern? Weil genau diese Zeichenkette auf der anderen Seite
 *  gebraucht wird — im Handy, im Skript, im Fotostudio — und weil sie sich
 *  sonst jemand aus Ordnername plus Endung zusammenreimt. Einmal falsch
 *  zusammengereimt heißt: das Bild fehlt, und gesucht wird an der falschen
 *  Stelle. */
export function VorlagenKarte({ publicUrl, filePrefix }: { publicUrl: string; filePrefix: string }) {
    const note = useStore((s) => s.note)
    const [liste, setListe] = useState<Vorlage[] | null>(null)
    const [speichert, setSpeichert] = useState(false)
    const [name, setName] = useState('')
    const [muster, setMuster] = useState('')

    useEffect(() => {
        api.einstellungen()
            .then((e) => setListe(e.vorlagen))
            .catch((err) => note('fehler', err instanceof Error ? err.message : 'Unbekannt'))
    }, [note])

    async function sichern(neu: Vorlage[]) {
        setSpeichert(true)
        const r = await run(() => api.vorlagenSpeichern(neu), 'Vorlagen gespeichert.')
        setSpeichert(false)
        if (r) setListe(r.vorlagen)
        return Boolean(r)
    }

    if (!liste) return null

    return (
        <Karte titel="Adressvorlagen">
            <div className="flex flex-col gap-3">
                {liste.length === 0 ? (
                    <p className="text-sm text-schrift-leise">
                        Noch keine. Eine Vorlage sagt, wie die öffentliche Adresse aussieht —
                        etwa <code className="font-mono">vehicles/&#123;model&#125;.webp</code>.
                    </p>
                ) : (
                    <ul className="flex flex-col gap-2">
                        {liste.map((v, i) => (
                            <li
                                key={i}
                                className="flex items-center gap-2 rounded-md border border-rand bg-grund px-3 py-2"
                            >
                                <Link2 size={14} className="shrink-0 text-schrift-leise" />
                                <span className="w-32 shrink-0 truncate text-sm">{v.name}</span>
                                <code className="min-w-0 flex-1 truncate font-mono text-xs text-schrift-leise">
                                    {publicUrl}
                                    {filePrefix}/{v.muster}
                                </code>
                                <button
                                    onClick={() =>
                                        void sichern(liste.filter((_, j) => j !== i))
                                    }
                                    className="shrink-0 rounded border border-rand px-2 py-1 text-schrift-leise hover:bg-schlecht/15 hover:text-schlecht"
                                    aria-label={`${v.name} entfernen`}
                                >
                                    <Trash2 size={13} />
                                </button>
                            </li>
                        ))}
                    </ul>
                )}

                <div className="flex flex-wrap items-end gap-2 border-t border-rand pt-3">
                    <Feld
                        label="Name"
                        value={name}
                        placeholder="Fahrzeuge"
                        className="w-40"
                        onChange={(e) => setName(e.target.value)}
                    />
                    <Feld
                        label="Muster"
                        value={muster}
                        placeholder="vehicles/{model}.webp"
                        hinweis="Ein Platzhalter in geschweiften Klammern ist Pflicht."
                        className="min-w-56 flex-1"
                        onChange={(e) => setMuster(e.target.value)}
                    />
                    <Knopf
                        art="haupt"
                        wartet={speichert}
                        disabled={!name.trim() || !muster.trim()}
                        onClick={async () => {
                            if (
                                await sichern([
                                    ...liste,
                                    { name: name.trim(), muster: muster.trim() },
                                ])
                            ) {
                                setName('')
                                setMuster('')
                            }
                        }}
                        kind={
                            <>
                                <Plus size={15} />
                                Hinzufügen
                            </>
                        }
                    />
                </div>
            </div>
        </Karte>
    )
}