// ── Auswahl: WAS soll gerippt werden? (§ 6.2) ───────────────────────────
// Bis zum 01.09.2026 rippte Rippy IMMER alles — Trailer, Werbung und
// Alterskennzeichen inklusive. Der Info-Lauf dauert 20–120 s, deshalb
// beginnt er erst hier und nicht schon beim Einlegen.
// 5.4.0: Sprachen je Titel, Staffel/Folge von Hand, Zielpfad-Vorschau.
// 5.5.0: Platz-Prüfung vor dem Rip und der Serien-Merker (Folge von Disc 1
// zählt auf Disc 2 weiter).
import { useState } from 'react'
import { zielVorschau } from '../../gemeinsam/ablagepfad'
import { platzUrteil } from '../../gemeinsam/platz'
import type {
  DiscInfoStand,
  DiscTitelVorschlag,
  GeraeteInfo,
  SpeicherStand,
  SprachEintrag,
  TitelRolle,
  TitelStand,
} from '../../gemeinsam/nachrichten'
import { DialogRahmen, KNOPF_GOLD, dauerText, gb, gbKurz, sprachenVorbelegt } from '../bausteine'
import { ripStarten } from '../kernverbindung'

/** Sprach-Chips eines Titels — anklickbar, außerhalb des Auswahl-Labels
 *  (ein Knopf IM Label würde die Checkbox mit umschalten). */
function SprachChips({
  name,
  vorhanden,
  gewaehlt,
  aufWechsel,
}: {
  name: string
  vorhanden: readonly SprachEintrag[]
  gewaehlt: readonly string[]
  aufWechsel: (lang: string) => void
}) {
  if (vorhanden.length === 0) return null
  return (
    <span className="inline-flex flex-wrap items-center gap-1">
      <span className="mr-0.5 font-mono text-[10px] tracking-wider text-nebel">{name}</span>
      {vorhanden.map((s) => {
        const an = gewaehlt.includes(s.lang)
        return (
          <button
            key={s.lang}
            type="button"
            onClick={() => aufWechsel(s.lang)}
            className={`rounded-md border px-1.5 py-0.5 font-mono text-[10.5px] ${
              an ? 'border-gold/50 bg-gold/15 text-gold-hell' : 'border-white/12 text-nebel hover:text-dunst'
            }`}
            title={`${s.sprache}${s.spuren > 1 ? ` (${s.spuren} Spuren)` : ''}`}
          >
            {an ? '✓ ' : ''}
            {s.lang}
            {s.spuren > 1 ? `×${s.spuren}` : ''}
          </button>
        )
      })}
    </span>
  )
}

export function TitelWahlDialog({
  id,
  typ,
  stand,
  info,
  einstellungen,
  regel,
  speicher,
  schliessen,
}: {
  id: string
  typ: GeraeteInfo['typ']
  stand: TitelStand | undefined
  info: DiscInfoStand | undefined
  einstellungen: Record<string, string>
  /** Klartext der Aufbewahrungs-Regel — damit klar ist, was mit dem
   *  Roh-Material passiert. */
  regel: string
  speicher: SpeicherStand | null
  schliessen: () => void
}) {
  const [gewaehlt, setGewaehlt] = useState<Set<number> | null>(null)
  // Eigene Rollen-Wahl je Titel; was hier nicht drinsteht, behaelt Rippys
  // Vorschlag ('hauptfilm' beim Film, 'folge' bei der Serie, sonst 'extra').
  const [rollen, setRollen] = useState<Record<number, TitelRolle>>({})
  // Sprachen je Titel (5.4.0): Was hier nicht drinsteht, ist vorbelegt
  // (Einstellung, soweit der Titel sie hat — sonst alles, was er hat).
  const [sprachen, setSprachen] = useState<Record<number, { audio: string[]; untertitel: string[] }>>({})
  // Staffel und erste Folge von Hand (5.4.0) — die Staffel kommt von der
  // Disc, die erste Folge vom Serien-Merker (5.5.0: die vorige Disc dieser
  // Serie) oder vom Nutzer („auf Disc 2 sind 3–4").
  const merker = info?.serienMerker ?? null
  const merkerGilt = merker !== null && (info?.discNr === null || info === undefined || (info.discNr ?? 1) > 1)
  const [staffel, setStaffel] = useState<string>(
    info !== undefined && info.staffel !== null ? String(info.staffel) : merker !== null ? String(merker.staffel) : '',
  )
  const [ersteFolge, setErsteFolge] = useState(merkerGilt && merker !== null ? String(merker.naechsteFolge) : '')
  // Rippys Vorauswahl gilt, bis der Nutzer sie anfasst.
  const aktiv = gewaehlt ?? new Set((stand?.titel ?? []).filter((t) => t.gewaehlt).map((t) => t.nr))
  const rolleVon = (t: DiscTitelVorschlag): TitelRolle => rollen[t.nr] ?? t.rolle
  const sprachenVon = (t: DiscTitelVorschlag): { audio: string[]; untertitel: string[] } =>
    sprachen[t.nr] ?? {
      audio: sprachenVorbelegt(t.sprachen.audio, einstellungen['audioSprachen'] ?? ''),
      untertitel: sprachenVorbelegt(t.sprachen.untertitel, einstellungen['untertitelSprachen'] ?? ''),
    }
  const sprachWechsel = (t: DiscTitelVorschlag, art: 'audio' | 'untertitel', lang: string): void => {
    const jetzt = sprachenVon(t)
    const liste = jetzt[art].includes(lang) ? jetzt[art].filter((l) => l !== lang) : [...jetzt[art], lang]
    setSprachen({ ...sprachen, [t.nr]: { ...jetzt, [art]: liste } })
  }
  const umschalten = (nr: number): void => {
    const neu = new Set(aktiv)
    if (neu.has(nr)) neu.delete(nr)
    else neu.add(nr)
    setGewaehlt(neu)
  }
  const alle = stand?.titel ?? []
  const gewaehlteTitel = alle.filter((t) => aktiv.has(t.nr))
  const gesamtBytes = gewaehlteTitel.reduce((s, t) => s + t.groesseBytes, 0)
  const alsSerie = gewaehlteTitel.some((t) => rolleVon(t) === 'folge')
  const hauptTitel = gewaehlteTitel.filter((t) => rolleVon(t) !== 'extra').length
  const extras = gewaehlteTitel.filter((t) => rolleVon(t) === 'extra').length
  const zahlOderNull = (text: string, mindestens: number): number | null => {
    const n = Number(text.trim())
    return text.trim().length > 0 && Number.isInteger(n) && n >= mindestens ? n : null
  }
  const staffelZahl = zahlOderNull(staffel, 0)
  const folgeZahl = zahlOderNull(ersteFolge, 1)
  const vorschau = zielVorschau({
    ablage: einstellungen['ablage'] ?? 'Videos\\Rippy',
    alsSerie,
    titel: info?.titel ?? '',
    jahr: info?.jahr ?? null,
    staffel: staffelZahl,
    ersteFolge: folgeZahl,
    hauptTitel,
    extras,
    vorgangsName: `${typ}-<Zeitstempel>`,
  })
  // Platz-Prüfung (5.5.0): gegen den Arbeitsordner — dort landen Roh und Encode.
  const komprimiert = einstellungen['transcodeEnabled'] !== 'false'
  const platz = speicher !== null && speicher.arbeit.ok ? platzUrteil(speicher.arbeit.freiBytes, gesamtBytes, komprimiert) : { text: '', hart: false }

  return (
    <DialogRahmen schliessen={schliessen} breite="max-w-3xl">
      <h3 className="font-display text-xl font-bold text-schnee">Was soll gerippt werden?</h3>

      {stand === undefined || stand.laeuft ? (
        <p className="mt-4 font-mono text-xs text-nebel">
          Rippy liest die Titel der Disc … das dauert bis zu zwei Minuten. Solange dreht das Laufwerk.
        </p>
      ) : stand.fehler.length > 0 ? (
        <p className="mt-4 font-mono text-xs text-rot">✗ {stand.fehler}</p>
      ) : (
        <>
          <p className={`mt-1 text-xs ${stand.unsicher ? 'text-warn' : 'text-dunst'}`}>
            {stand.unsicher ? '⚠ ' : ''}
            {stand.einordnung}
          </p>

          <div className="mt-3 flex flex-wrap gap-1.5">
            <button
              onClick={() => setGewaehlt(new Set(alle.filter((t) => t.gewaehlt).map((t) => t.nr)))}
              className="rounded-lg border border-gold/40 bg-gold/12 px-2.5 py-1 text-[11px] text-gold-hell"
            >
              Rippys Vorschlag
            </button>
            <button
              onClick={() =>
                setGewaehlt(
                  // Alles Sehenswerte: Hauptinhalt und Zugaben, aber weder
                  // Sammeltitel noch Logos/Warnungen.
                  new Set(alle.filter((t) => !t.grund.startsWith('Sammeltitel') && !t.grund.startsWith('zu kurz')).map((t) => t.nr)),
                )
              }
              className="rounded-lg border border-white/15 px-2.5 py-1 text-[11px] text-dunst hover:text-schnee"
            >
              Hauptinhalt + Extras
            </button>
            <button onClick={() => setGewaehlt(new Set(alle.map((t) => t.nr)))} className="rounded-lg border border-white/15 px-2.5 py-1 text-[11px] text-dunst hover:text-schnee">
              Alles
            </button>
            <button onClick={() => setGewaehlt(new Set())} className="rounded-lg border border-white/15 px-2.5 py-1 text-[11px] text-dunst hover:text-schnee">
              Nichts
            </button>
          </div>

          <div className="mt-3 space-y-1">
            {alle.map((t) => {
              const an = aktiv.has(t.nr)
              const wahl = sprachenVon(t)
              return (
                <div key={t.nr} className={`rounded-lg border ${an ? 'border-gold/40 bg-gold/8' : 'border-white/8 bg-samt/40'}`}>
                  <label className="flex cursor-pointer items-center gap-3 p-2">
                    <input type="checkbox" checked={an} onChange={() => umschalten(t.nr)} className="accent-[oklch(0.83_0.11_75)]" />
                    <span className="w-16 flex-none font-mono text-[11px] text-nebel">Titel {t.nr}</span>
                    <span className="w-24 flex-none font-mono text-xs text-schnee">{dauerText(t.dauerS)}</span>
                    <span className="w-20 flex-none font-mono text-[11px] text-dunst">{gb(t.groesseBytes)}</span>
                    <span className="hidden w-20 flex-none font-mono text-[11px] text-nebel sm:inline">{t.kapitel} Kap.</span>
                    {an ? (
                      <select
                        value={rolleVon(t)}
                        onChange={(e) => setRollen({ ...rollen, [t.nr]: e.target.value as TitelRolle })}
                        onClick={(e) => e.stopPropagation()}
                        className="flex-none rounded-lg border border-white/15 bg-samt/70 px-2 py-0.5 text-[11px] text-dunst"
                        title="Bestimmt, WOHIN der Titel abgelegt wird"
                      >
                        <option value="hauptfilm">Hauptfilm</option>
                        <option value="extra">Extra</option>
                        <option value="folge">Folge</option>
                      </select>
                    ) : (
                      <span className="min-w-0 flex-1 truncate text-[11px] text-nebel">{t.grund}</span>
                    )}
                  </label>
                  {/* Sprachen je Titel (5.4.0): Was der Info-Lauf an DIESEM
                      Titel gemessen hat — anhaken, was in die Datei soll.
                      Der Commander-Fall: japanischer Ton, deutsche Untertitel. */}
                  {an && (t.sprachen.audio.length > 0 || t.sprachen.untertitel.length > 0) && (
                    <div className="flex flex-wrap items-center gap-x-4 gap-y-1 border-t border-white/8 px-2 py-1.5 pl-9">
                      <SprachChips name="TON" vorhanden={t.sprachen.audio} gewaehlt={wahl.audio} aufWechsel={(lang) => sprachWechsel(t, 'audio', lang)} />
                      <SprachChips name="UNTERTITEL" vorhanden={t.sprachen.untertitel} gewaehlt={wahl.untertitel} aufWechsel={(lang) => sprachWechsel(t, 'untertitel', lang)} />
                      {wahl.audio.length === 0 && t.sprachen.audio.length > 0 && (
                        <span className="font-mono text-[10.5px] text-warn">kein Ton gewählt — HandBrake nimmt die erste Spur</span>
                      )}
                    </div>
                  )}
                </div>
              )
            })}
            {alle.length === 0 && <p className="font-mono text-xs text-warn">Die Disc gab keine Titel her.</p>}
          </div>

          {alsSerie && (
            <div className="mt-3 flex flex-wrap items-end gap-3 rounded-xl border border-white/8 bg-samt/40 p-3">
              <label className="block">
                <span className="font-mono text-[10px] tracking-wider text-nebel">STAFFEL</span>
                <input
                  type="number"
                  min={0}
                  value={staffel}
                  onChange={(e) => setStaffel(e.target.value)}
                  placeholder={info !== undefined && info.staffel !== null ? String(info.staffel) : '1'}
                  className="mt-1 block w-20 rounded-lg border border-white/12 bg-buehne px-2 py-1 font-mono text-xs text-schnee"
                />
              </label>
              <label className="block">
                <span className="font-mono text-[10px] tracking-wider text-nebel">AB FOLGE</span>
                <input
                  type="number"
                  min={1}
                  value={ersteFolge}
                  onChange={(e) => setErsteFolge(e.target.value)}
                  placeholder="automatisch"
                  className="mt-1 block w-28 rounded-lg border border-white/12 bg-buehne px-2 py-1 font-mono text-xs text-schnee"
                />
              </label>
              <p className="min-w-[200px] flex-1 text-[11px] leading-4 text-nebel">
                {merkerGilt && merker !== null
                  ? `Serien-Merker: Die vorige Disc dieser Serie endete mit Folge ${merker.naechsteFolge - 1} (${merker.wann.slice(0, 10)}) — Rippy zählt ab ${merker.naechsteFolge} weiter. Stimmt das nicht, ändere die Zahl.`
                  : 'Leer heißt: Rippy ordnet die Folgen über die TMDb-Laufzeiten zu, und nur, wenn es eindeutig ist. Weißt du es besser („auf Disc 2 sind die Folgen 3 und 4"), trag es hier ein — dann zählt Rippy fortlaufend in Disc-Reihenfolge.'}
                {info !== undefined && info.discNr !== null && ` Die Disc nennt sich selbst Disc ${info.discNr}.`}
              </p>
            </div>
          )}

          {/* Vorschau (5.4.0): Rolle, Serie, Staffel und Extras entscheiden
              einiges — zwei Zeilen Zielpfad ersparen Überraschungen. */}
          <div className="mt-3 rounded-xl border border-white/8 bg-buehne/70 p-3 font-mono text-[11px] leading-5">
            <p className="text-[10px] tracking-wider text-nebel">LANDET IN</p>
            <p className="break-all text-gold-hell">{vorschau[0]}</p>
            <p className="text-dunst">{vorschau[1]}</p>
          </div>

          {/* Platz-Prüfung (5.5.0): 40 Minuten Lesen sollen nicht an einem
              vollen Laufwerk scheitern. */}
          {speicher !== null && speicher.arbeit.ok && (
            <p className={`mt-2 font-mono text-[11px] ${platz.hart ? 'text-rot' : platz.text.length > 0 ? 'text-warn' : 'text-nebel'}`}>
              {platz.text.length > 0
                ? `${platz.hart ? '✗' : '⚠'} ${platz.text}`
                : `Platz: ${gbKurz(speicher.arbeit.freiBytes)} frei im Arbeitsordner — reicht für ${gb(gesamtBytes)} verlustfrei${komprimiert ? ' plus Kompression' : ''}.`}
            </p>
          )}

          <p className="mt-3 font-mono text-[11px] text-nebel">
            {aktiv.size} von {alle.length} gewählt · zusammen {gb(gesamtBytes)} verlustfrei
            {regel.length > 0 ? ` · ${regel}` : ''}
          </p>
          <p className="mt-1 text-[11px] text-nebel">
            {alsSerie
              ? 'Folgen landen unter Serien/… /Season NN. Ohne Vorgabe setzt Rippy die Episoden-Nummern nur, wenn die Laufzeiten eindeutig passen — sonst behalten die Dateien ihre Namen.'
              : 'Der Hauptfilm landet in seinem eigenen Ordner, Extras daneben im Unterordner „extras" — so lesen Jellyfin, Emby und Kodi sie als Zugaben.'}{' '}
            Das Laufwerk ist frei, sobald die Roh-Dateien liegen — die Kompression läuft danach im Hintergrund.
          </p>
        </>
      )}

      <div className="mt-5 flex justify-between gap-2">
        <button onClick={schliessen} className="rounded-lg border border-white/15 px-4 py-1.5 text-xs text-dunst hover:text-schnee">
          Abbrechen
        </button>
        <button
          onClick={() => {
            ripStarten(
              id,
              gewaehlteTitel.map((t) => {
                const wahl = sprachenVon(t)
                return {
                  nr: t.nr,
                  rolle: rolleVon(t),
                  dauerS: t.dauerS,
                  groesseBytes: t.groesseBytes,
                  audioSprachen: wahl.audio,
                  untertitelSprachen: wahl.untertitel,
                }
              }),
              { staffel: alsSerie ? staffelZahl : null, ersteFolge: alsSerie ? folgeZahl : null },
            )
            schliessen()
          }}
          disabled={aktiv.size === 0 || stand === undefined || stand.laeuft || platz.hart}
          className={KNOPF_GOLD}
          title={platz.hart ? platz.text : ''}
        >
          {aktiv.size === 1 ? 'Diesen Titel rippen' : `${aktiv.size} Titel rippen`}
        </button>
      </div>
    </DialogRahmen>
  )
}