import Link from "next/link";
import { notFound } from "next/navigation";
import BrowseHeader from "@/components/BrowseHeader";
import VerdictChip from "@/components/VerdictChip";
import SpecSheet from "@/components/SpecSheet";
import NoteField from "@/components/NoteField";
import CopyButton from "@/components/CopyButton";
import { readSong, probeAll, thumbAliasesFor, type Cut, type Song } from "@/lib/browse";
import ThumbBench from "@/components/ThumbBench";
import { thumbView } from "@/lib/thumbs";
import { fmtAgo, fmtBytes, fmtDur } from "@/lib/format";
import { Markdown } from "@/lib/markdown";
import { operationsFor, readSpec, validateSpec } from "@/lib/spec";
import { readNotes, type NoteMap } from "@/lib/notes";
import { TRIM_SETS } from "@/lib/trim";

// Moved out of app/browse/[song]/page.tsx unchanged, because [song] and
// [...path] cannot both be dynamic segments at the same level. The dispatcher
// in ProjectView.tsx hands it an id; nothing else about the page differs.

export default async function SongProject({ id }: { id: string }) {
  const song = await readSong(id);
  if (!song) notFound();

  // Durations are worth an ffprobe HERE but not on the index: this page is a
  // handful of files and "which of these is the short cut" is exactly the
  // question it answers. Memoised by mtime in lib/browse.ts.
  const rels = [
    ...song.cuts.flatMap((c) => [c.shipped?.rel, ...c.variants.map((v) => v.rel)]),
    ...song.unattributed.map((v) => v.rel),
  ].filter((r): r is string => !!r);
  const info = await probeAll(id, rels);

  const spec = await readSpec(id);
  const problems = await validateSpec(spec);
  const notes = await readNotes(id);
  // Two small JSON reads, no probing -- the bench draws what the manifests say.
  const thumbs = await thumbView(id, thumbAliasesFor(id));

  return (
    <div className="flex h-full flex-col">
      <BrowseHeader
        crumbs={[{ href: "/browse", label: "songs" }, { label: song.id }]}
        note={`${song.present}/${song.cuts.length} cuts · ${song.variantCount} variants`}
      />
      <div className="flex flex-wrap items-start gap-3 border-b border-[var(--color-line)] px-4 py-2">
        <div className="min-w-0 flex-1">
          {/* The one obvious place to write about the song, open by default --
              everything else on the page is collapsed until asked for. */}
          <NoteField song={id} target="song" initial={notes.song ?? null} label="notes on this song" />
        </div>
        <CopyButton
          label="copy this song"
          title="this song as markdown — spec, cuts, verdicts, notes and resolved marks"
          url={`/api/browse/context?song=${encodeURIComponent(id)}`}
        />
      </div>
      <main className="deck-main flex-1">
        <div className="grid gap-4 p-4 xl:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
          <div className="space-y-3">
            {song.cuts.map((cut) => (
              <CutCard key={cut.name} song={song} cut={cut} info={info} notes={notes} />
            ))}

            {song.unattributed.length > 0 && (
              <section className="rounded border border-[var(--color-dirty)]/40 bg-[var(--color-panel)] p-3">
                <div className="micro mb-2">
                  matches no cut name — attribute by renaming, never by guessing
                </div>
                <ul className="space-y-1">
                  {song.unattributed.map((v) => (
                    <li key={v.rel} className="num text-[12px] text-[var(--color-dim)]">
                      <span className="font-mono text-[var(--color-text)]">{v.rel}</span>{" "}
                      {fmtBytes(v.size)}
                    </li>
                  ))}
                </ul>
              </section>
            )}
          </div>

          <aside className="space-y-4">
            <ThumbBench song={song.id} view={thumbs} notes={notes} />
            <SpecSheet
              song={song.id}
              initial={spec}
              problems={problems}
              operations={operationsFor(spec, song)}
              plans={song.plans.map((p) => p.name)}
              trimSets={Object.values(TRIM_SETS).map((t) => ({ id: t.id, label: t.label }))}
            />
            {song.readme && (
              <section className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] p-3">
                <Markdown text={song.readme} />
              </section>
            )}
            <section className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] p-3">
              <div className="micro mb-2">plans</div>
              {song.plans.length === 0 ? (
                <p className="text-[12px] text-[var(--color-dim)]">no plan/ directory</p>
              ) : (
                <ul className="space-y-0.5">
                  {song.plans.map((p) => (
                    <li key={p.name} className="num text-[11px] text-[var(--color-dim)]">
                      <span className="flex gap-2">
                        <span className="truncate font-mono text-[var(--color-text)]">{p.name}</span>
                        <span className="ml-auto shrink-0">{fmtBytes(p.size)}</span>
                      </span>
                      <NoteField
                        song={song.id}
                        target={`plan:${p.name}`}
                        initial={notes[`plan:${p.name}`] ?? null}
                        label="what this plan is"
                        rows={3}
                      />
                    </li>
                  ))}
                </ul>
              )}
              {song.hasClipsCsv && <div className="micro mt-2">clips.csv present</div>}
            </section>
          </aside>
        </div>
      </main>
    </div>
  );
}

function CutCard({
  song,
  cut,
  info,
  notes,
}: {
  song: Song;
  cut: Cut;
  info: Record<string, { duration: number; width: number; height: number }>;
  notes: NoteMap;
}) {
  const shipped = cut.shipped;
  const live = cut.variants.filter((v) => !v.retired);
  const retired = cut.variants.filter((v) => v.retired);

  return (
    <section
      data-cut={cut.name}
      data-present={shipped ? "1" : "0"}
      className="rounded border border-[var(--color-line)] bg-[var(--color-panel)]"
    >
      <div className="flex items-start gap-3 p-3">
        {shipped ? (
          /* eslint-disable-next-line @next/next/no-img-element */
          <img
            src={`/api/browse/poster?song=${encodeURIComponent(song.id)}&rel=${encodeURIComponent(shipped.rel)}&w=320`}
            alt=""
            width={160}
            height={90}
            className="w-40 shrink-0 rounded bg-[var(--color-panel-2)] object-cover"
          />
        ) : (
          <div className="flex h-[90px] w-40 shrink-0 items-center justify-center rounded border border-dashed border-[var(--color-line)] text-[11px] text-[var(--color-dim)]">
            not built
          </div>
        )}

        <div className="min-w-0 flex-1 space-y-1">
          <div className="flex flex-wrap items-baseline gap-2">
            <Link
              href={`/browse/${song.id}/${cut.name}`}
              className="font-mono text-[13px] text-[var(--color-text)] hover:text-[var(--color-sel)]"
            >
              {cut.name}
            </Link>
            {shipped ? (
              <span className="num text-[11px] text-[var(--color-meter)]">
                {fmtDur(info[shipped.rel]?.duration ?? 0)}
              </span>
            ) : (
              <span className="text-[11px] text-[var(--color-dim)]">— a hole in the set</span>
            )}
            {shipped && info[shipped.rel] && (
              <span className="num text-[11px] text-[var(--color-dim)]">
                {info[shipped.rel].width}×{info[shipped.rel].height}
              </span>
            )}
            <span className="num ml-auto text-[11px] text-[var(--color-dim)]">
              {shipped ? `${fmtBytes(shipped.size)} · ${fmtAgo(shipped.mtimeMs)}` : ""}
            </span>
          </div>

          {shipped && (
            <VerdictChip song={song.id} rel={shipped.rel} initial={shipped.verdict} />
          )}

          {/* Two different notes, deliberately. The `cut:` one is about the SLOT
              -- it survives a promote and can be written about a cut that has
              not been built. The `file:` one is about these bytes. */}
          <NoteField
            song={song.id}
            target={`cut:${cut.name}`}
            initial={notes[`cut:${cut.name}`] ?? null}
            label={`notes on ${cut.name}`}
            rows={3}
          />
          {shipped && (
            <NoteField
              song={song.id}
              target={`file:${shipped.rel}`}
              initial={notes[`file:${shipped.rel}`] ?? null}
              label="notes on this file"
              rows={3}
            />
          )}

          {live.length > 0 && (
            <ul className="space-y-1 pt-1">
              {live.map((v) => (
                <li
                  key={v.rel}
                  data-variant={v.rel}
                  data-variant-tag={v.tag}
                  className="flex flex-wrap items-center gap-2 rounded bg-[var(--color-panel-2)] px-2 py-1"
                >
                  <span className="font-mono text-[12px] text-[var(--color-text)]">{v.tag}</span>
                  <span className="num text-[11px] text-[var(--color-meter)]">
                    {fmtDur(info[v.rel]?.duration ?? 0)}
                  </span>
                  <span className="num text-[11px] text-[var(--color-dim)]">{fmtBytes(v.size)}</span>
                  <div className="ml-auto">
                    <VerdictChip song={song.id} rel={v.rel} initial={v.verdict} />
                  </div>
                  <div className="w-full">
                    <NoteField
                      song={song.id}
                      target={`file:${v.rel}`}
                      initial={notes[`file:${v.rel}`] ?? null}
                      label={`notes on ${v.tag}`}
                      rows={3}
                    />
                  </div>
                </li>
              ))}
            </ul>
          )}

          {retired.length > 0 && (
            <div className="micro pt-1" data-retired={retired.length}>
              {retired.length} retired: {retired.map((v) => v.tag).join(", ")}
            </div>
          )}
        </div>
      </div>
    </section>
  );
}