"use client";

import { ChevronLeft, ChevronRight, ExternalLink, Loader2, RefreshCw } from "lucide-react";
import type { InputHTMLAttributes, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from "react";
import { useMemo, useState } from "react";
import { Badge, Button, Card, CardBody, CardHeader, type BadgeTone } from "@/components/ui";
import { cn } from "@/components/ui/cn";
import { DASH, fmtInt } from "@/lib/format";
import { collapseDiff, diffLinesLcs, yamlTokens, type YamlTokenKind } from "./yaml";

/* ------------------------------------------------------------------ formatting helpers */

export function fmtMs(ms: number | null | undefined): string {
  if (ms == null || !Number.isFinite(ms)) return DASH;
  if (ms < 1000) return `${Math.round(ms)} ms`;
  if (ms < 60_000) return `${(ms / 1000).toFixed(ms < 10_000 ? 1 : 0)} s`;
  const m = Math.floor(ms / 60_000);
  const s = Math.round((ms % 60_000) / 1000);
  return `${m} min ${s.toString().padStart(2, "0")} s`;
}

export function fmtBytes(b: number | null | undefined): string {
  if (b == null || !Number.isFinite(b)) return DASH;
  if (b < 1024) return `${b} B`;
  if (b < 1024 * 1024) return `${(b / 1024).toFixed(b < 10 * 1024 ? 1 : 0)} kB`;
  if (b < 1024 * 1024 * 1024) return `${(b / 1024 / 1024).toFixed(1)} MB`;
  return `${(b / 1024 / 1024 / 1024).toFixed(2)} GB`;
}

export function fmtPct01(v: number | null | undefined, digits = 0): string {
  if (v == null || !Number.isFinite(v)) return DASH;
  return `${(v * 100).toFixed(digits)}%`;
}

export function shortUrl(u: string | null | undefined, max = 72): string {
  if (!u) return DASH;
  const s = u.replace(/^https?:\/\//, "");
  return s.length > max ? `${s.slice(0, max - 1)}…` : s;
}

export function durationBetween(a: string | null | undefined, b: string | null | undefined): number | null {
  if (!a) return null;
  const t0 = new Date(a).getTime();
  const t1 = b ? new Date(b).getTime() : Date.now();
  if (Number.isNaN(t0) || Number.isNaN(t1)) return null;
  return Math.max(0, t1 - t0);
}

/* ------------------------------------------------------------------ status */

export type HealthKey = "ok" | "degraded" | "failing" | "paused" | "never_run" | "blocked" | "schema_change" | "no_new_content" | "quarantine" | string;
/** Spec status vocabulary (§11): HEALTHY · DEGRADED · BLOCKED · SCHEMA CHANGE · NO NEW CONTENT · FAILED · QUARANTINE (+ paused / never run / running). */
export const HEALTH: Record<string, { color: string; label: string; hollow?: boolean; tone: BadgeTone }> = {
  ok: { color: "var(--ok)", label: "HEALTHY", tone: "ok" },
  degraded: { color: "var(--warn)", label: "DEGRADED", tone: "warn" },
  blocked: { color: "var(--danger)", label: "BLOCKED", tone: "danger" },
  schema_change: { color: "var(--st-permitting)", label: "SCHEMA CHANGE", tone: "info" },
  no_new_content: { color: "var(--ink-3)", label: "NO NEW CONTENT", tone: "neutral" },
  failing: { color: "var(--danger)", label: "FAILED", tone: "danger" },
  quarantine: { color: "var(--st-construction)", label: "QUARANTINE", tone: "warn" },
  paused: { color: "var(--ink-4)", label: "PAUSED", tone: "neutral" },
  never_run: { color: "var(--ink-4)", label: "NEVER RUN", hollow: true, tone: "outline" },
  running: { color: "var(--accent)", label: "RUNNING", tone: "accent" },
};

export function HealthBadge({ health, size = "xs", className }: { health: HealthKey; size?: "xs" | "sm"; className?: string }) {
  const h = HEALTH[health] ?? { color: "var(--ink-4)", label: health.replace(/_/g, " ").toUpperCase(), tone: "outline" as BadgeTone };
  return (
    <Badge tone={h.tone} size={size} className={cn("tracking-[0.04em]", className)} title={`Health: ${h.label}`}>
      <span aria-hidden className={cn("inline-block size-[6px] shrink-0 rounded-full", health === "running" && "animate-pulse-soft")} style={{ background: h.hollow ? "transparent" : h.color, border: h.hollow ? `1.5px solid ${h.color}` : undefined }} />
      {h.label}
    </Badge>
  );
}

export function HealthDot({ health, size = 8, className, withLabel }: { health: HealthKey; size?: number; className?: string; withLabel?: boolean }) {
  const h = HEALTH[health] ?? { color: "var(--ink-4)", label: health.replace(/_/g, " ").toUpperCase(), tone: "outline" as BadgeTone };
  return (
    <span className={cn("inline-flex items-center gap-1.5", className)} title={h.label}>
      <span aria-hidden className={cn("inline-block shrink-0 rounded-full", health === "running" && "animate-pulse-soft")} style={{ width: size, height: size, background: h.hollow ? "transparent" : h.color, border: h.hollow ? `1.5px solid ${h.color}` : undefined }} />
      {withLabel ? <span className="text-[12px] text-ink-2">{h.label}</span> : <span className="sr-only">{h.label}</span>}
    </span>
  );
}

const RUN_TONE: Record<string, BadgeTone> = { ok: "ok", success: "ok", completed: "ok", running: "accent", queued: "info", pending: "info", failed: "danger", error: "danger", aborted: "warn", partial: "warn", degraded: "warn" };
export function RunStatusBadge({ status, size = "xs" }: { status: string | null | undefined; size?: "xs" | "sm" }) {
  if (!status) return <span className="text-ink-4">{DASH}</span>;
  return (
    <Badge tone={RUN_TONE[status] ?? "neutral"} size={size} mono>
      {status}
    </Badge>
  );
}

const REVIEW_TONE: Record<string, BadgeTone> = { approved: "ok", rejected: "danger", pending: "warn", auto: "neutral", auto_merged: "info", auto_created: "neutral" };
export function ReviewBadge({ status, size = "xs" }: { status: string; size?: "xs" | "sm" }) {
  return (
    <Badge tone={REVIEW_TONE[status] ?? "neutral"} size={size}>
      {status.replace(/_/g, " ")}
    </Badge>
  );
}

export function LevelBadge({ level }: { level: number | null | undefined }) {
  if (level == null) return <span className="text-ink-4">{DASH}</span>;
  const label = ["", "L1 direct", "L2 browser UA", "L3 Firecrawl", "L4 Scrapfly"][level] ?? `L${level}`;
  return (
    <Badge tone={level >= 3 ? "accent" : "outline"} size="xs" mono title={label}>
      L{level}
    </Badge>
  );
}

/* ------------------------------------------------------------------ text */

export function Mono({ children, className, title, wrap }: { children: ReactNode; className?: string; title?: string; wrap?: boolean }) {
  return (
    <span className={cn("font-mono text-[12px] text-ink-2", wrap ? "break-all" : "truncate", className)} title={title}>
      {children}
    </span>
  );
}

export function ExtLink({ href, children, className }: { href: string; children?: ReactNode; className?: string }) {
  return (
    <a href={href} target="_blank" rel="noopener noreferrer" className={cn("inline-flex min-w-0 items-center gap-1 font-mono text-[12px] text-ink-2 hover:text-accent hover:underline", className)} title={href}>
      <span className="truncate">{children ?? shortUrl(href)}</span>
      <ExternalLink className="size-3 shrink-0 text-ink-4" />
    </a>
  );
}

/** Key / value rows (definition list). */
export function KV({ items, className, cols = 1 }: { items: Array<{ k: ReactNode; v: ReactNode; title?: string } | null | false | undefined>; className?: string; cols?: 1 | 2 | 3 }) {
  return (
    <dl className={cn("grid gap-x-4 gap-y-1.5 text-[12.5px]", cols === 2 && "sm:grid-cols-2", cols === 3 && "sm:grid-cols-3", className)}>
      {items.filter(Boolean).map((it, i) => {
        const item = it as { k: ReactNode; v: ReactNode; title?: string };
        return (
          <div key={i} className="flex min-w-0 items-baseline justify-between gap-3 border-b border-hair/70 py-1 last:border-0" title={item.title}>
            <dt className="shrink-0 text-ink-3">{item.k}</dt>
            <dd className="min-w-0 truncate text-right text-ink">{item.v ?? <span className="text-ink-4">{DASH}</span>}</dd>
          </div>
        );
      })}
    </dl>
  );
}

export function Stat({ label, value, note, tone, className }: { label: ReactNode; value: ReactNode; note?: ReactNode; tone?: "ok" | "warn" | "danger"; className?: string }) {
  return (
    <div className={cn("min-w-0 border-l-2 pl-2.5", tone === "ok" ? "border-ok" : tone === "warn" ? "border-warn" : tone === "danger" ? "border-danger" : "border-hair-2", className)}>
      <div className="label-caps">{label}</div>
      <div className="figure text-[18px] leading-tight text-ink">{value}</div>
      {note && <div className="mt-0.5 text-[11.5px] text-ink-3">{note}</div>}
    </div>
  );
}

/* ------------------------------------------------------------------ JSON / code */

function jsonHighlight(json: string): ReactNode[] {
  const re = /("(?:\\u[a-fA-F0-9]{4}|\\[^u]|[^\\"])*"(?:\s*:)?|\b(?:true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g;
  const out: ReactNode[] = [];
  let last = 0;
  let m: RegExpExecArray | null;
  let i = 0;
  while ((m = re.exec(json))) {
    if (m.index > last) out.push(json.slice(last, m.index));
    const t = m[0];
    const cls = /^"/.test(t) ? (/:$/.test(t) ? "text-ink" : "text-st-operational") : /true|false|null/.test(t) ? "text-st-permitting" : "text-st-planned";
    out.push(
      <span key={i++} className={cls}>
        {t}
      </span>,
    );
    last = m.index + t.length;
  }
  if (last < json.length) out.push(json.slice(last));
  return out;
}

export function JsonView({ value, className, maxHeight = 320, collapsible }: { value: unknown; className?: string; maxHeight?: number | null; collapsible?: boolean }) {
  const [open, setOpen] = useState(!collapsible);
  const text = useMemo(() => {
    try {
      return JSON.stringify(value, null, 2) ?? "undefined";
    } catch {
      return String(value);
    }
  }, [value]);
  if (collapsible && !open) {
    return (
      <button type="button" onClick={() => setOpen(true)} className="font-mono text-[12px] text-ink-3 hover:text-ink">
        {text.length > 90 ? `${text.slice(0, 90)}…` : text} <span className="text-accent">expand</span>
      </button>
    );
  }
  return (
    <pre className={cn("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", className)} style={maxHeight ? { maxHeight } : undefined}>
      {jsonHighlight(text)}
    </pre>
  );
}

const YAML_CLS: Record<YamlTokenKind, string> = { key: "text-ink font-medium", string: "text-st-operational", number: "text-st-planned", bool: "text-st-permitting", comment: "text-ink-4 italic", punct: "text-ink-3", text: "text-ink-2", anchor: "text-accent" };

/** Line-numbered code block. `lang="yaml"` highlights; `search` highlights matches (case-insensitive). */
export function Code({ text, lang = "text", className, maxHeight = 480, search, wrap, startLine = 1 }: { text: string; lang?: "yaml" | "text" | "html"; className?: string; maxHeight?: number | null; search?: string; wrap?: boolean; startLine?: number }) {
  const lines = useMemo(() => text.split("\n"), [text]);
  const needle = search?.trim().toLowerCase() ?? "";
  const render = (line: string) => {
    if (needle) {
      const parts: ReactNode[] = [];
      let idx = 0;
      const lower = line.toLowerCase();
      let hit = lower.indexOf(needle, idx);
      let k = 0;
      while (hit >= 0) {
        if (hit > idx) parts.push(line.slice(idx, hit));
        parts.push(
          <mark key={k++} className="rounded-[1px] bg-accent/30 text-ink">
            {line.slice(hit, hit + needle.length)}
          </mark>,
        );
        idx = hit + needle.length;
        hit = lower.indexOf(needle, idx);
      }
      if (idx < line.length) parts.push(line.slice(idx));
      return parts;
    }
    if (lang === "yaml") return yamlTokens(line).map((t, i) => (
      <span key={i} className={YAML_CLS[t.kind]}>
        {t.text}
      </span>
    ));
    return line;
  };
  return (
    <div className={cn("overflow-auto rounded-xs border border-hair bg-paper", className)} style={maxHeight ? { maxHeight } : undefined}>
      <table className="w-full border-collapse font-mono text-[11.5px] leading-[1.55]">
        <tbody>
          {lines.map((l, i) => {
            const match = needle && l.toLowerCase().includes(needle);
            return (
              <tr key={i} className={cn(match && "bg-accent/5")}>
                <td className="select-none border-r border-hair px-2 text-right align-top text-ink-4 tnum" style={{ width: 1 }}>
                  {i + startLine}
                </td>
                <td className={cn("px-2.5 align-top text-ink-2", wrap ? "whitespace-pre-wrap break-all" : "whitespace-pre")}>{render(l) || " "}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

export function countMatches(text: string, needle: string): number {
  const n = needle.trim().toLowerCase();
  if (!n) return 0;
  let c = 0;
  let i = text.toLowerCase().indexOf(n);
  while (i >= 0 && c < 100_000) {
    c++;
    i = text.toLowerCase().indexOf(n, i + n.length);
  }
  return c;
}

/** Unified line diff (LCS) with collapsed context. */
export function DiffView({ before, after, context = 3, className, maxHeight = 560, labels }: { before: string; after: string; context?: number; className?: string; maxHeight?: number | null; labels?: [string, string] }) {
  const ops = useMemo(() => collapseDiff(diffLinesLcs(before, after), context), [before, after, context]);
  const added = ops.filter((o) => o.type === "add").length;
  const removed = ops.filter((o) => o.type === "del").length;
  return (
    <div className={className}>
      <div className="mb-1.5 flex flex-wrap items-center gap-2 text-[12px] text-ink-3">
        <span className="font-mono text-st-operational">+{added}</span>
        <span className="font-mono text-danger">−{removed}</span>
        {labels && (
          <span className="ml-auto truncate">
            {labels[0]} → {labels[1]}
          </span>
        )}
      </div>
      {added === 0 && removed === 0 ? (
        <div className="rounded-xs border border-hair bg-paper px-3 py-4 text-center text-[12.5px] text-ink-3">No line differences.</div>
      ) : (
        <div className="overflow-auto rounded-xs border border-hair bg-paper" style={maxHeight ? { maxHeight } : undefined}>
          <table className="w-full border-collapse font-mono text-[11.5px] leading-[1.5]">
            <tbody>
              {ops.map((o, i) =>
                o.type === "skip" ? (
                  <tr key={i} className="bg-surface-2/60 text-ink-4">
                    <td colSpan={3} className="px-2.5 py-0.5 text-center text-[11px]">
                      ··· {o.count} unchanged lines ···
                    </td>
                  </tr>
                ) : (
                  <tr key={i} className={cn(o.type === "add" && "bg-ok/10", o.type === "del" && "bg-danger/10")}>
                    <td className="select-none border-r border-hair px-1.5 text-right text-ink-4 tnum" style={{ width: 1 }}>
                      {o.type !== "add" ? o.a : ""}
                    </td>
                    <td className="select-none border-r border-hair px-1.5 text-right text-ink-4 tnum" style={{ width: 1 }}>
                      {o.type !== "del" ? o.b : ""}
                    </td>
                    <td className={cn("whitespace-pre-wrap break-all px-2.5 align-top", o.type === "add" ? "text-st-operational" : o.type === "del" ? "text-danger" : "text-ink-2")}>
                      <span className="mr-1.5 select-none text-ink-4">{o.type === "add" ? "+" : o.type === "del" ? "−" : " "}</span>
                      {o.text || " "}
                    </td>
                  </tr>
                ),
              )}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

/* ------------------------------------------------------------------ forms */

const control = "h-9 w-full rounded-sm border border-hair-2 bg-surface px-2.5 text-[13px] text-ink outline-none placeholder:text-ink-4 focus:border-ink disabled:opacity-60";

export function Field({ label, hint, error, children, className, inline }: { label: ReactNode; hint?: ReactNode; error?: ReactNode; children: ReactNode; className?: string; inline?: boolean }) {
  return (
    <label className={cn("block min-w-0", inline && "flex items-center gap-2", className)}>
      <span className={cn("label-caps block", inline ? "mb-0" : "mb-1")}>{label}</span>
      {children}
      {hint && !error && <span className="mt-1 block text-[11.5px] text-ink-4">{hint}</span>}
      {error && <span className="mt-1 block text-[11.5px] text-danger">{error}</span>}
    </label>
  );
}

export function Input({ className, mono, ...rest }: InputHTMLAttributes<HTMLInputElement> & { mono?: boolean }) {
  return <input className={cn(control, mono && "font-mono text-[12.5px]", className)} {...rest} />;
}

export function Select({ className, children, ...rest }: SelectHTMLAttributes<HTMLSelectElement>) {
  return (
    <select className={cn(control, "appearance-none bg-[length:12px] bg-[right_8px_center] bg-no-repeat pr-7", className)} style={{ backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7178' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>\")" }} {...rest}>
      {children}
    </select>
  );
}

export function Textarea({ className, mono, ...rest }: TextareaHTMLAttributes<HTMLTextAreaElement> & { mono?: boolean; ref?: React.Ref<HTMLTextAreaElement> }) {
  return <textarea className={cn("w-full rounded-sm border border-hair-2 bg-surface px-2.5 py-2 text-[13px] leading-[1.5] text-ink outline-none placeholder:text-ink-4 focus:border-ink disabled:opacity-60", mono && "font-mono text-[12px]", className)} spellCheck={false} {...rest} />;
}

export function Checkbox({ label, className, ...rest }: InputHTMLAttributes<HTMLInputElement> & { label: ReactNode }) {
  return (
    <label className={cn("inline-flex min-h-9 cursor-pointer items-center gap-2 text-[13px] text-ink-2", className)}>
      <input type="checkbox" className="size-4 accent-[var(--accent)]" {...rest} />
      <span>{label}</span>
    </label>
  );
}

/** Small segmented control for filters / tabs (button-based, controlled). */
export function Segmented<T extends string>({ value, onChange, options, className, label }: { value: T; onChange: (v: T) => void; options: Array<{ value: T; label: ReactNode; count?: number | null }>; className?: string; label?: string }) {
  return (
    <div role="tablist" aria-label={label} className={cn("inline-flex max-w-full overflow-x-auto rounded-sm border border-hair-2 bg-surface no-scrollbar", className)}>
      {options.map((o) => {
        const active = o.value === value;
        return (
          <button key={o.value} type="button" role="tab" aria-selected={active} onClick={() => onChange(o.value)} className={cn("inline-flex h-8 shrink-0 items-center gap-1.5 whitespace-nowrap border-r border-hair-2 px-2.5 text-[12.5px] last:border-r-0", active ? "bg-ink text-paper" : "text-ink-2 hover:bg-surface-2")}>
            {o.label}
            {o.count != null && <span className={cn("figure text-[11px]", active ? "text-paper/70" : "text-ink-4")}>{fmtInt(o.count)}</span>}
          </button>
        );
      })}
    </div>
  );
}

/* ------------------------------------------------------------------ layout */

export function Panel({ title, description, aside, children, className, padded = true, id }: { title: ReactNode; description?: ReactNode; aside?: ReactNode; children: ReactNode; className?: string; padded?: boolean; id?: string }) {
  return (
    <Card className={cn("min-w-0", className)} id={id}>
      <CardHeader title={title} description={description} aside={aside} />
      <CardBody padded={padded}>{children}</CardBody>
    </Card>
  );
}

export function Spinner({ className }: { className?: string }) {
  return <Loader2 className={cn("size-4 animate-spin text-ink-3", className)} aria-label="Loading" />;
}

export function RefreshButton({ onClick, busy, updatedAt, label = "Refresh" }: { onClick: () => void; busy?: boolean; updatedAt?: number | null; label?: string }) {
  return (
    <div className="flex items-center gap-2">
      {updatedAt && <span className="hidden text-[11.5px] text-ink-4 sm:inline">updated {new Date(updatedAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" })}</span>}
      <Button size="xs" variant="ghost" onClick={onClick} disabled={busy} aria-label={label}>
        <RefreshCw className={cn("size-3.5", busy && "animate-spin")} strokeWidth={1.75} />
        <span className="hidden sm:inline">{label}</span>
      </Button>
    </div>
  );
}

export function ErrorNote({ error, onRetry, className }: { error: string | null | undefined; onRetry?: () => void; className?: string }) {
  if (!error) return null;
  return (
    <div role="alert" className={cn("flex flex-wrap items-center gap-2 rounded-xs border border-danger/30 bg-danger/10 px-2.5 py-2 text-[12.5px] text-danger", className)}>
      <span className="min-w-0 flex-1 break-words">{error}</span>
      {onRetry && (
        <Button size="xs" variant="ghost" onClick={onRetry}>
          Retry
        </Button>
      )}
    </div>
  );
}

/** Button-driven pager (client state). */
export function Pager({ page, perPage, total, onPage, className }: { page: number; perPage: number; total: number; onPage: (p: number) => void; className?: string }) {
  const pages = Math.max(1, Math.ceil(total / perPage));
  const from = total === 0 ? 0 : (page - 1) * perPage + 1;
  const to = Math.min(total, page * perPage);
  return (
    <div className={cn("flex items-center justify-between gap-3 py-2 text-[12.5px] text-ink-3", className)}>
      <span className="tnum">
        {fmtInt(from)}–{fmtInt(to)} of {fmtInt(total)}
      </span>
      <div className="flex items-center gap-1">
        <Button size="xs" variant="secondary" disabled={page <= 1} onClick={() => onPage(page - 1)} aria-label="Previous page">
          <ChevronLeft className="size-3.5" />
        </Button>
        <span className="figure px-1 text-ink-2">
          {page} / {pages}
        </span>
        <Button size="xs" variant="secondary" disabled={page >= pages} onClick={() => onPage(page + 1)} aria-label="Next page">
          <ChevronRight className="size-3.5" />
        </Button>
      </div>
    </div>
  );
}

/** Collapsible details row. */
export function Disclosure({ summary, children, defaultOpen, className }: { summary: ReactNode; children: ReactNode; defaultOpen?: boolean; className?: string }) {
  return (
    <details className={cn("group rounded-xs border border-hair", className)} open={defaultOpen}>
      <summary className="flex min-h-9 cursor-pointer list-none items-center gap-2 px-2.5 text-[12.5px] text-ink-2 hover:bg-surface-2 [&::-webkit-details-marker]:hidden">
        <ChevronRight className="size-3.5 shrink-0 text-ink-4 transition-transform group-open:rotate-90" />
        <span className="min-w-0 flex-1">{summary}</span>
      </summary>
      <div className="border-t border-hair px-2.5 py-2">{children}</div>
    </details>
  );
}