"use client";

import * as React from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Inbox, ChevronRight } from "lucide-react";
import { type Job } from "@/lib/api";
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
import { EmptyState } from "@/components/ui/empty-state";
import { JobSheet } from "@/components/job-sheet";
import { useMotionOK, spring } from "@/lib/motion";
import { cn } from "@/lib/utils";

export type JobsSnapshot = {
  jobs: Job[];
  counts: Record<string, number>;
  pending: number;
};

/**
 * `queued`, `searching` and `downloading` used to be the same amber pill and
 * differed only by the word inside, so the three stages of a request looked
 * identical at a glance. They are distinct stages with distinct waits, so they
 * now read as distinct.
 */
const STATE: Record<Job["state"], { tone: "neutral" | "accent" | "ok" | "warn" | "err"; label: string; live?: boolean }> = {
  queued: { tone: "neutral", label: "Queued" },
  searching: { tone: "accent", label: "Searching", live: true },
  downloading: { tone: "warn", label: "Downloading", live: true },
  review: { tone: "accent", label: "Needs review" },
  imported: { tone: "ok", label: "In library" },
  failed: { tone: "err", label: "Failed" },
};

export function Requests({ snap, refresh }: { snap: JobsSnapshot | null; refresh: () => void }) {
  const ok = useMotionOK();
  const [open, setOpen] = React.useState<string | null>(null);
  if (!snap) return null;

  const { jobs, counts } = snap;
  const active = (counts.queued ?? 0) + (counts.searching ?? 0) + (counts.downloading ?? 0);
  const done = counts.imported ?? 0;
  const failed = counts.failed ?? 0;
  const held = counts.review ?? 0;
  const total = active + done;

  const stats: [string, number, string][] = [
    ["In flight", active, "text-accent"],
    ["In library", done, "text-ok"],
    ["Needs review", held, held > 0 ? "text-warn" : "text-dim"],
    ["Failed", failed, failed > 0 ? "text-err" : "text-dim"],
  ];

  // Kept in sync with the poll so the sheet updates live while it is open.
  const current = jobs.find((j) => j.id === open) ?? null;

  return (
    <>
      <div className="mb-4 grid grid-cols-2 gap-2.5 sm:grid-cols-4">
        {stats.map(([label, n, colour]) => (
          <Card key={label} pad="sm">
            <b className={cn("block text-title leading-none nums", colour)}>{n}</b>
            <span className="mt-1 block text-caption uppercase tracking-[0.06em] text-mute">
              {label}
            </span>
          </Card>
        ))}
      </div>

      {active > 0 && total > 0 && (
        <Progress
          value={(done / total) * 100}
          className="mb-4"
          label="Requests completed"
        />
      )}

      {jobs.length === 0 ? (
        <EmptyState
          icon={Inbox}
          title="Nothing requested yet"
          body="Search for a song and press Get. Anything you ask for shows up here with its progress."
        />
      ) : (
        <div className="flex flex-col gap-row">
          <AnimatePresence initial={false}>
            {jobs.map((j) => {
              const s = STATE[j.state] ?? STATE.queued;
              return (
                <motion.button
                  key={j.id}
                  layout={ok}
                  initial={ok ? { opacity: 0, y: 10 } : false}
                  animate={{ opacity: 1, y: 0 }}
                  exit={ok ? { opacity: 0, scale: 0.97 } : { opacity: 0 }}
                  transition={spring}
                  onClick={() => setOpen(j.id)}
                  aria-label={`${j.title} by ${j.artist} — ${s.label}. Show details`}
                  className="card focus-ring flex items-center gap-3 rounded-card py-2.5 pl-2.5 pr-2
                             text-left transition-colors hover:bg-[var(--surface-2)]"
                >
                  <div className="h-[48px] w-[48px] shrink-0 overflow-hidden rounded-control bg-[var(--surface-3)]">
                    {j.cover && (
                      /* eslint-disable-next-line @next/next/no-img-element */
                      <img
                        src={j.cover}
                        alt=""
                        loading="lazy"
                        className="h-full w-full object-cover"
                        onError={(e) => (e.currentTarget.style.visibility = "hidden")}
                      />
                    )}
                  </div>

                  <div className="min-w-0 flex-1">
                    <div className="text-body font-semibold clamp1">{j.title}</div>
                    <div className="mt-px text-callout text-dim clamp1">
                      {[j.artist, j.album].filter(Boolean).join(" · ")}
                    </div>
                    {j.detail && j.state === "failed" && (
                      <div className="mt-0.5 text-caption text-err clamp1">{j.detail}</div>
                    )}
                  </div>

                  <Badge tone={s.tone} className="shrink-0">
                    {s.live && (
                      <motion.span
                        className="h-[5px] w-[5px] rounded-full bg-current"
                        animate={ok ? { opacity: [1, 0.25, 1] } : {}}
                        transition={{ duration: 1.3, repeat: Infinity, ease: "easeInOut" }}
                      />
                    )}
                    {s.label}
                  </Badge>
                  <ChevronRight className="h-4 w-4 shrink-0 text-mute" />
                </motion.button>
              );
            })}
          </AnimatePresence>
        </div>
      )}

      <JobSheet job={current} onClose={() => setOpen(null)} onChanged={refresh} />
    </>
  );
}