import Link from "next/link";
import { notFound } from "next/navigation";
import BrowseHeader from "@/components/BrowseHeader";
import ProjectView from "@/components/projects/ProjectView";
import ProjectGrid from "@/components/projects/ProjectGrid";
import { listProjects, resolveProjectPath } from "@/lib/projects";

export const dynamic = "force-dynamic";

// ---------------------------------------------------------------------------
// Everything below /browse that is not a tool page.
//
// This replaced app/browse/[song]/ rather than joining it: two dynamic segments
// at the same level is a Next routing conflict, so it is a delete-and-move. The
// song pages themselves are unchanged -- they moved to components/projects/ and
// are handed an id instead of awaiting params. /browse/yoshi/wide is still the
// same URL and still renders the same page.
//
// Resolution is LONGEST-PREFIX: a project id is a path, so `a/b` being a project
// must not stop `a/b/c` from being one too. Whatever is left over is a VIEW, and
// which views exist is the kind's business, not this file's.
// ---------------------------------------------------------------------------

export default async function BrowsePathPage({
  params,
  searchParams,
}: {
  params: Promise<{ path?: string[] }>;
  searchParams: Promise<Record<string, string | undefined>>;
}) {
  const { path: segments = [] } = await params;
  const search = await searchParams;
  const resolved = await resolveProjectPath(segments);
  if (!resolved) notFound();

  if (resolved.project) {
    return <ProjectView project={resolved.project} rest={resolved.rest} search={search} />;
  }

  // Two projects answer to the same bare name. Which one you meant is not
  // guessable, and guessing is how a link quietly starts pointing at the wrong
  // thing -- so the page says so and offers both canonical paths.
  if ("ambiguous" in resolved && resolved.ambiguous) {
    return (
      <div className="flex h-full flex-col">
        <BrowseHeader
          crumbs={[{ href: "/browse", label: "projects" }, { label: segments.join("/") }]}
          note={`${resolved.ambiguous.length} projects answer to that name`}
        />
        <main className="deck-main flex-1 p-4">
          <p className="mb-2 text-[12px] text-[var(--color-dim)]">
            <code className="font-mono">{segments[0]}</code> is the name of more than one project,
            so it cannot be a shortcut to any of them. Use a full path:
          </p>
          <ul className="space-y-1">
            {resolved.ambiguous.map((p) => (
              <li key={p.id}>
                <Link
                  href={`/browse/${p.id}${segments.slice(1).map((s) => `/${s}`).join("")}`}
                  className="font-mono text-[12px] text-[var(--color-sel)] hover:underline"
                >
                  /browse/{p.id}
                </Link>
              </li>
            ))}
          </ul>
        </main>
      </div>
    );
  }

  // A folder: the same grid, filtered to what is under it.
  const folder = resolved.folder;
  if (!folder) notFound();
  const all = await listProjects();
  const mine = all.filter((p) => p.id.startsWith(`${folder.path}/`));
  return (
    <div className="flex h-full flex-col">
      <BrowseHeader
        crumbs={[{ href: "/browse", label: "projects" }, { label: folder.label }]}
        note={`${mine.length} project${mine.length === 1 ? "" : "s"}`}
      />
      <main className="deck-main flex-1 p-4">
        <ProjectGrid projects={mine} />
      </main>
    </div>
  );
}