import { useEffect, useState } from 'react'
import { FileQuestion, FileText, Film, Image, Loader2, Music } from 'lucide-react'
import { api, type Speicher } from '../api'
import { useStore } from '../store'
import { bytes, zeit } from '../format'
import { Karte, Leer } from './Bausteine'

const ARTEN: Record<string, { text: string; kind: typeof Image; farbe: string }> = {
    bild: { text: 'Bilder', kind: Image, farbe: 'bg-akzent' },
    video: { text: 'Video', kind: Film, farbe: 'bg-warn' },
    ton: { text: 'Ton', kind: Music, farbe: 'bg-gut' },
    dokument: { text: 'Dokumente', kind: FileText, farbe: 'bg-schrift-leise' },
    andere: { text: 'Anderes', kind: FileQuestion, farbe: 'bg-schlecht' },
}

/** Was liegt da eigentlich — nach Art, nach Größe, nach Alter.
 *
 *  ERST SEHEN, DANN ENTSCHEIDEN. Eine Aufbewahrungsregel („alles älter als 90
 *  Tage weg") ist eine Behauptung, solange niemand weiß, wie viel das wäre.
 *  Diese Karten löschen nichts; sie liefern die Zahlen, mit denen man
 *  entscheiden kann. */
export function SpeicherKarten() {
    const note = useStore((s) => s.note)
    const [daten, setDaten] = useState<Speicher | null>(null)

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

    if (!daten) {
        return (
            <Karte titel="Nach Medienart">
                <div className="flex justify-center py-6">
                    <Loader2 className="animate-spin text-schrift-leise" />
                </div>
            </Karte>
        )
    }

    const gesamt = daten.nachArt.reduce((s, a) => s + a.bytes, 0) || 1

    return (
        <>
            <Karte titel="Nach Medienart">
                <div className="flex flex-col gap-2">
                    {/* Ein Balken für alles, damit die Verhältnisse auf einen
                        Blick stimmen — Zahlen untereinander liest man, Anteile
                        sieht man. */}
                    <div className="flex h-2.5 overflow-hidden rounded-full bg-grund">
                        {daten.nachArt
                            .filter((a) => a.bytes > 0)
                            .map((a) => (
                                <div
                                    key={a.art}
                                    className={ARTEN[a.art]?.farbe ?? 'bg-rand'}
                                    style={{ width: `${(a.bytes / gesamt) * 100}%` }}
                                    title={`${ARTEN[a.art]?.text}: ${bytes(a.bytes)}`}
                                />
                            ))}
                    </div>

                    <table className="w-full text-sm">
                        <tbody>
                            {daten.nachArt.map((a) => {
                                const g = ARTEN[a.art]
                                const Kind = g?.kind ?? FileQuestion
                                return (
                                    <tr
                                        key={a.art}
                                        className={`border-t border-rand first:border-0 ${
                                            a.files === 0 ? 'text-schrift-leise/50' : ''
                                        }`}
                                    >
                                        <td className="py-1.5">
                                            <span className="flex items-center gap-2">
                                                <span
                                                    className={`h-2 w-2 rounded-full ${g?.farbe ?? 'bg-rand'}`}
                                                />
                                                <Kind size={14} />
                                                {g?.text ?? a.art}
                                            </span>
                                        </td>
                                        <td className="py-1.5 text-right tabular-nums">
                                            {a.files}
                                        </td>
                                        <td className="w-24 py-1.5 text-right tabular-nums">
                                            {bytes(a.bytes)}
                                        </td>
                                        <td className="w-16 py-1.5 text-right text-xs text-schrift-leise tabular-nums">
                                            {gesamt > 1 ? `${Math.round((a.bytes / gesamt) * 100)} %` : '—'}
                                        </td>
                                    </tr>
                                )
                            })}
                        </tbody>
                    </table>
                </div>
            </Karte>

            <div className="grid gap-4 lg:grid-cols-2">
                <Karte titel="Die größten Dateien">
                    {daten.groesste.length === 0 ? (
                        <Leer text="Noch nichts da." />
                    ) : (
                        <ul className="flex flex-col gap-1 text-sm">
                            {daten.groesste.map((m) => (
                                <li key={m.id} className="flex items-center gap-2">
                                    <span
                                        className="min-w-0 flex-1 truncate font-mono text-xs"
                                        title={m.path}
                                    >
                                        {m.path}
                                    </span>
                                    <span className="shrink-0 text-xs tabular-nums">
                                        {bytes(m.size)}
                                    </span>
                                </li>
                            ))}
                        </ul>
                    )}
                </Karte>

                <Karte titel="Doppelt abgelegt">
                    {daten.doppelte.length === 0 ? (
                        <p className="py-2 text-sm text-schrift-leise">
                            Nichts doppelt — jeder Inhalt liegt genau einmal.
                        </p>
                    ) : (
                        <div className="flex flex-col gap-2">
                            <p className="text-xs text-schrift-leise">
                                Derselbe Inhalt unter mehreren Pfaden. Kein Fehler — aber{' '}
                                <strong className="text-warn">{bytes(daten.verschwendet)}</strong>{' '}
                                Platz, den niemand gewählt hat.
                            </p>
                            <ul className="flex max-h-48 flex-col gap-1 overflow-auto text-xs">
                                {daten.doppelte.map((d) => (
                                    <li key={d.sha256} className="rounded border border-rand p-1.5">
                                        <span className="text-schrift-leise">
                                            {d.n}× · {bytes(d.bytes / d.n)}
                                        </span>
                                        <span className="mt-0.5 block truncate font-mono">
                                            {d.pfade.replaceAll('|', '  ·  ')}
                                        </span>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    )}
                </Karte>
            </div>

            <Karte titel="Wird das überhaupt geholt?">
                <p className="mb-3 text-xs text-schrift-leise">
                    Die Frage, die eine Aufbewahrungsregel wirklich braucht — und die sich von
                    innen nicht beantworten lässt. Gezählt wird seit dem Einbau des Zählers;
                    was davor lag, steht hier als „nie geholt", auch wenn es täglich benutzt
                    wurde. Nach ein paar Wochen stimmt die Zahl.
                </p>
                <div className="grid gap-3 sm:grid-cols-2">
                    <div className="rounded-md border border-rand bg-grund p-3">
                        <p className="text-xs text-schrift-leise">Nie geholt</p>
                        <p className="text-xl font-semibold">
                            {daten.nieGeholt.n}{' '}
                            <span className="text-sm font-normal text-schrift-leise">
                                ({bytes(daten.nieGeholt.bytes)})
                            </span>
                        </p>
                    </div>
                    <div className="rounded-md border border-rand bg-grund p-3">
                        <p className="mb-1 text-xs text-schrift-leise">Am häufigsten geholt</p>
                        {daten.beliebteste.length === 0 ? (
                            <p className="text-sm text-schrift-leise">noch nichts gezählt</p>
                        ) : (
                            <ul className="flex flex-col gap-0.5 text-xs">
                                {daten.beliebteste.slice(0, 5).map((m) => (
                                    <li key={m.id} className="flex items-center gap-2">
                                        <span className="min-w-0 flex-1 truncate font-mono" title={m.path}>
                                            {m.path}
                                        </span>
                                        <span className="shrink-0 tabular-nums text-schrift-leise">
                                            {m.abrufe}×
                                        </span>
                                    </li>
                                ))}
                            </ul>
                        )}
                    </div>
                </div>
            </Karte>

            <Karte titel="Wie alt der Bestand ist">
                <p className="mb-3 text-xs text-schrift-leise">
                    Die Zahlen, die eine Aufbewahrungsregel braucht. „Alles älter als 90 Tage
                    löschen" ist eine Behauptung, solange niemand weiß, wie viel das wäre —
                    hier steht es. <strong>Gelöscht wird hier nichts.</strong>
                </p>
                <table className="w-full text-sm">
                    <tbody>
                        {daten.stufen.map((st) => (
                            <tr key={st.tage} className="border-t border-rand first:border-0">
                                <td className="py-1.5">älter als {st.tage} Tage</td>
                                <td className="py-1.5 text-right tabular-nums">
                                    {st.files} Dateien
                                </td>
                                <td className="w-24 py-1.5 text-right tabular-nums">
                                    {bytes(st.bytes)}
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
                {daten.aelteste[0] && (
                    <p className="mt-3 text-xs text-schrift-leise">
                        Das älteste ist{' '}
                        <code className="font-mono">{daten.aelteste[0].path}</code> vom{' '}
                        {zeit(daten.aelteste[0].created_at)}.
                    </p>
                )}
            </Karte>
        </>
    )
}