nsfwapp/frontend/src/components/ui/TaskList.tsx

// frontend\src\components\ui\TaskList.tsx

'use client'

export type TaskItem = {
  id: string
  status: 'idle' | 'queued' | 'running' | 'done' | 'error' | 'cancelled'
  title: string
  text?: string
  done?: number
  total?: number
  err?: string
  cancellable?: boolean
  fading?: boolean
  queuedAtMs?: number
  startedAtMs?: number
}

type Props = {
  tasks: TaskItem[]
  onCancel?: (id: string) => void
}

function pct(done?: number, total?: number) {
  const d = Number(done ?? 0)
  const t = Number(total ?? 0)
  if (!t || t <= 0) return 0
  return Math.max(0, Math.min(100, Math.round((d / t) * 100)))
}

export default function TaskList({ tasks, onCancel }: Props) {
  const visible = [...(tasks || [])]
    .filter((t) => t.status !== 'idle')
    .sort((a, b) => {
      const aMs = Number(a.queuedAtMs ?? a.startedAtMs ?? 0)
      const bMs = Number(b.queuedAtMs ?? b.startedAtMs ?? 0)
      return aMs - bMs
    })

  return (
    <div className="rounded-2xl border border-gray-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-gray-950/40">
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <div className="text-sm font-semibold text-gray-900 dark:text-white">Hintergrundaufgaben</div>
          <div className="mt-1 text-xs text-gray-600 dark:text-gray-300">
            Laufende Hintergrundaufgaben (z.B. Assets/Previews).
          </div>
        </div>
      </div>

      <div className="mt-3 space-y-3">
        {visible.length === 0 ? (
          <div className="rounded-xl border border-gray-200 bg-white px-3 py-2 text-sm text-gray-600 dark:border-white/10 dark:bg-white/5 dark:text-gray-300">
            Keine laufenden Aufgaben.
          </div>
        ) : null}

        {visible.map((t) => {
          const p = pct(t.done, t.total)
          const isRunning = t.status === 'running'
          const hasProgress = isRunning && (t.total ?? 0) > 0
          const title = (t.title ?? '').trim()
          const suffix = (t.text ?? '').trim()
          const isQueued = t.status === 'queued'
          const canCancel = (isRunning || isQueued) && t.cancellable && onCancel

          return (
            <div
              key={t.id}
              className={
                'rounded-xl border border-gray-200 bg-white px-2 py-2 dark:border-white/10 dark:bg-white/5 ' +
                'transition-opacity duration-500 ' +
                (t.fading ? 'opacity-0' : 'opacity-100')
              }
            >
              <div className="flex items-stretch gap-1 sm:min-h-[24px] sm:items-center">
                {/* Left action / icon column */}
                <div className="shrink-0 self-stretch flex">
                  {canCancel ? (
                    <button
                      type="button"
                      onClick={() => onCancel?.(t.id)}
                      className="
                        inline-flex w-9 items-center justify-center self-stretch rounded-lg
                        text-red-700 hover:bg-red-50 hover:text-red-900
                        dark:text-red-300 dark:hover:bg-red-500/10 dark:hover:text-red-200
                      "
                      title="Abbrechen"
                      aria-label="Task abbrechen"
                    >
                      ✕
                    </button>
                  ) : t.status === 'done' ? (
                    <span
                      className="inline-flex w-9 items-center justify-center self-stretch rounded-lg text-green-700 dark:text-green-300"
                      title="Fertig"
                      aria-label="Fertig"
                    >
                      ✓
                    </span>
                  ) : (
                    <span className="inline-flex w-9 self-stretch" />
                  )}
                </div>

                {/* Right content */}
                <div className="min-w-0 flex-1 flex flex-col justify-center">
                  <div className="flex items-start gap-2 sm:items-center">
                    <div className="min-w-0 flex-1">
                      {/* Mobile: Title oben */}
                      <div className="sm:hidden truncate text-sm font-semibold text-gray-900 dark:text-white">
                        {title || 'Aufgabe'}
                      </div>

                      {/* Desktop: Title + suffix in einer Zeile */}
                      <div className="hidden sm:block min-w-0 truncate text-sm text-gray-900 dark:text-white">
                        <span className="font-semibold">{title || 'Aufgabe'}</span>
                        {suffix ? (
                          <span className="ml-1 font-normal text-gray-600 dark:text-gray-300">
                            · {suffix}
                          </span>
                        ) : null}
                      </div>
                    </div>

                    {t.status === 'queued' ? (
                      <span className="shrink-0 inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-semibold text-amber-800 ring-1 ring-inset ring-amber-200 dark:bg-amber-500/20 dark:text-amber-200 dark:ring-amber-400/30">
                        Wartet
                      </span>
                    ) : t.status === 'done' ? (
                      <span className="shrink-0 inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-[11px] font-semibold text-green-800 ring-1 ring-inset ring-green-200 dark:bg-green-500/20 dark:text-green-200 dark:ring-green-400/30">
                        Fertig
                      </span>
                    ) : t.status === 'cancelled' ? (
                      <span className="shrink-0 inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-[11px] font-semibold text-gray-700 ring-1 ring-inset ring-gray-200 dark:bg-white/10 dark:text-gray-200 dark:ring-white/10">
                        Abgebrochen
                      </span>
                    ) : t.status === 'error' ? (
                      <span className="shrink-0 inline-flex items-center rounded-full bg-red-100 px-2 py-0.5 text-[11px] font-semibold text-red-800 ring-1 ring-inset ring-red-200 dark:bg-red-500/20 dark:text-red-200 dark:ring-red-400/30">
                        Fehler
                      </span>
                    ) : null}

                    {hasProgress ? (
                      <div className="shrink-0 flex items-center gap-3 text-xs text-gray-600 dark:text-gray-300">
                        <span className="tabular-nums">{t.done ?? 0}/{t.total ?? 0}</span>
                        <span className="tabular-nums">{p}%</span>

                        <div className="hidden sm:block h-2 w-40 overflow-hidden rounded-full bg-gray-200 dark:bg-white/10">
                          <div className="h-full bg-indigo-500" style={{ width: `${p}%` }} />
                        </div>
                      </div>
                    ) : null}
                  </div>

                  {/* Mobile: suffix unter dem Title */}
                  {suffix ? (
                    <div
                      className="mt-0.5 min-w-0 truncate text-xs text-gray-600 dark:text-gray-300 sm:hidden"
                      title={suffix}
                    >
                      {suffix}
                    </div>
                  ) : null}

                  {t.status === 'error' && t.err ? (
                    <div className="mt-2 text-xs text-red-700 dark:text-red-200">
                      {t.err}
                    </div>
                  ) : null}
                </div>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}