'use client';
import { Copy, Play } from 'lucide-react';
import { useMemo, useState } from 'react';
import { cn } from '@/lib/cn';
import { clientTry } from '@/lib/client-api';
import { PUBLIC_API_BASE } from '@/lib/site';
import { buildPath, ROUTES, type RouteDef } from './routes';

/*
  Interactive request builder (client): route picker (static catalogue of the 1.1 routes), parameter fields with
  examples, "Try" against the same origin `/api/v1` (rewritten to the API), copyable curl / Python / JavaScript snippets
  and the response-shape excerpt from docs/API.md. Nothing is fetched until the user asks.
*/

type Lang = 'curl' | 'python' | 'js';
const MAX_BODY = 6000;

function snippet(lang: Lang, url: string): string {
  if (lang === 'curl') return `curl -s "${url}" | jq .`;
  if (lang === 'python')
    return `import requests\n\nr = requests.get("${url}", headers={"User-Agent": "my-app/1.0 (contact@example.com)"}, timeout=30)\nr.raise_for_status()\ndata = r.json()  # numeric aggregates may be strings — coerce before arithmetic\nprint(data)`;
  return `const res = await fetch("${url}", { headers: { accept: "application/json" } });\nif (!res.ok) throw new Error(\`API \${res.status}\`);\nconst data = await res.json(); // null means "not stated by any source"\nconsole.log(data);`;
}

export function RequestBuilder({ initialRoute = 'search' }: { initialRoute?: string }) {
  const [routeId, setRouteId] = useState(initialRoute);
  const route: RouteDef = ROUTES.find((r) => r.id === routeId) ?? ROUTES[0]!;
  const [values, setValues] = useState<Record<string, string>>({});
  const [lang, setLang] = useState<Lang>('curl');
  const [result, setResult] = useState<{ status: number; ms: number; body: unknown; headers: Record<string, string> } | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [copied, setCopied] = useState(false);
  const path = useMemo(() => buildPath(route, values), [route, values]);
  const url = `${PUBLIC_API_BASE}${path}`;
  const groups = useMemo(() => [...new Set(ROUTES.map((r) => r.group))], []);

  const pick = (id: string) => {
    setRouteId(id);
    setValues({});
    setResult(null);
    setError(null);
  };
  const tryIt = async () => {
    setBusy(true);
    setError(null);
    try {
      setResult(await clientTry(path));
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  };
  const copy = async () => {
    try {
      await navigator.clipboard.writeText(snippet(lang, url));
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    } catch {
      /* ignore */
    }
  };
  const bodyText = result ? (typeof result.body === 'string' ? result.body : JSON.stringify(result.body, null, 2)) : '';
  const cls = 'h-10 w-full border border-rule bg-surface px-2 text-sm text-ink focus:border-accent focus:outline-none';

  return (
    <div className="grid gap-6 lg:grid-cols-[18rem_minmax(0,1fr)]" data-request-builder>
      <div className="min-w-0">
        <label className="block">
          <span className="eyebrow block pb-1">Route</span>
          <select value={route.id} onChange={(e) => pick(e.target.value)} className={cls} data-route-picker>
            {groups.map((g) => (
              <optgroup key={g} label={g}>
                {ROUTES.filter((r) => r.group === g).map((r) => (
                  <option key={r.id} value={r.id}>
                    {r.path} — {r.summary}
                  </option>
                ))}
              </optgroup>
            ))}
          </select>
        </label>
        <p className="mono mt-2 break-all text-xs text-ink-2">
          {route.method} {route.path}
        </p>
        <p className="mt-1 text-xs text-ink-3">{route.summary}</p>
        {route.params.length > 0 && (
          <div className="mt-4 grid grid-cols-2 gap-2 lg:grid-cols-1">
            {route.params.map((p) => (
              <label key={p.name} className="block min-w-0">
                <span className="eyebrow block pb-1">
                  {p.name}
                  {p.path && <span className="normal-case tracking-normal text-ink-3"> · path</span>}
                </span>
                <input value={values[p.name] ?? ''} onChange={(e) => setValues((v) => ({ ...v, [p.name]: e.target.value }))} placeholder={p.example ?? p.hint ?? ''} className={cn(cls, 'mono text-xs')} aria-label={`${p.name} parameter`} />
                {p.hint && p.example && <span className="mt-0.5 block text-[11px] text-ink-3">{p.hint}</span>}
              </label>
            ))}
          </div>
        )}
      </div>
      <div className="min-w-0 space-y-4">
        <div className="flex flex-wrap items-center gap-2">
          <code className="mono min-w-0 flex-1 truncate border border-rule bg-surface px-2 py-2 text-xs text-ink" title={url} data-request-url>
            {url}
          </code>
          <button type="button" onClick={tryIt} disabled={busy} className="inline-flex h-10 items-center gap-1.5 bg-ink px-3 text-sm font-medium text-canvas hover:opacity-90 disabled:opacity-60" data-try>
            <Play className="size-4" aria-hidden /> {busy ? 'Requesting…' : 'Try'}
          </button>
        </div>
        <div>
          <div className="flex items-center gap-1 border-b border-rule" role="tablist" aria-label="Snippet language">
            {(['curl', 'python', 'js'] as Lang[]).map((l) => (
              <button key={l} type="button" role="tab" aria-selected={lang === l} onClick={() => setLang(l)} className={cn('h-9 border-b-2 px-3 text-sm', lang === l ? 'border-ink font-medium text-ink' : 'border-transparent text-ink-2 hover:text-ink')}>
                {l === 'js' ? 'JavaScript' : l === 'python' ? 'Python' : 'curl'}
              </button>
            ))}
            <button type="button" onClick={copy} className="ml-auto inline-flex h-9 items-center gap-1 px-2 text-xs text-ink-3 hover:text-ink">
              <Copy className="size-3.5" aria-hidden /> {copied ? 'Copied' : 'Copy'}
            </button>
          </div>
          <pre className="scrollbar-thin mt-2 overflow-x-auto border border-rule bg-surface p-3 text-[12.5px] leading-relaxed text-ink">
            <code>{snippet(lang, url)}</code>
          </pre>
        </div>
        <div>
          <p className="eyebrow mb-1">Response shape (docs/API.md)</p>
          <pre className="scrollbar-thin overflow-x-auto whitespace-pre-wrap border border-dashed border-rule p-3 text-[12px] leading-relaxed text-ink-2">
            <code>{route.returns}</code>
          </pre>
        </div>
        <div aria-live="polite" data-try-result>
          {error && <p className="text-sm text-danger">Request failed: {error}</p>}
          {result && (
            <>
              <p className="tnum flex flex-wrap items-center gap-x-3 text-xs text-ink-3">
                <span className={result.status < 400 ? 'text-positive' : 'text-danger'}>HTTP {result.status}</span>
                <span>{result.ms} ms</span>
                {Object.entries(result.headers).map(([k, v]) => (
                  <span key={k} className="mono">
                    {k}: {v.length > 40 ? `${v.slice(0, 40)}…` : v}
                  </span>
                ))}
              </p>
              <pre className="scrollbar-thin mt-2 max-h-[28rem] overflow-auto border border-rule bg-surface p-3 text-[12px] leading-relaxed text-ink">
                <code>{bodyText.length > MAX_BODY ? `${bodyText.slice(0, MAX_BODY)}\n… (${bodyText.length - MAX_BODY} more characters — open the URL for the full body)` : bodyText}</code>
              </pre>
            </>
          )}
        </div>
      </div>
    </div>
  );
}