import Link from "next/link";
import BrowseHeader from "@/components/BrowseHeader";
import PhraseConsole from "@/components/PhraseConsole";
import ShortlistBar from "@/components/ShortlistBar";
import {
  episodeIds,
  isEpisode,
  isFillerQuery,
  parsePhraseQuery,
  searchPhrases,
  MAX_TERMS,
  PAGE_SIZE,
  type PhraseResult,
} from "@/lib/phrases";
import { listShortlists, readShortlist } from "@/lib/shortlist";

export const dynamic = "force-dynamic";

// THE PHRASE CONSOLE: every occurrence of a word or phrase across 300 episodes
// of word-level ASR, with the timestamp that addresses both the sound and the
// picture.
//
// A STATIC segment under app/browse/, so it wins over app/browse/[song]/ --
// which would otherwise catch /browse/find, fail readSong() and 404. The same
// trap /browse/decisions documents, and the e2e suite asserts it here too,
// because when this regresses the page still renders perfectly in isolation
// and only the URL stops working.
//
// SEARCH IS `?q=` AND SERVER-RENDERED, over a plain <form method="get">.
// Not live-as-you-type: nothing else in this codebase fetches a list from the
// client, and a URL that can be pasted into a note and still mean the same
// thing six weeks later is worth more than saving a keypress. The filters are
// links for the same reason.

type Params = Record<string, string | string[] | undefined>;

const toSearchParams = (p: Params): URLSearchParams => {
  const sp = new URLSearchParams();
  for (const [k, v] of Object.entries(p)) {
    const one = Array.isArray(v) ? v[0] : v;
    if (one != null) sp.set(k, one);
  }
  return sp;
};

export default async function FindPage({ searchParams }: { searchParams: Promise<Params> }) {
  const raw = toSearchParams(await searchParams);
  const { query, errors } = parsePhraseQuery(raw);

  // NO `q` MEANS NO INDEX. Building 105 MB of blob to draw an empty search box
  // would be the entire cost of the feature paid for nothing -- the same
  // restraint listSongs() shows by never probing. A bare readdir is enough to
  // say how big the corpus is.
  const episodes = await episodeIds();
  const unknownVideo = query.video !== null && !(await isEpisode(query.video));

  let result: PhraseResult | null = null;
  if (query.terms.length && !unknownVideo) result = await searchPhrases(query);

  // The shortlists are small JSON and are read on every render, like every
  // other pile in this tool -- the CLI and a second tab write the same file,
  // and a cached copy would be a stale copy the moment either did.
  const slug = raw.get("list");
  const [lists, active] = await Promise.all([
    listShortlists(),
    slug ? readShortlist(slug) : Promise.resolve(null),
  ]);
  const starred = new Set(active?.picks.map((p) => p.id) ?? []);

  const notes = [
    ...errors.map((e) => e.message),
    ...(unknownVideo ? [`no episode called ${query.video}`] : []),
    ...(slug && !active ? [`no shortlist called ${slug}`] : []),
    ...(result?.notes ?? []),
  ];

  // Every filter is a link that changes searchParams. `page` resets on any
  // change but its own: page 7 of a different filter is a different list.
  const href = (next: Partial<Record<string, string>>) => {
    const p = new URLSearchParams(raw);
    for (const [k, v] of Object.entries(next)) {
      if (v) p.set(k, v);
      else p.delete(k);
    }
    if (!("page" in next)) p.delete("page");
    const s = p.toString();
    return `/browse/find${s ? `?${s}` : ""}`;
  };

  const pages = result ? Math.max(1, Math.ceil(result.total / query.per)) : 1;
  const shown = result?.hits.length ?? 0;
  // Ask the predicate, never the prose. Matching a word out of a note this file
  // does not own is a link that disappears the next time the note is reworded.
  const filler = isFillerQuery(query.terms);

  return (
    <div className="flex h-full flex-col">
      <BrowseHeader
        active="find"
        crumbs={[{ href: "/browse", label: "songs" }, { label: "find" }]}
        note={`${episodes.length} episodes${result ? ` · ${result.corpus.words.toLocaleString()} words · ${result.ms}ms` : ""}`}
      />

      <main className="deck-main flex-1 p-4">
        <form method="get" action="/browse/find" className="mb-3 flex flex-wrap items-center gap-2">
          <input
            id="phrase-q"
            name="q"
            defaultValue={query.q}
            autoFocus
            placeholder="a word or a phrase, as it was said"
            aria-label="phrase"
            className="w-[26rem] max-w-full rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-2 py-1 font-mono text-[13px] text-[var(--color-text)] outline-none focus:border-[var(--color-sel)]"
          />
          {/* Carried so submitting the box does not silently drop the filters
              already applied. A GET form sends only its own fields. */}
          {(["video", "conf", "clean", "dupes", "order", "per", "list"] as const).map((k) =>
            raw.get(k) ? <input key={k} type="hidden" name={k} value={raw.get(k) as string} /> : null,
          )}
          <button
            type="submit"
            className="rounded border border-[var(--color-sel)] px-2.5 py-1 font-mono text-[12px] text-[var(--color-sel)]"
          >
            find
          </button>
          <span className="micro">
            strictly adjacent · up to {MAX_TERMS} terms · <kbd>/</kbd> to focus
          </span>
        </form>

        <ShortlistBar lists={lists} active={active} qs={raw.toString()} />

        {notes.length > 0 && (
          <div className="mb-3 space-y-1.5 rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-3 py-2">
            {notes.map((n, i) => (
              <p key={i} className="text-[12px] text-[var(--color-dim)]" data-note>
                {n}
              </p>
            ))}
            {/* Trap 1, said out loud and with somewhere to go. Without this the
                first search anyone runs returns two rows and the console reads
                as broken. */}
            {filler && (
              <p className="text-[12px]">
                <Link href="/sort" className="text-[var(--color-sel)] hover:underline">
                  The fillers are in /sort
                </Link>
                <span className="text-[var(--color-dim)]">
                  {" "}
                  — mined from the audio, not from the transcript.
                </span>
              </p>
            )}
          </div>
        )}

        {result && (
          <>
            <div className="mb-3 flex flex-wrap items-center gap-1.5">
              <Chip href={href({ dupes: query.dupes ? "0" : undefined })} on={query.dupes}
                label={`fold chunk twins${result.collapsed ? ` ${result.collapsed}` : ""}`} />
              <Chip href={href({ clean: query.clean ? undefined : "1" })} on={query.clean}
                label="hide flagged sources" />

              <span className="micro ml-2">conf</span>
              <Chip href={href({ conf: undefined })} on={query.minConf === null} label="any" />
              {[0.4, 0.9].map((c) => (
                <Chip key={c} href={href({ conf: String(c) })} on={query.minConf === c} label={`≥ ${c}`} />
              ))}

              <span className="micro ml-2">order</span>
              <Chip href={href({ order: undefined })} on={query.order === "time"} label="corpus" />
              <Chip href={href({ order: "conf" })} on={query.order === "conf"} label="least certain first" />

              {query.video && (
                <Chip href={href({ video: undefined })} on={false} label={`${query.video} ✕`} />
              )}
            </div>

            <section
              data-find
              data-total={result.total}
              data-shown={shown}
              data-collapsed={result.collapsed}
              data-suppressed={result.suppressed}
              data-videos={result.videos}
              data-corpus-built={result.corpus.videos}
              data-page={query.page}
            >
              <p className="mb-2 text-[12px] text-[var(--color-dim)]">
                <span className="num text-[var(--color-text)]">{result.total.toLocaleString()}</span>{" "}
                {result.total === 1 ? "hit" : "hits"} across{" "}
                <span className="num">{result.videos}</span>{" "}
                {result.videos === 1 ? "episode" : "episodes"} · showing{" "}
                <span className="num">{shown}</span> · page{" "}
                <span className="num">{query.page}</span> of <span className="num">{pages}</span>
              </p>

              <PhraseConsole
                hits={result.hits}
                q={query.q}
                list={active?.slug ?? null}
                starred={result.hits.filter((h) => starred.has(h.id)).map((h) => h.id)}
              />

              {result.total === 0 && (
                <p className="text-[12px] text-[var(--color-dim)]">
                  Nothing said that, strictly adjacent, anywhere in the corpus.
                </p>
              )}

              {pages > 1 && (
                <nav className="mt-3 flex items-center gap-2" aria-label="pages">
                  {query.page > 1 && (
                    <Link href={href({ page: String(query.page - 1) })}
                      className="rounded border border-[var(--color-line)] px-2 py-0.5 font-mono text-[11px] text-[var(--color-sel)]">
                      ← previous
                    </Link>
                  )}
                  {query.page < pages && (
                    <Link href={href({ page: String(query.page + 1) })} data-next
                      className="rounded border border-[var(--color-line)] px-2 py-0.5 font-mono text-[11px] text-[var(--color-sel)]">
                      next →
                    </Link>
                  )}
                  <span className="micro">{PAGE_SIZE} to a page</span>
                </nav>
              )}
            </section>
          </>
        )}

        {!result && (
          <section data-find data-total="0" data-shown="0" data-collapsed="0" data-corpus-built="0">
            <p className="text-[12px] text-[var(--color-dim)]">
              {episodes.length} episodes of word-level ASR, unindexed until something is asked of
              them. Type a phrase: every occurrence comes back with the second it was said at, and
              that second addresses the sound and the picture alike.
            </p>
          </section>
        )}
      </main>
    </div>
  );
}

function Chip({ href, on, label }: { href: string; on: boolean; label: string }) {
  return (
    <Link
      href={href}
      aria-current={on ? "true" : undefined}
      className={`rounded border px-1.5 py-0.5 font-mono text-[11px] ${
        on
          ? "border-[var(--color-sel)] text-[var(--color-sel)]"
          : "border-[var(--color-line)] text-[var(--color-dim)] hover:text-[var(--color-text)]"
      }`}
    >
      {label}
    </Link>
  );
}