"use client";

import Link from "next/link";
import { useMemo, useState } from "react";
import { Badge, Button, EmptyState, LineChart, RelativeTime, SkeletonBlock, SkeletonRows, Tab, TabList, TabPanel, Tabs, Table, TBody, Td, Th, THead, Tr } from "@/components/ui";
import { cn } from "@/components/ui/cn";
import { DASH, fmtDateTimeUtc, fmtInt } from "@/lib/format";
import { SOURCE_KIND_LABEL } from "@/lib/labels";
import type { AdminRun, ConnectorAdminDetail } from "@/lib/admin-api";
import { PauseResumeButton, RunForm, ScheduleEditor } from "./connector-actions";
import { Code, Disclosure, durationBetween, ErrorNote, ExtLink, fmtMs, fmtPct01, HealthDot, JsonView, KV, Mono, Panel, RefreshButton, RunStatusBadge, Stat } from "./primitives";
import { AdminPageHeader } from "./shell";
import { useAdminQuery } from "./use-admin-query";
import { toYaml } from "./yaml";

function n(v: unknown): number | null {
  return typeof v === "number" && Number.isFinite(v) ? v : null;
}

function RunLog({ id }: { id: string }) {
  const q = useAdminQuery<AdminRun>(`runs/${encodeURIComponent(id)}`);
  if (q.loading) return <SkeletonRows rows={3} />;
  if (q.error || !q.data) return <ErrorNote error={q.error ?? "not found"} onRetry={() => void q.refresh()} />;
  const log = q.data.log ?? [];
  return (
    <div className="space-y-2">
      <JsonView value={q.data.stats} maxHeight={200} collapsible />
      {log.length === 0 ? (
        <p className="text-[12px] text-ink-4">No log lines recorded.</p>
      ) : (
        <div className="max-h-[360px] overflow-auto rounded-xs border border-hair bg-paper font-mono text-[11.5px] leading-[1.5]">
          {log.map((l, i) => (
            <div key={i} className={cn("flex gap-2 border-b border-hair/60 px-2 py-0.5 last:border-0", l.level === "error" && "bg-danger/10 text-danger", l.level === "warn" && "bg-warn/10 text-warn")}>
              <span className="shrink-0 text-ink-4">{l.t ? String(l.t).slice(11, 19) : ""}</span>
              <span className="w-10 shrink-0 text-ink-3">{l.level ?? ""}</span>
              <span className="min-w-0 break-all text-ink-2">{String(l.msg ?? JSON.stringify(l))}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export function ConnectorDetailView({ id }: { id: string }) {
  const q = useAdminQuery<ConnectorAdminDetail>(`connectors/${encodeURIComponent(id)}`, { refreshMs: 30_000, timeoutMs: 30_000 });
  const [runOpen, setRunOpen] = useState(false);
  const d = q.data;
  const h = d?.health;
  const yaml = useMemo(() => (d ? toYaml(d.config) : ""), [d]);
  const series = useMemo(() => {
    if (!d) return [];
    const runs = [...d.runs].reverse().filter((r) => r.startedAt);
    const label = (iso: string | null) => (iso ? iso.slice(5, 16).replace("T", " ") : "");
    const pick = (k: string) => runs.map((r) => ({ x: label(r.startedAt), y: n((r.stats ?? {})[k]) }));
    return [
      { name: "fetched", data: pick("fetched"), color: "var(--ink-2)" },
      { name: "changed", data: pick("changed"), color: "var(--accent)" },
      { name: "failed", data: pick("failed"), color: "var(--danger)" },
    ];
  }, [d]);

  if (q.error && !d) {
    return (
      <div>
        <AdminPageHeader eyebrow="Connector" title={id} />
        <ErrorNote error={q.status === 404 ? `Connector "${id}" not found` : q.error} onRetry={() => void q.refresh()} />
        <Button href="/admin/connectors" className="mt-3" size="sm">
          Back to connectors
        </Button>
      </div>
    );
  }

  return (
    <div>
      <AdminPageHeader
        eyebrow={
          <Link href="/admin/connectors" className="hover:text-ink">
            Connectors
          </Link>
        }
        title={
          <span className="inline-flex items-center gap-2">
            {h && <HealthDot health={h.lastStatus === "running" ? "running" : h.health} size={10} />}
            <span className="font-mono">{id}</span>
          </span>
        }
        description={
          h ? (
            <span className="inline-flex flex-wrap items-center gap-2">
              {h.sourceName} · <ExtLink href={`https://${h.domain}`}>{h.domain}</ExtLink>
              <Badge size="xs">{SOURCE_KIND_LABEL[h.kind] ?? h.kind}</Badge>
              <Badge size="xs" mono tone="outline">
                {h.mode}
              </Badge>
              <Badge size="xs" mono tone="outline">
                parser {h.parserVersion}
              </Badge>
              {d?.paused && (
                <Badge size="xs" tone="warn">
                  paused
                </Badge>
              )}
              {!h.enabled && !d?.paused && <Badge size="xs">disabled</Badge>}
            </span>
          ) : undefined
        }
        aside={
          <>
            <RefreshButton onClick={() => void q.refresh()} busy={q.refreshing} updatedAt={q.updatedAt} />
            {h && (
              <>
                <PauseResumeButton connector={h} size="sm" onChanged={() => void q.refresh()} />
                <Button size="sm" href={`/admin/documents?connector=${encodeURIComponent(id)}`}>
                  Documents
                </Button>
                <Button size="sm" href={`/admin/devtool?id=${encodeURIComponent(id)}&step=4`}>
                  Open in dev tool
                </Button>
                <Button size="sm" variant="accent" onClick={() => setRunOpen((v) => !v)}>
                  Run…
                </Button>
              </>
            )}
          </>
        }
      />
      {runOpen && h && (
        <Panel title="Run connector" className="mb-3">
          <RunForm connector={h} onDone={() => { setRunOpen(false); void q.refresh(); }} />
        </Panel>
      )}
      {d?.lastError && <ErrorNote error={`Last error: ${d.lastError}`} className="mb-3" />}

      {!h ? (
        <SkeletonBlock className="mb-3 h-16" />
      ) : (
        <div className="mb-4 grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-8">
          <Stat label="Discovered" value={fmtInt(h.discovered)} />
          <Stat label="Fetched" value={fmtInt(h.fetched)} />
          <Stat label="Changed" value={fmtInt(h.changed)} tone={h.changed > 0 ? "ok" : undefined} />
          <Stat label="Failed" value={fmtInt(h.failed)} tone={h.failed > 0 ? "danger" : undefined} />
          <Stat label="Extraction" value={fmtPct01(h.extractionSuccess)} tone={h.extractionSuccess != null && h.extractionSuccess < 0.7 ? "warn" : undefined} />
          <Stat label="Avg response" value={h.avgResponseMs != null ? fmtMs(h.avgResponseMs) : DASH} />
          <Stat label="Credits (7 d)" value={fmtInt(h.cost.credits)} note={`${fmtInt(h.cost.direct)} direct · ${fmtInt(h.cost.firecrawl)} fc · ${fmtInt(h.cost.scrapfly)} sf`} />
          <Stat label="Next run" value={h.nextRunAt ? <RelativeTime iso={h.nextRunAt} /> : DASH} note={h.lastRunAt ? <span>last <RelativeTime iso={h.lastRunAt} /></span> : "never run"} />
        </div>
      )}

      <div className="grid gap-3 lg:grid-cols-3">
        <Panel title="Health history" description="Per run — fetched, changed, failed (last 30 runs)" className="lg:col-span-2">
          {!d ? <SkeletonBlock className="h-[180px]" /> : series[0]!.data.length < 2 ? <EmptyState compact title="Not enough runs to chart" /> : <LineChart series={series} height={180} ariaLabel="Run history" />}
        </Panel>
        <Panel title="Cost & fetchers" description="From ClickHouse crawl_log over 7 days (falls back to run stats)">
          {!h ? (
            <SkeletonRows rows={4} />
          ) : (
            <KV
              items={[
                { k: "Direct requests", v: fmtInt(h.cost.direct) },
                { k: "Firecrawl requests", v: fmtInt(h.cost.firecrawl) },
                { k: "Scrapfly requests", v: fmtInt(h.cost.scrapfly) },
                { k: "Premium credits", v: <span className={cn(h.cost.credits > 0 && "text-accent")}>{fmtInt(h.cost.credits)}</span> },
                { k: "Fetch level", v: <Mono>{String((d?.config.fetch as { level?: number } | undefined)?.level ?? 1)} → max {String((d?.config.fetch as { maxLevel?: number } | undefined)?.maxLevel ?? 2)}</Mono> },
                { k: "Max credits / run", v: fmtInt((d?.config.fetch as { maxCreditsPerRun?: number } | undefined)?.maxCreditsPerRun ?? null) },
                { k: "Created", v: d?.createdAt ? fmtDateTimeUtc(d.createdAt) : DASH },
                { k: "Updated", v: d?.updatedAt ? fmtDateTimeUtc(d.updatedAt) : DASH },
              ]}
            />
          )}
        </Panel>
      </div>

      <Tabs defaultValue="runs" className="mt-4">
        <TabList label="Connector sections">
          <Tab value="runs" count={d?.runs.length ?? null}>
            Runs
          </Tab>
          <Tab value="config">Config</Tab>
          <Tab value="schedule">Schedule</Tab>
          <Tab value="documents" count={d ? d.documentsByPageType.reduce((a, x) => a + x.count, 0) : null}>
            Documents
          </Tab>
          <Tab value="errors" count={d?.errorSamples.length ?? null}>
            Errors
          </Tab>
        </TabList>

        <TabPanel value="runs" className="pt-3">
          {!d ? (
            <SkeletonRows rows={5} />
          ) : d.runs.length === 0 ? (
            <EmptyState compact title="No runs yet" description="Use Run… to enqueue a discover / crawl / full job." />
          ) : (
            <div className="space-y-1.5">
              {d.runs.map((r) => {
                const s = r.stats ?? {};
                return (
                  <Disclosure
                    key={r.id}
                    summary={
                      <span className="flex flex-wrap items-center gap-x-3 gap-y-1">
                        <RunStatusBadge status={r.status} />
                        <Badge size="xs" mono>
                          {r.task}
                        </Badge>
                        <span className="text-ink-3">
                          <RelativeTime iso={r.startedAt} />
                        </span>
                        <span className="figure text-ink-3">{fmtMs(durationBetween(r.startedAt, r.finishedAt))}</span>
                        <span className="figure text-ink-2">
                          {fmtInt(n(s.fetched))} fetched · {fmtInt(n(s.changed))} changed · {fmtInt(n(s.entities))} entities · <span className={cn((n(s.failed) ?? 0) > 0 && "text-danger")}>{fmtInt(n(s.failed))} failed</span>
                          {n(s.credits) ? <span className="text-accent"> · {fmtInt(n(s.credits))} cr</span> : null}
                        </span>
                        <Link href={`/admin/runs/${encodeURIComponent(r.id)}`} className="ml-auto hidden font-mono text-[11.5px] text-ink-3 hover:text-accent hover:underline sm:inline" title="Run detail: changes written, rollback">
                          {r.id} →
                        </Link>
                        {r.error && <span className="w-full truncate text-[11.5px] text-danger">{r.error}</span>}
                      </span>
                    }
                  >
                    <RunLog id={r.id} />
                  </Disclosure>
                );
              })}
            </div>
          )}
        </TabPanel>

        <TabPanel value="config" className="pt-3">
          {!d ? (
            <SkeletonBlock className="h-40" />
          ) : (
            <div className="space-y-2">
              <div className="flex flex-wrap items-center justify-between gap-2 text-[12px] text-ink-3">
                <span>Config stored in the connectors table (synced from config/connectors/{id}.yaml). Read-only here — edit in the dev tool.</span>
                <Button size="xs" href={`/admin/devtool?id=${encodeURIComponent(id)}&step=4`}>
                  Edit YAML in dev tool
                </Button>
              </div>
              <Code text={yaml} lang="yaml" maxHeight={640} />
            </div>
          )}
        </TabPanel>

        <TabPanel value="schedule" className="pt-3">{h ? <ScheduleEditor key={JSON.stringify(h.schedule)} connector={h} onSaved={() => void q.refresh()} /> : <SkeletonRows rows={2} />}</TabPanel>

        <TabPanel value="documents" className="pt-3">
          {!d ? (
            <SkeletonRows rows={3} />
          ) : d.documentsByPageType.length === 0 ? (
            <EmptyState compact title="No documents registered" />
          ) : (
            <Table className="text-[12.5px]">
              <THead>
                <Tr>
                  <Th>Page type</Th>
                  <Th numeric>Documents</Th>
                  <Th numeric>Changed</Th>
                  <Th numeric>Failed</Th>
                  <Th numeric>Quarantined</Th>
                </Tr>
              </THead>
              <TBody>
                {d.documentsByPageType.map((x) => (
                  <Tr key={x.pageType}>
                    <Td primary>
                      <Link href={`/admin/documents?connector=${encodeURIComponent(id)}&pageType=${encodeURIComponent(x.pageType)}`} className="font-mono text-[12.5px] text-ink hover:text-accent hover:underline">
                        {x.pageType}
                      </Link>
                    </Td>
                    <Td label="Documents" numeric>
                      {fmtInt(x.count)}
                    </Td>
                    <Td label="Changed" numeric>
                      {fmtInt(x.changed)}
                    </Td>
                    <Td label="Failed" numeric className={cn(x.failed > 0 && "text-danger")}>
                      {fmtInt(x.failed)}
                    </Td>
                    <Td label="Quarantined" numeric className={cn(x.quarantined > 0 && "text-warn")}>
                      {fmtInt(x.quarantined)}
                    </Td>
                  </Tr>
                ))}
              </TBody>
            </Table>
          )}
        </TabPanel>

        <TabPanel value="errors" className="pt-3">
          {!d ? (
            <SkeletonRows rows={3} />
          ) : d.errorSamples.length === 0 ? (
            <EmptyState compact title="No document errors" />
          ) : (
            <Table className="text-[12.5px]">
              <THead>
                <Tr>
                  <Th>URL</Th>
                  <Th>Error</Th>
                  <Th numeric>HTTP</Th>
                  <Th numeric>Count</Th>
                  <Th>Last checked</Th>
                </Tr>
              </THead>
              <TBody>
                {d.errorSamples.map((e) => (
                  <Tr key={e.id}>
                    <Td primary>
                      <Link href={`/admin/documents/${encodeURIComponent(e.id)}`} className="block max-w-[420px] truncate font-mono text-[12px] text-ink hover:text-accent hover:underline" title={e.url}>
                        {e.url.replace(/^https?:\/\//, "")}
                      </Link>
                    </Td>
                    <Td label="Error" className="max-w-[360px] break-words text-danger">
                      {e.error ?? DASH}
                    </Td>
                    <Td label="HTTP" numeric>
                      {e.statusCode ?? DASH}
                    </Td>
                    <Td label="Count" numeric>
                      {fmtInt(e.errorCount)}
                    </Td>
                    <Td label="Last checked" muted>
                      <RelativeTime iso={e.lastChecked} />
                    </Td>
                  </Tr>
                ))}
              </TBody>
            </Table>
          )}
        </TabPanel>
      </Tabs>
    </div>
  );
}