import Link from "next/link";
import type { Provenance } from "@/lib/provenance";
import type { BuildStatus } from "@/lib/manifest";
import { fmtDur } from "@/lib/format";
import NoteField from "@/components/NoteField";
import CopyButton from "@/components/CopyButton";
import PlanDiffPanel from "@/components/PlanDiffPanel";
import type { NoteMap } from "@/lib/notes";
import { concentrationLine, shares } from "@/lib/concentration";

// Where a cut came from: the recipe that built it, and every clip it plays.
//
// Server-rendered on purpose. The largest plan here is ~880 notes, and handing
// those to a client component would put them on the wire twice -- once as JSON
// for the props and again as the HTML they turn into.

// How many note rows to render by default.
//
// Not a cosmetic limit. Each row is six cells of Tailwind class strings and two
// links, and every one of them is ALSO serialised into the RSC flight payload --
// so it lands on the wire roughly twice. Pokemon's 269 notes already make a
// 2.1 MB page; mario-rpg's 880-note plan would be over 7 MB, on a force-dynamic
// route that re-renders on every navigation.
//
// The cap is stated rather than silent, and `?notes=all` renders the lot. A
// truncation you cannot see reads as "this is the whole plan", which is exactly
// the wrong thing for a provenance table to imply.
const ROW_LIMIT = 250;

export default function ProvenancePanel({
  song,
  cut,
  prov,
  build,
  planParam,
  notes,
  allNotes = false,
}: {
  song: string;
  cut: string;
  prov: Provenance;
  build: BuildStatus;
  planParam: string | null;
  notes: NoteMap;
  allNotes?: boolean;
}) {
  const href = (plan: string | null) =>
    `/browse/${song}/${cut}${plan ? `?plan=${encodeURIComponent(plan)}` : ""}`;
  const shown = allNotes ? prov.rows : prov.rows.slice(0, ROW_LIMIT);
  const hidden = prov.rows.length - shown.length;

  return (
    <div className="space-y-3">
      <section className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] p-3">
        <div className="micro mb-2">the recipe</div>
        {build.entry ? (
          <>
            {build.stale && (
              /* A recipe that no longer describes the file is the whole risk of
                 keeping this state at all. Say it loudly, above the recipe, and
                 keep showing the recipe -- it is still the best lead. */
              <p className="mb-2 rounded border border-[var(--color-dirty)] px-2 py-1 text-[11px] text-[var(--color-dirty)]">
                {build.stale} — treat everything below as a lead, not as fact
              </p>
            )}
            <dl className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1 text-[12px]">
              <dt className="text-[var(--color-dim)]">script</dt>
              <dd className="font-mono text-[var(--color-text)]">{build.entry.script ?? "—"}</dd>
              {Object.keys(build.entry.env).length > 0 && (
                <>
                  <dt className="text-[var(--color-dim)]">env</dt>
                  <dd className="font-mono break-all text-[var(--color-text)]">
                    {Object.entries(build.entry.env)
                      .map(([k, v]) => `${k}=${v}`)
                      .join(" ")}
                  </dd>
                </>
              )}
              {build.entry.plans.length > 0 && (
                <>
                  <dt className="text-[var(--color-dim)]">plans</dt>
                  <dd className="font-mono text-[var(--color-text)]">
                    {build.entry.plans.join(", ")}
                  </dd>
                </>
              )}
              {build.entry.assets.length > 0 && (
                <>
                  <dt className="text-[var(--color-dim)]">assets</dt>
                  <dd className="space-y-0.5">
                    {build.entry.assets.map((a) => (
                      <div
                        key={a.path}
                        className={`font-mono text-[11px] ${a.missing ? "text-[var(--color-bad)]" : "text-[var(--color-dim)]"}`}
                      >
                        {a.path.split("/").slice(-1)[0]}
                        {a.missing ? " — MISSING" : ""}
                      </div>
                    ))}
                  </dd>
                </>
              )}
              {build.entry.note && (
                <>
                  <dt className="text-[var(--color-dim)]">note</dt>
                  <dd className="text-[var(--color-dim)]">{build.entry.note}</dd>
                </>
              )}
            </dl>
          </>
        ) : (
          <p className="text-[12px] text-[var(--color-dim)]">
            Not recorded. The builder for this song does not name the plan it used, and guessing
            would put a recipe you cannot trust next to one you can — pick the plan below instead.
            A future build records itself with{" "}
            <code className="font-mono">video-dir.mjs --song {song} --rel …</code>.
          </p>
        )}
      </section>

      <section className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] p-3">
        <div className="flex flex-wrap items-center gap-2">
          <span className="micro">clips from</span>
          <span className="font-mono text-[12px] text-[var(--color-text)]">
            {prov.source ? prov.source.name : "nothing yet"}
          </span>
          {prov.shiftP90 !== null && (
            <span className="num text-[11px] text-[var(--color-meter)]">
              |shift| p90 {prov.shiftP90.toFixed(2)} st
            </span>
          )}
          {prov.rows.length > 0 && (
            <span className="num text-[11px] text-[var(--color-dim)]">
              {prov.rows.length} notes · {prov.videos.length} sources
              {prov.voices.length > 0 && ` · ${prov.voices.join(", ")}`}
            </span>
          )}
        </div>

        {/* How concentrated the draw is. The counts were already computed for
            the table below; nothing here costs a read. A song whose top five
            episodes supply most of it is a portrait of five videos, and that is
            worth knowing before quoting the corpus figure. */}
        {prov.videos.length > 0 && (
          <p className="num mt-1 text-[11px] text-[var(--color-dim)]" data-concentration>
            {concentrationLine(shares(prov.videos.map((v) => v.clips)))} ·{" "}
            <Link href="/browse/sources" className="text-[var(--color-sel)] underline">
              across every song
            </Link>
          </p>
        )}

        {prov.available.length > 0 && (
          <div className="mt-2 flex flex-wrap items-center gap-1.5">
            <span className="micro">plan</span>
            {prov.available.map((p) => (
              <Link
                key={p}
                href={href(p)}
                data-plan={p}
                className={`rounded border px-1.5 py-0.5 font-mono text-[11px] ${
                  planParam === p
                    ? "border-[var(--color-sel)] text-[var(--color-sel)]"
                    : "border-[var(--color-line)] text-[var(--color-dim)] hover:text-[var(--color-text)]"
                }`}
              >
                {p.replace(/\.json$/, "")}
              </Link>
            ))}
            {planParam && (
              <Link href={href(null)} className="text-[11px] text-[var(--color-dim)] underline">
                clear
              </Link>
            )}
          </div>
        )}

        {/* Picking a plan and comparing two are the same question asked twice,
            so the comparison lives with the picker rather than on a page of
            its own. It fetches nothing until asked. */}
        <PlanDiffPanel song={song} plans={prov.available} current={planParam ?? prov.source?.name ?? null} />

        {prov.rows.length === 0 ? (
          <p className="mt-2 text-[12px] text-[var(--color-dim)]">
            No clips.csv here and no plan chosen — pick one above.
          </p>
        ) : (
          <>
            <div className="mt-3 overflow-x-auto">
              <table className="w-full border-collapse text-[12px]">
                <thead>
                  <tr className="micro">
                    <th className="border-b border-[var(--color-line)] px-2 py-1 text-left">source</th>
                    <th className="border-b border-[var(--color-line)] px-2 py-1 text-right">clips</th>
                    <th className="border-b border-[var(--color-line)] px-2 py-1 text-left">date</th>
                    <th className="border-b border-[var(--color-line)] px-2 py-1 text-left">first moment</th>
                  </tr>
                </thead>
                <tbody>
                  {prov.videos.map((v) => (
                    <tr key={v.video} data-source-video={v.video}>
                      <td className="border-b border-[var(--color-line)] px-2 py-1">
                        <span className="block text-[var(--color-text)]">{v.title || v.video}</span>
                        <NoteField
                          song={song}
                          target={`source:${v.video}`}
                          initial={notes[`source:${v.video}`] ?? null}
                          label="note"
                          rows={2}
                        />
                      </td>
                      <td className="num border-b border-[var(--color-line)] px-2 py-1 text-right text-[var(--color-meter)]">
                        {v.clips}
                      </td>
                      <td className="num border-b border-[var(--color-line)] px-2 py-1 text-[var(--color-dim)]">
                        {v.date}
                      </td>
                      <td className="border-b border-[var(--color-line)] px-2 py-1">
                        {v.link ? (
                          <a
                            href={v.link}
                            target="_blank"
                            rel="noreferrer"
                            className="num text-[var(--color-sel)] underline"
                          >
                            {fmtDur(v.firstSrcStart)}
                          </a>
                        ) : (
                          <span className="num text-[var(--color-dim)]">{fmtDur(v.firstSrcStart)}</span>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            <details className="mt-3">
              <summary className="cursor-pointer text-[12px] text-[var(--color-dim)] hover:text-[var(--color-text)]">
                every note ({prov.rows.length})
              </summary>
              {/* Re-trimming a clip from here gives the moved window a NEW key,
                  so any plan that references the old one no longer resolves
                  against the palette. Worth saying beside the link rather than
                  discovering after a rebuild. */}
              <p className="mt-1 text-[11px] text-[var(--color-dirty)]">
                re-trimming a clip in the deck gives it a new key — a plan built on the old window
                will no longer find it
              </p>
              {hidden > 0 && (
                <p className="mt-1 text-[11px] text-[var(--color-dim)]" data-hidden-notes={hidden}>
                  showing the first {shown.length} by song time — {hidden} not shown.{" "}
                  <Link
                    href={`${href(planParam)}${planParam ? "&" : "?"}notes=all`}
                    className="text-[var(--color-sel)] underline"
                  >
                    show all {prov.rows.length}
                  </Link>
                </p>
              )}
              <div className="mt-2 max-h-[28rem] 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">word</th>
                      <th className="border-b border-[var(--color-line)] px-2 py-1 text-right">shift</th>
                      <th className="border-b border-[var(--color-line)] px-2 py-1 text-left">pile</th>
                      <th className="border-b border-[var(--color-line)] px-2 py-1 text-left">clip</th>
                    </tr>
                  </thead>
                  <tbody>
                    {shown.map((r, i) => (
                      <tr key={`${r.clipId}-${i}`} data-clip={r.clipId}>
                        <td className="num border-b border-[var(--color-line)] px-2 py-1 text-[var(--color-dim)]">
                          {r.songTime.toFixed(2)}
                        </td>
                        <td className="border-b border-[var(--color-line)] px-2 py-1 text-[var(--color-dim)]">
                          {r.voice}
                        </td>
                        <td className="border-b border-[var(--color-line)] px-2 py-1 text-[var(--color-text)]">
                          {r.word || "—"}
                        </td>
                        <td className="num border-b border-[var(--color-line)] px-2 py-1 text-right text-[var(--color-meter)]">
                          {r.shift.toFixed(2)}
                        </td>
                        <td className="border-b border-[var(--color-line)] px-2 py-1 text-[var(--color-dim)]">
                          {r.pile || "—"}
                        </td>
                        <td className="border-b border-[var(--color-line)] px-2 py-1">
                          <span className="flex flex-wrap items-center gap-2">
                            {r.link && (
                              <a
                                href={r.link}
                                target="_blank"
                                rel="noreferrer"
                                className="text-[var(--color-sel)] underline"
                                title={r.title}
                              >
                                archive
                              </a>
                            )}
                            <Link
                              href={`/sort?only=${encodeURIComponent(r.clipId)}`}
                              className="text-[var(--color-dim)] underline hover:text-[var(--color-text)]"
                            >
                              open in deck
                            </Link>
                            {/* The song-time of the note, cited straight out of
                                the arrangement -- no need to find it in a
                                player first. */}
                            <CopyButton
                                label="cite"
                                title="this moment in the arrangement, with its source clip and archive link"
                                url={`/api/browse/context?song=${encodeURIComponent(song)}&clip=${encodeURIComponent(r.clipId)}`}
                            />
                            <span className="num font-mono text-[var(--color-line)]">{r.clipId}</span>
                            <span className="w-full">
                              <NoteField
                                song={song}
                                target={`clip:${r.clipId}`}
                                initial={notes[`clip:${r.clipId}`] ?? null}
                                label="note"
                                rows={2}
                              />
                            </span>
                          </span>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </details>
          </>
        )}
      </section>
    </div>
  );
}