// ─────────────────────────────────────────────────────────────────
// TreeGuard — Asset Overview list
// Reuses useSort/SortHeader from dashboard.jsx (loaded earlier).
// ─────────────────────────────────────────────────────────────────

// Real spans from the export — one row per conductor span across all 3 HV lines.
// `alarms` / `alerts` are tree counts within the span's analysis envelope (from the ETL).
const SPANS = (window.CLUSTERS || []).map(c => ({
  id: c.id,
  n: c.spanSeq,
  line: c.line,
  designation: c.designation,
  type: 'OHL Span',
  alarms: c.alarms,
  alerts: c.alerts,
  createdBy: '—',
  updated: 'current export',
}));

const statusOf = (s) => s.alarms > 0 ? 'alarm' : s.alerts > 0 ? 'alert' : 'stable';
const statusTier = { alarm: 0, alert: 1, stable: 2 };

const ASSETS_KPIS = (() => {
  const total       = SPANS.length;
  const withAlarms  = SPANS.filter(s => statusOf(s) === 'alarm').length;
  const withAlerts  = SPANS.filter(s => statusOf(s) === 'alert').length;
  const noWarnings  = SPANS.filter(s => statusOf(s) === 'stable').length;
  return {
    total,
    withAlarms,
    withAlerts,
    noWarnings,
    // Deltas vs the previous survey update — no prior snapshot in this export.
    totalDelta:     null,
    alarmDelta:     null,
    alertDelta:     null,
    noWarningDelta: null,
  };
})();

/* ────────────────────────────────────────────────────────────── */

const StatusFilterTabs = ({ value, onChange, counts }) => {
  const tabs = [
    { id: 'all',    label: 'All',    n: counts.all },
    { id: 'alarm',  label: 'Alarm',  n: counts.alarm },
    { id: 'alert',  label: 'Alert',  n: counts.alert },
    { id: 'stable', label: 'Stable', n: counts.stable },
  ];
  return (
    <div className="assets-tabs" role="tablist" aria-label="Filter by status">
      {tabs.map(t => (
        <button
          key={t.id}
          role="tab"
          aria-selected={value === t.id}
          className={'tab' + (value === t.id ? ' on' : '')}
          onClick={() => onChange(t.id)}>
          {t.label}<span className="ct">{t.n}</span>
        </button>
      ))}
    </div>
  );
};

const DeltaBadge = ({ delta, unit }) => {
  if (delta == null) return <span className="delta"><span className="note">No prior data</span></span>;
  const dir = delta > 0 ? 'up' : delta < 0 ? 'down' : null;
  return (
    <span className={'delta' + (dir ? ' ' + dir : '')}>
      {dir && <span className="tri"/>}
      {delta > 0 ? '+' : ''}{delta}
      <span className="note">{unit} vs Previous Update</span>
    </span>
  );
};

const AssetsKpiRow = ({ kpis, onJumpAlerts }) => (
  <div className="kpi-grid">
    <div className="kpi total">
      <span className="kpi-accent"/>
      <div className="label">Total Assets</div>
      <div className="value" style={{ font: 'var(--t-metric-xl)' }}>
        {kpis.total}<span style={{ font:'500 16px/1 var(--font-sans)', color:'var(--text-secondary)', marginLeft: 10 }}>spans</span>
      </div>
    </div>

    <div className="kpi alarm kpi-cmp">
      <span className="kpi-accent"/>
      <div className="label">Assets With Alarms</div>
      <div className="value alarm-color">
        {kpis.withAlarms}<span className="unit">spans</span>
      </div>
      <DeltaBadge delta={kpis.alarmDelta} unit="spans"/>
    </div>

    <div className="kpi alert kpi-cmp">
      <span className="kpi-accent"/>
      <div className="label">Assets With Alerts</div>
      <div className="value alert-color">
        {kpis.withAlerts}<span className="unit">spans</span>
      </div>
      <DeltaBadge delta={kpis.alertDelta} unit="spans"/>
    </div>

    <div className="kpi stable kpi-cmp">
      <span className="kpi-accent"/>
      <div className="label">Assets Without Warnings</div>
      <div className="value" style={{ font: 'var(--t-metric-xl)', color: 'var(--status-stable)' }}>
        {kpis.noWarnings}<span className="unit">spans</span>
      </div>
      <DeltaBadge delta={kpis.noWarningDelta} unit="spans"/>
    </div>
  </div>
);

/* ────────────────────────────────────────────────────────────── */

const AssetRow = ({ s, idx }) => {
  const st = statusOf(s);
  return (
    <tr>
      <td>
        <div className="no-cell">
          <span className="num">{idx + 1}</span>
          {st === 'alarm' && <span className="top-badge">TOP</span>}
          {st === 'alert' && <span className="top-badge dim">TOP</span>}
        </div>
      </td>
      <td className="cell-infra">HV Line {s.line}</td>
      <td className="cell-asset">{s.designation}</td>
      <td>{s.type}</td>
      <td>
        {s.alerts > 0
          ? <span className="count-pill alert"><span className="n">{s.alerts}</span> Alert{s.alerts === 1 ? '' : 's'}</span>
          : <span className="count-pill stable">Stable</span>}
      </td>
      <td>
        {s.alarms > 0
          ? <span className="count-pill alarm"><span className="n">{s.alarms}</span> Alarm{s.alarms === 1 ? '' : 's'}</span>
          : <span className="count-pill stable">—</span>}
      </td>
      <td>{s.createdBy}</td>
      <td className="cell-time">{s.updated}</td>
    </tr>
  );
};

const AssetTable = () => {
  const [q, setQ] = React.useState('');
  const [filter, setFilter] = React.useState('all');

  const updatedKey = (s) => {
    // Most-recent first when sorted desc: hours-ago < days-ago.
    const m = s.updated.match(/(\d+)\s+(hour|day)/);
    if (!m) return 99999;
    return parseInt(m[1], 10) * (m[2] === 'hour' ? 1 : 24);
  };

  const filtered = React.useMemo(() => {
    const qq = q.trim().toLowerCase();
    return SPANS.filter(s => {
      if (filter !== 'all' && statusOf(s) !== filter) return false;
      if (!qq) return true;
      return (
        s.designation.toLowerCase().includes(qq) ||
        s.createdBy.toLowerCase().includes(qq) ||
        ('span ' + s.n).toLowerCase().includes(qq)
      );
    });
  }, [q, filter]);

  const { rows, sort, toggle } = useSort(
    filtered,
    {
      no:       (s) => statusTier[statusOf(s)] * 1000 - s.alarms * 10 - s.alerts,
      infra:    () => 0,
      asset:    (s) => s.n,
      type:     (s) => s.type,
      alerts:   (s) => s.alerts,
      alarms:   (s) => s.alarms,
      author:   (s) => s.createdBy,
      updated:  (s) => updatedKey(s),
    },
    { col: 'no', dir: 'asc' }
  );

  const counts = React.useMemo(() => ({
    all: SPANS.length,
    alarm: SPANS.filter(s => statusOf(s) === 'alarm').length,
    alert: SPANS.filter(s => statusOf(s) === 'alert').length,
    stable: SPANS.filter(s => statusOf(s) === 'stable').length,
  }), []);

  return (
    <>
      <div className="assets-toolbar">
        <div className="assets-search">
          <span className="ic"><ISearch size={14}/></span>
          <input
            type="search"
            value={q}
            onChange={e => setQ(e.target.value)}
            placeholder="Search by span, designation, or owner…"/>
        </div>
        <StatusFilterTabs value={filter} onChange={setFilter} counts={counts}/>
        <div className="assets-meta">{rows.length} of {SPANS.length}</div>
      </div>

      <div className="tbl-panel">
        <table className="tbl">
          <thead>
            <tr>
              <SortHeader colKey="no"      sort={sort} onSort={toggle} style={{ width: 110 }}>NO</SortHeader>
              <SortHeader colKey="infra"   sort={sort} onSort={toggle} style={{ width: 220 }}>Infrastructure</SortHeader>
              <SortHeader colKey="asset"   sort={sort} onSort={toggle}>Asset Designation</SortHeader>
              <SortHeader colKey="type"    sort={sort} onSort={toggle} style={{ width: 140 }}>Asset Type</SortHeader>
              <SortHeader colKey="alerts"  sort={sort} onSort={toggle} style={{ width: 120 }}>Alerts</SortHeader>
              <SortHeader colKey="alarms"  sort={sort} onSort={toggle} style={{ width: 120 }}>Alarms</SortHeader>
              <SortHeader colKey="author"  sort={sort} onSort={toggle} style={{ width: 140 }}>Created By</SortHeader>
              <SortHeader colKey="updated" sort={sort} onSort={toggle} style={{ width: 140 }}>Last Update</SortHeader>
            </tr>
          </thead>
          <tbody>
            {rows.map((s, i) => <AssetRow key={s.id} s={s} idx={i}/>)}
            {rows.length === 0 && (
              <tr><td colSpan={8} className="empty">No spans match the current filter.</td></tr>
            )}
          </tbody>
        </table>
      </div>
    </>
  );
};

Object.assign(window, {
  SPANS, ASSETS_KPIS, statusOf,
  AssetsKpiRow, AssetTable,
});