import { CheckCircle2, AlertTriangle, Info, X } from 'lucide-react'
import { useStore, type NoteKind } from '../store'

const gestalt: Record<NoteKind, { farbe: string; kind: typeof Info }> = {
    ok: { farbe: 'border-gut/40 bg-gut/10 text-gut', kind: CheckCircle2 },
    fehler: { farbe: 'border-schlecht/40 bg-schlecht/10 text-schlecht', kind: AlertTriangle },
    hinweis: { farbe: 'border-akzent/40 bg-akzent/10 text-akzent', kind: Info },
}

/** Die Rückmeldungen, unten rechts.
 *
 *  Erfolge verschwinden nach vier Sekunden von allein, Fehler bleiben stehen,
 *  bis jemand sie wegklickt — das entscheidet der Laden, nicht diese Ansicht. */
export function Meldungen() {
    const notes = useStore((s) => s.notes)
    const dismiss = useStore((s) => s.dismiss)

    if (notes.length === 0) return null

    return (
        <div
            className="fixed right-4 bottom-4 z-60 flex w-[min(26rem,calc(100vw-2rem))] flex-col gap-2"
            role="status"
            aria-live="polite"
        >
            {notes.map((n) => {
                const { farbe, kind: Kind } = gestalt[n.kind]
                return (
                    <div
                        key={n.id}
                        className={`flex items-start gap-2 rounded-md border px-3 py-2 text-sm
                                    shadow-lg backdrop-blur ${farbe}`}
                    >
                        <Kind size={16} className="mt-0.5 shrink-0" />
                        <span className="flex-1 break-words text-schrift">{n.text}</span>
                        <button
                            onClick={() => dismiss(n.id)}
                            className="shrink-0 rounded p-0.5 text-schrift-leise hover:text-schrift"
                            aria-label="Meldung schließen"
                        >
                            <X size={14} />
                        </button>
                    </div>
                )
            })}
        </div>
    )
}