// Der Verlauf (5.5.0) — die letzten Vorgänge auf einen Blick, statt der
// Bibliothek (Commander: „Brauchen wir die wirklich?" — nein: Jellyfin IST
// die Bibliothek; die Wiedererkennung braucht keine Ansicht).
import type { GeraeteInfo, VorgangEintrag } from '../../gemeinsam/nachrichten'
import { leisteAusVorgang } from '../../gemeinsam/vorgangsleiste'
import { Badge, TYP_NAMEN, datumKurz, gb } from '../bausteine'
import { VorgangsLeiste } from './VorgangsLeiste'

const PHASEN_TEXT: Record<VorgangEintrag['phase'], string> = {
  rippt: 'rippt',
  wartet: 'wartet',
  komprimiert: 'komprimiert',
  'legt-ab': 'legt ab',
  fertig: 'fertig',
  fehler: 'Fehler',
  abgebrochen: 'abgebrochen',
}

export function phasenTon(p: VorgangEintrag['phase']): 'gruen' | 'gelb' | 'blau' | 'grau' {
  return p === 'fertig' ? 'gruen' : p === 'fehler' || p === 'abgebrochen' ? 'gelb' : p === 'wartet' ? 'grau' : 'blau'
}

export function VerlaufKarte({ vorgaenge, aufAlle }: { vorgaenge: VorgangEintrag[]; aufAlle: () => void }) {
  if (vorgaenge.length === 0) return null
  const letzte = vorgaenge.slice(0, 6)
  return (
    <div className="rounded-2xl border border-tinte/10 bg-karte/50 p-5">
      <div className="flex items-center gap-2.5 font-mono text-[10.5px] tracking-[0.12em] text-nebel">
        <span className="text-dunst">VERLAUF</span>
        <span>·</span>
        <span>die letzten {letzte.length} Vorgänge</span>
        <button onClick={aufAlle} className="ml-auto font-mono text-[10.5px] text-nebel hover:text-dunst">
          alle unter Roh-Dateien →
        </button>
      </div>
      <div className="mt-3 space-y-1">
        {letzte.map((v) => (
          <div key={v.id} className="flex flex-wrap items-center gap-x-3 gap-y-1 rounded-lg border border-tinte/8 bg-samt/40 px-3 py-2">
            <span className="min-w-0 flex-1 truncate font-display text-[14px] font-bold text-schnee" title={v.titel}>
              {v.titel}
              {v.jahr !== null && <span className="ml-1 font-medium text-dunst">({v.jahr})</span>}
            </span>
            <VorgangsLeiste stand={leisteAusVorgang(v)} kompakt />
            <Badge text={PHASEN_TEXT[v.phase]} ton={phasenTon(v.phase)} />
            <span className="font-mono text-[10.5px] text-nebel">
              {(TYP_NAMEN[v.typ as GeraeteInfo['typ']] ?? v.typ).toUpperCase()} · {datumKurz(v.begonnen)}
              {v.phase === 'fertig' && v.fertigBytes > 0 && ` · ${gb(v.fertigBytes)}`}
              {!v.rohGeloescht && v.rohBytes > 0 && ` · Roh ${gb(v.rohBytes)}`}
            </span>
            {v.phase === 'fertig' && v.zielOrdner.length > 0 && (
              <button
                onClick={() => void window.rippy.ordnerOeffnen(v.zielOrdner)}
                className="font-mono text-[10.5px] text-nebel hover:text-dunst"
                title={v.zielOrdner}
              >
                Ordner öffnen
              </button>
            )}
          </div>
        ))}
      </div>
    </div>
  )
}