/* ============================================================
   TDS Errors view — presentational components
   Shares the dashboard's visual vocabulary: tds-* atoms,
   fp-* failure patterns, cat-* category badges, drawers/tabs.
   New classes are prefixed ev- (see errors.css).
   ============================================================ */

const { useState: evUseState, useMemo: evUseMemo, useEffect: evUseEffect } = React;

/* ---------- meta ------------------------------------------- */
const EV_CATEGORY_META = {
  BSS_VALIDATION:   { label: 'Validation',  full: 'BSS Validation',   cls: 'cat-bss-v',  color: '#c6800c' },
  BSS_UNAVAILABLE:  { label: 'Unavailable', full: 'BSS Unavailable',  cls: 'cat-bss-u',  color: '#c4322a' },
  BSS_TIMEOUT:      { label: 'Timeout',     full: 'BSS Timeout',      cls: 'cat-bss-t',  color: '#e8b007' },
  ITDM_INTERNAL:    { label: 'Internal',    full: 'iTDM Internal',    cls: 'cat-itdm-i', color: '#7c5cd6' },
  ITDM_UNAVAILABLE: { label: 'Unavailable', full: 'iTDM Unavailable', cls: 'cat-itdm-u', color: '#e0524a' },
  AUTH_EXPIRED:     { label: 'Token expired', full: 'Auth Expired',   cls: 'cat-auth',   color: '#d6589c' },
  NETWORK_ERROR:    { label: 'Connection',  full: 'Network Error',    cls: 'cat-net',    color: '#3b82d6' },
  PROVISIONING:     { label: 'Provisioning', full: 'NC Provisioning', cls: 'cat-prov',   color: '#0d9488' },
  ORDER_TIMEOUT:    { label: 'Order stuck', full: 'Order Timeout',    cls: 'cat-ordto',  color: '#b45309' },
  STOCK:            { label: 'Stock',       full: 'Stock / Logistics', cls: 'cat-stock', color: '#65a30d' },
  UNKNOWN:          { label: 'Unknown',     full: 'Unknown',          cls: 'cat-unk',    color: '#8d8674' },
};
const EV_STEPS = ['CREATING_CUSTOMER', 'CREATING_ORDER', 'GENERATING_PID'];
const EV_STEP_LABEL = { CREATING_CUSTOMER: 'Customer', CREATING_ORDER: 'Order', GENERATING_PID: 'PID' };

/* Upstream systems the creation pipeline depends on. Error
   categories are grouped per backend so "which backend is
   failing on which env" is the first thing the section answers. */
const EV_BACKENDS = [
  { id: 'BSS',  label: 'BSS',          sub: 'order & customer system',   cats: ['BSS_VALIDATION', 'BSS_UNAVAILABLE', 'BSS_TIMEOUT'] },
  { id: 'NC',   label: 'Netcracker',   sub: 'fulfilment & delivery',     cats: ['PROVISIONING', 'ORDER_TIMEOUT', 'STOCK'] },
  { id: 'ITDM', label: 'iTDM',         sub: 'test-order engine',         cats: ['ITDM_INTERNAL', 'ITDM_UNAVAILABLE'] },
  { id: 'AUTH', label: 'Auth · Okta',  sub: 'service tokens',            cats: ['AUTH_EXPIRED'] },
  { id: 'NET',  label: 'Network',      sub: 'transport between systems', cats: ['NETWORK_ERROR'] },
  { id: 'UNC',  label: 'Uncategorized', sub: 'unparsed upstream errors', cats: ['UNKNOWN'] },
];

function evCat(c) { return EV_CATEGORY_META[c] || EV_CATEGORY_META.UNKNOWN; }

/* ---------- time helpers (UTC source → local render) -------- */
const EV_TZ = (() => {
  try { return Intl.DateTimeFormat().resolvedOptions().timeZone; } catch (e) { return 'local'; }
})();
function evFmtTime(ts) {
  const d = new Date(ts);
  return d.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
}
function evFmtDay(ts) {
  return new Date(ts).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
}
function evRelTime(ts) {
  if (!ts) return '—';
  const mins = Math.round((Date.now() - new Date(ts).getTime()) / 60000);
  if (mins < 2) return 'just now';
  if (mins < 60) return mins + ' min ago';
  const h = Math.floor(mins / 60);
  if (h < 24) return h + 'h ago';
  return Math.floor(h / 24) + 'd ago';
}
function evDuration(hours) {
  if (hours == null) return '—';
  if (hours < 1) return Math.round(hours * 60) + ' min';
  if (hours < 48) return Math.round(hours * 10) / 10 + 'h';
  return Math.floor(hours / 24) + 'd ' + Math.round(hours % 24) + 'h';
}

/* ---------- range picker ------------------------------------ */
function EvRangePicker({ rangeId, customFrom, customTo, range, onChange }) {
  const api = window.TDS_ERRORS_API;
  const maxDate = new Date().toISOString().slice(0, 10);
  const minDate = new Date(Date.now() - api.RETENTION_DAYS * 86400000).toISOString().slice(0, 10);
  return (
    <div className="ev-range">
      <div className="ev-seg" role="tablist" aria-label="Time range">
        {api.RANGE_PRESETS.map((p) => (
          <button
            key={p.id}
            type="button"
            className={"ev-seg-btn " + (rangeId === p.id ? 'is-active' : '')}
            onClick={() => onChange({ rangeId: p.id })}
          >{p.label}</button>
        ))}
      </div>
      {rangeId === 'custom' && (
        <div className="ev-custom-dates">
          <input type="date" className="ev-date" value={customFrom || ''} min={minDate} max={maxDate}
            onChange={(e) => onChange({ customFrom: e.target.value })} aria-label="From date" />
          <span className="ev-date-sep">→</span>
          <input type="date" className="ev-date" value={customTo || ''} min={minDate} max={maxDate}
            onChange={(e) => onChange({ customTo: e.target.value })} aria-label="To date" />
        </div>
      )}
      <span className="ev-range-meta tabular">
        {evFmtTime(range.from)} – {evFmtTime(range.to)} · {EV_TZ}
        {range.clamped && <span className="ev-range-clamp"> · clipped to {window.TDS_ERRORS_API.RETENTION_DAYS}-day retention</span>}
      </span>
    </div>
  );
}

/* ---------- filter bar -------------------------------------- */
function EvSelect({ value, onChange, options, placeholder, mono }) {
  return (
    <select
      className={"ev-select " + (mono ? 'mono' : '') + (value ? ' has-value' : '')}
      value={value || ''}
      onChange={(e) => onChange(e.target.value)}
    >
      <option value="">{placeholder}</option>
      {options.map((o) => (
        <option key={o.value} value={o.value}>{o.label}</option>
      ))}
    </select>
  );
}

function EvFilterBar({ filters, setF, features, teams }) {
  const ENVS = window.TDS_ERRORS_API.ENVS;
  const activeEnvs = filters.envs;
  const toggleEnv = (env) => {
    const next = activeEnvs.includes(env)
      ? activeEnvs.filter((e) => e !== env)
      : [...activeEnvs, env];
    if (next.length === 0) return; // never zero envs
    setF({ envs: next });
  };
  const hasAny = filters.feature || filters.step || filters.team || filters.brand;
  return (
    <div className="ev-filterbar">
      <div className="ev-envtoggle" role="group" aria-label="Environments">
        {ENVS.map((env) => (
          <button
            key={env}
            type="button"
            className={"ev-envchip " + (activeEnvs.includes(env) ? 'is-on is-' + env.toLowerCase() : '')}
            onClick={() => toggleEnv(env)}
          >{env}</button>
        ))}
      </div>
      <EvSelect value={filters.feature} onChange={(v) => setF({ feature: v })} mono
        options={features.map((f) => ({ value: f, label: f }))} placeholder="Feature: all" />
      <EvSelect value={filters.step} onChange={(v) => setF({ step: v })}
        options={EV_STEPS.map((s) => ({ value: s, label: EV_STEP_LABEL[s] + ' step' }))} placeholder="Step: all" />
      <EvSelect value={filters.team} onChange={(v) => setF({ team: v })}
        options={teams.map((t) => ({ value: t.name, label: t.displayName + ' (' + t.name + ')' }))} placeholder="Team: all" />
      <EvSelect value={filters.brand} onChange={(v) => setF({ brand: v })}
        options={[{ value: 'TELENET', label: 'Telenet' }, { value: 'BASE', label: 'BASE' }]} placeholder="Brand: all" />
      {hasAny && (
        <button type="button" className="ev-clear-all" onClick={() => setF({ feature: '', step: '', team: '', brand: '' })}>
          Clear filters
        </button>
      )}
    </div>
  );
}

/* ---------- env summary cards ------------------------------- */
function EvEnvCard({ env, state, onRetry }) {
  const cls = "ev-envcard";
  if (state.loading) {
    return (
      <div className={cls}>
        <div className="ev-envcard-top"><span className={"tds-env-badge is-" + env.toLowerCase()}>{env}</span></div>
        <div className="ev-skel" /><div className="ev-skel ev-skel-short" />
      </div>
    );
  }
  if (state.error) {
    return (
      <div className={cls + " is-error"}>
        <div className="ev-envcard-top">
          <span className={"tds-env-badge is-" + env.toLowerCase()}>{env}</span>
          <span className="tds-pill tds-pill-err">unavailable</span>
        </div>
        <div className="ev-envcard-err mono">{state.error}</div>
        <button type="button" className="tds-btn tds-btn-ghost ev-retry" onClick={onRetry}>↻ Retry</button>
      </div>
    );
  }
  const d = state.data;
  if (!d) return null;
  // Real FailureReport shape: windowedFailures (count in [from,to]) and
  // byCategory: { CATEGORY: { count, firstSeen, lastSeen, topErrorMessage } }.
  const total = d.failures ? (d.failures.windowedFailures || 0) : 0;
  const incs = d.incidents ? d.incidents.incidents : [];
  const ongoing = incs.filter((i) => i.ongoing).length;
  const incHours = incs.reduce((s, i) => s + (i.durationHours || 0), 0);
  const topCat = d.failures && Object.entries(d.failures.byCategory || {})
    .sort((a, b) => (b[1].count || 0) - (a[1].count || 0))[0];
  return (
    <div className={cls + (ongoing > 0 ? ' has-ongoing' : '')}>
      <div className="ev-envcard-top">
        <span className={"tds-env-badge is-" + env.toLowerCase()}>{env}</span>
        {ongoing > 0 && <span className="ev-ongoing-mini"><span className="ev-pulse" />{ongoing} ongoing</span>}
      </div>
      <div className="ev-envcard-big tabular">{total}<span className="ev-envcard-unit"> errors</span></div>
      <div className="ev-envcard-meta">
        <span className="tabular">{incs.length} incident{incs.length !== 1 ? 's' : ''} · {evDuration(incHours)} broken</span>
        {topCat
          ? <span className={"fp-cat-badge " + evCat(topCat[0]).cls}>{evCat(topCat[0]).full} {topCat[1].count}×</span>
          : <span className="ev-envcard-clean">no errors recorded</span>}
      </div>
    </div>
  );
}

/* ---------- incident timeline (gantt) ------------------------ */
function EvTimeline({ range, rows, selected, onSelect, loading }) {
  const span = range.to - range.from;
  const pct = (t) => Math.max(0, Math.min(100, ((t - range.from) / span) * 100));
  const ticks = evUseMemo(() => {
    const out = [];
    const dayMs = 86400000;
    const days = Math.max(1, Math.round(span / dayMs));
    const step = Math.max(1, Math.ceil(days / 6));
    const first = new Date(range.from); first.setHours(0, 0, 0, 0);
    for (let t = first.getTime(); t <= range.to; t += step * dayMs) {
      if (t >= range.from) out.push(t);
    }
    return out;
  }, [range.from, range.to]);

  if (loading && rows.length === 0) {
    return (
      <div className="ev-timeline" aria-busy="true">
        {[0, 1, 2].map((i) => (
          <div key={i} className="ev-tl-row">
            <div className="ev-tl-label"><div className="ev-skel" style={{ width: i === 1 ? '70%' : '85%' }} /></div>
            <div className="ev-tl-track ev-tl-track-skel" />
          </div>
        ))}
      </div>
    );
  }
  if (rows.length === 0) {
    return <div className="ev-empty">No availability incidents in this window.</div>;
  }
  return (
    <div className="ev-timeline">
      <div className="ev-tl-axis">
        <span className="ev-tl-axis-label" />
        <div className="ev-tl-axis-track">
          {ticks.map((t) => (
            <span key={t} className="ev-tl-tick tabular" style={{ left: pct(t) + '%' }}>{evFmtDay(t)}</span>
          ))}
        </div>
      </div>
      {rows.map((row) => (
        <div key={row.key} className="ev-tl-row">
          <div className="ev-tl-label">
            <span className={"tds-env-badge is-" + row.env.toLowerCase()}>{row.env}</span>
            <span className="mono ev-tl-feat">{row.feature}</span>
          </div>
          <div className="ev-tl-track">
            {ticks.map((t) => <span key={t} className="ev-tl-grid" style={{ left: pct(t) + '%' }} />)}
            {row.incidents.map((ic, i) => {
              const s = new Date(ic.startedAt).getTime();
              const e = ic.endedAt ? new Date(ic.endedAt).getTime() : Date.now();
              const left = pct(s);
              const width = Math.max(0.6, pct(e) - left);
              const isSel = selected && selected.env === row.env && selected.incident === ic;
              const color = ic.rootCause ? evCat(ic.rootCause).color : 'var(--tds-border-strong)';
              return (
                <button
                  key={i}
                  type="button"
                  className={"ev-tl-bar" + (ic.ongoing ? ' is-ongoing' : '') + (isSel ? ' is-selected' : '') + (ic.rootCause ? '' : ' is-uncaused')}
                  style={{ left: left + '%', width: width + '%', background: color }}
                  title={row.feature + ' · ' + evDuration(ic.durationHours) + (ic.rootCause ? ' · ' + ic.rootCause : ' · cause unknown')}
                  onClick={() => onSelect(isSel ? null : { env: row.env, feature: row.feature, incident: ic })}
                />
              );
            })}
          </div>
        </div>
      ))}
    </div>
  );
}

function EvIncidentDetail({ sel, onClose }) {
  const [copied, setCopied] = evUseState(false);
  if (!sel) return null;
  const ic = sel.incident;
  const copy = () => {
    try { navigator.clipboard.writeText(ic.sampleMessage || ''); setCopied(true); setTimeout(() => setCopied(false), 1400); } catch (e) {}
  };
  return (
    <div className="ev-inc-detail">
      <div className="ev-inc-detail-head">
        <span className={"tds-env-badge is-" + sel.env.toLowerCase()}>{sel.env}</span>
        <span className="mono">{sel.feature}</span>
        {ic.ongoing
          ? <span className="ev-ongoing-mini"><span className="ev-pulse" />ongoing</span>
          : <span className="tds-pill tds-pill-cat">resolved</span>}
        <span className="ev-inc-detail-time tabular">
          {evFmtTime(ic.startedAt)} → {ic.endedAt ? evFmtTime(ic.endedAt) : 'now'} · {evDuration(ic.durationHours)}
        </span>
        <button className="tds-btn tds-btn-ghost tds-btn-icon" onClick={onClose} aria-label="Close detail">×</button>
      </div>
      <div className="ev-inc-detail-body">
        <div className="ev-inc-fact">
          <span className="ev-inc-fact-label">Dominant cause</span>
          {ic.rootCause
            ? <span className={"fp-cat-badge " + evCat(ic.rootCause).cls}>{evCat(ic.rootCause).full}</span>
            : <span className="ev-nocause">none — pool was empty but no failure row overlapped (common for short ~06:00 verify-cron windows)</span>}
        </div>
        <div className="ev-inc-fact">
          <span className="ev-inc-fact-label">Creation attempts during outage</span>
          <span className="tabular">{ic.attempts}</span>
        </div>
        {ic.sampleMessage && (
          <div className="ev-inc-sample">
            <div className="fp-expand-head">
              <span className="fp-expand-label">Sample error message</span>
              <button className={"tds-copy-btn " + (copied ? 'is-copied' : '')} onClick={copy}>{copied ? 'Copied' : 'Copy'}</button>
            </div>
            <pre className="fp-code">{ic.sampleMessage}</pre>
          </div>
        )}
      </div>
    </div>
  );
}

/* ---------- sparkline ---------------------------------------- */
function EvSpark({ buckets, bucketMs, range, color }) {
  const series = evUseMemo(() => {
    if (!bucketMs) return [];
    const map = new Map(buckets.map((b) => [b.t, b.n]));
    // The server buckets on a UTC grid (floor(epoch / bucketMs) * bucketMs)
    // for hourly AND daily buckets — align the reconstructed series the same
    // way or the lookups all miss.
    const out = [];
    const start = Math.floor(range.from / bucketMs) * bucketMs;
    for (let t = start; t <= range.to; t += bucketMs) out.push(map.get(t) || 0);
    return out;
  }, [buckets, bucketMs, range.from, range.to]);
  const max = Math.max(1, ...series);
  if (series.length === 0 || series.every((n) => n === 0)) {
    return <div className="ev-spark is-empty"><span className="ev-spark-base" /></div>;
  }
  return (
    <div className="ev-spark" aria-hidden="true">
      {series.map((n, i) => (
        <span key={i} style={{ height: (n > 0 ? Math.max(12, (n / max) * 100) : 4) + '%', background: n > 0 ? color : 'var(--tds-border-subtle)' }} />
      ))}
    </div>
  );
}

/* ---------- backend × environment matrix --------------------- */
/* Answers "which backend is failing on which env" at a glance.
   Rows: upstream systems (expandable into their error categories).
   Cells: error counts in window, shaded by share of the worst cell.
   Trend: per-backend sparkline over the window (selected envs).   */
function EvBackendMatrix({ envs, perEnv, range, onDrill, drill }) {
  const [expanded, setExpanded] = evUseState({});

  const cellCount = (env, cats) => {
    const d = perEnv[env];
    if (!d || d.loading || d.error || !d.byCategory) return null;
    return cats.reduce((s, c) => s + (d.byCategory[c] || 0), 0);
  };
  const maxCell = evUseMemo(() => {
    let m = 0;
    EV_BACKENDS.forEach((b) => envs.forEach((env) => { m = Math.max(m, cellCount(env, b.cats) || 0); }));
    return Math.max(m, 1);
  }, [perEnv, envs.join(',')]);

  const heat = (n) => {
    if (n === null) return 'is-na';
    if (n === 0) return 'is-0';
    if (n >= maxCell * 0.6) return 'is-3';
    if (n >= maxCell * 0.25) return 'is-2';
    return 'is-1';
  };

  const sparkFor = (cats) => {
    const merged = new Map();
    let bucketMs = null;
    envs.forEach((env) => {
      const d = perEnv[env];
      if (!d || !d.histogram) return;
      bucketMs = d.bucketMs;
      d.histogram.forEach((b) => {
        const n = cats.reduce((s, c) => s + (b.byCategory[c] || 0), 0);
        if (n > 0) merged.set(b.t, (merged.get(b.t) || 0) + n);
      });
    });
    return { buckets: Array.from(merged.entries()).map(([t, n]) => ({ t, n })), bucketMs };
  };

  const anyLoading = envs.some((env) => !perEnv[env] || perEnv[env].loading);

  return (
    <div className="ev-bm" data-envs={envs.length}>
      <div className="ev-bm-row ev-bm-head">
        <div className="ev-bm-syscell"><span className="mx-th">Backend</span></div>
        {envs.map((env) => (
          <div key={env} className="ev-bm-envhead">
            <span className={"tds-env-badge is-" + env.toLowerCase()}>{env}</span>
            {perEnv[env] && perEnv[env].error && <span className="ev-bm-envwarn" title={perEnv[env].error}>⚠</span>}
          </div>
        ))}
        <div className="ev-bm-trendhead"><span className="mx-th">Trend</span></div>
      </div>

      {EV_BACKENDS.map((b) => {
        const isExpanded = !!expanded[b.id];
        const rowTotal = envs.reduce((s, env) => s + (cellCount(env, b.cats) || 0), 0);
        const spark = sparkFor(b.cats);
        const dominantColor = (() => {
          const sums = b.cats.map((c) => [c, envs.reduce((s, env) => s + ((perEnv[env] && perEnv[env].byCategory && perEnv[env].byCategory[c]) || 0), 0)]);
          sums.sort((x, y) => y[1] - x[1]);
          return evCat(sums[0][0]).color;
        })();
        return (
          <React.Fragment key={b.id}>
            <div className={"ev-bm-row" + (rowTotal === 0 ? ' is-quiet' : '') + (isExpanded ? ' is-expanded' : '')}>
              <div
                className="ev-bm-syscell ev-bm-syscell-toggle"
                onClick={() => b.cats.length > 1 && setExpanded((e) => ({ ...e, [b.id]: !e[b.id] }))}
                role={b.cats.length > 1 ? 'button' : undefined}
                tabIndex={b.cats.length > 1 ? 0 : undefined}
              >
                {b.cats.length > 1
                  ? <span className={"mx-feat-chev" + (isExpanded ? ' is-open' : '')} aria-hidden="true">›</span>
                  : <span className="ev-bm-chev-spacer" aria-hidden="true" />}
                <div className="ev-bm-sysname">
                  <span className="ev-bm-syslabel">{b.label}</span>
                  <span className="ev-bm-syssub">{b.sub}</span>
                </div>
              </div>
              {envs.map((env) => {
                const n = cellCount(env, b.cats);
                const isLoading = !perEnv[env] || perEnv[env].loading;
                const isErr = !isLoading && perEnv[env].error;
                const active = drill && drill.env === env && drill.backendId === b.id && !drill.category;
                return (
                  <button
                    key={env}
                    type="button"
                    className={"ev-bm-cell " + (isLoading ? 'is-0' : isErr ? 'is-na' : heat(n)) + (active ? ' is-active' : '')}
                    disabled={!!isErr || !!isLoading || n === 0}
                    title={isErr ? env + ' unavailable: ' + perEnv[env].error : (n || 0) + ' ' + b.label + ' error' + (n !== 1 ? 's' : '') + ' on ' + env + ' in window'}
                    onClick={() => onDrill({ env, backendId: b.id, category: null })}
                  >
                    {isLoading ? <span className="ev-bm-cell-load" /> : isErr ? '—' : n === 0 ? <span className="ev-bm-zero">·</span> : <span className="tabular">{n}</span>}
                  </button>
                );
              })}
              <div className="ev-bm-trend">
                {anyLoading ? <div className="ev-skel" style={{ width: '100%' }} /> : <EvSpark buckets={spark.buckets} bucketMs={spark.bucketMs} range={range} color={dominantColor} />}
              </div>
            </div>

            {isExpanded && b.cats.map((c) => {
              const spark2 = sparkFor([c]);
              return (
                <div key={c} className="ev-bm-row ev-bm-subrow">
                  <div className="ev-bm-syscell ev-bm-subcell">
                    <span className={"fp-cat-badge " + evCat(c).cls}>{evCat(c).label}</span>
                  </div>
                  {envs.map((env) => {
                    const n = cellCount(env, [c]);
                    const isLoading = !perEnv[env] || perEnv[env].loading;
                    const isErr = !isLoading && perEnv[env].error;
                    const active = drill && drill.env === env && drill.category === c;
                    return (
                      <button
                        key={env}
                        type="button"
                        className={"ev-bm-cell ev-bm-cell-sub " + (isLoading ? 'is-0' : isErr ? 'is-na' : heat(n)) + (active ? ' is-active' : '')}
                        disabled={isLoading || !!isErr || n === 0 || n === null}
                        onClick={() => onDrill({ env, backendId: b.id, category: c })}
                      >
                        {isLoading ? <span className="ev-bm-cell-load" /> : isErr ? '—' : n === 0 || n === null ? <span className="ev-bm-zero">·</span> : <span className="tabular">{n}</span>}
                      </button>
                    );
                  })}
                  <div className="ev-bm-trend ev-bm-trend-sub">
                    <EvSpark buckets={spark2.buckets} bucketMs={spark2.bucketMs} range={range} color={evCat(c).color} />
                  </div>
                </div>
              );
            })}
          </React.Fragment>
        );
      })}
    </div>
  );
}

/* ---------- pattern list (grouped messages) ------------------ */
function EvPatterns({ groups, showEnv }) {
  const [expanded, setExpanded] = evUseState({});
  const [copiedKey, setCopiedKey] = evUseState(null);
  const copy = (text, key) => {
    try { navigator.clipboard.writeText(text); } catch (e) {}
    setCopiedKey(key); setTimeout(() => setCopiedKey(null), 1400);
  };
  if (groups.length === 0) {
    return <div className="ev-empty">No grouped patterns for this selection.</div>;
  }
  return (
    <div className="ev-patterns">
      {groups.map((g, i) => {
        const meta = evCat(g.category);
        const isOpen = !!expanded[i];
        const copied = copiedKey === 'pat:' + i;
        return (
          <div key={i} className={"fp-group " + (isOpen ? 'is-open' : '')}>
            <div className="fp-group-head" onClick={() => setExpanded((p) => ({ ...p, [i]: !p[i] }))}>
              {showEnv && <span className={"tds-env-badge is-" + g.env.toLowerCase()}>{g.env}</span>}
              <span className={"fp-cat-badge " + meta.cls}>{meta.full}</span>
              {g.errorCode && <span className="ev-pat-code mono">{g.errorCode}</span>}
              <span className="fp-count tabular">{g.count}×</span>
              <span className="fp-last tabular">{evRelTime(g.lastSeen)}</span>
              <span className={"fp-chev " + (isOpen ? 'is-open' : '')}>›</span>
            </div>
            <div className="fp-preview">{g.message}</div>
            {isOpen && (
              <div className="fp-expand">
                <div className="fp-expand-head">
                  <span className="fp-expand-label">Latest raw message (ground truth — categories are best-effort)</span>
                  <button className={"tds-copy-btn " + (copied ? 'is-copied' : '')} onClick={() => copy(g.message, 'pat:' + i)}>
                    {copied ? 'Copied' : 'Copy'}
                  </button>
                </div>
                <pre className="fp-code">{g.message}</pre>
                <div className="fp-expand-meta">
                  <span>First seen: {evRelTime(g.firstSeen)}</span>
                  <span>Last seen: {evRelTime(g.lastSeen)}</span>
                  {g.errorCode && <span>Code: <span className="mono">{g.errorCode}</span></span>}
                </div>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

/* ---------- section header ----------------------------------- */
function EvSection({ title, sub, children, right }) {
  return (
    <section className="ev-section">
      <div className="ev-section-head">
        <div>
          <h3 className="ev-section-title">{title}</h3>
          {sub && <div className="ev-section-sub">{sub}</div>}
        </div>
        {right}
      </div>
      {children}
    </section>
  );
}

Object.assign(window, {
  EV_CATEGORY_META, EV_BACKENDS, EV_STEPS, EV_STEP_LABEL, EV_TZ,
  evCat, evFmtTime, evFmtDay, evRelTime, evDuration,
  EvRangePicker, EvFilterBar, EvEnvCard,
  EvTimeline, EvIncidentDetail, EvSpark, EvBackendMatrix, EvPatterns, EvSection,
});