import Link from "next/link";
import type { ReactNode } from "react";
import { fmtScore, importanceBand, stateLabel, typeLabel } from "@/lib/format";

export function Score({ value, size = "md", title, kind = "importance" }: { value: number | null | undefined; size?: "sm" | "md" | "lg"; title?: string; kind?: "importance" | "signal" }) {
  const v = value ?? 0;
  const band = importanceBand(v);
  const color = band === "hot" ? "bg-hot/15 text-hot border-hot/40" : band === "high" ? "bg-high/15 text-high border-high/40" : band === "mid" ? "bg-mid/15 text-mid border-mid/40" : "bg-panel-2 text-fg-muted border-line";
  const sz = size === "sm" ? "min-w-7 px-1 text-[11px] h-5" : size === "lg" ? "min-w-14 px-2 text-xl h-9" : "min-w-9 px-1.5 text-xs h-6";
  return (
    <span title={title ?? `${kind === "signal" ? "Signal" : "Importance"} ${fmtScore(v)}`} className={`inline-flex items-center justify-center rounded-sm border font-mono font-semibold tabular ${color} ${sz}`}>
      {fmtScore(v)}
    </span>
  );
}

export type Tone = "default" | "silent" | "signal" | "danger" | "warn" | "info" | "ok" | "hot" | "high";

const TONES: Record<Tone, string> = {
  default: "border-line bg-panel-2 text-fg-muted",
  silent: "border-silent/40 bg-silent-soft text-silent",
  signal: "border-signal/40 bg-signal-soft text-signal",
  danger: "border-danger/40 bg-danger/10 text-danger",
  warn: "border-warn/40 bg-warn/10 text-warn",
  info: "border-info/40 bg-info/10 text-info",
  ok: "border-ok/40 bg-ok/10 text-ok",
  hot: "border-hot/50 bg-hot/12 text-hot",
  high: "border-high/50 bg-high/12 text-high",
};

export function Chip({ children, tone = "default", href, className = "", title }: { children: ReactNode; tone?: Tone; href?: string; className?: string; title?: string }) {
  const cls = `inline-flex items-center gap-1 rounded-sm border px-1.5 py-px text-[10.5px] font-medium leading-4 whitespace-nowrap ${TONES[tone]} ${className}`;
  if (href) return <Link href={href} title={title} className={`${cls} hover:border-line-strong`}>{children}</Link>;
  return <span title={title} className={cls}>{children}</span>;
}

/** Signal badges (spec §31): BREAKING · SILENT · FIRST PARTY · CONFIRMED · DEVELOPING · ANOMALOUS · EXTERNAL */
export type BadgeKind = "breaking" | "silent" | "first-party" | "confirmed" | "developing" | "anomalous" | "external" | "inferred" | "unconfirmed" | "replayed";
export function Badge({ kind, compact = false }: { kind: BadgeKind; compact?: boolean }) {
  const map: Record<BadgeKind, { tone: Tone; label: string; short: string; title: string }> = {
    breaking: { tone: "hot", label: "BREAKING", short: "BRK", title: "Breaking: strong signal, fresh, confirmed or first-party" },
    developing: { tone: "high", label: "DEVELOPING", short: "DEV", title: "Developing: signals accumulating across sources" },
    silent: { tone: "silent", label: "SILENT", short: "SIL", title: "Silent change: modified without a matching announcement" },
    "first-party": { tone: "signal", label: "FIRST PARTY", short: "1ST", title: "First-party evidence: the organization's own channel" },
    confirmed: { tone: "ok", label: "CONFIRMED", short: "CFM", title: "Confirmed by independent sources" },
    anomalous: { tone: "warn", label: "ANOMALOUS", short: "ANM", title: "Activity far above this source's baseline" },
    external: { tone: "default", label: "EXTERNAL", short: "EXT", title: "Third-party report (media / aggregator)" },
    inferred: { tone: "info", label: "INFERRED", short: "INF", title: "Classification inferred, limited evidence" },
    unconfirmed: { tone: "warn", label: "UNCONFIRMED", short: "UNC", title: "Single-source, low heuristic confidence" },
    replayed: { tone: "default", label: "REPLAYED", short: "RPL", title: "Delivered from the durable stream after a reconnection" },
  };
  const b = map[kind];
  return (
    <Chip tone={b.tone} title={b.title} className="font-mono font-semibold tracking-wider">
      {compact ? b.short : b.label}
    </Chip>
  );
}

export function StateBadge({ state }: { state: string | null | undefined }) {
  if (!state || state === "watching" || state === "closed") return null;
  return <Badge kind={state as BadgeKind} />;
}

export function TypeChip({ type, href }: { type: string; href?: string }) {
  return <Chip href={href}>{typeLabel(type)}</Chip>;
}

export function SilentBadge({ compact = false }: { compact?: boolean }) {
  return <Badge kind="silent" compact={compact} />;
}

export function EvidenceTag({ label }: { label: string | null | undefined }) {
  const l = (label ?? "OBSERVED").toUpperCase();
  if (l === "CONFIRMED") return <Badge kind="confirmed" />;
  if (l === "INFERRED") return <Badge kind="inferred" />;
  if (l === "UNCONFIRMED") return <Badge kind="unconfirmed" />;
  return <Chip className="font-mono tracking-wider">{l}</Chip>;
}

export function HealthPill({ health }: { health: string | null | undefined }) {
  const h = (health ?? "UP").toUpperCase();
  const tone: Tone = h === "UP" || h === "ACTIVE" || h === "VALIDATED" ? "ok" : h === "DEGRADED" || h === "RATE_LIMITED" || h === "PENDING" ? "warn" : h === "ERROR" ? "danger" : h === "SHADOW" ? "info" : "default";
  return (
    <Chip tone={tone} className="font-mono">
      <span className={`inline-block size-1.5 rounded-full ${tone === "ok" ? "bg-ok" : tone === "danger" ? "bg-danger" : tone === "default" ? "bg-low" : tone === "info" ? "bg-info" : "bg-warn"}`} /> {h}
    </Chip>
  );
}

export function TierBadge({ tier }: { tier: string | null | undefined }) {
  return <span className="inline-flex size-5 items-center justify-center rounded-sm border border-line bg-panel-2 font-mono text-[11px] font-semibold text-fg-muted" title={`Tier ${tier}`}>{tier ?? "?"}</span>;
}

export function Panel({ title, action, children, className = "", dense = false, id }: { title?: ReactNode; action?: ReactNode; children: ReactNode; className?: string; dense?: boolean; id?: string }) {
  return (
    <section id={id} className={`panel ${className}`}>
      {title !== undefined && (
        <header className="flex items-center justify-between gap-3 border-b border-line px-3 py-2">
          <h2 className="label">{title}</h2>
          {action}
        </header>
      )}
      <div className={dense ? "" : "p-3"}>{children}</div>
    </section>
  );
}

export function Empty({ children = "No data yet — the engine is warming up.", icon }: { children?: ReactNode; icon?: ReactNode }) {
  return (
    <div className="flex flex-col items-center gap-1 px-3 py-8 text-center text-[13px] text-fg-subtle">
      {icon}
      <div>{children}</div>
    </div>
  );
}

export function Stat({ label, value, hint, tone }: { label: string; value: ReactNode; hint?: ReactNode; tone?: Tone }) {
  const color = tone === "hot" ? "text-hot" : tone === "silent" ? "text-silent" : tone === "signal" ? "text-signal" : tone === "warn" ? "text-warn" : "";
  return (
    <div className="flex min-w-0 flex-col gap-0.5 px-3 py-2">
      <span className="label">{label}</span>
      <span className={`font-mono text-lg font-semibold leading-tight tabular ${color}`}>{value}</span>
      {hint && <span className="truncate text-[11px] text-fg-subtle">{hint}</span>}
    </div>
  );
}

export function Bar({ value, max = 100, tone = "signal" }: { value: number; max?: number; tone?: "signal" | "hot" | "high" | "mid" | "silent" | "info" }) {
  const pct = Math.max(0, Math.min(100, (value / max) * 100));
  const c = tone === "hot" ? "bg-hot" : tone === "high" ? "bg-high" : tone === "mid" ? "bg-mid" : tone === "silent" ? "bg-silent" : tone === "info" ? "bg-info" : "bg-signal";
  return (
    <div className="h-1 w-full overflow-hidden rounded-full bg-panel-2">
      <div className={`h-full rounded-full ${c}`} style={{ width: `${pct}%` }} />
    </div>
  );
}

export function Gauge({ label, value, tone }: { label: string; value: number | null | undefined; tone?: "signal" | "hot" | "high" | "mid" | "silent" | "info" }) {
  const v = value ?? 0;
  const band = importanceBand(v);
  const t = tone ?? (band === "hot" ? "hot" : band === "high" ? "high" : band === "mid" ? "mid" : "signal");
  return (
    <div className="flex flex-col gap-1">
      <div className="flex items-baseline justify-between">
        <span className="label">{label}</span>
        <span className="font-mono text-base font-semibold tabular">{fmtScore(v)}</span>
      </div>
      <Bar value={v} tone={t} />
    </div>
  );
}

export function PageHeader({ title, kicker, description, actions, compact = false }: { title: ReactNode; kicker?: ReactNode; description?: ReactNode; actions?: ReactNode; compact?: boolean }) {
  return (
    <div className={`${compact ? "mb-3" : "mb-4"} flex flex-wrap items-end justify-between gap-3`}>
      <div className="min-w-0">
        {kicker && <div className="label mb-1 flex flex-wrap items-center gap-2 normal-case tracking-normal">{kicker}</div>}
        <h1 className={`${compact ? "text-lg" : "text-xl sm:text-2xl"} font-semibold leading-tight`}>{title}</h1>
        {description && <p className="mt-1 max-w-3xl text-[13px] text-fg-muted">{description}</p>}
      </div>
      {actions && <div className="flex flex-wrap items-center gap-2">{actions}</div>}
    </div>
  );
}

export function Mono({ children, className = "" }: { children: ReactNode; className?: string }) {
  return <span className={`font-mono tabular ${className}`}>{children}</span>;
}

export function Table({ head, children, className = "" }: { head: ReactNode[]; children: ReactNode; className?: string }) {
  return (
    <div className={`overflow-x-auto ${className}`}>
      <table className="w-full text-[12.5px]">
        <thead>
          <tr className="border-b border-line text-left">
            {head.map((h, i) => (
              <th key={i} className="label whitespace-nowrap px-3 py-2 font-semibold">
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody className="divide-y divide-line">{children}</tbody>
      </table>
    </div>
  );
}

export function Td({ children, className = "", mono = false, colSpan }: { children?: ReactNode; className?: string; mono?: boolean; colSpan?: number }) {
  return (
    <td colSpan={colSpan} className={`px-3 py-1.5 align-top ${mono ? "font-mono tabular text-[12px]" : ""} ${className}`}>
      {children}
    </td>
  );
}

export function ExtLink({ href, children, className = "" }: { href: string; children: ReactNode; className?: string }) {
  return (
    <a href={href} target="_blank" rel="noopener noreferrer nofollow" className={`text-info hover:underline ${className}`}>
      {children}
    </a>
  );
}

export function Kbd({ children }: { children: ReactNode }) {
  return <kbd className="inline-flex h-[18px] min-w-[18px] items-center justify-center rounded border border-line bg-panel-2 px-1 font-mono text-[10px] text-fg-subtle">{children}</kbd>;
}

/** Skeleton primitives (spec §113). */
export function Skeleton({ className = "" }: { className?: string }) {
  return <div aria-hidden className={`skeleton ${className}`} />;
}
export function SkeletonRows({ rows = 8 }: { rows?: number }) {
  return (
    <div className="divide-y divide-line">
      {Array.from({ length: rows }, (_, i) => (
        <div key={i} className="grid grid-cols-[6.5rem_1fr_auto] gap-x-3 px-3 py-2.5">
          <div className="flex flex-col gap-1.5">
            <Skeleton className="h-3 w-14" />
            <Skeleton className="h-2.5 w-10" />
          </div>
          <div className="flex flex-col gap-1.5">
            <Skeleton className="h-2.5 w-24" />
            <Skeleton className={`h-3.5 ${i % 3 === 0 ? "w-3/4" : i % 3 === 1 ? "w-11/12" : "w-2/3"}`} />
            <Skeleton className="h-2.5 w-40" />
          </div>
          <Skeleton className="h-6 w-9" />
        </div>
      ))}
    </div>
  );
}
export function SkeletonPanel({ lines = 5, title = true }: { lines?: number; title?: boolean }) {
  return (
    <div className="panel p-3">
      {title && <Skeleton className="mb-3 h-2.5 w-28" />}
      <div className="flex flex-col gap-2">
        {Array.from({ length: lines }, (_, i) => (
          <Skeleton key={i} className={`h-3 ${i % 2 ? "w-5/6" : "w-full"}`} />
        ))}
      </div>
    </div>
  );
}

/** Inline SVG sparkline — no chart library, no client JS. */
export function Sparkline({ values, width = 120, height = 28, tone = "signal", fill = true, responsive = false }: { values: number[]; width?: number; height?: number; tone?: "signal" | "hot" | "info" | "silent" | "muted"; fill?: boolean; /** stretch to the container width (viewBox scaling) */ responsive?: boolean }) {
  if (!values.length) return <svg width={responsive ? "100%" : width} height={height} aria-hidden />;
  const max = Math.max(1, ...values);
  const step = values.length > 1 ? width / (values.length - 1) : width;
  const pts = values.map((v, i) => [i * step, height - 2 - (v / max) * (height - 4)] as const);
  const d = pts.map(([x, y], i) => `${i ? "L" : "M"}${x.toFixed(1)},${y.toFixed(1)}`).join(" ");
  const color = tone === "hot" ? "var(--hot)" : tone === "info" ? "var(--info)" : tone === "silent" ? "var(--silent)" : tone === "muted" ? "var(--fg-subtle)" : "var(--signal)";
  return (
    <svg width={responsive ? "100%" : width} height={height} viewBox={`0 0 ${width} ${height}`} preserveAspectRatio={responsive ? "none" : undefined} aria-hidden className="block max-w-full overflow-visible">
      {fill && <path d={`${d} L${width},${height} L0,${height} Z`} fill={color} opacity={0.12} />}
      <path d={d} fill="none" stroke={color} strokeWidth={1.5} strokeLinejoin="round" strokeLinecap="round" />
    </svg>
  );
}

/** 35-day activity heatmap (spec §102). */
export function Heatmap({ days, max }: { days: { day: string; events: number; silent?: number; breaking?: number }[]; max?: number }) {
  const m = max ?? Math.max(1, ...days.map((d) => d.events));
  const cls = (n: number, breaking?: number): string => {
    if (!n) return "heat-0";
    if (breaking && breaking >= 3) return "heat-hot";
    const r = n / m;
    return r > 0.75 ? "heat-4" : r > 0.5 ? "heat-3" : r > 0.25 ? "heat-2" : "heat-1";
  };
  return (
    <div className="flex flex-wrap gap-[3px]" role="img" aria-label="Daily activity over the last 35 days">
      {days.map((d) => (
        <span key={d.day} title={`${d.day}: ${d.events} event${d.events === 1 ? "" : "s"}${d.silent ? ` · ${d.silent} silent` : ""}${d.breaking ? ` · ${d.breaking} breaking` : ""}`} className={`size-3 rounded-[2px] ${cls(d.events, d.breaking)}`} />
      ))}
    </div>
  );
}

/** Link-based tabs (URL-driven, server-renderable). */
export function Tabs({ items, current, className = "" }: { items: { key: string; label: ReactNode; href: string; count?: number | null }[]; current: string; className?: string }) {
  return (
    <nav className={`flex gap-0.5 overflow-x-auto border-b border-line no-scrollbar ${className}`} aria-label="Sections">
      {items.map((t) => {
        const active = t.key === current;
        return (
          <Link key={t.key} href={t.href} aria-current={active ? "page" : undefined} className={`-mb-px inline-flex items-center gap-1.5 whitespace-nowrap border-b-2 px-2.5 py-1.5 text-[12.5px] ${active ? "border-signal text-fg" : "border-transparent text-fg-muted hover:text-fg"}`}>
            {t.label}
            {t.count !== undefined && t.count !== null && <span className="font-mono text-[10.5px] text-fg-subtle tabular">{t.count}</span>}
          </Link>
        );
      })}
    </nav>
  );
}

export function StateLabelText({ state }: { state?: string | null }) {
  const l = stateLabel(state);
  if (!l) return null;
  const c = state === "breaking" ? "text-hot" : state === "developing" ? "text-high" : state === "confirmed" ? "text-ok" : "text-fg-subtle";
  return <span className={`font-mono text-[10.5px] font-semibold tracking-wider ${c}`}>{l}</span>;
}

export function Flag({ code, className = "" }: { code?: string | null; className?: string }) {
  if (!code) return null;
  const c = code.toUpperCase();
  if (c.length !== 2) return <span className={`font-mono text-[10px] ${className}`}>{c}</span>;
  const flag = String.fromCodePoint(...[...c].map((ch) => 0x1f1e6 + ch.charCodeAt(0) - 65));
  return <span className={className} title={c} aria-label={c}>{flag}</span>;
}

/** Entity mark (spec §111): deterministic initials fallback — no third-party favicon requests. */
export function Mark({ name, size = 5, className = "" }: { name: string; size?: 4 | 5 | 6 | 8; className?: string }) {
  const words = name.replace(/[^\p{L}\p{N} ]/gu, " ").trim().split(/\s+/).filter(Boolean);
  const initials = (words.length >= 2 ? words[0]![0]! + words[1]![0]! : name.slice(0, 2)).toUpperCase();
  let h = 0;
  for (const ch of name) h = (h * 31 + ch.charCodeAt(0)) >>> 0;
  const hue = h % 360;
  const sz = size === 4 ? "size-4 text-[8px]" : size === 6 ? "size-6 text-[10px]" : size === 8 ? "size-8 text-[12px]" : "size-5 text-[9px]";
  return (
    <span aria-hidden className={`inline-flex shrink-0 items-center justify-center rounded-[3px] border font-mono font-semibold tracking-tight ${sz} ${className}`} style={{ background: `color-mix(in oklab, oklch(0.62 0.12 ${hue}) 22%, var(--panel-2))`, borderColor: `color-mix(in oklab, oklch(0.62 0.12 ${hue}) 40%, var(--line))`, color: `oklch(0.78 0.11 ${hue})` }}>
      {initials}
    </span>
  );
}