// lattice-views.jsx — Full-screen rail views.
// Each takes the main area when its rail item is active.

// ─── Edge / Nodes table ──────────────────────────────────────────────
function EdgeView({ nodes, onOpenNode, query }) {
  const filtered = !query ? nodes :
    nodes.filter(n => (n.id + " " + n.city + " " + n.country + " " + n.type).toLowerCase().includes(query.toLowerCase()));
  return (
    <div className="view view--scroll">
      <div className="view__head">
        <div>
          <div className="view__title">Edge nodes</div>
          <div className="view__sub">19 deployed · 18 healthy · 1 critical · {filtered.length} matching</div>
        </div>
        <div className="row" style={{ gap: 6 }}>
          <button className="btn btn--secondary"><Icon name="filter" size={12}/> Filter</button>
          <button className="btn btn--primary"><Icon name="plus" size={12}/> Provision node</button>
        </div>
      </div>
      <div className="table card">
        <div className="table__head">
          <span>ID</span><span>City / Country</span><span>Type</span><span>Status</span><span>CPU</span><span>MEM</span><span>INGEST</span><span></span>
        </div>
        <div className="table__body">
          {filtered.map(n => (
            <div className="table__row" key={n.id} onClick={() => onOpenNode && onOpenNode(n)}>
              <span className="mono">{n.id}</span>
              <span>{n.city} <span className="muted">· {n.country}</span></span>
              <span><span className="pill pill--mute">{n.type}</span></span>
              <span><span className={"pill " + statusPill(n.status)}>{n.status}</span></span>
              <span className="mono">{n.cpu}%</span>
              <span className="mono">{n.mem}%</span>
              <span className="mono">{n.ingest.toFixed(1)} Mpps</span>
              <span><Icon name="chevron-right" size={12} style={{ color: "var(--muted-foreground)" }}/></span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── AI / Models ────────────────────────────────────────────────────
function AIView({ query }) {
  const filtered = !query ? MODELS :
    MODELS.filter(m => (m.id + " " + m.task).toLowerCase().includes(query.toLowerCase()));
  return (
    <div className="view view--scroll">
      <div className="view__head">
        <div>
          <div className="view__title">AI inference</div>
          <div className="view__sub">{MODELS.length} models active · {MODELS.reduce((s, m) => s + m.hosts, 0)} host deployments · WASM-loaded</div>
        </div>
        <button className="btn btn--primary"><Icon name="plus" size={12}/> Deploy model</button>
      </div>
      <div className="grid grid--3">
        {filtered.map(m => (
          <div className="card model-card" key={m.id}>
            <div className="model-card__head">
              <div>
                <div className="model-card__name">{m.id}</div>
                <div className="model-card__task muted">{m.task}</div>
              </div>
              <span className={"pill " + (m.tone === "warn" ? "pill--warn" : "pill--ok")}>{m.tone === "warn" ? "DEGRADED" : "HEALTHY"}</span>
            </div>
            <div className="model-card__grid">
              <span className="muted">hosts</span>     <span className="mono">{m.hosts}</span>
              <span className="muted">p99 latency</span><span className="mono">{m.p99}</span>
              <span className="muted">throughput</span><span className="mono">{m.fps}</span>
              <span className="muted">artifact</span>  <span className="mono">{m.size}</span>
              <span className="muted">build</span>     <span className="mono">{m.build}</span>
            </div>
            <div className="row" style={{ gap: 6, marginTop: 12 }}>
              <button className="btn btn--secondary" style={{ fontSize: 11, padding: "6px 10px" }}>Rollback</button>
              <button className="btn btn--secondary" style={{ fontSize: 11, padding: "6px 10px" }}>Canary</button>
              <button className="btn btn--ghost" style={{ marginLeft: "auto", fontSize: 11, padding: "6px 10px" }}>Logs <Icon name="arrow-up-right" size={10}/></button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Telemetry full view ────────────────────────────────────────────
function TelemView({ tick }) {
  const series = React.useMemo(() => {
    const len = 120;
    const seed = (off, base, amp, freq) => Array.from({length: len}, (_, i) =>
      base + Math.sin((i + off) / freq) * amp + (Math.random() - 0.5) * amp * 0.15);
    return {
      ingest:  seed(tick * 0.5, 90,  20, 10),
      latency: seed(tick * 0.4, 18,   7, 14),
      mesh:    seed(tick * 0.3, 96,   2, 18),
      cpu:     seed(tick * 0.6, 52,  18, 9),
      mem:     seed(tick * 0.2, 58,  10, 16),
      err:     seed(tick * 0.7,  1.6, 1.4, 6),
    };
  }, [tick]);
  const lanes = [
    ["Ingest rate",   "Mpps", series.ingest,  "var(--info)"],
    ["p99 latency",   "ms",   series.latency, "var(--warning)"],
    ["Mesh health",   "%",    series.mesh,    "var(--success)"],
    ["CPU avg",       "%",    series.cpu,     "var(--info)"],
    ["Memory avg",    "%",    series.mem,     "var(--info)"],
    ["Error rate",    "/sec", series.err,     "var(--destructive)"],
  ];
  return (
    <div className="view view--scroll">
      <div className="view__head">
        <div>
          <div className="view__title">Telemetry</div>
          <div className="view__sub">120s window · per-lattice aggregates · 6 series</div>
        </div>
        <div className="row" style={{ gap: 4 }}>
          {["15m","1h","6h","24h","7d"].map((r, i) => (
            <button key={r} className={"filter-chip" + (i === 1 ? " filter-chip--on" : "")}>{r}</button>
          ))}
        </div>
      </div>
      <div className="grid grid--3">
        {lanes.map(([label, unit, points, color]) => {
          const last = points[points.length-1];
          return (
            <div className="card big-spark" key={label}>
              <div className="big-spark__head">
                <div className="card__title" style={{ textTransform: "uppercase" }}>{label}</div>
                <div className="big-spark__value">{last.toFixed(unit === "Mpps" || unit === "/sec" ? 1 : 0)} <span className="muted mono" style={{ fontSize: 11 }}>{unit}</span></div>
              </div>
              <Sparkline points={points} color={color} height={80}/>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── Security / Incidents list ──────────────────────────────────────
const INCIDENTS = [
  { id: "INC-AF02-2026.05.15.1142", node: "LAT-AF-02", title: "Geofence breach · GF-417",     sev: "crit", status: "open",     time: "4m ago",  conf: 0.81 },
  { id: "INC-AS02-2026.05.15.1118", node: "LAT-AS-02", title: "Unauthorized RF emitter",      sev: "warn", status: "investig.", time: "28m ago", conf: 0.62 },
  { id: "INC-ME01-2026.05.15.0902", node: "LAT-ME-01", title: "HSM key rotation overdue",     sev: "warn", status: "scheduled",time: "3h ago",  conf: null },
  { id: "INC-NA04-2026.05.14.2317", node: "LAT-NA-04", title: "Sustained ingest throttle",    sev: "warn", status: "resolved", time: "16h ago", conf: null },
  { id: "INC-EU02-2026.05.14.1644", node: "LAT-EU-02", title: "Inference drift · gridseg-v4", sev: "info", status: "resolved", time: "22h ago", conf: 0.43 },
  { id: "INC-SA02-2026.05.14.0911", node: "LAT-SA-02", title: "Camera-02 frame stall",        sev: "info", status: "resolved", time: "1d ago",  conf: null },
];

function SecView({ onOpenIncident, query }) {
  const filtered = !query ? INCIDENTS :
    INCIDENTS.filter(i => (i.id + " " + i.title + " " + i.node).toLowerCase().includes(query.toLowerCase()));
  return (
    <div className="view view--scroll">
      <div className="view__head">
        <div>
          <div className="view__title">Security · incidents</div>
          <div className="view__sub">1 critical open · 2 under investigation · {INCIDENTS.length} in 7d</div>
        </div>
        <div className="row" style={{ gap: 4 }}>
          {["all","open","investig.","resolved"].map((r, i) => (
            <button key={r} className={"filter-chip" + (i === 0 ? " filter-chip--on" : "")}>{r}</button>
          ))}
        </div>
      </div>
      <div className="table card">
        <div className="table__head table__head--incidents">
          <span>ID</span><span>Title</span><span>Node</span><span>Severity</span><span>Confidence</span><span>Status</span><span>When</span><span></span>
        </div>
        <div className="table__body">
          {filtered.map(i => (
            <div className="table__row table__row--incidents" key={i.id} onClick={() => onOpenIncident && onOpenIncident(i)}>
              <span className="mono" style={{ fontSize: 11 }}>{i.id}</span>
              <span>{i.title}</span>
              <span className="mono">{i.node}</span>
              <span><span className={"pill " + statusPill(i.sev)}>{i.sev}</span></span>
              <span className="mono">{i.conf == null ? "—" : i.conf.toFixed(2)}</span>
              <span className="muted">{i.status}</span>
              <span className="muted mono">{i.time}</span>
              <span><Icon name="chevron-right" size={12} style={{ color: "var(--muted-foreground)" }}/></span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── Logs / Raw event stream ────────────────────────────────────────
function LogsView({ events, query }) {
  const filtered = !query ? events :
    events.filter(e => (e.title + " " + e.msg + " " + e.node + " " + e.type).toLowerCase().includes(query.toLowerCase()));
  return (
    <div className="view view--scroll">
      <div className="view__head">
        <div>
          <div className="view__title">Logs</div>
          <div className="view__sub">Live tail · {filtered.length} of {events.length} entries</div>
        </div>
        <div className="row" style={{ gap: 4 }}>
          <button className="btn btn--secondary"><Icon name="filter" size={12}/> Filter</button>
          <button className="btn btn--secondary"><Icon name="arrow-up-right" size={12}/> Export</button>
        </div>
      </div>
      <div className="card logs">
        {filtered.map(e => (
          <div className="logs__row" key={e.id}>
            <span className="logs__time">{e.time}</span>
            <span className={"pill " + statusPill(e.sev)} style={{ fontSize: 8, minWidth: 38, textAlign: "center" }}>{e.sev}</span>
            <code className="logs__type">{e.type.padEnd(9)}</code>
            <span className="logs__node mono">{e.node}</span>
            <span className="logs__msg">{e.msg}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { EdgeView, AIView, TelemView, SecView, LogsView, INCIDENTS });