muse/web/components/review.tsx

"use client";

import * as React from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Check, FileAudio, ShieldQuestion, X } from "lucide-react";

import { api, bytes, type ReviewItem } from "@/lib/api";
import { useToast } from "@/components/toast";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";

/**
 * Downloads that finished but did not clearly match what was asked for.
 *
 * The file is already on disk — confidence gates the *import*, not the
 * transfer — so approving is instant and rejecting is a delete. Holding the
 * download instead would mean the peer has usually vanished by the time
 * anyone looks.
 */
export function Review({ onDecided }: { onDecided: () => void }) {
  const [items, setItems] = React.useState<ReviewItem[] | null>(null);
  const [err, setErr] = React.useState<string | null>(null);

  const load = React.useCallback(() => {
    api
      .review()
      .then((r) => setItems(r.items))
      .catch((e) => setErr((e as Error).message));
  }, []);

  React.useEffect(() => {
    load();
    const t = setInterval(load, 8000);
    return () => clearInterval(t);
  }, [load]);

  if (err) return <div className="py-12 text-center text-dim">{err}</div>;
  if (!items) return <div className="flex flex-col gap-3">{[0,1,2].map((i)=>(<Skeleton key={i} className="h-[196px] rounded-panel" />))}</div>;

  if (items.length === 0)
    return (
      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        className="px-5 py-16 text-center"
      >
        <div
          className="mx-auto mb-4 grid h-14 w-14 place-items-center rounded-[18px]
                     border border-edge bg-[var(--surface)] text-dim"
        >
          <Check className="h-6 w-6" />
        </div>
        <h2 className="text-title">Nothing to review</h2>
        <p className="mx-auto mt-1.5 max-w-[44ch] text-callout text-dim">
          Anything muse wasn&rsquo;t confident about lands here before it reaches your
          library. An empty list means every match was unambiguous.
        </p>
      </motion.div>
    );

  return (
    <div className="flex flex-col gap-3">
      <motion.p
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        className="text-callout text-dim"
      >
        {items.length} download{items.length === 1 ? "" : "s"} finished but didn&rsquo;t
        clearly match the request. Each file is already on disk — approving files it
        into your library, rejecting deletes it.
      </motion.p>

      <AnimatePresence initial={false} mode="popLayout">
        {items.map((it) => (
          <ReviewCard key={it.id} item={it} refresh={load} onDecided={onDecided} />
        ))}
      </AnimatePresence>
    </div>
  );
}

function ReviewCard({
  item,
  refresh,
  onDecided,
}: {
  item: ReviewItem;
  refresh: () => void;
  onDecided: () => void;
}) {
  const toast = useToast();
  const [busy, setBusy] = React.useState(false);

  const decide = async (action: "approve" | "reject") => {
    setBusy(true);
    try {
      await api.decide(item.id, action);
      toast(action === "approve" ? `Filed ${item.title}` : `Deleted ${item.file}`);
      refresh();
      onDecided();
    } catch (e) {
      toast((e as Error).message, true);
      setBusy(false);
    }
  };

  const pct = Math.round((item.confidence ?? 0) * 100);
  const reasons = (item.why ?? "").split(";").map((s) => s.trim()).filter(Boolean);

  return (
    <motion.div
      layout
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, scale: 0.97, transition: { duration: 0.18 } }}
      transition={{ type: "spring", stiffness: 340, damping: 30 }}
      className="card rounded-panel p-4 sm:p-5"
    >
      <div className="flex gap-4">
        {item.cover ? (
          /* eslint-disable-next-line @next/next/no-img-element */
          <img
            src={item.cover}
            alt=""
            className="h-16 w-16 shrink-0 rounded-card border border-edge object-cover"
          />
        ) : (
          <div
            className="grid h-16 w-16 shrink-0 place-items-center rounded-card
                       border border-edge bg-faint text-dim"
          >
            <FileAudio className="h-6 w-6" />
          </div>
        )}

        <div className="min-w-0 flex-1">
          <div className="text-headline clamp1">{item.title}</div>
          <div className="text-callout text-dim clamp1">
            {item.artist}
            {item.album ? ` · ${item.album}` : ""}
            {item.year ? ` · ${item.year}` : ""}
          </div>
          <ConfidenceBar pct={pct} />
        </div>
      </div>

      <div className="mt-3.5 rounded-card border border-edge bg-[var(--surface)] p-3">
        <div className="mb-1.5 flex items-center gap-1.5 text-caption uppercase tracking-[0.7px] text-dim">
          <ShieldQuestion className="h-3 w-3" /> what was found
        </div>
        <div className="break-all font-mono text-[12px] text-ink">{item.file}</div>
        {item.size ? (
          <div className="mt-1 text-caption text-dim nums">{bytes(item.size)}</div>
        ) : null}

        {reasons.length > 0 && (
          <ul className="mt-2.5 flex flex-wrap gap-1.5">
            {reasons.map((r) => (
              <li
                key={r}
                className={cn(
                  "rounded-pill border px-2 py-0.5 text-caption",
                  /not |differs|looks like/.test(r)
                    ? "border-warn/40 text-warn"
                    : "border-edge text-dim",
                )}
              >
                {r}
              </li>
            ))}
          </ul>
        )}
      </div>

      <div className="mt-3.5 flex flex-wrap items-center gap-2">
        <Button onClick={() => decide("approve")} disabled={busy}>
          <Check className="h-3.5 w-3.5" /> Add to library
        </Button>
        <Button
          variant="quiet"
          className="border-err/45 text-err"
          onClick={() => decide("reject")}
          disabled={busy}
        >
          <X className="h-3.5 w-3.5" /> Delete
        </Button>
        {item.requested_by && (
          <span className="ml-auto text-caption text-dim">
            requested by {item.requested_by}
          </span>
        )}
      </div>
    </motion.div>
  );
}

/** Confidence as a bar rather than a bare number: the useful question is
 *  "how far below certain is this", which a percentage alone doesn't show. */
function ConfidenceBar({ pct }: { pct: number }) {
  const tone = pct >= 85 ? "bg-warn" : pct >= 70 ? "bg-warn" : "bg-err";
  return (
    <div className="mt-2 flex items-center gap-2.5">
      <div className="h-1.5 max-w-[220px] flex-1 overflow-hidden rounded-pill bg-faint">
        <motion.i
          className={cn("block h-full rounded-pill", tone)}
          initial={{ width: 0 }}
          animate={{ width: `${pct}%` }}
          transition={{ duration: 0.5, ease: "easeOut" }}
        />
      </div>
      <span className="text-caption text-dim nums">{pct}% confident</span>
    </div>
  );
}