import type { Metadata } from "next";
import { Field } from "@unlocalhosted/metalui";
import { CompassIcon, SearchIcon } from "@/components/icons";
import { FieldIcon, FieldInput } from "@/components/metal";
import { RepoList } from "@/components/repo-list";
import { Blankslate, Box, Counter } from "@/components/ui";
import { getViewer } from "@/lib/auth";
import { withActivity } from "@/lib/listing";
import { searchRepos } from "@/lib/repos";

export const metadata: Metadata = { title: "Explore" };

export default async function ExplorePage({ searchParams }: PageProps<"/explore">) {
  const q = String((await searchParams).q ?? "").trim();
  const viewer = await getViewer();
  const repos = await withActivity(searchRepos(q, viewer?.id ?? null));

  return (
    <main className="w-full">
      <section className="rule-b">
        <div className="mx-auto max-w-5xl px-4 pt-16 pb-14 text-center">
          <span className="icon-tile mx-auto size-14 rounded-[18px]">
            <CompassIcon width={24} height={24} />
          </span>
          <p className="mt-6 type-label engraved">Public repositories</p>
          <h1 className="mt-2 text-[36px] leading-[1.05] font-semibold tracking-[-0.04em] text-ink">Explore Vectrum</h1>
          <p className="mt-2 type-lead text-ink2">Discover repositories hosted here.</p>
          <form role="search" className="mx-auto mt-8 max-w-xl text-left">
            <Field size="large" className="focus-within:focus-ring-flush">
              <FieldIcon>
                <SearchIcon />
              </FieldIcon>
              <FieldInput name="q" defaultValue={q} placeholder="Search by name, owner or description" aria-label="Search repositories" />
            </Field>
          </form>
        </div>
      </section>
      <div className="mx-auto max-w-5xl px-4 py-10">
        <h2 className="mb-4 flex items-center gap-2 type-display text-ink">
          {q ? <>Results for “{q}”</> : "Recently updated"} <Counter>{repos.length}</Counter>
        </h2>
        {repos.length ? (
          <RepoList repos={repos} />
        ) : (
          <Box>
            <Blankslate icon={<SearchIcon />} title="No repositories found">
              {q ? "Try a different search." : "Nobody has created a public repository yet."}
            </Blankslate>
          </Box>
        )}
      </div>
    </main>
  );
}