import type { Metadata } from "next";
import Link from "next/link";
import { BookOpen } from "lucide-react";
import { COUNTRIES, PLAN_LIMITS, normalizePlan } from "@fetcha/core";
import { Button } from "@/components/ui/button";
import { PageHeader } from "@/components/ui/page-header";
import { Playground } from "@/components/playground/playground";
import { FORMATS, HTTP_METHODS, NETWORKS, type BuilderState } from "@/components/playground/types";
import { internalApi } from "@/lib/api";
import { getReplayRequest, listPlaygroundKeys } from "@/lib/queries/playground";
import { getWorkspace } from "@/lib/session";
import { API_PUBLIC_URL } from "@/lib/utils";

export const dynamic = "force-dynamic";
export const metadata: Metadata = { title: "Playground" };

type SearchParams = Promise<{ url?: string | string[]; request?: string | string[] }>;

function first(v: string | string[] | undefined): string | undefined {
  return Array.isArray(v) ? v[0] : v;
}

export default async function PlaygroundPage({ searchParams }: { searchParams: SearchParams }) {
  const [sp, ws] = await Promise.all([searchParams, getWorkspace()]);
  const limits = PLAN_LIMITS[normalizePlan(ws.organization.plan)];

  const replayId = first(sp.request)?.trim();
  const prefillUrl = first(sp.url)?.trim();

  const [keys, ready, replay] = await Promise.all([
    listPlaygroundKeys(ws.project.id, ws.organization.id),
    internalApi.ready().catch(() => ({ status: "unknown", checks: {}, available_networks: [] as string[] })),
    replayId ? getReplayRequest(ws.project.id, replayId).catch(() => null) : Promise.resolve(null),
  ]);

  let initial: Partial<BuilderState> | null = null;
  if (replay) {
    initial = {
      url: replay.url,
      method: (HTTP_METHODS as readonly string[]).includes(replay.method) ? (replay.method as BuilderState["method"]) : "GET",
      network: (NETWORKS as readonly string[]).includes(replay.requestedNetwork) ? (replay.requestedNetwork as BuilderState["network"]) : "auto",
      country: replay.country ?? "",
      region: replay.region ?? "",
      city: replay.city ?? "",
      format: (FORMATS as readonly string[]).includes(replay.format) ? (replay.format as BuilderState["format"]) : "html",
    };
  } else if (prefillUrl) {
    initial = { url: prefillUrl.slice(0, 8192) };
  }

  const projectDefaults: Partial<BuilderState> = {
    country: ws.project.defaultCountry ?? "",
    network: (NETWORKS as readonly string[]).includes(ws.project.defaultNetwork) ? (ws.project.defaultNetwork as BuilderState["network"]) : "auto",
  };

  const countries = Object.entries(COUNTRIES)
    .map(([code, name]) => ({ code, name }))
    .sort((a, b) => a.name.localeCompare(b.name));

  return (
    <>
      <PageHeader
        eyebrow={ws.project.name}
        title="Playground"
        description="Send a request through Fetcha and inspect the response, the network route it took and where the time went. Turn on browser rendering for JavaScript-heavy pages. Playground requests appear in the request log."
        actions={
          <Button variant="outline" size="sm" asChild>
            <Link href="/docs">
              <BookOpen className="size-3.5" /> API reference
            </Link>
          </Button>
        }
      />
      <Playground
        keys={keys}
        plan={{ label: limits.label, concurrency: limits.concurrency, max_timeout_ms: limits.max_timeout_ms, max_retries: limits.max_retries, networks: limits.networks, browser_concurrency: limits.browser_concurrency }}
        availableNetworks={ready.available_networks ?? []}
        countries={countries}
        baseUrl={API_PUBLIC_URL}
        projectDefaults={projectDefaults}
        initial={initial}
        replayId={replay?.id ?? null}
      />
      {replayId && !replay ? <p className="mt-4 text-xs text-fg-subtle">Request <span className="font-mono">{replayId}</span> was not found in this project, so nothing was prefilled.</p> : null}
    </>
  );
}