"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Bookmark, BookmarkCheck, ExternalLink, Maximize2, X } from "lucide-react";
import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
import type { EventDetail, EventItem } from "@/lib/api";
import { fmtMs, fmtOffset, fmtScore, relTime, typeLabel, utcDateTime, CLASS_LABELS } from "@/lib/format";
import { ownerFetch, publicFetch } from "@/lib/owner";
import { FieldChanges } from "./field-changes";
import { Badge, Bar, Chip, EvidenceTag, Flag, Score, Skeleton, StateBadge, TypeChip } from "./ui";

/**
 * Intelligence panel (spec §33, §78): a right drawer on desktop, a full-screen sheet on mobile.
 * Opens from any feed row without navigation; the permanent page stays one click away.
 */
interface DrawerCtx {
  open: (slug: string, seed?: EventItem) => void;
  close: () => void;
}
const Ctx = createContext<DrawerCtx>({ open: () => {}, close: () => {} });
export const useEventDrawer = (): DrawerCtx => useContext(Ctx);

export function EventDrawerProvider({ children }: { children: ReactNode }) {
  // The drawer state is keyed by pathname: a route change opens a fresh (closed) drawer.
  const pathname = usePathname();
  const [state, setState] = useState<{ path: string; slug: string | null; seed: EventItem | null; detail: EventDetail | null; loading: boolean }>({ path: pathname, slug: null, seed: null, detail: null, loading: false });
  const current = state.path === pathname ? state : { path: pathname, slug: null, seed: null, detail: null, loading: false };
  const slug = current.slug;
  const seed = current.seed;
  const detail = current.detail;
  const loading = current.loading;
  const open = useCallback((s: string, e?: EventItem) => setState({ path: pathname, slug: s, seed: e ?? null, detail: null, loading: true }), [pathname]);
  const close = useCallback(() => setState({ path: pathname, slug: null, seed: null, detail: null, loading: false }), [pathname]);
  useEffect(() => {
    if (!slug) return;
    let cancelled = false;
    publicFetch<EventDetail>(`/api/v1/events/${encodeURIComponent(slug)}`)
      .then((d) => {
        if (!cancelled) setState((st) => (st.slug === slug ? { ...st, detail: d, loading: false } : st));
      })
      .catch(() => {
        if (!cancelled) setState((st) => (st.slug === slug ? { ...st, loading: false } : st));
      });
    return () => {
      cancelled = true;
    };
  }, [slug]);
  useEffect(() => {
    if (!slug) return;
    const onKey = (e: KeyboardEvent): void => {
      if (e.key === "Escape") close();
    };
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    if (window.innerWidth < 1024) document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = prev;
    };
  }, [slug, close]);
  const value = useMemo(() => ({ open, close }), [open, close]);
  return (
    <Ctx.Provider value={value}>
      {children}
      {slug && <Drawer slug={slug} seed={seed} detail={detail} loading={loading} onClose={close} />}
    </Ctx.Provider>
  );
}

function Drawer({ slug, seed, detail, loading, onClose }: { slug: string; seed: EventItem | null; detail: EventDetail | null; loading: boolean; onClose: () => void }) {
  const ev = detail?.event ?? seed;
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    ref.current?.focus();
  }, [slug]);
  return (
    <div className="fixed inset-0 z-50 flex justify-end" role="dialog" aria-modal="true" aria-label={ev?.title ?? "Event"}>
      <button type="button" aria-label="Close" onClick={onClose} className="scrim absolute inset-0 hidden cursor-default lg:block" />
      <div ref={ref} tabIndex={-1} className="relative flex h-full w-full flex-col bg-bg shadow-2xl outline-none animate-sheet-up lg:w-[520px] lg:animate-slide-in lg:border-l lg:border-line xl:w-[600px]">
        <header className="flex items-center gap-2 border-b border-line px-3 py-2">
          <span className="label">Intelligence panel</span>
          <span className="ml-auto flex items-center gap-1">
            {ev && <BookmarkButton eventId={ev.id} />}
            {ev && (
              <Link href={`/event/${ev.slug}`} className="inline-flex size-7 items-center justify-center rounded-md border border-line text-fg-muted hover:text-fg" title="Open full page" aria-label="Open full page">
                <Maximize2 className="size-3.5" />
              </Link>
            )}
            <button type="button" onClick={onClose} className="inline-flex size-7 items-center justify-center rounded-md border border-line text-fg-muted hover:text-fg" aria-label="Close">
              <X className="size-4" />
            </button>
          </span>
        </header>
        <div className="min-h-0 flex-1 overflow-y-auto px-3 py-3 pb-24 lg:pb-6">
          {!ev ? (
            <DrawerSkeleton />
          ) : (
            <>
              <div className="flex flex-wrap items-center gap-1.5">
                <Link href={`/source/${ev.source?.id ?? ev.source_id}`} className="font-mono text-[11px] font-semibold uppercase tracking-wide text-fg-muted hover:text-fg">{ev.source?.name}</Link>
                {ev.country && <Flag code={ev.country} className="text-[12px]" />}
                <StateBadge state={ev.cluster?.state} />
                {ev.silent_change && <Badge kind="silent" />}
                {ev.first_party === false ? <Badge kind="external" /> : <Badge kind="first-party" />}
                <EvidenceTag label={ev.evidence_label} />
              </div>
              <h2 className="mt-1.5 text-[17px] font-semibold leading-snug">{ev.title}</h2>
              <div className="mt-1 flex flex-wrap items-center gap-1.5 text-[11.5px] text-fg-subtle">
                <TypeChip type={ev.event_type} />
                <span>detected {relTime(ev.detected_at)}</span>
                <span>·</span>
                <span className="font-mono">{utcDateTime(ev.detected_at)}</span>
              </div>
              <p className="mt-3 text-[13.5px] leading-relaxed">{ev.summary}</p>

              {/* WHAT CHANGED */}
              {(ev.field_changes?.length ?? 0) > 0 && (
                <section className="mt-4">
                  <div className="label mb-1.5">What changed</div>
                  <FieldChanges items={ev.field_changes} max={8} />
                </section>
              )}
              {ev.why_it_matters && (
                <section className="mt-4">
                  <div className="label mb-1">Why it matters <span className="normal-case tracking-normal text-fg-subtle">· analysis</span></div>
                  <p className="text-[13px] leading-relaxed text-fg-muted">{ev.why_it_matters}</p>
                </section>
              )}

              {/* SCORES */}
              <section className="mt-4 rounded-md border border-line bg-panel p-3">
                <div className="flex items-center gap-3">
                  <Score value={ev.signal_score ?? ev.importance} size="lg" kind="signal" />
                  <div className="min-w-0">
                    <div className="label">WebSensor signal score</div>
                    <div className="text-[12px] text-fg-muted">{(ev.signal_score ?? ev.importance) >= 80 ? "attention now" : (ev.signal_score ?? ev.importance) >= 60 ? "worth a look" : "informational"}</div>
                  </div>
                </div>
                <div className="mt-3 grid grid-cols-2 gap-x-4 gap-y-2 text-[12px]">
                  <Mini label="Importance" v={ev.importance} />
                  <Mini label="Confidence" v={ev.confidence} tone="info" />
                  <Mini label="Novelty" v={ev.novelty} />
                  <Mini label="Impact" v={ev.impact_score ?? 0} tone="high" />
                  <Mini label="Velocity" v={ev.velocity_score ?? 0} tone="silent" />
                  <Mini label="Anomaly" v={ev.anomaly_score ?? 0} tone="mid" />
                </div>
                {(ev.score_reasons?.length ?? 0) > 0 && (
                  <ul className="mt-3 space-y-0.5 text-[12px]">
                    {ev.score_reasons!.slice(0, 7).map((r, i) => (
                      <li key={i} className="flex gap-2">
                        <span className={`font-mono ${r.sign === "+" ? "text-signal" : "text-danger"}`}>{r.sign}</span>
                        <span className="text-fg-muted">{r.text}</span>
                        {r.points !== undefined && <span className="ml-auto font-mono text-fg-subtle tabular">{r.points > 0 ? "+" : ""}{r.points}</span>}
                      </li>
                    ))}
                  </ul>
                )}
                {ev.change_class && <div className="mt-2 text-[11px] text-fg-subtle">Semantic class: <span className="text-fg-muted">{CLASS_LABELS[ev.change_class] ?? ev.change_class}</span></div>}
              </section>

              {/* CLUSTER / PROPAGATION */}
              {ev.cluster && ev.cluster.event_count > 1 && (
                <section className="mt-4 rounded-md border border-line bg-panel p-3">
                  <div className="flex items-center justify-between">
                    <div className="label">Event cluster</div>
                    <Link href={`/cluster/${ev.cluster.slug ?? ev.cluster.id}`} className="text-[11.5px] text-info hover:underline">propagation timeline →</Link>
                  </div>
                  <div className="mt-2 grid grid-cols-3 gap-2 text-center">
                    <Cell v={ev.cluster.event_count} l="signals" />
                    <Cell v={ev.cluster.first_party_count ?? 0} l="first-party" />
                    <Cell v={ev.cluster.external_count ?? 0} l="external" />
                  </div>
                  {ev.cluster.lead_time_ms !== null && ev.cluster.lead_time_ms !== undefined && ev.cluster.lead_time_ms > 0 && (
                    <p className="mt-2 text-[12px] text-fg-muted">
                      <span className="font-semibold text-signal">WebSensor lead time</span> {fmtOffset(ev.cluster.lead_time_ms).replace("+", "")} before the first external report.
                    </p>
                  )}
                </section>
              )}

              {/* EVIDENCE */}
              <section className="mt-4">
                <div className="label mb-1.5">Evidence</div>
                <div className="rounded-md border border-line bg-panel p-3 text-[12.5px]">
                  <a href={ev.url} target="_blank" rel="noopener noreferrer nofollow" className="inline-flex max-w-full items-center gap-1 break-all font-mono text-[12px] text-info hover:underline">
                    {ev.url} <ExternalLink className="size-3 shrink-0" />
                  </a>
                  {detail ? (
                    <dl className="mt-2 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-[12px]">
                      {detail.snapshots.map((s) => (
                        <FragmentRow key={s.id} label={s.id === ev.old_snapshot_id ? "Before" : "After"} value={`${utcDateTime(s.captured_at)} · HTTP ${s.http_status ?? "—"} · ${s.canonical_hash?.slice(0, 12) ?? ""}`} />
                      ))}
                      <FragmentRow label="Observed from" value={ev.observed_from ? utcDateTime(ev.observed_from) : "—"} />
                      <FragmentRow label="Published" value={ev.published_at ? utcDateTime(ev.published_at) : "—"} />
                      <FragmentRow label="Processing" value={fmtMs(ev.processing_latency_ms)} />
                    </dl>
                  ) : (
                    <Skeleton className="mt-2 h-10 w-full" />
                  )}
                  <div className="mt-2 flex flex-wrap gap-2 text-[11.5px]">
                    <Link href={`/event/${ev.slug}#diff`} className="text-info hover:underline">Open diff</Link>
                    {ev.old_snapshot_id && ev.new_snapshot_id && <Link href={`/compare?a=${ev.old_snapshot_id}&b=${ev.new_snapshot_id}`} className="text-info hover:underline">Compare snapshots</Link>}
                    <Link href={`/sensor/${ev.sensor_id}`} className="text-info hover:underline">Sensor</Link>
                    <Link href={`/url?u=${encodeURIComponent(ev.url)}`} className="text-info hover:underline">URL history</Link>
                  </div>
                </div>
              </section>

              {/* HISTORICAL CONTEXT */}
              {detail?.history && detail.history.length > 0 && (
                <section className="mt-4">
                  <div className="label mb-1.5">Previous changes on this page</div>
                  <ul className="divide-y divide-line rounded-md border border-line bg-panel">
                    {detail.history.map((h) => (
                      <li key={h.id} className="flex items-center gap-2 px-3 py-1.5 text-[12.5px]">
                        <span className="w-[5.5rem] shrink-0 font-mono text-[11px] text-fg-subtle tabular">{relTime(h.detected_at)}</span>
                        <Link href={`/event/${h.slug}`} className="min-w-0 flex-1 truncate hover:underline">{h.title}</Link>
                        <Score value={h.importance} size="sm" />
                      </li>
                    ))}
                  </ul>
                </section>
              )}

              {/* RELATED */}
              {detail?.related && detail.related.length > 0 && (
                <section className="mt-4">
                  <div className="label mb-1.5">Related signals</div>
                  <ul className="divide-y divide-line rounded-md border border-line bg-panel">
                    {detail.related.slice(0, 6).map((r) => (
                      <li key={r.id} className="flex items-center gap-2 px-3 py-1.5 text-[12.5px]">
                        <span className="w-[5.5rem] shrink-0 truncate font-mono text-[10.5px] uppercase text-fg-subtle">{r.source?.name}</span>
                        <Link href={`/event/${r.slug}`} className="min-w-0 flex-1 truncate hover:underline">{r.title}</Link>
                        <Score value={r.signal_score ?? r.importance} size="sm" kind="signal" />
                      </li>
                    ))}
                  </ul>
                </section>
              )}
              {ev.entities?.length > 0 && (
                <div className="mt-4 flex flex-wrap gap-1">
                  {ev.entities.map((x) => (
                    <Chip key={x.id} href={`/entity/${x.id}`} tone={x.role === "subject" ? "signal" : "default"}>{x.name}</Chip>
                  ))}
                </div>
              )}
              <p className="mt-4 text-[11px] text-fg-subtle">{typeLabel(ev.event_type)} · {loading ? "loading details…" : "raw evidence is immutable; analysis is labelled and versioned."}</p>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

function Mini({ label, v, tone }: { label: string; v: number; tone?: "signal" | "hot" | "high" | "mid" | "silent" | "info" }) {
  return (
    <div>
      <div className="flex items-baseline justify-between">
        <span className="text-fg-subtle">{label}</span>
        <span className="font-mono tabular">{fmtScore(v)}</span>
      </div>
      <Bar value={v} tone={tone ?? (v >= 80 ? "hot" : v >= 60 ? "high" : "signal")} />
    </div>
  );
}
function Cell({ v, l }: { v: number; l: string }) {
  return (
    <div className="rounded border border-line bg-panel-2 py-1.5">
      <div className="font-mono text-base font-semibold tabular">{v}</div>
      <div className="label !text-[9.5px]">{l}</div>
    </div>
  );
}
function FragmentRow({ label, value }: { label: string; value: string }) {
  return (
    <>
      <dt className="text-fg-subtle">{label}</dt>
      <dd className="truncate font-mono text-fg-muted tabular">{value}</dd>
    </>
  );
}
function DrawerSkeleton() {
  return (
    <div className="flex flex-col gap-3">
      <Skeleton className="h-3 w-32" />
      <Skeleton className="h-5 w-11/12" />
      <Skeleton className="h-5 w-3/4" />
      <Skeleton className="h-16 w-full" />
      <Skeleton className="h-28 w-full" />
    </div>
  );
}

export function BookmarkButton({ eventId, label = false }: { eventId: string; label?: boolean }) {
  const [state, setState] = useState<"idle" | "on" | "busy">("idle");
  useEffect(() => {
    let c = false;
    ownerFetch<{ ids: string[] }>("/api/v1/bookmarks/ids")
      .then((r) => {
        if (!c && r.ids.includes(eventId)) setState("on");
      })
      .catch(() => undefined);
    return () => {
      c = true;
    };
  }, [eventId]);
  const toggle = async (): Promise<void> => {
    const was = state;
    setState("busy");
    try {
      if (was === "on") {
        await ownerFetch(`/api/v1/bookmarks/${encodeURIComponent(eventId)}`, { method: "DELETE" });
        setState("idle");
      } else {
        await ownerFetch("/api/v1/bookmarks", { method: "POST", body: JSON.stringify({ event_id: eventId }) });
        setState("on");
      }
    } catch {
      setState(was);
    }
  };
  return (
    <button type="button" onClick={toggle} disabled={state === "busy"} aria-pressed={state === "on"} title={state === "on" ? "Remove bookmark" : "Bookmark"} className={`inline-flex h-7 items-center gap-1 rounded-md border border-line px-1.5 text-[12px] ${state === "on" ? "text-signal" : "text-fg-muted hover:text-fg"}`}>
      {state === "on" ? <BookmarkCheck className="size-3.5" /> : <Bookmark className="size-3.5" />}
      {label && (state === "on" ? "Saved" : "Save")}
    </button>
  );
}