"use client";
import * as React from "react";
import Link from "next/link";
import type { FetchRequestInput, FetchResponseBody } from "@fetcha/core/client";
import { ArrowUpRight, Download, Loader2, MonitorSmartphone, PlayCircle, ShieldAlert } from "lucide-react";
import type { PlaygroundError } from "@/actions/playground";
import { Alert } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { CodeBlock } from "@/components/ui/code-block";
import { CopyButton } from "@/components/ui/copy-button";
import { EmptyState } from "@/components/ui/empty-state";
import { Skeleton } from "@/components/ui/skeleton";
import { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import type { CodegenLang } from "@/lib/codegen";
import { formatBytes, formatMs } from "@/lib/format";
import { cn } from "@/lib/utils";
import { CodePanel } from "./code-panel";
import { TimingBars } from "./timing-bars";
import { isHtmlContentType, isJsonContentType, statusVariant, stripHtml, truncateForDisplay, type NetworkClass, type PlaygroundKey } from "./types";

export type ResultPhase = "idle" | "running" | "success" | "error";

export interface ResultsPanelProps {
  phase: ResultPhase;
  result: FetchResponseBody | null;
  error: PlaygroundError | null;
  elapsedMs: number;
  request: FetchRequestInput;
  requestNetwork: NetworkClass;
  keys: PlaygroundKey[];
  baseUrl: string;
  codeLang: CodegenLang;
  onCodeLangChange: (l: CodegenLang) => void;
  keyId: string;
  onKeyChange: (id: string) => void;
  onSaveCurl: () => void;
}

export function ResultsPanel(p: ResultsPanelProps) {
  const code = <CodePanel request={p.request} keys={p.keys} baseUrl={p.baseUrl} lang={p.codeLang} onLangChange={p.onCodeLangChange} keyId={p.keyId} onKeyChange={p.onKeyChange} />;

  if (p.phase === "idle") {
    return (
      <div className="grid gap-6">
        <EmptyState icon={PlayCircle} title="Run a request to see the response" description="Enter a URL on the left and press Run. You'll get the body, headers, cookies, the network route Fetcha chose and a timing breakdown." compact />
        <Panel title="Code for this request">{code}</Panel>
      </div>
    );
  }

  if (p.phase === "running") {
    return (
      <div className="grid gap-4 rounded-lg border border-border p-5" aria-busy="true" aria-live="polite">
        <div className="flex items-center gap-3">
          <Loader2 className="size-4 animate-spin text-accent" aria-hidden />
          <div className="min-w-0 flex-1">
            <p className="text-[13.5px] font-medium">Routing your request…</p>
            <p className="truncate text-xs text-fg-muted">
              {p.requestNetwork === "auto" ? "Auto mode picks the best network for this domain, then retries with a new IP or another network if the target blocks." : `Using the ${p.requestNetwork} network.`}
            </p>
          </div>
          <span className="shrink-0 font-mono text-[13px] tabular text-fg-muted">{formatMs(p.elapsedMs)}</span>
        </div>
        <div className="grid gap-2 pt-2">
          <Skeleton className="h-3.5 w-1/3" />
          <Skeleton className="h-3.5 w-2/3" />
          <Skeleton className="h-3.5 w-1/2" />
          <Skeleton className="mt-2 h-40 w-full" />
        </div>
      </div>
    );
  }

  if (p.phase === "error" || !p.result) {
    const e = p.error ?? { code: "INTERNAL_ERROR", message: "Unknown error.", requestId: null };
    const issues = Array.isArray(e.details?.issues) ? (e.details!.issues as Array<{ path?: string; message?: string }>) : [];
    return (
      <div className="grid gap-6">
        <Alert
          variant="danger"
          title={
            <span className="flex flex-wrap items-center gap-2">
              <span className="font-mono text-[13px]">{e.code}</span>
              <span className="text-fg-muted">·</span>
              <span>{e.message}</span>
            </span>
          }
        >
          <div className="mt-2 grid gap-2 text-[13px]">
            {issues.length ? (
              <ul className="list-disc pl-5 text-fg-muted">
                {issues.map((i, idx) => (
                  <li key={idx}>
                    {i.path ? <span className="font-mono text-fg">{i.path}</span> : null}
                    {i.path ? ": " : ""}
                    {i.message}
                  </li>
                ))}
              </ul>
            ) : null}
            <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
              {e.requestId ? (
                <span className="inline-flex items-center gap-1 text-fg-muted">
                  Request <span className="font-mono text-fg">{e.requestId}</span>
                  <CopyButton value={e.requestId} className="size-6" />
                </span>
              ) : null}
              <Link href={`/docs/errors#${e.code}`} className="inline-flex items-center gap-1 text-accent underline-offset-4 hover:underline">
                About {e.code} <ArrowUpRight className="size-3.5" />
              </Link>
              {e.requestId ? (
                <Link href={`/dashboard/requests/${e.requestId}`} className="inline-flex items-center gap-1 text-fg-muted underline-offset-4 hover:underline">
                  View in Requests
                </Link>
              ) : null}
            </div>
            <p className="text-xs text-fg-subtle">Took {formatMs(p.elapsedMs)}.</p>
          </div>
        </Alert>
        <Panel title="Reproduce with code">{code}</Panel>
      </div>
    );
  }

  return <SuccessView {...p} result={p.result} code={code} />;
}

function Panel({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <section className="grid gap-3">
      <h2 className="text-[13px] font-semibold uppercase tracking-wide text-fg-subtle">{title}</h2>
      {children}
    </section>
  );
}

// ---------------------------------------------------------------------------
// Success
// ---------------------------------------------------------------------------

function SuccessView({ result: r, request, elapsedMs, onSaveCurl, code }: ResultsPanelProps & { result: FetchResponseBody; code: React.ReactNode }) {
  const method = request.method ?? "GET";
  const isHead = method === "HEAD";
  const content = r.content ?? "";
  const hasContent = content.length > 0;
  const html = isHtmlContentType(r.content_type);
  const headerEntries = Object.entries(r.headers ?? {});
  const cookies = r.cookies ?? [];
  const meta = r.metadata;
  const [tab, setTab] = React.useState("preview");

  const jsonValue = React.useMemo<{ ok: true; value: unknown } | { ok: false }>(() => {
    if (r.json !== undefined && r.json !== null) return { ok: true, value: r.json };
    if (!hasContent) return { ok: false };
    if (!isJsonContentType(r.content_type) && !/^\s*[[{]/.test(content)) return { ok: false };
    try {
      return { ok: true, value: JSON.parse(content) };
    } catch {
      return { ok: false };
    }
  }, [r.json, r.content_type, content, hasContent]);

  const textValue = React.useMemo(() => {
    if (typeof r.text === "string") return r.text;
    if (!hasContent) return "";
    return html ? stripHtml(content) : content;
  }, [r.text, content, hasContent, html]);

  const debugJson = React.useMemo(() => {
    const clone: Record<string, unknown> = { ...r };
    if (typeof r.content === "string") clone.content = `[omitted: ${r.content.length.toLocaleString("en-US")} chars — see the ${html ? "HTML" : "Body"} tab]`;
    if (typeof r.text === "string") clone.text = `[omitted: ${r.text.length.toLocaleString("en-US")} chars — see the Text tab]`;
    if (typeof r.markdown === "string") clone.markdown = `[omitted: ${r.markdown.length.toLocaleString("en-US")} chars — see the Markdown tab]`;
    if (typeof r.screenshot === "string") clone.screenshot = `[omitted: ${r.screenshot.length.toLocaleString("en-US")} base64 chars — see the Screenshot tab]`;
    if (Array.isArray(r.links)) clone.links = `[${r.links.length.toLocaleString("en-US")} links — see the Links tab]`;
    if (r.json !== undefined) clone.json = "[see the JSON tab]";
    return JSON.stringify(clone, null, 2);
  }, [r, html]);

  const bodyLabel = html ? "HTML" : "Body";
  const hasMarkdown = typeof r.markdown === "string";
  const links = Array.isArray(r.links) ? r.links : null;
  const hasScreenshot = typeof r.screenshot === "string" && r.screenshot.length > 0;
  const mode = meta.mode ?? "http";

  return (
    <div className="grid gap-4">
      {/* Header */}
      <div className="flex flex-col gap-3 rounded-lg border border-border bg-bg-subtle/40 px-4 py-3">
        <div className="flex flex-wrap items-center gap-2">
          <Badge variant={statusVariant(r.status)} className="font-mono text-[12px]">
            {r.status || "—"}
          </Badge>
          {r.success ? (
            <Badge variant="success" dot>
              success
            </Badge>
          ) : (
            <Badge variant="danger" dot>
              blocked
            </Badge>
          )}
          <Badge variant={mode === "browser" ? "accent" : "outline"} title={mode === "browser" ? "Rendered in the managed browser" : "Plain HTTP fetch"}>
            {mode === "browser" ? <MonitorSmartphone className="size-3" aria-hidden /> : null}
            {mode === "browser" ? "Browser" : "HTTP"}
          </Badge>
          {meta.cached ? <Badge variant="outline">cached</Badge> : null}
          <span className="hidden text-fg-subtle sm:inline">·</span>
          <Metric label="Duration" value={formatMs(meta.duration_ms ?? elapsedMs)} />
          <Metric label="Network" value={meta.network} />
          <Metric label="Country" value={meta.country ?? "any"} />
          <Metric label="Attempts" value={String(meta.attempts)} />
          <Metric label="Size" value={formatBytes(meta.bytes)} />
          <div className="ml-auto flex items-center gap-1">
            <Button type="button" variant="outline" size="sm" onClick={onSaveCurl} className="h-8">
              <Download className="size-3.5" /> Save as cURL
            </Button>
          </div>
        </div>
        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-fg-muted">
          <span className="inline-flex items-center gap-1">
            <span className="font-mono text-fg">{r.request_id}</span>
            <CopyButton value={r.request_id} className="size-6" />
            <Link href={`/dashboard/requests/${r.request_id}`} className="inline-flex items-center gap-0.5 text-accent underline-offset-4 hover:underline">
              Details <ArrowUpRight className="size-3" />
            </Link>
          </span>
          <span className="min-w-0 truncate font-mono" title={r.final_url}>
            {r.final_url !== r.url ? (
              <>
                <span className="text-fg-subtle">{r.url}</span> → {r.final_url}
              </>
            ) : (
              r.url
            )}
          </span>
          {r.content_type ? <span className="font-mono text-fg-subtle">{r.content_type}</span> : null}
        </div>
        {!r.success ? (
          <p className="flex items-start gap-2 text-xs text-fg-muted">
            <ShieldAlert className="mt-0.5 size-3.5 shrink-0 text-danger" aria-hidden />
            The target answered with HTTP {r.status} on every route Fetcha tried ({meta.attempts} attempt{meta.attempts === 1 ? "" : "s"}). Try browser rendering, a residential network, a different country or a session.
          </p>
        ) : null}
      </div>

      {r.page ? <PageCard page={r.page} /> : null}

      {/* Tabs */}
      <Tabs value={tab} onValueChange={setTab}>
        <TabsList variant="underline" className="-mx-1 px-1">
          <TabsTrigger value="preview">Preview</TabsTrigger>
          <TabsTrigger value="html">{bodyLabel}</TabsTrigger>
          <TabsTrigger value="text">Text</TabsTrigger>
          {hasMarkdown ? <TabsTrigger value="markdown">Markdown</TabsTrigger> : null}
          <TabsTrigger value="json">JSON</TabsTrigger>
          {links ? (
            <TabsTrigger value="links">
              Links <Count n={links.length} />
            </TabsTrigger>
          ) : null}
          {hasScreenshot ? <TabsTrigger value="screenshot">Screenshot</TabsTrigger> : null}
          <TabsTrigger value="headers">
            Headers <Count n={headerEntries.length} />
          </TabsTrigger>
          <TabsTrigger value="cookies">
            Cookies <Count n={cookies.length} />
          </TabsTrigger>
          <TabsTrigger value="network">Network</TabsTrigger>
          <TabsTrigger value="timing">Timing</TabsTrigger>
          <TabsTrigger value="debug">Debug</TabsTrigger>
          <TabsTrigger value="code">Code</TabsTrigger>
        </TabsList>

        <TabsContent value="preview">
          {!hasContent ? (
            <NoBody isHead={isHead} />
          ) : html ? (
            <div className="grid gap-2">
              <iframe title="Response preview (sandboxed)" sandbox="" srcDoc={content} referrerPolicy="no-referrer" className="h-[560px] w-full rounded-lg border border-border bg-white" />
              <p className="text-xs text-fg-subtle">Rendered in a fully sandboxed frame: scripts are disabled and relative assets may not load.</p>
            </div>
          ) : jsonValue.ok ? (
            <JsonBlock value={jsonValue.value} />
          ) : (
            <TextBlock text={content} />
          )}
        </TabsContent>

        <TabsContent value="html">{!hasContent ? <NoBody isHead={isHead} /> : <SourceBlock text={content} lang={html ? "html" : "text"} />}</TabsContent>

        <TabsContent value="text">{!textValue ? <NoBody isHead={isHead} label="No text content." /> : <TextBlock text={textValue} />}</TabsContent>

        {hasMarkdown ? (
          <TabsContent value="markdown">
            {!r.markdown ? <NoBody isHead={isHead} label="No Markdown content." /> : <TextBlock text={r.markdown} />}
            <p className="mt-2 text-xs text-fg-subtle">Main content first, navigation and boilerplate removed. Shown as plain text.</p>
          </TabsContent>
        ) : null}

        {links ? (
          <TabsContent value="links">
            <div className="rounded-lg border border-border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>URL</TableHead>
                    <TableHead>Text</TableHead>
                    <TableHead>Scope</TableHead>
                    <TableHead>Rel</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {links.length === 0 ? <TableEmpty colSpan={4}>No hyperlinks found in the page.</TableEmpty> : null}
                  {links.slice(0, 500).map((l, i) => (
                    <TableRow key={`${l.url}-${i}`}>
                      <TableCell className="max-w-[22rem] truncate font-mono text-[12px]" title={l.url}>
                        <a href={l.url} target="_blank" rel="noreferrer noopener nofollow" className="text-accent underline-offset-4 hover:underline">
                          {l.url}
                        </a>
                      </TableCell>
                      <TableCell className="max-w-[14rem] truncate text-[12.5px] text-fg-muted" title={l.text}>
                        {l.text || <span className="text-fg-subtle">—</span>}
                      </TableCell>
                      <TableCell>
                        <Badge variant={l.internal ? "default" : "outline"}>{l.internal ? "internal" : "external"}</Badge>
                      </TableCell>
                      <TableCell className="text-[12px] text-fg-muted">{l.nofollow ? "nofollow" : "—"}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
            {links.length > 500 ? <p className="mt-2 text-xs text-fg-muted">Showing the first 500 of {links.length.toLocaleString("en-US")} links.</p> : null}
          </TabsContent>
        ) : null}

        {hasScreenshot ? (
          <TabsContent value="screenshot">
            <div className="grid gap-2">
              {/* eslint-disable-next-line @next/next/no-img-element -- data URL from the API, not an optimisable asset */}
              <img src={`data:image/png;base64,${r.screenshot}`} alt="Screenshot of the rendered page" className="w-full rounded-lg border border-border bg-white" />
              <p className="text-xs text-fg-subtle">PNG captured after the page settled in the managed browser.</p>
            </div>
          </TabsContent>
        ) : null}

        <TabsContent value="json">
          {jsonValue.ok ? (
            <JsonBlock value={jsonValue.value} />
          ) : (
            <EmptyState compact title="Not JSON" description={hasContent ? "The response body could not be parsed as JSON. Set Output format to json to have the API parse it for you." : isHead ? "HEAD requests return headers only." : "The response had no body."} />
          )}
        </TabsContent>

        <TabsContent value="headers">
          <div className="rounded-lg border border-border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-[36%]">Header</TableHead>
                  <TableHead>Value</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {headerEntries.length === 0 ? <TableEmpty colSpan={2}>No response headers.</TableEmpty> : null}
                {headerEntries.map(([k, v]) => (
                  <TableRow key={k}>
                    <TableCell className="font-mono text-[12.5px] text-fg-muted">{k}</TableCell>
                    <TableCell className="break-all font-mono text-[12.5px]">{v}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </TabsContent>

        <TabsContent value="cookies">
          <div className="rounded-lg border border-border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Name</TableHead>
                  <TableHead>Value</TableHead>
                  <TableHead>Domain</TableHead>
                  <TableHead>Path</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {cookies.length === 0 ? <TableEmpty colSpan={4}>The target set no cookies.</TableEmpty> : null}
                {cookies.map((c, i) => (
                  <TableRow key={`${c.name}-${i}`}>
                    <TableCell className="font-mono text-[12.5px]">{c.name}</TableCell>
                    <TableCell className="max-w-[24rem] truncate font-mono text-[12.5px]" title={c.value}>
                      {c.value}
                    </TableCell>
                    <TableCell className="font-mono text-[12.5px] text-fg-muted">{c.domain ?? "—"}</TableCell>
                    <TableCell className="font-mono text-[12.5px] text-fg-muted">{c.path ?? "—"}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </TabsContent>

        <TabsContent value="network">
          <NetworkTab result={r} request={request} />
        </TabsContent>

        <TabsContent value="timing">
          <TimingBars timing={meta.timing} totalFallbackMs={meta.duration_ms ?? elapsedMs} />
        </TabsContent>

        <TabsContent value="debug">
          <CodeBlock code={debugJson} lang="json" title="response.json" maxHeight={560} />
        </TabsContent>

        <TabsContent value="code">{code}</TabsContent>
      </Tabs>
    </div>
  );
}

function PageCard({ page }: { page: NonNullable<FetchResponseBody["page"]> }) {
  const rows: Array<{ label: string; value: string | null; mono?: boolean }> = [
    { label: "Title", value: page.title },
    { label: "Description", value: page.description },
    { label: "Canonical", value: page.canonical, mono: true },
    { label: "Language", value: page.lang, mono: true },
    { label: "Links", value: Number.isFinite(page.links_count) ? page.links_count.toLocaleString("en-US") : null, mono: true },
  ];
  const og = Object.entries(page.og ?? {});
  return (
    <section className="rounded-lg border border-border px-4 py-3" aria-label="Page metadata">
      <h2 className="text-[11.5px] font-semibold uppercase tracking-wide text-fg-subtle">Page</h2>
      <dl className="mt-2 grid gap-x-6 gap-y-1.5 text-[12.5px] sm:grid-cols-[auto_minmax(0,1fr)]">
        {rows.map((row) => (
          <React.Fragment key={row.label}>
            <dt className="text-fg-subtle">{row.label}</dt>
            <dd className={cn("min-w-0 break-words", row.mono && "font-mono", !row.value && "text-fg-subtle")} title={row.value ?? undefined}>
              {row.value || "—"}
            </dd>
          </React.Fragment>
        ))}
      </dl>
      {og.length ? (
        <details className="mt-2 text-xs text-fg-muted">
          <summary className="cursor-pointer select-none text-fg-subtle hover:text-fg">Open Graph ({og.length})</summary>
          <dl className="mt-1.5 grid gap-x-4 gap-y-1 sm:grid-cols-[auto_minmax(0,1fr)]">
            {og.map(([k, v]) => (
              <React.Fragment key={k}>
                <dt className="font-mono text-fg-subtle">{k}</dt>
                <dd className="min-w-0 break-words">{v}</dd>
              </React.Fragment>
            ))}
          </dl>
        </details>
      ) : null}
    </section>
  );
}

function Metric({ label, value }: { label: string; value: string }) {
  return (
    <span className="inline-flex items-baseline gap-1 text-[12.5px]">
      <span className="text-fg-subtle">{label}</span>
      <span className="font-mono tabular text-fg">{value}</span>
    </span>
  );
}

function Count({ n }: { n: number }) {
  return <span className="rounded-full bg-bg-muted px-1.5 text-[10.5px] font-medium tabular text-fg-muted">{n}</span>;
}

function NoBody({ isHead, label }: { isHead: boolean; label?: string }) {
  return <EmptyState compact title={label ?? "No body"} description={isHead ? "HEAD requests return headers only — check the Headers tab." : "The response had an empty body."} />;
}

function SourceBlock({ text, lang }: { text: string; lang: "html" | "text" }) {
  const t = truncateForDisplay(text);
  return (
    <div className="grid gap-2">
      {t.truncated ? (
        <p className="text-xs text-fg-muted">
          Showing first 200 KB of {formatBytes(t.total)}. Use the API or SDK to retrieve the full body.
        </p>
      ) : null}
      <CodeBlock code={t.text} lang={lang} lineNumbers maxHeight={560} />
    </div>
  );
}

function TextBlock({ text }: { text: string }) {
  const t = truncateForDisplay(text);
  return (
    <div className="grid gap-2">
      {t.truncated ? <p className="text-xs text-fg-muted">Showing first 200 KB of {formatBytes(t.total)}.</p> : null}
      <pre className="max-h-[560px] overflow-auto whitespace-pre-wrap break-words rounded-lg border border-border bg-bg-subtle p-4 font-mono text-[12.5px] leading-relaxed scrollbar-thin">{t.text}</pre>
    </div>
  );
}

function JsonBlock({ value }: { value: unknown }) {
  const pretty = React.useMemo(() => {
    try {
      return JSON.stringify(value, null, 2) ?? "";
    } catch {
      return String(value);
    }
  }, [value]);
  const t = truncateForDisplay(pretty);
  return (
    <div className="grid gap-2">
      {t.truncated ? <p className="text-xs text-fg-muted">Showing first 200 KB of {formatBytes(t.total)}.</p> : null}
      <CodeBlock code={t.text} lang="json" maxHeight={560} />
    </div>
  );
}

function NetworkTab({ result: r, request }: { result: FetchResponseBody; request: FetchRequestInput }) {
  const m = r.metadata;
  const debugAttempts = m.debug?.attempts;
  const geo = [request.region, request.city].filter(Boolean).join(" / ");
  const rows: Array<{ label: string; value: string; muted?: boolean }> = [
    { label: "Requested network", value: request.network ?? "auto" },
    { label: "Network used", value: m.network },
    { label: "Mode", value: m.mode === "browser" ? "browser (rendered)" : "http" },
    { label: "Country", value: m.country ?? "any" },
    { label: "Region / city", value: geo || "—", muted: !geo },
    { label: "Attempts", value: String(m.attempts) },
    { label: "Session", value: m.session ?? "none (fresh IP)", muted: !m.session },
    { label: "Cached", value: m.cached ? "yes" : "no" },
  ];
  return (
    <div className="grid gap-5">
      <dl className="grid grid-cols-1 gap-x-6 gap-y-2 text-[13px] sm:grid-cols-2">
        {rows.map((row) => (
          <div key={row.label} className="flex items-center justify-between gap-3 border-b border-border py-1.5">
            <dt className="text-fg-muted">{row.label}</dt>
            <dd className={cn("text-right font-mono tabular", row.muted && "font-sans text-fg-subtle")}>{row.value}</dd>
          </div>
        ))}
      </dl>

      {debugAttempts && debugAttempts.length ? (
        <div className="grid gap-2">
          <h3 className="text-[12.5px] font-semibold uppercase tracking-wide text-fg-subtle">Attempts</h3>
          <div className="rounded-lg border border-border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>#</TableHead>
                  <TableHead>Route</TableHead>
                  <TableHead>Network</TableHead>
                  <TableHead>Mode</TableHead>
                  <TableHead>Country</TableHead>
                  <TableHead>Outcome</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead className="text-right">Duration</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {debugAttempts.map((a, i) => (
                  <TableRow key={i}>
                    <TableCell className="font-mono tabular text-fg-muted">{i + 1}</TableCell>
                    <TableCell className="font-mono text-[12.5px]">{a.provider}</TableCell>
                    <TableCell className="font-mono text-[12.5px]">{a.network}</TableCell>
                    <TableCell className="font-mono text-[12.5px]">{a.mode ?? "http"}</TableCell>
                    <TableCell className="font-mono text-[12.5px]">{a.country ?? "any"}</TableCell>
                    <TableCell>
                      <Badge variant={a.outcome === "success" ? "success" : a.outcome === "blocked" ? "warning" : "danger"} dot>
                        {a.outcome}
                      </Badge>
                      {a.block_reason ? (
                        <span className="ml-2 font-mono text-[11.5px] text-fg-muted" title="Block reason">
                          {a.block_reason}
                        </span>
                      ) : null}
                      {a.error ? <span className="ml-2 text-xs text-fg-muted">{a.error}</span> : null}
                    </TableCell>
                    <TableCell className="font-mono tabular">{a.status ?? "—"}</TableCell>
                    <TableCell className="text-right font-mono tabular">{formatMs(a.duration_ms)}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </div>
      ) : (
        <p className="text-xs text-fg-subtle">Turn on <span className="font-medium text-fg-muted">Debug</span> in the request options to see each routing attempt.</p>
      )}

      <div className={cn("rounded-lg border border-border bg-bg-subtle/50 p-4 text-[13px] leading-relaxed text-fg-muted")}>
        <p className="font-medium text-fg">How routing works</p>
        <p className="mt-1">
          In <span className="font-mono">auto</span> mode Fetcha scores every available route for this domain — historical success (35%), cost (20%), latency (15%), network health (15%), geography (10%) and session stability (5%) — starts with the cheapest network likely to succeed and escalates to premium networks when the target blocks or times out. Each retry uses a new IP. When an attempt is blocked by a JavaScript challenge and browser fallback is on, the next attempt is rendered in the managed browser. Requesting a specific network pins the first attempt to that class.
        </p>
      </div>
    </div>
  );
}