"use client";

import Link from "next/link";
import { useState } from "react";
import type { PlanDelta, PlanDiff } from "@/lib/plandiff";

// Which notes actually differ between two arrangements.
//
// Fetched on demand rather than rendered with the page: two plans is two file
// reads and an alignment over up to 880 notes each, and the question is only
// asked when a song has more than one plan and somebody wants to know.
//
// Type-only import above -- lib/plandiff.ts reads the filesystem, and a value
// import would drag node:fs into the client bundle (see lib/note-types.ts).

type Result = PlanDiff & { summary: string; deltaCount: number; truncated: number };

const KIND_TONE: Record<PlanDelta["kind"], string> = {
  swapped: "text-[var(--color-dirty)]",
  moved: "text-[var(--color-sel)]",
  added: "text-[var(--color-good)]",
  removed: "text-[var(--color-bad)]",
  same: "text-[var(--color-dim)]",
};

/** `same` is the bulk of any diff and is not why the tool was opened. */
const INTERESTING: PlanDelta["kind"][] = ["swapped", "moved", "added", "removed"];

export default function PlanDiffPanel({
  song,
  plans,
  current,
}: {
  song: string;
  plans: string[];
  current: string | null;
}) {
  const [a, setA] = useState(current ?? plans[0] ?? "");
  const [b, setB] = useState(plans.find((p) => p !== (current ?? plans[0])) ?? "");
  const [diff, setDiff] = useState<Result | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [showSame, setShowSame] = useState(false);

  if (plans.length < 2) return null;

  const compare = async () => {
    setBusy(true);
    setError(null);
    setDiff(null);
    try {
      const res = await fetch(
        `/api/browse/plandiff?song=${encodeURIComponent(song)}&a=${encodeURIComponent(a)}&b=${encodeURIComponent(b)}`,
        { cache: "no-store" },
      );
      const j = (await res.json()) as Result & { error?: string };
      if (!res.ok) throw new Error(j.error || `HTTP ${res.status}`);
      setDiff(j);
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setBusy(false);
    }
  };

  const rows = diff
    ? diff.deltas.filter((d) => showSame || INTERESTING.includes(d.kind))
    : [];

  return (
    <div className="mt-2 border-t border-[var(--color-line)] pt-2">
      <div className="flex flex-wrap items-center gap-1.5">
        <span className="micro">compare plans</span>
        <Picker value={a} onChange={setA} plans={plans} name="a" />
        <span className="text-[11px] text-[var(--color-dim)]">vs</span>
        <Picker value={b} onChange={setB} plans={plans} name="b" />
        <button
          type="button"
          onClick={() => void compare()}
          disabled={busy || !a || !b || a === b}
          data-plandiff
          className="rounded border border-[var(--color-sel)] px-2 py-0.5 text-[11px] text-[var(--color-sel)] disabled:opacity-40"
        >
          {busy ? "aligning…" : "compare"}
        </button>
        {a === b && <span className="text-[11px] text-[var(--color-dim)]">pick two different plans</span>}
      </div>

      {error && <p className="mt-2 text-[11px] text-[var(--color-bad)]">{error}</p>}

      {diff && (
        <div className="mt-2 space-y-2">
          <p className="text-[12px] text-[var(--color-text)]" data-diff-summary>
            {diff.summary}
          </p>

          <table className="w-full border-collapse text-[11px]">
            <thead>
              <tr className="micro">
                <th className="border-b border-[var(--color-line)] px-2 py-1 text-left">voice</th>
                <th className="border-b border-[var(--color-line)] px-2 py-1 text-right">same</th>
                <th className="border-b border-[var(--color-line)] px-2 py-1 text-right">re-sung</th>
                <th className="border-b border-[var(--color-line)] px-2 py-1 text-right">moved</th>
                <th className="border-b border-[var(--color-line)] px-2 py-1 text-right">added</th>
                <th className="border-b border-[var(--color-line)] px-2 py-1 text-right">dropped</th>
              </tr>
            </thead>
            <tbody>
              {diff.voices.map((v) => (
                <tr key={v.voice} data-voice={v.voice}>
                  <td className="border-b border-[var(--color-line)] px-2 py-1 text-[var(--color-text)]">
                    {v.voice}
                    {v.only && (
                      <span className="ml-1.5 text-[var(--color-dirty)]">
                        only in {v.only === "a" ? diff.a.name : diff.b.name}
                      </span>
                    )}
                  </td>
                  <td className="num border-b border-[var(--color-line)] px-2 py-1 text-right text-[var(--color-dim)]" data-same={v.same}>
                    {v.same}
                  </td>
                  <td className="num border-b border-[var(--color-line)] px-2 py-1 text-right text-[var(--color-dirty)]" data-swapped={v.swapped}>
                    {v.swapped}
                  </td>
                  <td className="num border-b border-[var(--color-line)] px-2 py-1 text-right text-[var(--color-sel)]" data-moved={v.moved}>
                    {v.moved}
                  </td>
                  <td className="num border-b border-[var(--color-line)] px-2 py-1 text-right text-[var(--color-good)]" data-added={v.added}>
                    {v.added}
                  </td>
                  <td className="num border-b border-[var(--color-line)] px-2 py-1 text-right text-[var(--color-bad)]" data-removed={v.removed}>
                    {v.removed}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>

          {(diff.videosOnlyA.length > 0 || diff.videosOnlyB.length > 0) && (
            <p className="text-[11px] text-[var(--color-dim)]">
              {diff.videosOnlyA.length > 0 && (
                <>
                  left the palette: <span className="font-mono">{diff.videosOnlyA.join(" ")}</span>.{" "}
                </>
              )}
              {diff.videosOnlyB.length > 0 && (
                <>
                  entered: <span className="font-mono">{diff.videosOnlyB.join(" ")}</span>.
                </>
              )}
            </p>
          )}

          <label className="flex items-center gap-1.5 text-[11px] text-[var(--color-dim)]">
            <input type="checkbox" checked={showSame} onChange={(e) => setShowSame(e.target.checked)} />
            include the {diff.totals.same} unchanged notes
          </label>

          {diff.truncated > 0 && (
            <p className="text-[11px] text-[var(--color-dirty)]">
              showing the first {diff.deltas.length} of {diff.deltaCount} deltas — the counts above
              are complete
            </p>
          )}

          <div className="max-h-[24rem] overflow-auto">
            <table className="w-full border-collapse text-[11px]">
              <thead className="sticky top-0 bg-[var(--color-panel)]">
                <tr className="micro">
                  <th className="border-b border-[var(--color-line)] px-2 py-1 text-left">at</th>
                  <th className="border-b border-[var(--color-line)] px-2 py-1 text-left">voice</th>
                  <th className="border-b border-[var(--color-line)] px-2 py-1 text-left">what</th>
                  <th className="border-b border-[var(--color-line)] px-2 py-1 text-left">{diff.a.name}</th>
                  <th className="border-b border-[var(--color-line)] px-2 py-1 text-left">{diff.b.name}</th>
                </tr>
              </thead>
              <tbody>
                {rows.map((d, i) => (
                  <tr key={`${d.voice}-${d.songTime}-${i}`} data-delta={d.kind}>
                    <td className="num border-b border-[var(--color-line)] px-2 py-1 text-[var(--color-dim)]">
                      {d.songTime.toFixed(2)}
                    </td>
                    <td className="border-b border-[var(--color-line)] px-2 py-1 text-[var(--color-dim)]">
                      {d.voice}
                    </td>
                    <td className={`border-b border-[var(--color-line)] px-2 py-1 ${KIND_TONE[d.kind]}`}>
                      {d.kind === "swapped" ? "re-sung" : d.kind}
                      {d.dSlot ? ` ${d.dSlot > 0 ? "+" : ""}${d.dSlot}s` : ""}
                    </td>
                    <td className="border-b border-[var(--color-line)] px-2 py-1">
                      <Side row={d.a} />
                    </td>
                    <td className="border-b border-[var(--color-line)] px-2 py-1">
                      <Side row={d.b} />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
}

function Picker({
  value,
  onChange,
  plans,
  name,
}: {
  value: string;
  onChange: (v: string) => void;
  plans: string[];
  name: string;
}) {
  return (
    <select
      value={value}
      onChange={(e) => onChange(e.target.value)}
      data-plan-pick={name}
      aria-label={`plan ${name}`}
      className="rounded border border-[var(--color-line)] bg-[var(--color-panel-2)] px-1.5 py-0.5 font-mono text-[11px] text-[var(--color-text)]"
    >
      {plans.map((p) => (
        <option key={p} value={p}>
          {p.replace(/\.json$/, "")}
        </option>
      ))}
    </select>
  );
}

function Side({ row }: { row: PlanDelta["a"] }) {
  if (!row) return <span className="text-[var(--color-line)]">—</span>;
  return (
    <span className="flex flex-wrap items-center gap-1.5">
      {row.link ? (
        <a
          href={row.link}
          target="_blank"
          rel="noreferrer"
          className="font-mono text-[var(--color-sel)] underline"
          title={row.title}
        >
          {row.clipId}
        </a>
      ) : (
        <span className="font-mono text-[var(--color-dim)]">{row.clipId}</span>
      )}
      {row.word && <span className="text-[var(--color-text)]">&quot;{row.word}&quot;</span>}
      <span className="num text-[var(--color-meter)]">{row.shift.toFixed(2)}</span>
      <Link
        href={`/sort?only=${encodeURIComponent(row.clipId)}`}
        className="text-[var(--color-dim)] underline hover:text-[var(--color-text)]"
      >
        deck
      </Link>
    </span>
  );
}