"use client";

import { useMemo, useState } from "react";
import { Badge, Button, EmptyState, SearchInput, Tab, TabList, TabPanel, Tabs } from "@/components/ui";
import { cn } from "@/components/ui/cn";
import { DASH, fmtInt } from "@/lib/format";
import { adminFetch, type DevtoolFetchResult } from "@/lib/admin-api";
import { htmlToTextClient, srcDocFor } from "../document-inspect";
import { Checkbox, Code, countMatches, ErrorNote, ExtLink, Field, fmtBytes, fmtMs, Input, JsonView, KV, LevelBadge, Mono, Panel, Select, Spinner } from "../primitives";
import { useToast } from "../toast";
import { domainOf, slugify, type DevtoolShared } from "./state";

const SOURCE_CAP = 300_000;

export function StepFetch({ s }: { s: DevtoolShared }) {
  const { draft, update, fetchResult: r, setFetchResult } = s;
  const f = draft.fetch;
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [search, setSearch] = useState("");
  const [tab, setTab] = useState("rendered");
  const toast = useToast();

  const run = async () => {
    if (!f.url.trim()) return setError("Enter a URL");
    setBusy(true);
    setError(null);
    const res = await adminFetch<DevtoolFetchResult>("devtool/fetch", { method: "POST", body: { url: f.url.trim(), level: f.level, maxLevel: Math.max(f.level, f.maxLevel), renderJs: f.renderJs || undefined, userAgent: f.userAgent, waitForSelector: f.waitForSelector.trim() || undefined }, timeoutMs: 120_000 });
    setBusy(false);
    if (!res.ok) {
      setError(res.error);
      toast({ tone: "danger", title: "Fetch failed", description: res.error });
      return;
    }
    setFetchResult(res.data);
    s.setPreviewResult(null);
    const d = domainOf(res.data.finalUrl || f.url);
    update((cur) => ({ ...cur, meta: { ...cur.meta, domain: cur.meta.domain || d, id: cur.meta.id || slugify(d), name: cur.meta.name || d.replace(/^www\./, ""), homepage: cur.meta.homepage || (d ? `https://${d}/` : "") } }));
    if (res.data.error) toast({ tone: "warn", title: `Fetched with error (HTML ${res.data.status})`, description: res.data.error.message ?? JSON.stringify(res.data.error).slice(0, 160) });
    else toast({ tone: "ok", title: `Fetched ${res.data.status} via ${res.data.fetcher} (L${res.data.level})`, description: `${fmtBytes(res.data.bytes)} in ${fmtMs(res.data.durationMs)}${res.data.credits ? ` · ${res.data.credits} credits` : ""}` });
  };

  const html = r?.html ?? "";
  const isHtml = /html|xml/i.test(r?.contentType ?? "") || /<html/i.test(html.slice(0, 2000));
  const finalUrl = r?.finalUrl ?? null;
  const rText = r?.text ?? "";
  const srcDoc = useMemo(() => (isHtml && html ? srcDocFor(html, finalUrl) : ""), [html, isHtml, finalUrl]);
  const text = useMemo(() => (rText.length > 0 ? rText : html ? htmlToTextClient(html) : ""), [rText, html]);
  const cls = (r?.classification ?? null) as Record<string, unknown> | null;

  return (
    <div className="space-y-3">
      <Panel title="1 · Source URL and fetch options" description="Fetched through the same escalation stack as the worker (L1 direct → L2 browser identity → L3 Firecrawl → L4 Scrapfly). Robots and SSRF policies apply; premium levels spend credits.">
        <div className="grid gap-3 lg:grid-cols-[1fr_120px_120px_150px_auto] lg:items-end">
          <Field label="URL" error={error}>
            <Input value={f.url} onChange={(e) => update({ fetch: { ...f, url: e.target.value } })} onKeyDown={(e) => e.key === "Enter" && void run()} placeholder="https://www.example.com/data-centers/…" mono autoFocus={!f.url} />
          </Field>
          <Field label="Start level">
            <Select value={f.level} onChange={(e) => update({ fetch: { ...f, level: Number(e.target.value) } })}>
              <option value={1}>L1 direct</option>
              <option value={2}>L2 browser UA</option>
              <option value={3}>L3 Firecrawl</option>
              <option value={4}>L4 Scrapfly</option>
            </Select>
          </Field>
          <Field label="Max level">
            <Select value={f.maxLevel} onChange={(e) => update({ fetch: { ...f, maxLevel: Number(e.target.value) } })}>
              <option value={1}>L1</option>
              <option value={2}>L2</option>
              <option value={3}>L3</option>
              <option value={4}>L4</option>
            </Select>
          </Field>
          <Field label="User agent">
            <Select value={f.userAgent} onChange={(e) => update({ fetch: { ...f, userAgent: e.target.value as "bot" | "browser" } })}>
              <option value="bot">DataCenterIndexBot</option>
              <option value="browser">Browser (Safari)</option>
            </Select>
          </Field>
          <Button variant="accent" onClick={() => void run()} disabled={busy}>
            {busy ? <Spinner className="text-white" /> : null}
            {busy ? "Fetching…" : "Fetch sample"}
          </Button>
        </div>
        <div className="mt-2 flex flex-wrap items-end gap-3">
          <Checkbox label="render JavaScript (premium levels)" checked={f.renderJs} onChange={(e) => update({ fetch: { ...f, renderJs: e.target.checked } })} />
          <Field label="Wait for selector" className="w-[260px]" hint="premium levels only">
            <Input value={f.waitForSelector} onChange={(e) => update({ fetch: { ...f, waitForSelector: e.target.value } })} placeholder=".facility-list" mono />
          </Field>
          {f.maxLevel >= 3 && (
            <Badge tone="warn" size="sm">
              maxLevel ≥ 3 may spend Firecrawl / Scrapfly credits
            </Badge>
          )}
        </div>
      </Panel>

      {r && (
        <>
          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-8">
            <Stat label="HTTP" value={<span className={cn(r.status >= 400 && "text-danger")}>{r.status}</span>} />
            <Stat label="Fetcher" value={r.fetcher} />
            <Stat label="Level" value={<LevelBadge level={r.level} />} />
            <Stat label="Credits" value={<span className={cn(r.credits > 0 && "text-accent")}>{r.credits}</span>} />
            <Stat label="Duration" value={fmtMs(r.durationMs)} />
            <Stat label="Bytes" value={fmtBytes(r.bytes)} />
            <Stat label="Content type" value={<span className="truncate text-[12px]">{r.contentType ?? DASH}</span>} />
            <Stat label="Page type" value={<span className="text-[12px]">{cls && typeof cls.pageType === "string" ? cls.pageType : DASH}</span>} />
          </div>
          {r.error && <ErrorNote error={`Fetch error: ${r.error.message ?? JSON.stringify(r.error)}`} />}
          {r.finalUrl !== r.url && (
            <p className="text-[12px] text-ink-3">
              Redirected to <ExtLink href={r.finalUrl} />
            </p>
          )}

          <Panel title={r.title ?? "Untitled page"} description={r.description ?? undefined} padded={false}>
            <Tabs value={tab} onValueChange={setTab}>
              <div className="flex flex-col gap-2 border-b border-hair px-3 pt-1 sm:flex-row sm:items-center">
                <TabList label="Fetch result" className="border-b-0">
                  {isHtml && <Tab value="rendered">Rendered</Tab>}
                  <Tab value="source">HTML source</Tab>
                  <Tab value="text">Text</Tab>
                  <Tab value="jsonld" count={r.jsonLd.length}>
                    JSON-LD
                  </Tab>
                  <Tab value="embedded" count={r.embeddedJson.length}>
                    Embedded JSON
                  </Tab>
                  <Tab value="classification">Classification</Tab>
                  <Tab value="geo">Geo / address</Tab>
                  <Tab value="links" count={r.links.length}>
                    Links
                  </Tab>
                </TabList>
                {(tab === "source" || tab === "text") && (
                  <div className="flex items-center gap-2 pb-2 sm:ml-auto sm:pb-0">
                    <SearchInput size="sm" value={search} onChange={setSearch} placeholder="Find (e.g. MW, itemprop)" wrapperClassName="w-[240px]" />
                    {search && <span className="figure text-[11.5px] text-ink-3">{fmtInt(countMatches(tab === "source" ? html : text, search))} hits</span>}
                  </div>
                )}
              </div>
              {isHtml && (
                <TabPanel value="rendered">
                  <iframe title="Rendered sample (sandboxed, scripts stripped)" sandbox="" srcDoc={srcDoc} className="h-[65vh] w-full bg-white" />
                </TabPanel>
              )}
              <TabPanel value="source" className="p-2">
                {r.htmlTruncated && <p className="mb-1 text-[11.5px] text-warn">HTML truncated by the API at 1.5 MB.</p>}
                <Code text={html.length > SOURCE_CAP ? `${html.slice(0, SOURCE_CAP)}\n… showing first ${fmtBytes(SOURCE_CAP)} of ${fmtBytes(html.length)}` : html || "(empty body)"} lang="html" search={search} maxHeight={560} wrap />
              </TabPanel>
              <TabPanel value="text" className="p-2">
                <Code text={text.slice(0, SOURCE_CAP) || "(no text)"} lang="text" search={search} maxHeight={560} wrap />
              </TabPanel>
              <TabPanel value="jsonld" className="space-y-2 p-3">
                {r.jsonLd.length === 0 ? (
                  <EmptyState compact title="No JSON-LD objects" />
                ) : (
                  r.jsonLd.map((o, i) => {
                    const t = o && typeof o === "object" ? (o as Record<string, unknown>)["@type"] : undefined;
                    return (
                      <div key={i}>
                        <div className="mb-1 flex items-center gap-2 text-[12px] text-ink-3">
                          <Badge size="xs" mono tone="accent">
                            {Array.isArray(t) ? t.join(", ") : String(t ?? "object")}
                          </Badge>
                          <span>use rule type “JSON-LD” with this @type and a JSON path like $.address.addressLocality</span>
                        </div>
                        <JsonView value={o} maxHeight={280} />
                      </div>
                    );
                  })
                )}
              </TabPanel>
              <TabPanel value="embedded" className="space-y-2 p-3">
                {r.embeddedJson.length === 0 ? (
                  <EmptyState compact title="No embedded JSON blobs" description="Looks for __NEXT_DATA__, drupal-settings-json, application/json scripts and window.__STATE__-style assignments." />
                ) : (
                  r.embeddedJson.map((b) => (
                    <div key={b.id}>
                      <div className="mb-1 text-[12px] text-ink-3">
                        <Mono className="text-ink">{b.id}</Mono> · preview (2 kB)
                      </div>
                      <pre className="max-h-[240px] overflow-auto rounded-xs border border-hair bg-paper px-2.5 py-2 font-mono text-[11.5px] leading-[1.5] text-ink-2">{b.preview}</pre>
                    </div>
                  ))
                )}
              </TabPanel>
              <TabPanel value="classification" className="p-3">
                <div className="grid gap-3 lg:grid-cols-2">
                  <KV items={[{ k: "Title", v: r.title }, { k: "Description", v: r.description }, { k: "Published", v: r.published }, { k: "Final URL", v: <ExtLink href={r.finalUrl} /> }, { k: "Attempts", v: r.attempts != null ? <Mono>{JSON.stringify(r.attempts)}</Mono> : DASH }]} />
                  <JsonView value={r.classification} maxHeight={260} />
                </div>
              </TabPanel>
              <TabPanel value="geo" className="p-3">
                <div className="grid gap-3 lg:grid-cols-2">
                  <div>
                    <div className="label-caps mb-1">Detected geo</div>
                    {r.geo ? <JsonView value={r.geo} maxHeight={220} /> : <p className="text-[12.5px] text-ink-4">No coordinates detected (geo meta tags, JSON-LD GeoCoordinates, map embeds).</p>}
                  </div>
                  <div>
                    <div className="label-caps mb-1">Detected address</div>
                    {r.address ? <JsonView value={r.address} maxHeight={220} /> : <p className="text-[12.5px] text-ink-4">No postal address detected.</p>}
                  </div>
                </div>
              </TabPanel>
              <TabPanel value="links" className="p-0">
                {r.links.length === 0 ? (
                  <EmptyState compact title="No links" />
                ) : (
                  <ul className="max-h-[480px] divide-y divide-hair overflow-auto">
                    {r.links.map((l) => (
                      <li key={l.href} className="flex items-center gap-2 px-3 py-1.5 text-[12px]">
                        <span className="w-[200px] shrink-0 truncate text-ink-2" title={l.text}>
                          {l.text || <span className="text-ink-4">(no text)</span>}
                        </span>
                        <ExtLink href={l.href} className="min-w-0 flex-1" />
                        <button type="button" className="shrink-0 text-[11.5px] text-ink-3 hover:text-accent" onClick={() => update({ fetch: { ...f, url: l.href } })}>
                          use as URL
                        </button>
                        <button type="button" className="shrink-0 text-[11.5px] text-ink-3 hover:text-accent" onClick={() => update((d) => ({ ...d, sampleUrls: d.sampleUrls.includes(l.href) ? d.sampleUrls : `${d.sampleUrls.trim()}${d.sampleUrls.trim() ? "\n" : ""}${l.href}` }))}>
                          + sample
                        </button>
                      </li>
                    ))}
                  </ul>
                )}
              </TabPanel>
            </Tabs>
          </Panel>
        </>
      )}
    </div>
  );
}

function Stat({ label, value }: { label: string; value: React.ReactNode }) {
  return (
    <div className="min-w-0 rounded-sm border border-hair bg-surface px-2.5 py-1.5">
      <div className="label-caps">{label}</div>
      <div className="figure truncate text-[14px] text-ink">{value}</div>
    </div>
  );
}