"use client";
import * as React from "react";
import Link from "next/link";
import type { FetchResponseBody } from "@fetcha/core/client";
import { Play, RotateCcw, X } from "lucide-react";
import { runPlayground, type PlaygroundError } from "@/actions/playground";
import { Button } from "@/components/ui/button";
import { generateCode, type CodegenLang } from "@/lib/codegen";
import { checkPlaygroundUrl } from "@/lib/playground-url";
import { keyPlaceholder } from "./code-panel";
import { RequestBuilder } from "./request-builder";
import { ResultsPanel, type ResultPhase } from "./results-panel";
import { DEFAULT_STATE, clearRecent, loadLastState, loadRecent, pushRecent, sanitizeState, saveLastState, toFetchRequest, type BuilderState, type PlaygroundProps } from "./types";

function buildInitialState(props: PlaygroundProps): BuilderState {
  return { ...DEFAULT_STATE, ...sanitizeState(props.projectDefaults ?? {}), ...sanitizeState(props.initial ?? {}) };
}

export function Playground(props: PlaygroundProps) {
  const { keys, plan, availableNetworks, countries, baseUrl, initial, replayId } = props;
  const hasInitial = !!initial && Object.keys(initial).length > 0;

  const [state, setState] = React.useState<BuilderState>(() => buildInitialState(props));
  const [hydrated, setHydrated] = React.useState(false);
  const [recent, setRecent] = React.useState<string[]>([]);
  const [urlTouched, setUrlTouched] = React.useState(hasInitial);
  const [isMac, setIsMac] = React.useState(false);
  const [phase, setPhase] = React.useState<ResultPhase>("idle");
  const [result, setResult] = React.useState<FetchResponseBody | null>(null);
  const [error, setError] = React.useState<PlaygroundError | null>(null);
  const [startedAt, setStartedAt] = React.useState<number | null>(null);
  const [elapsedMs, setElapsedMs] = React.useState(0);
  const [codeLang, setCodeLang] = React.useState<CodegenLang>("curl");
  const [keyId, setKeyId] = React.useState<string>(keys[0]?.id ?? "");
  const [pending, startTransition] = React.useTransition();
  const [replayNotice, setReplayNotice] = React.useState(!!replayId);
  const resultsRef = React.useRef<HTMLDivElement | null>(null);
  const runRef = React.useRef<() => void>(() => {});

  // Hydrate from localStorage after the first paint (the server cannot know the browser state, so
  // applying it synchronously during hydration would produce a markup mismatch). `?url=` / `?request=` win.
  React.useEffect(() => {
    const id = requestAnimationFrame(() => {
      if (!hasInitial) {
        const last = loadLastState();
        if (last) setState((s) => ({ ...s, ...last }));
      }
      setRecent(loadRecent());
      setIsMac(/Mac|iPhone|iPad/.test(navigator.platform) || /Mac OS/.test(navigator.userAgent));
      setHydrated(true);
    });
    return () => cancelAnimationFrame(id);
  }, [hasInitial]);

  // Persist (debounced).
  React.useEffect(() => {
    if (!hydrated) return;
    const t = setTimeout(() => saveLastState(state), 300);
    return () => clearTimeout(t);
  }, [state, hydrated]);

  // Elapsed timer while running.
  React.useEffect(() => {
    if (phase !== "running" || startedAt === null) return;
    const id = setInterval(() => setElapsedMs(Date.now() - startedAt), 100);
    return () => clearInterval(id);
  }, [phase, startedAt]);

  const urlCheck = React.useMemo(() => checkPlaygroundUrl(state.url), [state.url]);
  const request = React.useMemo(() => toFetchRequest(state, plan.max_timeout_ms), [state, plan.max_timeout_ms]);

  const patch = React.useCallback((p: Partial<BuilderState>) => setState((s) => ({ ...s, ...p })), []);

  const run = React.useCallback(() => {
    if (pending) return;
    setUrlTouched(true);
    if (urlCheck.level === "error") {
      document.getElementById("pg-url")?.focus();
      return;
    }
    const req = toFetchRequest(state, plan.max_timeout_ms);
    const t0 = Date.now();
    setStartedAt(t0);
    setElapsedMs(0);
    setPhase("running");
    setResult(null);
    setError(null);
    setRecent(pushRecent(state.url.trim()));
    startTransition(async () => {
      const res = await runPlayground(req);
      setElapsedMs(Date.now() - t0);
      if (res.ok) {
        setResult(res.data);
        setPhase("success");
      } else {
        setError(res.error);
        setPhase("error");
      }
      if (typeof window !== "undefined" && window.innerWidth < 1024) {
        requestAnimationFrame(() => resultsRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }));
      }
    });
  }, [pending, urlCheck.level, state, plan.max_timeout_ms]);
  React.useEffect(() => {
    runRef.current = run;
  }, [run]);

  // ⌘/Ctrl+Enter anywhere on the page.
  React.useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
        e.preventDefault();
        runRef.current();
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const reset = React.useCallback(() => {
    setState({ ...DEFAULT_STATE, ...sanitizeState(props.projectDefaults ?? {}) });
    setUrlTouched(false);
    setPhase("idle");
    setResult(null);
    setError(null);
    setReplayNotice(false);
    requestAnimationFrame(() => document.getElementById("pg-url")?.focus());
  }, [props.projectDefaults]);

  const saveCurl = React.useCallback(() => {
    const key = keys.find((k) => k.id === keyId) ?? keys[0];
    const code = generateCode("curl", request, { apiKeyPlaceholder: keyPlaceholder(key), baseUrl });
    const blob = new Blob([`#!/usr/bin/env bash\n# Fetcha request — replace the API key placeholder with your key.\n${code}\n`], { type: "text/x-shellscript" });
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = "fetcha-request.sh";
    document.body.appendChild(a);
    a.click();
    a.remove();
    setTimeout(() => URL.revokeObjectURL(a.href), 1000);
  }, [keys, keyId, request, baseUrl]);

  return (
    <div className="pb-24 lg:pb-0">
      {replayNotice && replayId ? (
        <div className="mb-4 flex items-center gap-3 rounded-md border border-border bg-bg-subtle px-3 py-2 text-[13px]">
          <span className="text-fg-muted">
            Replaying <span className="font-mono text-fg">{replayId}</span> — settings were loaded from that request. Press Run to send it again.
          </span>
          <Link href={`/dashboard/requests/${replayId}`} className="text-accent underline-offset-4 hover:underline">
            View original
          </Link>
          <button type="button" onClick={() => setReplayNotice(false)} className="ml-auto rounded-sm p-1 text-fg-subtle hover:bg-bg-muted hover:text-fg" aria-label="Dismiss">
            <X className="size-3.5" />
          </button>
        </div>
      ) : null}

      <div className="grid gap-8 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] lg:gap-10">
        <section aria-label="Request" className="min-w-0">
          <RequestBuilder
            state={state}
            onChange={patch}
            plan={plan}
            availableNetworks={availableNetworks}
            countries={countries}
            urlCheck={urlCheck}
            urlTouched={urlTouched}
            onUrlBlur={() => setUrlTouched(true)}
            onRun={run}
            onReset={reset}
            pending={pending || phase === "running"}
            recent={recent}
            onPickRecent={(url) => {
              patch({ url });
              setUrlTouched(true);
            }}
            onClearRecent={() => {
              clearRecent();
              setRecent([]);
            }}
            isMac={isMac}
          />
        </section>
        <section aria-label="Response" className="min-w-0 lg:sticky lg:top-6 lg:self-start" ref={resultsRef}>
          <ResultsPanel
            phase={phase}
            result={result}
            error={error}
            elapsedMs={elapsedMs}
            request={request}
            requestNetwork={state.network}
            keys={keys}
            baseUrl={baseUrl}
            codeLang={codeLang}
            onCodeLangChange={setCodeLang}
            keyId={keyId}
            onKeyChange={setKeyId}
            onSaveCurl={saveCurl}
          />
        </section>
      </div>

      {/* Mobile sticky run bar */}
      <div className="fixed inset-x-0 bottom-0 z-30 border-t border-border bg-bg/90 px-4 py-3 backdrop-blur lg:hidden" style={{ paddingBottom: "max(0.75rem, env(safe-area-inset-bottom))" }}>
        <div className="mx-auto flex max-w-[1200px] items-center gap-2">
          <Button type="button" variant="primary" className="flex-1" loading={pending || phase === "running"} disabled={urlCheck.level === "error"} onClick={run}>
            {!(pending || phase === "running") ? <Play className="size-3.5" /> : null}
            {pending || phase === "running" ? "Running…" : "Run request"}
          </Button>
          <Button type="button" variant="outline" size="icon" onClick={reset} disabled={pending} aria-label="Reset request">
            <RotateCcw className="size-4" />
          </Button>
        </div>
      </div>
    </div>
  );
}