import { useEffect, useState } from 'react'
import { Cpu, HardDrive, Disc, Download, Trash2, Activity, Film, Server, RotateCcw, FileSpreadsheet, Layers } from 'lucide-react'
import { api } from '../lib/api'
import { useToast } from '../context/ToastContext'
import { Card, CardHeader, CardTitle, CardContent } from '../components/ui/Card'
import { Button } from '../components/ui/Button'
import { StatusBadge, TypeBadge } from '../components/ui/Badge'
import ConfirmDialog from '../components/ConfirmDialog'
import DeviceDiscovery from '../components/DeviceDiscovery'
import JobDetailModal from '../components/JobDetailModal'
import LiveLogSection from '../components/LiveLogSection'
import RetryDialog from '../components/RetryDialog'
import { useStrom } from '../lib/useEventStream'
import { useBetrieb } from '../lib/useBetrieb'

interface JobMeta {
  year?: number
  overview?: string
  poster_path?: string
  genres?: string[]
  runtime?: number
  type?: string
  source?: string
}

interface Job {
  id: string
  type: 'cd' | 'dvd' | 'bluray' | 'uhd'
  status: 'pending' | 'processing' | 'transcoding' | 'canceling' | 'completed' | 'failed'
  device: string
  startTime: string
  endTime?: string
  progress: number
  title?: string
  can_retry?: boolean
  // "transcode" | "rip" | "unklar" | "" — welche Wiederholung passt (phasen.py)
  retry_art?: string
  meta?: JobMeta | null
  // Restzeit von der API (eta.py). '' = noch keine Aussage möglich — dann wird
  // bewusst nichts angezeigt statt einer erfundenen Zahl.
  eta_sekunden?: number
  eta_text?: string
}

interface SystemInfo {
  api_version: string
  plaetze: { name: string; pfad?: string; gleiches_laufwerk?: boolean;
             frei_gb: number; gesamt_gb: number }[]
  workers: { name: string; encoders: string[] }[]
}

// Ein Worker aus GET /capabilities — inklusive der ECHTEN Erreichbarkeit.
// /system/info liefert nur die registrierten Einträge; die Kachel „N Worker
// online" zählte damit auch Leichen aus alten Rebuilds mit (Befund 26.07.2026).
interface WorkerLive {
  name: string
  encoders: string[]
  online?: boolean
  info?: { cpu_modell?: string, cpu_kerne?: string, cpu_simd?: string, extern?: string }
}

// Ein Laufwerk aus GET /devices. Gebraucht, weil die Server-Status-Karte sonst
// „keine Disc in Arbeit" behauptet, während oben auf DEMSELBEN Bildschirm
// „Akira im Laufwerk erkannt" steht (Commander-Befund 26.07.2026).
interface LaufwerkLive {
  id: string
  status: string
  disc?: { title?: string, year?: number | null, disc_type?: string }
  /** Die Erkennung laeuft noch — es gibt noch keinen Titel, aber auch kein
   *  leeres Laufwerk. Dauert an einer Blu-ray rund zwei Minuten. */
  disc_wird_erkannt?: boolean
}

// Ein Ablageziel aus GET /storage-targets — Verzeichnisse unter /app/media
// inklusive der eingehängten Netzwerk-Freigaben, mit freiem Platz.
//
// Commander-Befund 26.07.2026: Der Server-Status zeigte nur „Media
// (/app/media)" — also die Container-Platte. Die eingehängte NAS-Freigabe mit
// ihren 2,1 TB fehlte, obwohl genau dort die Rohdaten und (bei externem
// Encoden) auch die Ablage liegen müssen. Wer wissen will, ob noch Platz für
// eine Disc ist, sah die falsche Zahl.
interface AblageZiel {
  name: string
  path: string
  is_mount: boolean
  free_gb: number | null
}

function posterUrl(meta?: JobMeta | null): string | null {
  const p = meta?.poster_path
  if (!p) return null
  return p.startsWith('http') ? p : `https://image.tmdb.org/t/p/w342${p}`
}

/*
 * Ein fehlgeschlagener Abruf gibt `null` — NICHT eine leere Liste.
 *
 * Commander-Befund 26.07.2026: „Wenn der Worker installiert ist, wird dieser
 * Bereich oft neu geladen." Gemessen war es kein Neuladen: Die Antworten von
 * /jobs und /capabilities waren über zwanzig Sekunden byteweise IDENTISCH, alle
 * Endpunkte antworteten in unter 30 ms. Der Grund lag im Fehlerzweig — hier
 * stand `return []`, und jeder einzelne verpasste Abruf setzte damit die
 * Job-Liste auf LEER. Für einen Takt zeigte die Tabelle „Keine Jobs", die Zähler
 * sprangen auf (0), vier Sekunden später war alles wieder da.
 *
 * Ein verpasster Abruf ist keine Nachricht über die Welt. Wer nichts Neues
 * weiß, behält, was er wusste.
 */
async function fetchJobs(): Promise<Job[] | null> {
  try {
    const response = await api.get('/jobs')
    return Array.isArray(response.data) ? response.data : null
  } catch {
    return null
  }
}

export default function Dashboard() {
  const [jobs, setJobs] = useState<Job[]>([])
  const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(null)
  const [loading, setLoading] = useState(true)
  const [detailJobId, setDetailJobId] = useState<string | null>(null)
  const [aufraeumenOffen, setAufraeumenOffen] = useState(false)
  // Job, dessen Entfernen gerade bestätigt werden soll — plus was daneben liegt.
  const [loeschKandidat, setLoeschKandidat] = useState<Job | null>(null)
  const [rohdaten, setRohdaten] = useState<{ gb: number, dateien: number, pfade: string[] } | null>(null)
  const [rohdatenMitloeschen, setRohdatenMitloeschen] = useState(false)
  // Job, für den ein neuer Versuch bestätigt werden soll (siehe wiederholen()).
  const [neuKandidat, setNeuKandidat] = useState<Job | null>(null)
  const [neuRohdaten, setNeuRohdaten] = useState<{ gb: number, dateien: number, pfade: string[] } | null>(null)
  const [activeTab, setActiveTab] = useState<'all' | 'active' | 'queue' | 'completed' | 'failed'>('all')
  const [workersLive, setWorkersLive] = useState<WorkerLive[]>([])
  const [laufwerke, setLaufwerke] = useState<LaufwerkLive[]>([])
  const [ablagen, setAblagen] = useState<AblageZiel[]>([])
  const strom = useStrom()
  // Was hier ueberhaupt angezeigt werden DARF, haengt am Betrieb.
  // Ohne das stand im Windows-Fenster "Pruefen: docker compose ps".
  const betrieb = useBetrieb()
  const { toast } = useToast()

  /*
   * Entfernen fragt jetzt ZUERST, was daneben liegen bleibt.
   *
   * Grund (Vorfall 25.07.2026, v3.14): „Job aus der Liste entfernen" löscht
   * bewusst keine Dateien. Das ist richtig — aber Job und Rohdaten sind nur
   * über die Job-ID verbunden, der Rohschnitt ist danach also UNERREICHBAR:
   * nichts zeigt mehr darauf, „Neu komprimieren" ist unmöglich, und im UI ist
   * nichts davon zu sehen. Damals verwaisten so 75 GB unsichtbar auf der
   * Platte, gefunden erst per SSH.
   */
  const loeschenVorbereiten = async (job: Job) => {
    setLoeschKandidat(job)
    setRohdaten(null)
    setRohdatenMitloeschen(false)
    try {
      const r = await api.get(`/jobs/${job.id}/rohdaten`)
      setRohdaten(r.data)
    } catch {
      setRohdaten(null)  // dann eben ohne Zahl fragen, statt gar nicht
    }
  }

  /*
   * Der „Neu"-Knopf sagt jetzt, WAS er tut.
   *
   * Commander-Frage 26.07.2026: „Hier gibt es den Button ‚neu' aber WAS wird
   * dann gemacht? Komprimierung? Neu Gerippt?" — Antwort damals: immer
   * Komprimierung, egal wie der Job gestorben war. Für einen abgebrochenen Rip
   * war das falsch (5,1 GB Bruchstück von rund 40 GB).
   *
   * `job.retry_art` kommt aus api/phasen.py und kennt drei Fälle:
   *   'transcode' → der Rip war fertig  → „Neu komprimieren"
   *   'rip'       → der Rip starb       → „Neu rippen" (Disc muss drin sein)
   *   'unklar'    → Bestandsjob         → fragen, mit der Rohdaten-Größe als
   *                                       Entscheidungshilfe
   *
   * Sonderfall: Phase 'transcode', aber die Rohdaten sind fort (`can_retry`
   * false) — dann hilft auch hier nur ein neuer Rip.
   */
  const retryPlan = (job: Job): 'transcode' | 'rip' | 'unklar' => {
    if (job.retry_art === 'transcode') return job.can_retry ? 'transcode' : 'rip'
    if (job.retry_art === 'rip') return 'rip'
    return 'unklar'
  }

  const wiederholen = async (job: Job) => {
    setNeuKandidat(job)
    setNeuRohdaten(null)
    try {
      const r = await api.get(`/jobs/${job.id}/rohdaten`)
      setNeuRohdaten(r.data)
    } catch {
      setNeuRohdaten(null)  // dann eben ohne Zahl fragen
    }
  }

  const neuStarten = async (art: 'transcode' | 'rip') => {
    const job = neuKandidat
    if (!job) return
    setNeuKandidat(null)
    const weg = art === 'rip' ? 'retry-rip' : 'retry-transcode'
    try {
      await api.post(`/jobs/${job.id}/${weg}`)
      toast('success', art === 'rip'
        ? 'Neuer Rip gestartet — der alte Eintrag bleibt zum Nachlesen stehen'
        : 'Kompression neu eingereiht — die Disc wird nicht gebraucht')
      const frisch = await fetchJobs()
      if (frisch) setJobs(frisch)
    } catch (e: any) {
      toast('error', e?.response?.data?.detail || 'Fehlgeschlagen')
    }
  }

  const jobLoeschen = async () => {
    const job = loeschKandidat
    if (!job) return
    setLoeschKandidat(null)
    try {
      const r = await api.delete(`/jobs/${job.id}`, {
        params: rohdatenMitloeschen ? { rohdaten: true } : {},
      })
      const befreit = r.data?.rohdaten_geloescht_gb
      toast('success', `„${job.title || job.id.slice(0, 8)}" aus der Liste entfernt`
        + (befreit ? ` — ${befreit} GB Rohdaten gelöscht` : ''))
      const frisch = await fetchJobs()
      if (frisch) setJobs(frisch)
    } catch (e: any) {
      toast('error', e?.response?.data?.detail || 'Entfernen fehlgeschlagen')
    }
  }

  const erledigteAufraeumen = async () => {
    setAufraeumenOffen(false)
    try {
      const r = await api.delete('/jobs')
      toast('success', `${r.data.deleted} erledigte Jobs entfernt — Dateien bleiben liegen`)
      const frisch = await fetchJobs()
      if (frisch) setJobs(frisch)
    } catch {
      toast('error', 'Aufräumen fehlgeschlagen')
    }
  }

  /*
   * KEIN TAKTGEBER MEHR (Etappe V2-3).
   *
   * Hier standen zwei: alle 4 s Jobs und Laufwerke, alle 12 s Hardware,
   * Worker und Ablagen — zusammen 75 Anfragen pro Minute JE OFFENEM TAB. Bei
   * der damaligen Grenze von 100/min wies die API laufend mit HTTP 429 ab
   * (gemessen: 97 Abweisungen im Log), und weil ein Fehlschlag im UI als
   * „es gibt nichts" gelesen wurde, leerte sich die Job-Liste im Sekundentakt.
   * Genau das hat der Commander als „wird oft neu geladen" gemeldet.
   *
   * Jetzt kommt alles aus der EINEN Verbindung, die App.tsx haelt.
   *
   * ⚠️ DIE REGEL BLEIBT — sie ist nur umgezogen: Ein fehlender Wert im Strom
   * heisst „nichts Neues erfahren", NICHT „es gibt nichts". Deshalb wird unten
   * jeder Wert nur uebernommen, wenn er wirklich da ist; sonst bleibt der
   * letzte bekannte Stand stehen. Das UI zeigt dann oben rechts
   * „VERBINDUNG WEG" statt leerer Listen.
   */
  useEffect(() => {
    setJobs(strom.jobs as Job[])
    setLoading(false)
  }, [strom.jobs])

  useEffect(() => {
    if (strom.devices !== null) setLaufwerke(strom.devices as LaufwerkLive[])
  }, [strom.devices])

  useEffect(() => {
    if (strom.workers.length || strom.verbunden) setWorkersLive(strom.workers as WorkerLive[])
  }, [strom.workers, strom.verbunden])

  useEffect(() => {
    if (strom.systemInfo) setSystemInfo(strom.systemInfo as SystemInfo)
  }, [strom.systemInfo])

  useEffect(() => {
    if (strom.ablagen !== null) setAblagen(strom.ablagen as AblageZiel[])
  }, [strom.ablagen])

  const aktiverJob = jobs.find(j => j.status === 'processing' || j.status === 'transcoding')
  const queueJobs = jobs.filter(j => j.status === 'pending')
  const completedJobs = jobs.filter(j => j.status === 'completed')
  const failedJobs = jobs.filter(j => j.status === 'failed')

  /*
   * Was diese Karte anzeigt — und was sie NICHT mehr anzeigt.
   *
   * Commander 26.07.2026: „Der Server Status muss dringend überarbeitet werden,
   * das Dashboard soll ja quasi alles auf einen Blick zeigen." Berechtigt: Die
   * Karte hieß „Echte Live-Daten" und enthielt drei Angaben, von denen zwei
   * erfunden waren.
   *
   *   1. „Auslastung: 0 % (Aktiv)" war NICHT die CPU-Last, sondern der
   *      Fortschritt des Jobs — bzw. eine feste 15/5, wenn keiner lief. Rippy
   *      misst nirgends CPU-Last, also wird sie auch nicht behauptet.
   *   2. Die Verlaufskurve daneben war `Math.random()`. Reine Dekoration, die
   *      wie eine Messung aussah.
   *   3. „N Worker Online" zählte die registrierten Einträge aus
   *      /system/info — auch Leichen alter Container-Rebuilds. Die echte
   *      Erreichbarkeit steht in /capabilities (Celery-Ping).
   *
   * Statt dessen stehen jetzt Angaben, die es wirklich gibt: laufende Phase mit
   * Restzeit, erreichbare Worker mit ihrer Rechenleistung, freier Platz.
   */
  const mainPlatz = systemInfo?.plaetze?.[0]
  const freiGb = mainPlatz ? mainPlatz.frei_gb : 0
  const gesamtGb = mainPlatz ? mainPlatz.gesamt_gb : 1
  const belegtPercent = Math.min(100, Math.max(0, Math.round(((gesamtGb - freiGb) / (gesamtGb || 1)) * 100)))
  const workerOnline = workersLive.filter(w => w.online)
  const encoderWorker = workerOnline.filter(w => (w.encoders || []).length > 0)
  const hardwareWorker = workerOnline.filter(w => (w.encoders || []).some(e => !e.startsWith('cpu')))
  /*
   * Phase im Klartext — „processing" heißt rippen, „transcoding" komprimieren.
   *
   * Die eingelegte Disc gehört mit hinein (Commander-Befund 26.07.2026): Vorher
   * stand hier stur „Bereit — keine Disc in Arbeit / Disc einlegen, Rippy erkennt
   * sie selbst", während oben auf DEMSELBEN Bildschirm „Akira im Laufwerk
   * erkannt" prangte. Zwei Aussagen, ein Blick, Widerspruch — und der Nutzer
   * weiß nicht, welcher er glauben soll.
   */
  const discImLaufwerk = laufwerke.find(l => l.disc?.title)
  // Nur die echten Netzwerk-Freigaben, nicht die normalen Unterordner von
  // /app/media (movies/series/music liegen auf der Container-Platte und sind
  // dort schon mitgezählt).
  const freigaben = ablagen.filter(a => a.is_mount)
  const phaseText = aktiverJob
    ? (aktiverJob.status === 'transcoding'
        ? 'Kompression läuft (HandBrake)'
        : 'Rip läuft (MakeMKV, verlustfrei)')
    : discImLaufwerk
      ? 'Disc erkannt — wartet auf „Rippen starten"'
      // Zwischen „Disc eingelegt" und „erkannt" liegen rund zwei Minuten
      // (makemkvcon info laeuft in seine 120-Sekunden-Grenze). Ohne diese
      // Zeile stand dort „kein Datentraeger", und das sah aus wie ein
      // Fehler (Commander 29.08.2026).
      : laufwerke.some(l => l.disc_wird_erkannt)
        ? 'Disc wird gelesen — das dauert bis zu zwei Minuten'
        : 'Bereit — kein Datenträger im Laufwerk'

  const filteredJobs = jobs.filter(j => {
    if (activeTab === 'active') return j.status === 'processing' || j.status === 'transcoding'
    if (activeTab === 'queue') return j.status === 'pending'
    if (activeTab === 'completed') return j.status === 'completed'
    if (activeTab === 'failed') return j.status === 'failed'
    return true
  })

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-amber-500"></div>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      
      {/* POS 1: LAUFWERKE (Device Discovery Slot ganz oben) */}
      <DeviceDiscovery />

      {/* POS 2: RIPPING OPERATIONS & MEDIEN-MANAGER (DIREKT UNTER LAUFWERKE!) */}
      <Card className="border border-amber-500/30 bg-[#0f1422] shadow-2xl overflow-hidden">
        <CardHeader className="border-b border-slate-800 flex flex-wrap items-center justify-between gap-4 py-4">
          <div className="flex items-center gap-3">
            <CardTitle className="text-amber-400 flex items-center gap-2 text-xl">
              <Layers size={22} className="text-amber-400" />
              Ripping Operations &amp; Medien-Manager
            </CardTitle>
            <span className="text-xs font-mono text-slate-400">({jobs.length} Jobs gesamt)</span>
          </div>

          <div className="flex items-center gap-3 flex-wrap">
            {/* Master Filter Tabs */}
            <div className="flex items-center p-1 rounded-xl bg-slate-900 border border-slate-800">
              <button
                onClick={() => setActiveTab('all')}
                className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all flex items-center gap-1.5 ${
                  activeTab === 'all'
                    ? 'bg-amber-500 text-slate-950 shadow-md font-bold'
                    : 'text-slate-400 hover:text-slate-200'
                }`}
              >
                <span>Alle ({jobs.length})</span>
              </button>

              <button
                onClick={() => setActiveTab('active')}
                className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all flex items-center gap-1.5 ${
                  activeTab === 'active'
                    ? 'bg-amber-500 text-slate-950 shadow-md font-bold'
                    : 'text-slate-400 hover:text-slate-200'
                }`}
              >
                {aktiverJob && <span className="w-2 h-2 rounded-full bg-amber-400 animate-ping" />}
                <span>Aktiv ({aktiverJob ? 1 : 0})</span>
              </button>

              <button
                onClick={() => setActiveTab('queue')}
                className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all flex items-center gap-1.5 ${
                  activeTab === 'queue'
                    ? 'bg-amber-500 text-slate-950 shadow-md font-bold'
                    : 'text-slate-400 hover:text-slate-200'
                }`}
              >
                <span>Warteschlange ({queueJobs.length})</span>
              </button>

              <button
                onClick={() => setActiveTab('completed')}
                className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all flex items-center gap-1.5 ${
                  activeTab === 'completed'
                    ? 'bg-amber-500 text-slate-950 shadow-md font-bold'
                    : 'text-slate-400 hover:text-slate-200'
                }`}
              >
                <span>Fertig ({completedJobs.length})</span>
              </button>

              {failedJobs.length > 0 && (
                <button
                  onClick={() => setActiveTab('failed')}
                  className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all flex items-center gap-1.5 ${
                    activeTab === 'failed'
                      ? 'bg-rose-500 text-white shadow-md font-bold'
                      : 'text-rose-400 hover:text-rose-200'
                  }`}
                >
                  <span>Fehler ({failedJobs.length})</span>
                </button>
              )}
            </div>

            {jobs.length > 0 && (
              <a
                href="/api/jobs/export"
                download
                title="Job-Historie als CSV herunterladen"
                className="inline-flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-xl border border-slate-700 bg-slate-800/80 text-slate-300 hover:bg-slate-700 transition-colors"
              >
                <FileSpreadsheet size={14} />
                CSV
              </a>
            )}

            {completedJobs.length > 0 && (
              <Button variant="secondary" size="sm" onClick={() => setAufraeumenOffen(true)}>
                <Trash2 size={13} /> Aufräumen
              </Button>
            )}
          </div>
        </CardHeader>

        <CardContent className="p-0">
          {/* Live Rip Banner inside Panel when a Job is active */}
          {aktiverJob && (activeTab === 'all' || activeTab === 'active') && (
            <div className="p-5 border-b border-amber-500/30 bg-gradient-to-r from-amber-500/15 via-slate-900 to-slate-950">
              <div className="flex flex-col sm:flex-row items-center justify-between gap-6">
                <div className="flex items-center gap-4">
                  {posterUrl(aktiverJob.meta) ? (
                    <img src={posterUrl(aktiverJob.meta)!} alt="" className="w-16 h-24 rounded-xl object-cover border border-amber-500/40 shadow-lg" />
                  ) : (
                    <div className="w-16 h-24 rounded-xl bg-slate-900 border border-slate-800 flex items-center justify-center">
                      <Disc size={32} className="text-amber-400 animate-disc-spin" />
                    </div>
                  )}

                  <div className="space-y-1">
                    <div className="flex items-center gap-2 flex-wrap">
                      <span className="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase bg-amber-500 text-slate-950">
                        AKTIVER RIP IN ARBEIT
                      </span>
                      <TypeBadge type={aktiverJob.type} />
                      <StatusBadge status={aktiverJob.status} />
                    </div>
                    <h3 className="text-xl font-bold text-slate-100">{aktiverJob.title || 'Unbekannter Titel'}</h3>
                    <p className="text-xs text-slate-400 font-mono">
                      Laufwerk: {aktiverJob.device} · {aktiverJob.status === 'transcoding' ? 'HandBrake H.265' : 'MakeMKV Lossless'}
                    </p>
                  </div>
                </div>

                <div className="flex items-center gap-4 w-full sm:w-auto justify-end">
                  <div className="w-40 space-y-1 text-right">
                    <div className="text-xs font-mono text-amber-400 font-bold">{aktiverJob.progress}%</div>
                    <div className="w-full h-2 rounded-full bg-slate-800 overflow-hidden">
                      <div className="h-full bg-amber-500 rounded-full transition-all duration-300" style={{ width: `${aktiverJob.progress}%` }} />
                    </div>
                    {/* Die Angabe, deren Fehlen den 50-Stunden-Lauf am 25.07.2026
                        unsichtbar machte. Ohne belastbare Messreihe steht hier
                        ehrlich, dass noch gemessen wird (siehe api/eta.py). */}
                    <div className="text-[11px] font-mono text-slate-300">
                      {aktiverJob.eta_text || 'Restzeit wird gemessen …'}
                    </div>
                  </div>
                  <Button variant="amber" size="sm" onClick={() => setDetailJobId(aktiverJob.id)}>
                    Details
                  </Button>
                  <Button variant="danger" size="sm" onClick={() => api.post(`/jobs/${aktiverJob.id}/cancel`).catch(() => {})}>
                    Abbrechen
                  </Button>
                </div>
              </div>
            </div>
          )}

          {/* Unified Jobs Table */}
          {filteredJobs.length === 0 ? (
            <div className="text-center py-16">
              <div className="mx-auto w-16 h-16 rounded-2xl flex items-center justify-center mb-3 bg-slate-900 text-slate-500 border border-slate-800">
                <Disc size={32} />
              </div>
              <p className="text-sm font-mono text-slate-400">Keine Jobs in diesem Tab vorhanden</p>
              <p className="text-xs text-slate-500 mt-1">Lege eine Disc ein, um einen Ripping-Prozess zu starten.</p>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full text-left border-collapse">
                <thead className="bg-slate-950/90 border-b border-slate-800 text-[11px] font-bold uppercase tracking-wider text-slate-400">
                  <tr>
                    <th className="px-6 py-3.5">Typ</th>
                    <th className="px-6 py-3.5">Titel &amp; Inhaltsangabe</th>
                    <th className="px-6 py-3.5">Status &amp; Phase</th>
                    <th className="px-6 py-3.5">Laufwerk</th>
                    <th className="px-6 py-3.5">Fortschritt</th>
                    <th className="px-6 py-3.5">Startzeit</th>
                    <th className="px-6 py-3.5 text-right">Aktionen</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-800/80 text-sm">
                  {filteredJobs.map(job => {
                    const poster = posterUrl(job.meta)
                    return (
                      <tr key={job.id} className="transition-colors hover:bg-slate-900/60">
                        <td className="px-6 py-4 whitespace-nowrap">
                          <TypeBadge type={job.type} />
                        </td>
                        <td className="px-6 py-4">
                          <div className="flex items-center gap-3">
                            {poster ? (
                              <img src={poster} alt="" className="w-10 h-14 rounded-lg object-cover flex-shrink-0 border border-slate-700/80 shadow-md" />
                            ) : (
                              <div className="w-10 h-14 rounded-lg bg-slate-900 border border-slate-800 flex items-center justify-center flex-shrink-0 text-slate-500">
                                <Film size={18} />
                              </div>
                            )}
                            <div className="min-w-0">
                              <button
                                onClick={() => setDetailJobId(job.id)}
                                className="font-bold text-slate-100 hover:text-amber-400 transition-colors text-left block line-clamp-1 text-base"
                              >
                                {job.title || 'Unbekannter Titel'}
                              </button>
                              {job.meta?.overview && (
                                <p className="text-xs text-slate-400 line-clamp-2 mt-0.5 leading-snug">
                                  {job.meta.overview}
                                </p>
                              )}
                            </div>
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <StatusBadge status={job.status} />
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-xs font-mono text-slate-400">
                          {job.device}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="w-32 space-y-1">
                            <div className="flex items-center justify-between text-xs font-mono text-slate-400">
                              <span>{job.progress}%</span>
                            </div>
                            <div className="w-full h-1.5 rounded-full bg-slate-800 overflow-hidden">
                              <div
                                className="h-full bg-amber-500 rounded-full transition-all duration-300"
                                style={{ width: `${job.progress}%` }}
                              />
                            </div>
                            {job.eta_text && (
                              <div className="text-[10px] font-mono text-slate-500">{job.eta_text}</div>
                            )}
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-xs font-mono text-slate-400">
                          {new Date(job.startTime).toLocaleString('de-DE')}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-right">
                          <div className="flex items-center justify-end gap-2">
                            <Button variant="ghost" size="sm" onClick={() => setDetailJobId(job.id)}>
                              Details
                            </Button>

                            {/*
                              Abbrechen DIREKT in der Zeile (Commander
                              29.08.2026: „man kann einen rip garnicht
                              abbrechen").

                              Es gab genau einen Abbrechen-Knopf, und der
                              steckte in der Kachel „laufender Job". Die
                              erschien nur bei Status `processing` — der
                              Ereignisstrom lieferte aber den rohen
                              DB-Status `running`. Also keine Kachel, also
                              kein Knopf, also kein Weg zurueck.
                              Die Ursache ist behoben; ein zweiter Weg zum
                              Abbrechen ist trotzdem richtig, denn genau
                              hier sucht man ihn.
                            */}
                            {['processing', 'transcoding', 'pending'].includes(job.status) && (
                              <Button
                                variant="danger"
                                size="sm"
                                onClick={() => api.post(`/jobs/${job.id}/cancel`)
                                  .then(() => toast('info', 'Abbruch angefordert — der Rip haelt beim naechsten Zwischenschritt an.'))
                                  .catch((e: any) => toast('error',
                                    e?.response?.data?.detail || 'Abbrechen ging nicht'))}
                              >
                                Abbrechen
                              </Button>
                            )}

                            {job.status === 'canceling' && (
                              <span className="text-xs font-mono text-slate-400">bricht ab …</span>
                            )}

                            {job.status === 'completed' && (
                              <Button variant="amber" size="sm" onClick={() => setDetailJobId(job.id)}>
                                <Download size={13} /> Download
                              </Button>
                            )}

                            {job.status === 'failed' && (
                              <Button
                                variant="secondary"
                                size="sm"
                                onClick={() => wiederholen(job)}
                                title="Fragt vorher, was genau wiederholt wird"
                              >
                                <RotateCcw size={13} />
                                {retryPlan(job) === 'transcode' ? 'Neu komprimieren'
                                  : retryPlan(job) === 'rip' ? 'Neu rippen'
                                  : 'Neu …'}
                              </Button>
                            )}

                            {(job.status === 'completed' || job.status === 'failed') && (
                              <button
                                onClick={() => loeschenVorbereiten(job)}
                                className="p-1.5 rounded-lg text-rose-500 hover:bg-rose-500/10 transition-colors"
                                title="Aus der Liste entfernen"
                              >
                                <Trash2 size={14} />
                              </button>
                            )}
                          </div>
                        </td>
                      </tr>
                    )
                  })}
                </tbody>
              </table>
            </div>
          )}
        </CardContent>
      </Card>

      {/* POS 3: SYSTEM STATUS & ZULETZT GERIPPT HIGHLIGHT LEISTE (UNTER DEM MASTER-PANEL) */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
        
        {/* Left: Server Status Card */}
        <div className="lg:col-span-7">
          <Card className="border border-slate-800 bg-[#0f1422] h-full flex flex-col justify-between">
            <CardHeader className="border-b border-slate-800">
              <CardTitle className="text-slate-200 flex items-center gap-2">
                <Server size={18} className="text-amber-400" />
                Server-Status
              </CardTitle>
            </CardHeader>
            <CardContent className="p-5 flex-1 flex flex-col justify-center">
              <div className="space-y-4 w-full">

                {/* 1. Was tut Rippy JETZT — mit Restzeit statt Phantasie-Last */}
                <div>
                  <div className="flex items-center justify-between text-xs font-mono mb-1 gap-2">
                    <span className="text-slate-400 flex items-center gap-1.5 flex-shrink-0">
                      <Activity size={14} className="text-amber-400" /> Gerade:
                    </span>
                    <span className={`text-right ${aktiverJob ? 'text-amber-400 font-bold' : 'text-slate-300'}`}>
                      {phaseText}
                    </span>
                  </div>
                  {aktiverJob ? (
                    <>
                      <div className="w-full h-2 rounded-full bg-slate-800 overflow-hidden">
                        <div
                          className="h-full bg-amber-500 rounded-full transition-all duration-500"
                          style={{ width: `${Math.max(2, aktiverJob.progress)}%` }}
                        />
                      </div>
                      <div className="flex items-center justify-between text-[11px] font-mono mt-1">
                        <span className="text-slate-300 truncate pr-2">
                          {aktiverJob.title || aktiverJob.id.slice(0, 8)} · {aktiverJob.progress} %
                        </span>
                        {/* Leer heißt: noch keine belastbare Schätzung. Dann wird
                            das auch so gesagt — nicht geraten (siehe eta.py). */}
                        <span className="text-amber-400 flex-shrink-0">
                          {aktiverJob.eta_text || 'Restzeit wird noch gemessen'}
                        </span>
                      </div>
                    </>
                  ) : (
                    <p className="text-[11px] font-mono text-slate-500">
                      {queueJobs.length > 0
                        ? `${queueJobs.length} Job(s) warten in der Schlange`
                        : discImLaufwerk
                          ? `${discImLaufwerk.disc!.title}`
                            + (discImLaufwerk.disc!.year ? ` (${discImLaufwerk.disc!.year})` : '')
                            + ' liegt bereit — oben auf „Rippen starten"'
                          : 'Disc einlegen — Rippy erkennt sie selbst'}
                    </p>
                  )}
                </div>

                {/* 2. Wer arbeitet hier — und das hängt am BETRIEB.
                       ⚠️ Commander-Befund 28.08.2026: Im Windows-Fenster stand
                       „Worker erreichbar: 0 von 1 — Kein Worker antwortet.
                       Prüfen: docker compose ps". Auf einem Windows-PC gibt es
                       keinen zweiten Worker, auf den man warten könnte, und
                       kein docker compose, das man prüfen könnte. Die Meldung
                       war nicht nur unpassend, sie war falsch. */}
                {!betrieb.kann.externe_worker ? (
                  <div>
                    <div className="flex items-center justify-between text-xs font-mono mb-1">
                      <span className="text-slate-400 flex items-center gap-1.5">
                        <Cpu size={14} className="text-amber-400" /> Rippy arbeitet:
                      </span>
                      <span className="text-slate-200">
                        auf diesem Rechner
                      </span>
                    </div>
                    <p className="text-[11px] font-mono text-slate-500">
                      {aktiverJob
                        ? 'Rippen und Komprimieren laufen hier — kein zweiter Rechner nötig.'
                        : 'Rippen und Komprimieren erledigt Rippy selbst.'}
                    </p>
                  </div>
                ) : (
                <div>
                  <div className="flex items-center justify-between text-xs font-mono mb-1">
                    <span className="text-slate-400 flex items-center gap-1.5">
                      <Cpu size={14} className="text-amber-400" /> Worker erreichbar:
                    </span>
                    <span className={workerOnline.length > 0 ? 'text-slate-200' : 'text-rose-400 font-bold'}>
                      {workerOnline.length} von {workersLive.length}
                      {hardwareWorker.length > 0 ? ' · Hardware-Encoder dabei' : ''}
                    </span>
                  </div>
                  {workerOnline.length === 0 ? (
                    <p className="text-[11px] font-mono text-rose-400">
                      Kein Worker antwortet — ohne ihn läuft kein Rip.
                      {betrieb.hilfe_befehl && (
                        <> Prüfen: <span className="text-slate-300">{betrieb.hilfe_befehl}</span></>
                      )}
                    </p>
                  ) : (
                    <div className="space-y-0.5">
                      {workerOnline.map(w => (
                        <p key={w.name} className="text-[11px] font-mono text-slate-400 truncate">
                          <span className="text-emerald-400">●</span> {w.name}
                          {w.info?.cpu_kerne ? ` · ${w.info.cpu_kerne} Kerne` : ''}
                          {w.info?.cpu_simd && w.info.cpu_simd !== 'unbekannt' ? ` · ${w.info.cpu_simd}` : ''}
                          {w.info?.extern === 'ja' ? ' · extern' : ''}
                          {(w.encoders || []).length === 0 ? ' · kann nicht komprimieren' : ''}
                        </p>
                      ))}
                      {encoderWorker.length === 0 && (
                        <p className="text-[11px] font-mono text-amber-400">
                          Keiner dieser Worker hat HandBrake — es wird nur gerippt, nicht komprimiert.
                        </p>
                      )}
                    </div>
                  )}
                </div>
                )}

                {/* 3. Platz — Container-Platte UND die eingehängten Freigaben.
                       Vorher stand hier nur die Container-Platte; wer wissen
                       wollte, ob die NAS noch Platz für eine Disc hat, sah die
                       falsche Zahl (Commander-Befund 26.07.2026). */}
                <div>
                  {/*
                    Jeder Ort mit seinem PFAD (Commander 29.08.2026): „bei
                    ‚Platz für rippy' sollte eher das arbeitsverzeichnis und
                    der Ablagepfad sein." Vorher stand hier eine nackte Zahl
                    für den ERSTEN Ort — welcher Ordner das war, sah man nicht.
                  */}
                  {!betrieb.kann.container_pfade && (systemInfo?.plaetze || []).map(ort => (
                    <div key={ort.name + ort.pfad} className="mb-1.5">
                      <div className="flex items-center justify-between text-xs font-mono">
                        <span className="text-slate-400 flex items-center gap-1.5">
                          <HardDrive size={14} className="text-amber-400" />
                          {ort.name}:
                        </span>
                        <span className={ort.frei_gb > 0 && ort.frei_gb < 60
                          ? 'text-amber-400 font-bold' : 'text-slate-200'}>
                          {ort.frei_gb > 0 ? `${ort.frei_gb} von ${ort.gesamt_gb} GB frei` : 'unbekannt'}
                        </span>
                      </div>
                      {ort.pfad && (
                        <p className="text-[11px] font-mono text-slate-500 truncate" title={ort.pfad}>
                          {ort.pfad}
                        </p>
                      )}
                    </div>
                  ))}
                  {!betrieb.kann.container_pfade
                    && (systemInfo?.plaetze || []).length > 1
                    && systemInfo?.plaetze?.every(o => o.gleiches_laufwerk) && (
                    /* Ehrlich sagen, dass die Zahl zweimal dieselbe ist —
                       statt die zweite Zeile wegzulassen. */
                    <p className="text-[11px] font-mono text-slate-500 mb-1">
                      Beide auf demselben Laufwerk — der Platz wird geteilt.
                    </p>
                  )}
                  <div className={`flex items-center justify-between text-xs font-mono mb-1 ${
                    betrieb.kann.container_pfade ? '' : 'hidden'}`}>
                    <span className="text-slate-400 flex items-center gap-1.5">
                      <HardDrive size={14} className="text-amber-400" />
                      Container-Platte:
                    </span>
                    <span className={freiGb > 0 && freiGb < 60 ? 'text-amber-400 font-bold' : 'text-slate-200'}>
                      {freiGb > 0 ? `${freiGb} von ${gesamtGb} GB frei` : 'unbekannt'}
                    </span>
                  </div>
                  <div className="w-full h-2 rounded-full bg-slate-800 overflow-hidden">
                    <div
                      className={`h-full rounded-full transition-all duration-500 ${
                        belegtPercent > 90 ? 'bg-rose-500' : 'bg-amber-500/80'
                      }`}
                      style={{ width: `${Math.max(2, belegtPercent)}%` }}
                    />
                  </div>
                  {freiGb > 0 && freiGb < 60 && freigaben.length === 0 && (
                    <p className="text-[11px] font-mono text-amber-400 mt-1">
                      Eine Blu-ray braucht roh ~40 GB, eine 4K-UHD bis 100 GB —
                      das reicht nicht mehr für jede Disc.
                    </p>
                  )}
                </div>

                {/* Die eingehängten Freigaben. Sie sind der Ort, an dem die
                    Rohdaten liegen und — bei externem Encoden — liegen MÜSSEN.

                    ⚠️ NUR im Container. Unter Windows hängt Rippy nichts ein:
                    Dort gibt man einen Ordner oder einen UNC-Pfad an, fertig.
                    Der Satz „Ohne Freigabe kann ein externer Encoder nichts
                    tun — er sieht die Container-Platte nicht" stand am
                    28.08.2026 im Windows-Fenster und ergab dort keinen Sinn:
                    Es gibt weder einen externen Encoder noch eine
                    Container-Platte. */}
                {betrieb.kann.freigaben_einhaengen && (
                <div>
                  <div className="flex items-center justify-between text-xs font-mono mb-1">
                    <span className="text-slate-400 flex items-center gap-1.5">
                      <Server size={14} className="text-amber-400" /> Freigaben:
                    </span>
                    <span className={freigaben.length > 0 ? 'text-slate-200' : 'text-slate-400'}>
                      {freigaben.length > 0
                        ? `${freigaben.length} eingehängt`
                        : 'keine eingehängt'}
                    </span>
                  </div>
                  {freigaben.length === 0 ? (
                    <p className="text-[11px] font-mono text-slate-500">
                      Ohne Freigabe kann ein externer Encoder nichts tun — er sieht die
                      Container-Platte nicht. Einhängen: Einstellungen → Speicherziele.
                    </p>
                  ) : (
                    <div className="space-y-0.5">
                      {freigaben.map(f => (
                        <p key={f.path} className="text-[11px] font-mono text-slate-400 flex items-center justify-between gap-2">
                          <span className="truncate">
                            <span className="text-emerald-400">●</span> {f.name}
                          </span>
                          <span className={f.free_gb != null && f.free_gb < 60
                            ? 'text-amber-400 flex-shrink-0'
                            : 'text-slate-300 flex-shrink-0'}>
                            {f.free_gb != null ? `${f.free_gb} GB frei` : 'Platz unbekannt'}
                          </span>
                        </p>
                      ))}
                    </div>
                  )}
                </div>
                )}
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Right: Recently Ripped Posters */}
        <div className="lg:col-span-5">
          <Card className="border border-slate-800 bg-[#0f1422] h-full flex flex-col justify-between">
            <CardHeader className="border-b border-slate-800 flex items-center justify-between">
              <CardTitle className="text-slate-200">Zuletzt gerippt ({completedJobs.length})</CardTitle>
              {completedJobs.length > 0 && (
                <Button variant="ghost" size="sm" onClick={() => setAufraeumenOffen(true)}>
                  <Trash2 size={13} /> Aufräumen
                </Button>
              )}
            </CardHeader>
            <CardContent className="p-4 flex-1 flex flex-col justify-center">
              {completedJobs.length === 0 ? (
                <div className="text-center py-6 text-slate-500 text-xs font-mono">
                  Noch keine gerippten Medien in der Datenbank
                </div>
              ) : (
                <div className="grid grid-cols-3 gap-3">
                  {completedJobs.slice(0, 3).map((item) => {
                    const poster = posterUrl(item.meta)
                    return (
                      <div key={item.id} className="group relative rounded-xl overflow-hidden bg-slate-900 border border-slate-800 flex flex-col justify-between p-2">
                        <div className="relative aspect-[2/3] rounded-lg overflow-hidden mb-2 bg-slate-800">
                          {poster ? (
                            <img src={poster} alt={item.title || ''} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
                          ) : (
                            <div className="w-full h-full flex flex-col items-center justify-center text-slate-500 p-2 text-center">
                              <Film size={24} className="text-amber-400 mb-1" />
                              <span className="text-[9px] uppercase font-bold text-slate-400">{item.type}</span>
                            </div>
                          )}
                        </div>

                        <div className="space-y-1 text-left">
                          <h4 className="text-xs font-bold text-slate-100 truncate" title={item.title}>{item.title || 'Unbekannt'}</h4>
                          <p className="text-[10px] text-slate-400 font-mono">{new Date(item.startTime).toLocaleDateString('de-DE')}</p>
                          <Button
                            variant="amber"
                            size="sm"
                            className="w-full text-[10px] py-1 h-auto"
                            onClick={() => setDetailJobId(item.id)}
                          >
                            Details
                          </Button>
                        </div>
                      </div>
                    )
                  })}
                </div>
              )}
            </CardContent>
          </Card>
        </div>

      </div>

      {/* POS 4: Live-Log Section */}
      <LiveLogSection />

      <JobDetailModal jobId={detailJobId} onClose={() => setDetailJobId(null)} />

      <ConfirmDialog
        isOpen={aufraeumenOffen}
        onClose={() => setAufraeumenOffen(false)}
        onConfirm={erledigteAufraeumen}
        title="Job-Liste aufräumen?"
        message="Alle fertigen und fehlgeschlagenen Jobs verschwinden aus der Liste. Die gerippten Dateien bleiben selbstverständlich liegen."
        confirmText="Aufräumen"
        type="warning"
      />

      {/* „Neu" nennt jetzt beim Namen, was es tut (siehe wiederholen()). */}
      <RetryDialog
        offen={neuKandidat !== null}
        titel={neuKandidat?.title || neuKandidat?.id.slice(0, 8) || ''}
        plan={neuKandidat ? retryPlan(neuKandidat) : 'unklar'}
        rohdaten={neuRohdaten}
        onClose={() => setNeuKandidat(null)}
        onStart={neuStarten}
      />

      {/* Entfernen eines EINZELNEN Jobs — mit der Zahl, die vorher fehlte. */}
      <ConfirmDialog
        isOpen={loeschKandidat !== null}
        onClose={() => setLoeschKandidat(null)}
        onConfirm={jobLoeschen}
        title={`„${loeschKandidat?.title || loeschKandidat?.id.slice(0, 8) || ''}" entfernen?`}
        message="Der Eintrag verschwindet aus der Liste. Die fertig abgelegten Dateien bleiben, wo sie sind."
        confirmText={rohdatenMitloeschen ? 'Entfernen und löschen' : 'Entfernen'}
        type="warning"
        extra={rohdaten && rohdaten.gb > 0 ? (
          <div className="mt-3 text-xs p-3 rounded-lg bg-amber-500/10 border border-amber-500/30 text-amber-700 dark:text-amber-300 space-y-2">
            <p>
              <strong>Daneben liegen {rohdaten.gb} GB Rohdaten</strong>
              {rohdaten.dateien > 0 ? ` (${rohdaten.dateien} Datei${rohdaten.dateien === 1 ? '' : 'en'})` : ''}.
              Ohne den Eintrag zeigt nichts mehr darauf — sie sind dann über Rippy
              nicht mehr erreichbar und „Neu komprimieren" ist unmöglich.
            </p>
            {rohdaten.pfade.map(p => (
              <p key={p} className="font-mono break-all opacity-80">{p}</p>
            ))}
            <label className="flex items-start gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={rohdatenMitloeschen}
                onChange={e => setRohdatenMitloeschen(e.target.checked)}
                className="w-4 h-4 mt-0.5 accent-rose-500 rounded"
              />
              <span>Rohdaten jetzt mitlöschen und {rohdaten.gb} GB freigeben</span>
            </label>
          </div>
        ) : null}
      />
    </div>
  )
}