import { notFound } from "next/navigation";
import BrowseHeader from "@/components/BrowseHeader";
import TrimBench from "@/components/TrimBench";
import BuildChain from "@/components/BuildChain";
import { TRIM_SETS, readCatalogue, readTrims } from "@/lib/trim";
import { readTrimNotes } from "@/lib/notes";

export const dynamic = "force-dynamic";

// `trim` is a STATIC segment, so it wins over /browse/[song] the same way
// /browse wins over /[mode].
//
// The trimmer is NOT scoped to a cut, and that is deliberate: source clips are
// shared across every cut of every song, so putting the editor under one cut
// would imply per-cut trim state that does not exist.

export default async function TrimPage({ params }: { params: Promise<{ set: string }> }) {
  const { set: id } = await params;
  const set = TRIM_SETS[id];
  if (!set) notFound();

  const [catalogue, trims, hookNotes] = await Promise.all([
    readCatalogue(set),
    readTrims(set),
    readTrimNotes(),
  ]);

  return (
    <div className="flex h-full flex-col">
      <BrowseHeader
        crumbs={[{ href: "/browse", label: "songs" }, { label: `trim: ${set.id}` }]}
        note={`${catalogue.hooks.length} hooks · ${trims.length} trimmed`}
      />
      <main className="deck-main flex-1">
        <TrimBench
          setId={set.id}
          label={set.label}
          hooks={catalogue.hooks}
          initialTrims={trims}
          hookNotes={hookNotes}
        />
        <div className="px-4 pb-4">
          <BuildChain setId={set.id} />
        </div>
      </main>
    </div>
  );
}