import { useJobAbbrechen, useJobs } from "@/lib/abfragen"
import { jobTitel, sichtbareJobs } from "@/lib/anzeige"
import { JobKarte } from "./JobKarte"
import { Panel } from "./Panel"

/**
 * Laufende und zuletzt beendete Aufträge — egal, woher sie kommen (Update, Modell-Download, Suche
 * nach Neuem). Solange nichts läuft und nichts frisch beendet ist, zeigt sie gar nichts.
 */
export function Auftraege({ alsPanel = false }: { alsPanel?: boolean }) {
  const jobs = useJobs()
  const abbrechen = useJobAbbrechen()
  const liste = sichtbareJobs(jobs.data?.jobs ?? [])

  let inhalt
  if (liste.length > 0) {
    inhalt = (
      <div className="flex flex-col gap-2.5">
        {liste.map((j) => (
          <JobKarte
            key={j.id}
            job={j}
            abbrechenGesperrt={abbrechen.isPending}
            onAbbrechen={(job) => abbrechen.mutate({ id: job.id, titel: jobTitel(job) })}
          />
        ))}
      </div>
    )
  } else if (jobs.isError && !jobs.data) {
    inhalt = <p role="alert" className="text-sm text-rot-text">Die Aufträge lassen sich gerade nicht lesen: {jobs.error.message}</p>
  } else {
    return null
  }

  if (alsPanel) return <Panel titel="Aufträge">{inhalt}</Panel>
  return (
    <section aria-label="Aufträge" className="flex flex-col gap-2.5">
      <h3 className="schild m-0 text-sm text-text-3">Aufträge</h3>
      {inhalt}
    </section>
  )
}