muse/web/components/job-sheet.tsx

"use client";

import * as React from "react";
import { CheckCircle2, CircleSlash, Loader2, XCircle } from "lucide-react";
import type { Job } from "@/lib/api";
import { api } from "@/lib/api";
import { Sheet } from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
import { useToast } from "@/components/toast";

/**
 * Why a request is where it is.
 *
 * Previously a failure was a red word in a list plus a three-second toast, and
 * the reason was raw text — "transfer Completed, Errored" — joined with a dot
 * after the album name in 13px dim type. Since the backend now walks a ladder
 * of candidates instead of giving up on the first peer, there is an actual
 * story to tell: who was tried, what each one said, and what is left.
 */
export function JobSheet({
  job,
  onClose,
  onChanged,
}: {
  job: Job | null;
  onClose: () => void;
  onChanged: () => void;
}) {
  const toast = useToast();
  const [busy, setBusy] = React.useState(false);

  const retry = async () => {
    if (!job) return;
    setBusy(true);
    try {
      await api.retry(job.id);
      toast("Requeued");
      onChanged();
      onClose();
    } catch (e) {
      toast((e as Error).message, true);
    }
    setBusy(false);
  };

  const conf = job?.confidence;

  return (
    <Sheet
      open={!!job}
      onOpenChange={(v) => !v && onClose()}
      title={job ? job.title : ""}
      description={job ? [job.artist, job.album].filter(Boolean).join(" · ") : undefined}
      footer={
        job?.state === "failed" ? (
          <Button onClick={retry} disabled={busy}>
            {busy ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : null} Try again
          </Button>
        ) : null
      }
    >
      {job && (
        <div className="flex flex-col gap-5">
          <div className="flex items-center gap-2">
            <StatePill state={job.state} />
            {job.attempts > 0 && (
              <span className="text-caption text-mute nums">
                {job.attempts} peer{job.attempts === 1 ? "" : "s"} tried
                {job.state !== "failed" && job.remaining > 0
                  ? ` · ${job.remaining} left to try`
                  : ""}
              </span>
            )}
          </div>

          {job.detail && (
            <p className="text-callout text-dim">{job.detail}</p>
          )}

          {conf != null && (
            <section>
              <div className="mb-1.5 flex items-baseline justify-between">
                <h3 className="text-callout font-medium">Match confidence</h3>
                <span className="text-callout text-dim nums">{Math.round(conf * 100)}%</span>
              </div>
              <Progress
                value={conf * 100}
                tone={conf >= 0.95 ? "ok" : conf >= 0.7 ? "warn" : "err"}
              />
              {job.match_why && (
                <p className="mt-1.5 text-caption text-mute">{job.match_why}</p>
              )}
            </section>
          )}

          {job.remote_file && (
            <section>
              <h3 className="mb-1.5 text-callout font-medium">File</h3>
              <p className="break-all rounded-control bg-[var(--surface-2)] p-2.5 font-mono text-caption text-dim">
                {job.remote_file.replace(/\\/g, "/")}
              </p>
            </section>
          )}

          {job.tried.length > 0 && (
            <section>
              <h3 className="mb-2 text-callout font-medium">
                Peers tried
              </h3>
              <ol className="flex flex-col gap-1.5">
                {job.tried.map((t, i) => (
                  <li
                    key={`${t.username}-${i}`}
                    className="flex items-start gap-2 rounded-control border border-edge
                               bg-[var(--surface-2)] px-2.5 py-2"
                  >
                    <CircleSlash className="mt-0.5 h-3.5 w-3.5 shrink-0 text-err" />
                    <div className="min-w-0">
                      <div className="text-callout font-medium">{t.username}</div>
                      <div className="text-caption text-dim">{t.reason}</div>
                    </div>
                  </li>
                ))}
                {job.state === "downloading" && job.username && (
                  <li
                    className="flex items-start gap-2 rounded-control border border-accent-line
                               bg-accent-soft px-2.5 py-2"
                  >
                    <Loader2 className="mt-0.5 h-3.5 w-3.5 shrink-0 animate-spin text-accent" />
                    <div className="min-w-0">
                      <div className="text-callout font-medium">{job.username}</div>
                      <div className="text-caption text-dim">downloading now</div>
                    </div>
                  </li>
                )}
              </ol>
            </section>
          )}
        </div>
      )}
    </Sheet>
  );
}

function StatePill({ state }: { state: Job["state"] }) {
  const map = {
    imported: { tone: "ok", icon: CheckCircle2, label: "In your library" },
    failed: { tone: "err", icon: XCircle, label: "Failed" },
    review: { tone: "accent", icon: CheckCircle2, label: "Waiting on you" },
    downloading: { tone: "warn", icon: Loader2, label: "Downloading" },
    searching: { tone: "warn", icon: Loader2, label: "Searching Soulseek" },
    queued: { tone: "neutral", icon: Loader2, label: "Queued" },
  } as const;
  const m = map[state];
  const Icon = m.icon;
  return (
    <Badge tone={m.tone}>
      <Icon className={`h-3 w-3 ${state === "imported" || state === "failed" ? "" : "animate-spin"}`} />
      {m.label}
    </Badge>
  );
}