import Link from "next/link";
import AppNav from "@/components/AppNav";
import MixBench from "@/components/MixBench";
import { MEDIA_ROOTS } from "@/lib/paths";
import { isRefusal, resolvePreset } from "@/lib/mix-preset";

export const dynamic = "force-dynamic";

// A STATIC segment, so it wins over app/[mode]/page.tsx -- which would
// otherwise catch /mix, fail isMode(), and 404.
//
// The deep link (?body=&start=&end=&from=&clip=) is resolved HERE, server-side.
// That is what lets a clip reach the bench with no useSearchParams and no
// Suspense boundary: this page already ran on the server, it just never read its
// own searchParams.
export default async function MixPage({
  searchParams,
}: {
  searchParams: Promise<{ body?: string; start?: string; end?: string; from?: string; clip?: string }>;
}) {
  const sp = await searchParams;
  const resolved = await resolvePreset(sp);
  const refused = isRefusal(resolved) ? resolved : null;
  const preset = isRefusal(resolved) ? null : resolved;

  return (
    <div className="flex h-full flex-col">
      <header className="flex flex-wrap items-center gap-3 border-b border-[var(--color-line)] bg-[var(--color-panel)] px-4 py-2">
        <AppNav active="mix" />
        {preset?.fromHref ? (
          <Link
            href={preset.fromHref}
            className="text-[12px] text-[var(--color-sel)] hover:underline"
            data-mix-from={preset.from ?? ""}
          >
            ← {preset.from}
            {preset.clip ? ` / ${preset.clip}` : ""}
          </Link>
        ) : (
          <div className="text-[12px] text-[var(--color-dim)]">
            set the handover and the end point, hear it, then render it
          </div>
        )}
        <div className="num ml-auto hidden text-[10px] text-[var(--color-dim)] lg:block">
          {MEDIA_ROOTS.length} roots
        </div>
      </header>

      {refused && (
        // Refused, not clamped. A link that quietly opened a DIFFERENT file than
        // it named would be worse than this message.
        <p
          data-mix-refused=""
          className="border-b border-[var(--color-bad)] bg-[color-mix(in_srgb,var(--color-bad)_10%,transparent)] px-4 py-2 text-[12px] text-[var(--color-bad)]"
        >
          that link was refused — {refused.reason}
        </p>
      )}

      <main className="deck-main flex-1">
        <MixBench preset={preset} />
      </main>
    </div>
  );
}