'use client';
import { Check, Copy, Play } from 'lucide-react';
import { useMemo, useState } from 'react';
import { t } from '@/i18n';
import { rawRequest } from '@/lib/client-api-platform';
import { cn } from '@/lib/cn';
import { compact } from '@/lib/format';

export interface ExplorerParam {
  name: string;
  /** `path` params are substituted in the template; `query` params appended. */
  in: 'path' | 'query';
  description: string;
  example?: string;
  required?: boolean;
  options?: string[];
}
export interface ExplorerEndpoint {
  id: string;
  group: string;
  /** e.g. "/countries/{id}/series/{indicator}" */
  template: string;
  summary: string;
  params: ExplorerParam[];
}

const MAX_SHOW = 40_000;

function buildPath(ep: ExplorerEndpoint, values: Record<string, string>): string {
  let path = ep.template;
  const q = new URLSearchParams();
  for (const p of ep.params) {
    const v = (values[p.name] ?? p.example ?? '').trim();
    if (p.in === 'path') path = path.replace(`{${p.name}}`, encodeURIComponent(v || p.example || ''));
    else if (v) q.append(p.name, v);
  }
  const s = q.toString();
  return `/api/v1${path}${s ? `?${s}` : ''}`;
}

function snippets(url: string): Record<'curl' | 'js' | 'py', string> {
  return {
    curl: `curl -s "${url}" | jq .`,
    js: `const res = await fetch("${url}", { headers: { accept: "application/json" } });\nconst data = await res.json();\nconsole.log(data.meta, data);`,
    py: `import requests\n\nr = requests.get("${url}", headers={"accept": "application/json"}, timeout=30)\nr.raise_for_status()\ndata = r.json()\nprint(data["meta"], list(data)[:8])`,
  };
}

/**
 * Interactive endpoint explorer: pick an endpoint, fill typed parameters, run it against the same-origin API,
 * see status/latency/size and the pretty JSON (capped), and copy the request as curl / JavaScript / Python.
 */
export function EndpointExplorer({ endpoints, base }: { endpoints: ExplorerEndpoint[]; base: string }) {
  const [id, setId] = useState(endpoints[0]?.id ?? '');
  const ep = useMemo(() => endpoints.find((e) => e.id === id) ?? endpoints[0]!, [endpoints, id]);
  const [values, setValues] = useState<Record<string, string>>({});
  const [lang, setLang] = useState<'curl' | 'js' | 'py'>('curl');
  const [copied, setCopied] = useState(false);
  const [state, setState] = useState<'idle' | 'running' | 'done' | 'error'>('idle');
  const [result, setResult] = useState<{ status: number; ms: number; bytes: number; text: string } | null>(null);
  const [error, setError] = useState<string | null>(null);
  const path = buildPath(ep, values);
  const url = `${base}${path}`;
  const snip = snippets(url);
  const groups = Array.from(new Set(endpoints.map((e) => e.group)));

  const run = async () => {
    setState('running');
    setError(null);
    try {
      const r = await rawRequest(path);
      const pretty = r.json != null ? JSON.stringify(r.json, null, 2) : r.text;
      setResult({ status: r.status, ms: r.ms, bytes: r.bytes, text: pretty });
      setState('done');
    } catch (e) {
      setError((e as Error).message);
      setState('error');
    }
  };
  const copy = async () => {
    try {
      await navigator.clipboard.writeText(snip[lang]);
      setCopied(true);
      setTimeout(() => setCopied(false), 1600);
    } catch {
      /* ignore */
    }
  };
  const shown = result ? (result.text.length > MAX_SHOW ? result.text.slice(0, MAX_SHOW) : result.text) : '';

  return (
    <div className="grid gap-x-10 gap-y-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]">
      <div className="min-w-0">
        <label className="block">
          <span className="eyebrow mb-1.5 block">{t('apiPage.explorer.endpoint')}</span>
          <select
            value={ep.id}
            onChange={(e) => {
              setId(e.target.value);
              setValues({});
              setResult(null);
              setState('idle');
            }}
            className="h-11 w-full rounded-sm border border-rule bg-surface px-2 font-mono text-sm text-ink outline-none focus:border-accent md:h-10"
            aria-label={t('apiPage.explorer.endpoint')}
          >
            {groups.map((g) => (
              <optgroup key={g} label={g}>
                {endpoints
                  .filter((e) => e.group === g)
                  .map((e) => (
                    <option key={e.id} value={e.id}>
                      GET {e.template}
                    </option>
                  ))}
              </optgroup>
            ))}
          </select>
        </label>
        <p className="mt-1.5 text-sm text-ink-2">{ep.summary}</p>

        {ep.params.length ? (
          <div className="mt-4">
            <div className="eyebrow mb-1.5">{t('apiPage.explorer.params')}</div>
            <ul className="divide-y divide-rule border-y border-rule">
              {ep.params.map((p) => (
                <li key={p.name} className="grid gap-x-3 gap-y-1 py-2 sm:grid-cols-[9rem_minmax(0,1fr)]">
                  <label htmlFor={`p-${ep.id}-${p.name}`} className="pt-2 font-mono text-xs text-ink">
                    {p.name}
                    <span className="ml-1 font-ui text-2xs text-ink-3">{p.in === 'path' ? t('apiPage.explorer.pathParam') : p.required ? t('apiPage.explorer.required') : t('apiPage.explorer.optional')}</span>
                  </label>
                  <div className="min-w-0">
                    {p.options ? (
                      <select id={`p-${ep.id}-${p.name}`} value={values[p.name] ?? p.example ?? ''} onChange={(e) => setValues((v) => ({ ...v, [p.name]: e.target.value }))} className="h-11 w-full rounded-sm border border-rule bg-surface px-2 font-mono text-sm text-ink outline-none focus:border-accent md:h-9">
                        {!p.required ? <option value="">—</option> : null}
                        {p.options.map((o) => (
                          <option key={o} value={o}>
                            {o}
                          </option>
                        ))}
                      </select>
                    ) : (
                      <input id={`p-${ep.id}-${p.name}`} type="text" value={values[p.name] ?? ''} placeholder={p.example ?? ''} onChange={(e) => setValues((v) => ({ ...v, [p.name]: e.target.value }))} className="h-11 w-full rounded-sm border border-rule bg-surface px-2 font-mono text-sm text-ink outline-none placeholder:text-ink-3 focus:border-accent md:h-9" />
                    )}
                    <p className="mt-0.5 text-xs text-ink-3">{p.description}</p>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        ) : null}

        <div className="mt-4">
          <div className="eyebrow mb-1.5">{t('apiPage.explorer.request')}</div>
          <div className="flex flex-wrap items-center gap-1">
            {(['curl', 'js', 'py'] as const).map((l) => (
              <button key={l} type="button" onClick={() => setLang(l)} className={cn('inline-flex h-11 items-center rounded-sm px-2.5 text-xs md:h-8', lang === l ? 'bg-ink text-paper' : 'text-ink-2 hover:bg-surface-2 hover:text-ink')} aria-pressed={lang === l}>
                {t(`apiPage.explorer.copy.${l}` as 'apiPage.explorer.copy.curl')}
              </button>
            ))}
            <button type="button" onClick={copy} className="ml-auto inline-flex h-11 items-center gap-1 rounded-sm border border-rule px-2 text-xs text-ink-2 hover:bg-surface-2 hover:text-ink md:h-8" aria-live="polite">
              {copied ? <Check size={13} aria-hidden /> : <Copy size={13} aria-hidden />}
              {copied ? t('common.copied') : t('indicator.copy')}
            </button>
          </div>
          <pre className="mt-1 overflow-x-auto rounded-sm border border-rule bg-surface p-3 font-mono text-xs leading-relaxed text-ink">
            <code>{snip[lang]}</code>
          </pre>
          <button type="button" onClick={run} disabled={state === 'running'} className="mt-3 inline-flex h-11 items-center gap-2 rounded-sm bg-ink px-4 text-sm font-medium text-paper hover:bg-accent hover:text-accent-ink disabled:opacity-60 md:h-10">
            <Play size={14} aria-hidden /> {state === 'running' ? t('apiPage.explorer.running') : t('apiPage.explorer.run')}
          </button>
        </div>
      </div>

      <div className="min-w-0">
        <div className="eyebrow mb-1.5">{t('apiPage.explorer.response')}</div>
        {state === 'error' ? <p className="text-sm text-down">{t('apiPage.explorer.error', { msg: error ?? '' })}</p> : null}
        {result ? (
          <div className="tnum mb-1 text-xs text-ink-3">
            <span className={result.status < 400 ? 'text-up' : 'text-down'}>{t('apiPage.explorer.status', { status: result.status, ms: result.ms, size: `${compact(result.bytes)}B` })}</span>
            {result.text.length > MAX_SHOW ? <span> · {t('apiPage.explorer.truncated', { n: compact(MAX_SHOW) })}</span> : null}
          </div>
        ) : null}
        <pre className={cn('max-h-[36rem] min-h-[12rem] overflow-auto rounded-sm border border-rule bg-surface-2/60 p-3 font-mono text-xs leading-relaxed text-ink-2', state === 'running' && 'opacity-60')} aria-live="polite" aria-busy={state === 'running'}>
          <code>{shown || `GET ${path}`}</code>
        </pre>
      </div>
    </div>
  );
}