"use client";

import * as React from "react";
import { AnimatePresence, motion } from "framer-motion";
import { ArrowRight } from "lucide-react";
import { api } from "@/lib/api";
import { useToast } from "@/components/toast";
import { Button } from "@/components/ui/button";

type Result = Awaited<ReturnType<typeof api.importList>>;

const PLACEHOLDER = `Radiohead - Creep
Juice WRLD – Lucid Dreams
3. Gorillaz - Feel Good Inc
Black Hole Sun by Soundgarden
https://deezer.com/album/14880711`;

export function BulkImport({ onQueued }: { onQueued?: () => void }) {
  const toast = useToast();
  const [text, setText] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [out, setOut] = React.useState<Result | null>(null);

  const run = async () => {
    const t = text.trim();
    if (!t) {
      toast("Paste some songs first", true);
      return;
    }
    setBusy(true);
    setOut(null);
    try {
      const d = await api.importList(t);
      setOut(d);
      if (d.queued.length) {
        setText("");
        toast(`Queued ${d.queued.length} tracks`);
        onQueued?.();
      }
    } catch (e) {
      toast(`Import failed: ${(e as Error).message}`, true);
    }
    setBusy(false);
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      className="card rounded-panel p-5"
    >
      <h2 className="mb-1 text-headline font-bold tracking-[-0.3px]">Import a list</h2>
      <p className="mb-3.5 max-w-[62ch] text-callout text-dim">
        One song per line. Deezer album and playlist URLs are expanded into their tracks. The
        top match is taken automatically — every job shows what it resolved to, so a bad pick is
        visible rather than silent.
      </p>

      <textarea
        value={text}
        onChange={(e) => setText(e.target.value)}
        spellCheck={false}
        placeholder={PLACEHOLDER}
        className="min-h-[170px] w-full resize-y rounded-card border border-edge
                   bg-black/20 dark:bg-black/20 p-3.5 font-mono text-[13px] leading-[1.7]
                   text-ink outline-none transition
                   placeholder:text-dim/65
                   focus:border-accent-line focus:shadow-[0_0_0_4px_var(--color-accent-soft)]"
      />

      <div className="mt-3 flex flex-wrap items-center gap-3">
        <Button onClick={run} disabled={busy}>
          {busy ? "Queueing…" : "Queue all"}
        </Button>
        <span className="text-callout text-dim">
          Top match taken automatically — check what each line resolved to.
        </span>
      </div>

      <AnimatePresence>
        {out && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            className="mt-3.5 overflow-hidden"
          >
            {out.queued.length > 0 && (
              <>
                <div className="mb-1 text-callout text-dim">Queued {out.queued.length}:</div>
                {out.queued.map((q, i) => (
                  <motion.div
                    key={q.id}
                    initial={{ opacity: 0, x: -8 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: Math.min(i * 0.03, 0.5) }}
                    className="flex items-center gap-2.5 border-b border-edge py-1.5 text-callout last:border-0"
                  >
                    {q.cover && (
                      /* eslint-disable-next-line @next/next/no-img-element */
                      <img
                        src={q.cover}
                        alt=""
                        loading="lazy"
                        className="h-[30px] w-[30px] shrink-0 rounded-md bg-faint object-cover"
                      />
                    )}
                    <span className="shrink-0 text-dim">{q.line}</span>
                    <ArrowRight className="h-3 w-3 shrink-0 text-dim opacity-50" />
                    <span className="clamp1">{q.matched}</span>
                  </motion.div>
                ))}
              </>
            )}
            {out.skipped.length > 0 && (
              <div className="mt-2.5 text-callout leading-[1.7] text-err">
                Skipped {out.skipped.length}:{" "}
                {out.skipped.map((s) => `${s.line} (${s.why})`).join("; ")}
              </div>
            )}
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  );
}