"use client";

import { Check, Plus, RefreshCw, Trash2 } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { EventRow } from "@/components/event-row";
import { FieldChangeInline } from "@/components/field-changes";
import { Chip, Empty, HealthPill, Panel, SkeletonRows, Table, Td } from "@/components/ui";
import { clientApiBase, type ChangeRow, type EventItem, type Monitor } from "@/lib/api";
import { CLASS_LABELS, fmtBytes, hostOf, relTime, untilTime, utcDateTime } from "@/lib/format";
import { ownerToken } from "@/lib/owner";

interface ApiError {
  status: number;
  error: string;
  detail?: string;
  limit?: number;
}

/** Owner-scoped request that keeps the API's error shape (`{error, detail?}`) instead of flattening it. */
async function request<T>(path: string, init: RequestInit = {}): Promise<T> {
  const res = await fetch(`${clientApiBase()}${path}`, { ...init, headers: { "content-type": "application/json", accept: "application/json", "x-websensor-owner": ownerToken(), ...(init.headers ?? {}) } });
  if (!res.ok) {
    const body = (await res.json().catch(() => ({}))) as Partial<ApiError> & { issues?: { path?: (string | number)[]; message?: string }[] };
    const detail = body.detail ?? body.issues?.map((i) => `${(i.path ?? []).join(".")}: ${i.message ?? ""}`).join("; ");
    throw Object.assign(new Error(body.error ?? `HTTP ${res.status}`), { status: res.status, error: body.error ?? `http_${res.status}`, detail, limit: body.limit } satisfies ApiError);
  }
  return (await res.json()) as T;
}

const ERROR_HELP: Record<string, string> = {
  url_rejected: "Private, loopback, metadata and internal addresses are refused by the SSRF policy.",
  scheme_not_allowed: "Only http:// and https:// URLs can be monitored.",
  fetch_failed: "The page could not be fetched. Check the address, TLS certificate and that the host answers public requests.",
  http_error: "The page answered with an error status. Monitors need a 2xx page to take a baseline.",
  unparseable: "The response could not be normalized as HTML/text.",
  thin_content: "Almost no server-rendered text was found (client-side app?). Try a more specific URL or a CSS selector.",
  monitor_limit_reached: "Monitor limit reached for this browser. Delete one to add another.",
  not_found: "Monitor not found — it may have been deleted.",
};

interface Form {
  url: string;
  name: string;
  frequency: "hourly" | "daily";
  sensitivity: "low" | "normal" | "high";
  selector: string;
  keywords: string;
}
const EMPTY: Form = { url: "", name: "", frequency: "hourly", sensitivity: "normal", selector: "", keywords: "" };

interface CreateResult {
  id: string;
  url: string;
  tier: string;
  status: string;
  test?: { http_status: number; content_type?: string | null; bytes?: number | null; title?: string | null; mode?: string; extraction_confidence?: number | null };
}

export function Monitors() {
  const [items, setItems] = useState<Monitor[] | null>(null);
  const [limit, setLimit] = useState(5);
  const [form, setForm] = useState<Form>(EMPTY);
  const [err, setErr] = useState<ApiError | null>(null);
  const [busy, setBusy] = useState(false);
  const [created, setCreated] = useState<CreateResult | null>(null);
  const [selected, setSelected] = useState<string | null>(null);
  /** Keyed by monitor id so switching monitors shows a loading state without a synchronous reset. */
  const [loaded, setLoaded] = useState<{ id: string; events: EventItem[]; changes: ChangeRow[]; error: string | null } | null>(null);
  const detail = loaded && loaded.id === selected ? loaded : null;

  const load = useCallback(
    () =>
      request<{ items: Monitor[]; limit: number }>("/api/v1/monitors")
        .then((r) => {
          setItems(r.items);
          setLimit(r.limit);
          setSelected((cur) => cur ?? r.items[0]?.id ?? null);
        })
        .catch((e: ApiError) => {
          setErr(e);
          setItems([]);
        }),
    [],
  );
  useEffect(() => {
    void load();
    const t = setInterval(() => void load(), 30_000);
    return () => clearInterval(t);
  }, [load]);

  useEffect(() => {
    if (!selected) return;
    const id = selected;
    let cancelled = false;
    request<{ events: EventItem[]; changes: ChangeRow[] }>(`/api/v1/monitors/${encodeURIComponent(id)}/events?limit=50`)
      .then((r) => {
        if (!cancelled) setLoaded({ id, events: r.events, changes: r.changes, error: null });
      })
      .catch((e: ApiError) => {
        if (!cancelled) setLoaded({ id, events: [], changes: [], error: `${e.error}${e.detail ? ` — ${e.detail}` : ""}` });
      });
    return () => {
      cancelled = true;
    };
  }, [selected, items]);

  const create = async (): Promise<void> => {
    setErr(null);
    setCreated(null);
    const url = form.url.trim();
    if (!/^https?:\/\//i.test(url)) {
      setErr({ status: 0, error: "invalid_url", detail: "Enter a full address starting with http:// or https://." });
      return;
    }
    const keywords = form.keywords.split(/[,\n]/).map((k) => k.trim()).filter(Boolean).slice(0, 20);
    setBusy(true);
    try {
      const r = await request<CreateResult>("/api/v1/monitors", { method: "POST", body: JSON.stringify({ url, name: form.name.trim() || undefined, frequency: form.frequency, sensitivity: form.sensitivity, selector: form.selector.trim() || undefined, keywords: keywords.length ? keywords : undefined }) });
      setCreated(r);
      setForm(EMPTY);
      await load();
      setSelected(r.id);
    } catch (e) {
      setErr(e as ApiError);
    } finally {
      setBusy(false);
    }
  };

  const remove = async (m: Monitor): Promise<void> => {
    setItems((prev) => prev?.filter((x) => x.id !== m.id) ?? prev);
    if (selected === m.id) setSelected(null);
    try {
      await request(`/api/v1/monitors/${encodeURIComponent(m.id)}`, { method: "DELETE" });
    } catch (e) {
      setErr(e as ApiError);
    }
    await load();
  };

  const active = items?.filter((m) => m.enabled).length ?? 0;
  const current = items?.find((m) => m.id === selected) ?? null;
  const input = "h-8 rounded-md border border-line bg-panel px-2 text-[12.5px]";

  return (
    <div className="grid gap-4 lg:grid-cols-[380px_minmax(0,1fr)]">
      <aside className="flex min-w-0 flex-col gap-4">
        <Panel title={<span>New monitor <span className="normal-case tracking-normal text-fg-subtle">· {active} / {limit} used</span></span>}>
          <form
            className="flex flex-col gap-3 text-[12.5px]"
            onSubmit={(e) => {
              e.preventDefault();
              void create();
            }}
          >
            <label className="flex flex-col gap-1">
              <span className="label">URL</span>
              <input type="url" required value={form.url} onChange={(e) => setForm({ ...form, url: e.target.value })} placeholder="https://example.com/pricing" className={`${input} font-mono text-[12px]`} />
            </label>
            <label className="flex flex-col gap-1">
              <span className="label">Name <span className="normal-case tracking-normal">· optional</span></span>
              <input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder={form.url ? hostOf(form.url) : "Defaults to the host name"} maxLength={80} className={input} />
            </label>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <div className="label mb-1">Frequency</div>
                <div className="flex gap-1" role="radiogroup" aria-label="Frequency">
                  {(["hourly", "daily"] as const).map((f) => (
                    <button key={f} type="button" role="radio" aria-checked={form.frequency === f} onClick={() => setForm({ ...form, frequency: f })} className={`h-8 flex-1 rounded-md border text-[12px] ${form.frequency === f ? "border-signal/50 bg-signal-soft text-signal" : "border-line bg-panel text-fg-muted hover:text-fg"}`}>
                      {f}
                    </button>
                  ))}
                </div>
              </div>
              <div>
                <div className="label mb-1">Sensitivity</div>
                <div className="flex gap-1" role="radiogroup" aria-label="Sensitivity">
                  {(["low", "normal", "high"] as const).map((s) => (
                    <button key={s} type="button" role="radio" aria-checked={form.sensitivity === s} onClick={() => setForm({ ...form, sensitivity: s })} title={s === "low" ? "Only big changes" : s === "high" ? "Every meaningful change" : "Balanced"} className={`h-8 flex-1 rounded-md border text-[12px] ${form.sensitivity === s ? "border-signal/50 bg-signal-soft text-signal" : "border-line bg-panel text-fg-muted hover:text-fg"}`}>
                      {s}
                    </button>
                  ))}
                </div>
              </div>
            </div>
            <label className="flex flex-col gap-1">
              <span className="label">CSS selector <span className="normal-case tracking-normal">· optional, narrows the watched region</span></span>
              <input value={form.selector} onChange={(e) => setForm({ ...form, selector: e.target.value })} placeholder="main .pricing-table" maxLength={200} className={`${input} font-mono text-[12px]`} />
            </label>
            <label className="flex flex-col gap-1">
              <span className="label">Keywords <span className="normal-case tracking-normal">· optional, comma-separated</span></span>
              <input value={form.keywords} onChange={(e) => setForm({ ...form, keywords: e.target.value })} placeholder="price, deprecated, discontinued" className={input} />
            </label>
            <button type="submit" disabled={busy || active >= limit} className="inline-flex h-8 items-center justify-center gap-1 rounded-md border border-line bg-panel-2 px-3 text-[12.5px] hover:border-line-strong disabled:opacity-60">
              {busy ? <RefreshCw className="size-3.5 animate-spin" /> : <Plus className="size-3.5" />} {busy ? "Fetching & testing…" : active >= limit ? "Limit reached" : "Create monitor"}
            </button>
            {err && (
              <div className="rounded-md border border-danger/40 bg-danger/10 px-2 py-1.5 text-[12px]">
                <div className="font-mono font-semibold text-danger">{err.error}{err.status ? ` · HTTP ${err.status}` : ""}</div>
                {err.detail && <div className="mt-0.5 break-words text-fg">{err.detail}</div>}
                {ERROR_HELP[err.error] && <div className="mt-0.5 text-fg-muted">{ERROR_HELP[err.error]}</div>}
              </div>
            )}
            {created && (
              <div className="rounded-md border border-ok/40 bg-ok/10 px-2 py-1.5 text-[12px]">
                <div className="flex items-center gap-1 font-semibold text-ok"><Check className="size-3.5" /> Monitor created · baseline test passed</div>
                {created.test && (
                  <div className="mt-0.5 font-mono text-[11px] text-fg-muted tabular">
                    HTTP {created.test.http_status} · {created.test.content_type ?? "—"} · {fmtBytes(created.test.bytes)} · {created.test.mode ?? "text"} · confidence {created.test.extraction_confidence !== null && created.test.extraction_confidence !== undefined ? Math.round(created.test.extraction_confidence * 100) : "—"}%
                    {created.test.title && <div className="truncate text-fg">“{created.test.title}”</div>}
                  </div>
                )}
              </div>
            )}
          </form>
        </Panel>
        <Panel title="Limits & rules">
          <ul className="list-disc space-y-1 pl-4 text-[12.5px] text-fg-muted">
            <li><span className="text-fg">{limit} monitors per browser</span>, scoped to this browser&apos;s anonymous owner token.</li>
            <li><span className="text-fg">Public URLs only.</span> Private networks, loopback and cloud-metadata addresses are rejected; redirects are checked hop by hop.</li>
            <li><span className="text-fg">Respects robots and rate limits.</span> Conditional GET, one request per interval, per-host concurrency caps, circuit breaker on failing hosts.</li>
            <li><span className="text-fg">No authentication bypass.</span> Pages behind logins, paywalls or bot walls are not fetched with credentials or headless browsers.</li>
            <li>Hourly = tier C, daily = tier D. The baseline is taken on the first engine run; the first event needs a second snapshot.</li>
            <li>Custom monitors never enter the public feed, rankings or clusters.</li>
          </ul>
        </Panel>
      </aside>

      <div className="flex min-w-0 flex-col gap-4">
        <Panel title={<span>Your monitors <span className="font-mono text-fg-subtle">{items?.length ?? "…"}</span></span>} dense>
          {items === null ? (
            <SkeletonRows rows={3} />
          ) : items.length ? (
            <Table head={["Monitor", "Status", "Schedule", "Last check", "HTTP", "Changes", ""]}>
              {items.map((m) => {
                const sens = typeof m.config.sensitivity === "string" ? m.config.sensitivity : "normal";
                const sel = m.id === selected;
                return (
                  <tr key={m.id} className={sel ? "bg-panel-2/60" : ""}>
                    <Td>
                      <button type="button" aria-pressed={sel} onClick={() => setSelected(m.id)} className="block max-w-[18rem] truncate text-left font-medium hover:underline">{m.name}</button>
                      <a href={m.url} target="_blank" rel="noopener noreferrer nofollow" className="block max-w-[18rem] truncate font-mono text-[10.5px] text-fg-subtle hover:text-info" title={m.url}>{m.url}</a>
                    </Td>
                    <Td>
                      <div className="flex flex-wrap gap-1">
                        <HealthPill health={m.enabled ? m.health : "DISABLED"} />
                        <Chip className="font-mono">{m.status}</Chip>
                      </div>
                    </Td>
                    <Td>
                      <div className="flex flex-wrap gap-1">
                        <Chip>{m.tier === "D" ? "daily" : "hourly"}</Chip>
                        <Chip tone={sens === "high" ? "high" : sens === "low" ? "default" : "info"}>{sens}</Chip>
                      </div>
                      <div className="mt-0.5 font-mono text-[10.5px] text-fg-subtle tabular">next {untilTime(m.next_check_at)}</div>
                    </Td>
                    <Td mono className="whitespace-nowrap text-fg-subtle">{m.last_check_at ? <span title={utcDateTime(m.last_check_at)}>{relTime(m.last_check_at)}</span> : "pending"}</Td>
                    <Td mono className={m.last_status && m.last_status >= 400 ? "text-danger" : ""}>{m.last_status ?? "—"}</Td>
                    <Td mono className="whitespace-nowrap" ><span title="raw / meaningful">{m.raw_changes ?? 0} / {m.meaningful_changes ?? 0}</span></Td>
                    <Td>
                      <button type="button" aria-label={`Delete monitor ${m.name}`} onClick={() => remove(m)} className="text-fg-subtle hover:text-danger"><Trash2 className="size-3.5" /></button>
                    </Td>
                  </tr>
                );
              })}
            </Table>
          ) : (
            <Empty>No monitors yet — add a public URL on the left. The first check takes a baseline; changes are reported from the second check on.</Empty>
          )}
          {items?.some((m) => m.last_error) && (
            <ul className="border-t border-line px-3 py-2 text-[11px]">
              {items.filter((m) => m.last_error).map((m) => (
                <li key={m.id} className="truncate font-mono text-danger" title={m.last_error ?? ""}>{m.name}: {m.last_error}</li>
              ))}
            </ul>
          )}
        </Panel>

        <Panel title={<span>Events {current && <span className="normal-case tracking-normal text-fg-subtle">· {current.name}</span>}</span>} dense>
          {!current ? (
            <Empty>Select a monitor to see its events and raw changes.</Empty>
          ) : detail === null ? (
            <SkeletonRows rows={3} />
          ) : detail.events.length ? (
            detail.events.map((e) => <EventRow key={e.id} ev={e} showDate />)
          ) : (
            <Empty>{detail.error ?? (current.total_runs ? "No meaningful change detected yet." : "Waiting for the first check to take a baseline.")}</Empty>
          )}
        </Panel>

        {current && detail && detail.changes.length > 0 && (
          <Panel title={<span>Raw changes <span className="font-mono text-fg-subtle">{detail.changes.length}</span> <span className="normal-case tracking-normal text-fg-subtle">· before noise filtering</span></span>} dense>
            <Table head={["Detected", "Kind", "Class", "Signal", "Fields", "Event"]}>
              {detail.changes.map((c) => (
                <tr key={c.id}>
                  <Td mono className="whitespace-nowrap text-fg-subtle"><span title={utcDateTime(c.detected_at)}>{relTime(c.detected_at)}</span></Td>
                  <Td mono>{c.kind}</Td>
                  <Td>{c.change_class ? <Chip tone={c.meaningful ? "signal" : "default"}>{CLASS_LABELS[c.change_class] ?? c.change_class}</Chip> : <span className="text-fg-subtle">—</span>}</Td>
                  <Td mono>{Math.round(Number(c.signal))}</Td>
                  <Td>{c.field_changes?.length ? <FieldChangeInline items={c.field_changes} max={2} /> : <span className="text-fg-subtle">—</span>}</Td>
                  <Td>{c.event_id ? <Chip tone="ok">event</Chip> : <span className="text-[11px] text-fg-subtle">filtered</span>}</Td>
                </tr>
              ))}
            </Table>
          </Panel>
        )}
      </div>
    </div>
  );
}