"use client";
import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import {
  ArrowDown,
  CircleAlert,
  CircleCheck,
  Info,
  Pause,
  Play,
  TriangleAlert,
  X,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { StreamChart } from "./stream-chart";
import {
  DEFAULT_THRESHOLDS,
  clock,
  levelOf,
  nextLevel,
  routineEvent,
  sample,
  type Level,
  type MetricKey,
  type Sample,
  type Thresholds,
} from "./simulation";

/* Theme-aware categorical palette (validated for light + dark and colour-vision deficiency). */
const PALETTE =
  "[--chart-1:#2a78d6] [--chart-2:#eb6834] [--chart-3:#1baf7a] dark:[--chart-1:#3987e5] dark:[--chart-2:#d95926] dark:[--chart-3:#199e70]";

type LogLevel = "info" | "ok" | "warn" | "crit";
type LogEntry = { id: string; t: number; level: LogLevel; msg: string };
type Toast = { id: string; level: LogLevel; title: string; body: string };

export type RealtimeMonitorProps = {
  service?: string;
  region?: string;
  /** Seed for the simulated feed — the same seed replays the same incidents. */
  seed?: number;
  tickMs?: number;
  /** Points visible in the streaming charts. */
  windowSize?: number;
  thresholds?: Thresholds;
  /** Called whenever a metric crosses into a new level. */
  onAlert?: (metric: MetricKey, level: Level, value: number) => void;
  /** Start paused. */
  defaultPaused?: boolean;
  className?: string;
};

const METRICS: {
  key: MetricKey;
  label: string;
  unit: string;
  fmt: (v: number) => string;
}[] = [
  {
    key: "latency",
    label: "p95 latency",
    unit: "ms",
    fmt: (v) => `${Math.round(v)}`,
  },
  { key: "errors", label: "Error rate", unit: "%", fmt: (v) => v.toFixed(2) },
  { key: "cpu", label: "CPU", unit: "%", fmt: (v) => `${Math.round(v)}` },
];

const LEVEL_UI: Record<
  Level,
  { label: string; Icon: typeof CircleCheck; dot: string; text: string }
> = {
  ok: {
    label: "Healthy",
    Icon: CircleCheck,
    dot: "bg-emerald-500",
    text: "text-emerald-600 dark:text-emerald-400",
  },
  warn: {
    label: "Warning",
    Icon: TriangleAlert,
    dot: "bg-amber-500",
    text: "text-amber-600 dark:text-amber-400",
  },
  crit: {
    label: "Critical",
    Icon: CircleAlert,
    dot: "bg-rose-500",
    text: "text-rose-600 dark:text-rose-400",
  },
};

const LOG_UI: Record<
  LogLevel,
  { tag: string; cls: string; Icon: typeof Info }
> = {
  info: { tag: "INFO", cls: "text-muted-foreground bg-muted", Icon: Info },
  ok: {
    tag: "OK",
    cls: "text-emerald-700 bg-emerald-500/12 dark:text-emerald-400",
    Icon: CircleCheck,
  },
  warn: {
    tag: "WARN",
    cls: "text-amber-700 bg-amber-500/15 dark:text-amber-400",
    Icon: TriangleAlert,
  },
  crit: {
    tag: "CRIT",
    cls: "text-rose-700 bg-rose-500/12 dark:text-rose-400",
    Icon: CircleAlert,
  },
};

function MiniSpark({
  data,
  className,
}: {
  data: number[];
  className?: string;
}) {
  const w = 96;
  const h = 28;
  const min = Math.min(...data);
  const max = Math.max(...data);
  const d = data
    .map(
      (v, i) =>
        `${i ? "L" : "M"}${(i / (data.length - 1)) * w},${2 + (1 - (v - min) / (max - min || 1)) * (h - 4)}`,
    )
    .join("");
  return (
    <svg
      viewBox={`0 0 ${w} ${h}`}
      preserveAspectRatio="none"
      className={cn("h-7 w-full", className)}
      aria-hidden
    >
      <path
        d={d}
        fill="none"
        stroke="currentColor"
        strokeWidth={1.5}
        vectorEffect="non-scaling-stroke"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function StatusDot({ level, pulse }: { level: Level; pulse: boolean }) {
  return (
    <span className="relative flex size-2">
      {pulse && level !== "ok" && (
        <span
          className={cn(
            "absolute inline-flex size-full animate-ping rounded-full opacity-60",
            LEVEL_UI[level].dot,
          )}
        />
      )}
      <span
        className={cn(
          "relative inline-flex size-2 rounded-full",
          LEVEL_UI[level].dot,
        )}
      />
    </span>
  );
}

export function RealtimeMonitor({
  service = "orbit-api",
  region = "eu-west-1 · 12 pods",
  seed = 7,
  tickMs = 1000,
  windowSize = 60,
  thresholds = DEFAULT_THRESHOLDS,
  onAlert,
  defaultPaused = false,
  className,
}: RealtimeMonitorProps) {
  const reduce = !!useReducedMotion();
  const [t, setT] = React.useState(windowSize);
  const [paused, setPaused] = React.useState(defaultPaused);
  const [follow, setFollow] = React.useState(true);
  const [unseen, setUnseen] = React.useState(0);
  const [toasts, setToasts] = React.useState<Toast[]>([]);
  const [log, setLog] = React.useState<LogEntry[]>(() => {
    const out: LogEntry[] = [];
    for (let k = windowSize - 24; k <= windowSize; k++) {
      const msg = routineEvent(seed, k);
      if (msg) out.push({ id: `r-${k}`, t: k, level: "info", msg });
    }
    return out;
  });

  const [shownLevels, setShownLevels] = React.useState<Record<
    MetricKey,
    Level
  > | null>(null);
  const tRef = React.useRef(t);
  const levelsRef = React.useRef<Record<MetricKey, Level> | null>(null);
  const timers = React.useRef(new Set<ReturnType<typeof setTimeout>>());
  const onAlertRef = React.useRef(onAlert);
  const thresholdsRef = React.useRef(thresholds);
  const serviceRef = React.useRef(service);
  React.useEffect(() => {
    onAlertRef.current = onAlert;
    thresholdsRef.current = thresholds;
    serviceRef.current = service;
  }, [onAlert, thresholds, service]);

  const dismiss = React.useCallback(
    (id: string) => setToasts((ts) => ts.filter((x) => x.id !== id)),
    [],
  );

  React.useEffect(() => {
    if (paused) return;
    const timerSet = timers.current;
    const id = setInterval(() => {
      const thresholds = thresholdsRef.current;
      const service = serviceRef.current;
      const nt = tRef.current + 1;
      tRef.current = nt;
      setT(nt);
      const cur = sample(seed, nt);
      if (!levelsRef.current) {
        const p = sample(seed, nt - 1);
        levelsRef.current = {
          latency: levelOf("latency", p.latency, thresholds),
          errors: levelOf("errors", p.errors, thresholds),
          cpu: levelOf("cpu", p.cpu, thresholds),
        };
      }
      const lv = levelsRef.current;
      const entries: LogEntry[] = [];
      const newToasts: Toast[] = [];
      for (const m of METRICS) {
        const a = lv[m.key];
        const b = nextLevel(m.key, cur[m.key], a, thresholds);
        if (a === b) continue;
        lv[m.key] = b;
        const value = `${m.fmt(cur[m.key])}${m.unit}`;
        onAlertRef.current?.(m.key, b, cur[m.key]);
        if (b === "ok") {
          entries.push({
            id: `a-${nt}-${m.key}`,
            t: nt,
            level: "ok",
            msg: `${m.label} recovered · ${value}`,
          });
          newToasts.push({
            id: `t-${nt}-${m.key}`,
            level: "ok",
            title: `${m.label} recovered`,
            body: `Back under ${thresholds[m.key].warn}${m.unit} (${value}).`,
          });
        } else if (b === "crit" || a === "ok") {
          const limit =
            b === "crit" ? thresholds[m.key].crit : thresholds[m.key].warn;
          entries.push({
            id: `a-${nt}-${m.key}`,
            t: nt,
            level: b,
            msg: `${m.label} ${value} crossed ${b === "crit" ? "critical" : "warning"} threshold (${limit}${m.unit})`,
          });
          newToasts.push({
            id: `t-${nt}-${m.key}`,
            level: b,
            title: `${m.label} ${b === "crit" ? "critical" : "elevated"}`,
            body: `${value} ≥ ${limit}${m.unit} on ${service}.`,
          });
        } else {
          entries.push({
            id: `a-${nt}-${m.key}`,
            t: nt,
            level: "warn",
            msg: `${m.label} easing · ${value}`,
          });
        }
      }
      setShownLevels({ ...lv });
      const routine = routineEvent(seed, nt);
      if (routine)
        entries.push({ id: `r-${nt}`, t: nt, level: "info", msg: routine });
      if (entries.length) setLog((l) => [...l, ...entries].slice(-200));
      if (newToasts.length) {
        setToasts((ts) => [...newToasts, ...ts].slice(0, 3));
        for (const nt2 of newToasts) {
          const h = setTimeout(() => {
            timerSet.delete(h);
            setToasts((ts) => ts.filter((x) => x.id !== nt2.id));
          }, 5000);
          timerSet.add(h);
        }
      }
    }, tickMs);
    return () => clearInterval(id);
  }, [paused, seed, tickMs]);

  React.useEffect(() => {
    const set = timers.current;
    return () => set.forEach(clearTimeout);
  }, []);

  /* ---------- log auto-scroll ---------- */
  const logRef = React.useRef<HTMLOListElement>(null);
  const lastLen = React.useRef(log.length);
  React.useEffect(() => {
    const el = logRef.current;
    const added = log.length - lastLen.current;
    lastLen.current = log.length;
    if (!el) return;
    if (follow) el.scrollTop = el.scrollHeight;
    else if (added > 0) setUnseen((u) => u + added);
  }, [log, follow]);

  const onLogScroll = (e: React.UIEvent<HTMLOListElement>) => {
    const el = e.currentTarget;
    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 24;
    if (!atBottom && follow) setFollow(false);
    if (atBottom && !follow) {
      setFollow(true);
      setUnseen(0);
    }
  };

  /* ---------- derived ---------- */
  const samples: Sample[] = [];
  for (let k = t - windowSize; k <= t; k++) samples.push(sample(seed, k));
  const now = samples[samples.length - 1];
  const levels =
    shownLevels ??
    (Object.fromEntries(
      METRICS.map((m) => [m.key, levelOf(m.key, now[m.key], thresholds)]),
    ) as Record<MetricKey, Level>);
  const worst: Level = Object.values(levels).includes("crit")
    ? "crit"
    : Object.values(levels).includes("warn")
      ? "warn"
      : "ok";
  const overall = {
    ok: "All systems operational",
    warn: "Degraded performance",
    crit: "Active incident",
  }[worst];
  const rpsTotal = now.rps.eu + now.rps.us + now.rps.ap;
  const recent = samples.slice(-30);
  const timeLabel = (i: number) => clock(t - windowSize + i);

  const tiles = [
    {
      key: "rps",
      label: "Requests / s",
      value: rpsTotal.toLocaleString("en-US"),
      unit: "",
      level: "ok" as Level,
      spark: recent.map((s) => s.rps.eu + s.rps.us + s.rps.ap),
    },
    ...METRICS.map((m) => ({
      key: m.key,
      label: m.label,
      value: m.fmt(now[m.key]),
      unit: m.unit,
      level: levels[m.key],
      spark: recent.map((s) => s[m.key]),
    })),
  ];

  return (
    <div
      className={cn(
        "relative w-full overflow-hidden bg-background p-4 text-foreground sm:p-6",
        PALETTE,
        className,
      )}
    >
      {/* header */}
      <header className="mb-4 flex flex-wrap items-center justify-between gap-3">
        <div className="min-w-0">
          <div className="flex items-center gap-2">
            <h2 className="text-lg font-semibold tracking-tight">{service}</h2>
            <span
              className={cn(
                "inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[11px] font-medium",
                LEVEL_UI[worst].text,
              )}
            >
              <StatusDot level={worst} pulse={!paused && !reduce} />
              {overall}
            </span>
          </div>
          <p className="mt-0.5 text-sm text-muted-foreground">{region}</p>
        </div>
        <div className="flex items-center gap-2">
          <span className="inline-flex items-center gap-1.5 font-mono text-xs text-muted-foreground tabular-nums">
            <span
              className={cn(
                "size-1.5 rounded-full",
                paused ? "bg-muted-foreground" : "bg-emerald-500",
              )}
              aria-hidden
            />
            {paused ? "Paused" : "Live"} · {clock(t)}
          </span>
          <button
            type="button"
            onClick={() => setPaused((p) => !p)}
            aria-pressed={paused}
            className="inline-flex h-8 items-center gap-1.5 rounded-md border bg-card px-2.5 text-xs font-medium shadow-xs outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
          >
            {paused ? (
              <Play className="size-3.5" aria-hidden />
            ) : (
              <Pause className="size-3.5" aria-hidden />
            )}
            {paused ? "Resume" : "Pause"}
          </button>
        </div>
      </header>

      {/* tiles */}
      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
        {tiles.map((tile) => {
          const ui = LEVEL_UI[tile.level];
          return (
            <div
              key={tile.key}
              className={cn(
                "min-w-0 rounded-xl border bg-card p-3.5 text-card-foreground shadow-xs transition-colors sm:p-4",
                tile.level === "warn" && "border-amber-500/50",
                tile.level === "crit" && "border-rose-500/60",
              )}
            >
              <div className="flex items-center justify-between gap-2">
                <p className="truncate text-xs font-medium text-muted-foreground">
                  {tile.label}
                </p>
                <span
                  className={cn(
                    "inline-flex shrink-0 items-center gap-1 text-[10.5px] font-medium",
                    ui.text,
                  )}
                >
                  <ui.Icon className="size-3" aria-hidden />
                  <span className="hidden sm:inline">{ui.label}</span>
                  <span className="sr-only sm:hidden">{ui.label}</span>
                </span>
              </div>
              <p className="mt-1 text-2xl font-semibold tracking-tight tabular-nums">
                {tile.value}
                <span className="ml-0.5 text-sm font-medium text-muted-foreground">
                  {tile.unit}
                </span>
              </p>
              <MiniSpark
                data={tile.spark}
                className={cn(
                  "mt-2",
                  tile.level === "ok" ? "text-[var(--chart-1)]" : ui.text,
                )}
              />
            </div>
          );
        })}
      </div>

      {/* charts + log */}
      <div className="mt-4 grid gap-4 lg:grid-cols-3">
        <div className="grid min-w-0 gap-4 lg:col-span-2">
          <section
            aria-label="Throughput by region"
            className="min-w-0 rounded-xl border bg-card p-4 shadow-xs"
          >
            <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
              <h3 className="text-sm font-medium">Throughput by region</h3>
              <ul className="flex flex-wrap gap-3 text-[11px] text-muted-foreground">
                {[
                  ["us-east", "var(--chart-1)", now.rps.us],
                  ["eu-west", "var(--chart-2)", now.rps.eu],
                  ["ap-south", "var(--chart-3)", now.rps.ap],
                ].map(([name, color, v]) => (
                  <li
                    key={name as string}
                    className="flex items-center gap-1.5"
                  >
                    <span
                      aria-hidden
                      className="h-0.5 w-3 rounded-full"
                      style={{ background: color as string }}
                    />
                    {name}{" "}
                    <span className="font-medium text-foreground tabular-nums">
                      {(v as number).toLocaleString("en-US")}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
            <StreamChart
              label="Requests per second by region"
              tick={t}
              tickMs={tickMs}
              paused={paused}
              timeLabel={timeLabel}
              format={(v) =>
                v >= 1000 ? `${(v / 1000).toFixed(1)}k` : `${Math.round(v)}`
              }
              height={170}
              series={[
                {
                  id: "us",
                  name: "us-east",
                  color: "var(--chart-1)",
                  data: samples.map((s) => s.rps.us),
                },
                {
                  id: "eu",
                  name: "eu-west",
                  color: "var(--chart-2)",
                  data: samples.map((s) => s.rps.eu),
                },
                {
                  id: "ap",
                  name: "ap-south",
                  color: "var(--chart-3)",
                  data: samples.map((s) => s.rps.ap),
                },
              ]}
            />
          </section>
          <section
            aria-label="p95 latency"
            className="min-w-0 rounded-xl border bg-card p-4 shadow-xs"
          >
            <div className="mb-2 flex items-center justify-between gap-2">
              <h3 className="text-sm font-medium">p95 latency</h3>
              <span
                className={cn(
                  "text-[11px] font-medium tabular-nums",
                  LEVEL_UI[levels.latency].text,
                )}
              >
                {Math.round(now.latency)} ms
              </span>
            </div>
            <StreamChart
              label="p95 latency in milliseconds"
              tick={t}
              tickMs={tickMs}
              paused={paused}
              timeLabel={timeLabel}
              format={(v) => `${Math.round(v)}`}
              height={130}
              area
              minMax={thresholds.latency.crit}
              threshold={{
                value: thresholds.latency.warn,
                label: `SLO ${thresholds.latency.warn}ms`,
              }}
              series={[
                {
                  id: "lat",
                  name: "p95",
                  color: "var(--chart-1)",
                  data: samples.map((s) => s.latency),
                },
              ]}
            />
          </section>
        </div>

        <section
          aria-label="Event log"
          className="relative flex min-w-0 flex-col rounded-xl border bg-card shadow-xs"
        >
          <div className="flex items-center justify-between gap-2 border-b px-4 py-3">
            <h3 className="text-sm font-medium">Event log</h3>
            <button
              type="button"
              aria-pressed={follow}
              onClick={() => {
                setFollow((f) => !f);
                setUnseen(0);
              }}
              className={cn(
                "inline-flex h-7 items-center gap-1.5 rounded-md border px-2 text-[11px] font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring",
                follow ? "text-foreground" : "text-muted-foreground",
              )}
            >
              {follow ? (
                <Pause className="size-3" aria-hidden />
              ) : (
                <Play className="size-3" aria-hidden />
              )}
              {follow ? "Auto-scroll on" : "Auto-scroll off"}
            </button>
          </div>
          <div className="relative h-72 shrink-0 lg:h-auto lg:min-h-60 lg:flex-1">
            <ol
              ref={logRef}
              onScroll={onLogScroll}
              aria-label="Events, newest last"
              className="absolute inset-0 overflow-y-auto overscroll-contain px-2 py-2 font-mono text-[11px] leading-relaxed"
            >
              {log.map((e) => {
                const ui = LOG_UI[e.level];
                return (
                  <motion.li
                    key={e.id}
                    initial={reduce ? false : { opacity: 0, x: -6 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ duration: 0.25 }}
                    className={cn(
                      "flex gap-2 rounded px-2 py-1",
                      e.level === "crit" && "bg-rose-500/[0.06]",
                    )}
                  >
                    <span className="shrink-0 text-muted-foreground tabular-nums">
                      {clock(e.t)}
                    </span>
                    <span
                      className={cn(
                        "h-fit shrink-0 rounded px-1 text-[9.5px] font-semibold",
                        ui.cls,
                      )}
                    >
                      {ui.tag}
                    </span>
                    <span className="min-w-0 break-words text-foreground/90">
                      {e.msg}
                    </span>
                  </motion.li>
                );
              })}
            </ol>
          </div>
          <AnimatePresence>
            {!follow && unseen > 0 && (
              <motion.button
                type="button"
                initial={{ opacity: 0, y: 6 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: 6 }}
                onClick={() => {
                  setFollow(true);
                  setUnseen(0);
                }}
                className="absolute bottom-3 left-1/2 inline-flex -translate-x-1/2 items-center gap-1 rounded-full bg-primary px-3 py-1 text-[11px] font-medium text-primary-foreground shadow-lg outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
              >
                <ArrowDown className="size-3" aria-hidden /> {unseen} new event
                {unseen === 1 ? "" : "s"}
              </motion.button>
            )}
          </AnimatePresence>
        </section>
      </div>

      {/* alert toasts */}
      <div className="pointer-events-none absolute top-3 right-3 left-3 z-50 flex flex-col items-end gap-2 sm:left-auto sm:w-80">
        <AnimatePresence initial={false}>
          {toasts.map((toast) => {
            const ui = LOG_UI[toast.level];
            return (
              <motion.div
                key={toast.id}
                layout={!reduce}
                role={toast.level === "crit" ? "alert" : "status"}
                initial={
                  reduce ? { opacity: 0 } : { opacity: 0, x: 40, scale: 0.96 }
                }
                animate={{ opacity: 1, x: 0, scale: 1 }}
                exit={
                  reduce ? { opacity: 0 } : { opacity: 0, x: 40, scale: 0.96 }
                }
                transition={{ type: "spring", stiffness: 420, damping: 34 }}
                className={cn(
                  "pointer-events-auto flex w-full items-start gap-2.5 rounded-lg border bg-popover p-3 text-popover-foreground shadow-xl",
                  toast.level === "crit" && "border-rose-500/50",
                  toast.level === "warn" && "border-amber-500/50",
                  toast.level === "ok" && "border-emerald-500/40",
                )}
              >
                <span
                  className={cn(
                    "mt-0.5 grid size-6 shrink-0 place-items-center rounded-full",
                    ui.cls,
                  )}
                >
                  <ui.Icon className="size-3.5" aria-hidden />
                </span>
                <div className="min-w-0 flex-1">
                  <p className="text-sm font-medium">{toast.title}</p>
                  <p className="mt-0.5 text-xs text-muted-foreground">
                    {toast.body}
                  </p>
                </div>
                <button
                  type="button"
                  aria-label="Dismiss alert"
                  onClick={() => dismiss(toast.id)}
                  className="grid size-6 shrink-0 place-items-center rounded text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
                >
                  <X className="size-3.5" />
                </button>
              </motion.div>
            );
          })}
        </AnimatePresence>
      </div>
    </div>
  );
}