// Dashboard KPI cards + donut + critical assets + tables.

/**
 * useSort — tiny helper for sortable tables.
 *   keys: { colKey: (row) => comparableValue }
 *   initial: { col, dir }
 * Returns { rows, sort, toggle }.
 */
const useSort = (data, keys, initial) => {
  const [sort, setSort] = React.useState(initial);
  const rows = React.useMemo(() => {
    if (!sort || !sort.col) return data;
    const getter = keys[sort.col];
    if (!getter) return data;
    const sorted = [...data].sort((a, b) => {
      const va = getter(a), vb = getter(b);
      if (va == null && vb == null) return 0;
      if (va == null) return 1;
      if (vb == null) return -1;
      if (typeof va === 'number' && typeof vb === 'number') return va - vb;
      return String(va).localeCompare(String(vb), undefined, { numeric: true, sensitivity: 'base' });
    });
    return sort.dir === 'desc' ? sorted.reverse() : sorted;
  }, [data, sort, keys]);
  const toggle = (col) => {
    setSort(s => {
      if (!s || s.col !== col) return { col, dir: 'asc' };
      if (s.dir === 'asc') return { col, dir: 'desc' };
      return { col: null, dir: null };
    });
  };
  return { rows, sort, toggle };
};

/** SortHeader — th with click-to-sort + visual state. */
const SortHeader = ({ colKey, children, sort, onSort, style }) => {
  const active = sort && sort.col === colKey;
  const dir = active ? sort.dir : null;
  const arrow = dir === 'asc' ? '↑' : dir === 'desc' ? '↓' : '↕';
  const cls = 'th-sort' + (active ? ' sorted' : '');
  return (
    <th className={cls} style={style} onClick={() => onSort(colKey)}>
      <span className="th-label">{children}</span>
      <span className={'arrow' + (active ? ' on' : '')}>{arrow}</span>
    </th>
  );
};

const KpiCard = ({ kind, label, sub, value, share }) => (
  <div className={'kpi ' + kind}>
    <span className="kpi-accent"/>
    <div className="label">{label}</div>
    <div className="value">{value}</div>
    <div className="sub">{sub}</div>
  </div>
);

/**
 * PerspectiveKpi — one tile per risk perspective (growth / fall / clearance).
 * Surfaces the alarm count as the headline (the actionable number),
 * and shows alarm/alert/stable breakdown with a segmented bar.
 */
const PerspectiveKpi = ({ p }) => {
  const total = p.alarm + p.alert + p.stable;
  const at = p.alarm + p.alert; // spans needing attention
  // Tree fall risk → open the Tree List (panelMode=trees) on the map.
  // Other perspectives → open the Asset List.
  const isTreeFall = p.id === 'fall';
  const isGrowth = p.id === 'growth';
  const isClearance = p.id === 'clearance';
  const hashFrag = isTreeFall
    ? `tier=${p.alarm > 0 ? 'alarm' : 'alert'}`
    : isGrowth
      ? `tier=${p.alarm > 0 ? 'alarm' : 'alert'}`
      : isClearance
        ? `tier=${p.alarm > 0 ? 'red' : 'yellow'}`
        : `perspective=${p.id}`;
  const mapFile = isGrowth ? 'vegetation.html' : isClearance ? 'clearance.html' : 'map.html';
  const href = `../map/${mapFile}#${hashFrag}`;
  const cls = 'kpi perspective '
    + (p.alarm > 0 ? 'has-alarm' : p.alert > 0 ? 'has-alert' : 'is-stable');

  const inner = (
    <React.Fragment>
      <span className="kpi-accent"/>
      <div className="label">{p.label}</div>
      <div className="persp-row">
        <div className="persp-headline">
          <div className="value">{at}</div>
          <div className="of">/ {total} <span style={{ color:'var(--text-muted)' }}>spans need review</span></div>
        </div>
      </div>
      <div className="persp-bar" aria-hidden="true">
        {p.alarm > 0 && <span className="seg seg-alarm" style={{ flex: p.alarm }}/>}
        {p.alert > 0 && <span className="seg seg-alert" style={{ flex: p.alert }}/>}
        {p.stable > 0 && <span className="seg seg-stable" style={{ flex: p.stable }}/>}
      </div>
      <div className="persp-legend">
        <span className="lg lg-alarm"><span className="d"/>Alarm <b>{p.alarm}</b></span>
        <span className="lg lg-alert"><span className="d"/>Alert <b>{p.alert}</b></span>
        <span className="lg lg-stable"><span className="d"/>Stable <b>{p.stable}</b></span>
      </div>
    </React.Fragment>
  );

  return <a href={href} className={cls} style={{ textDecoration:'none', color:'inherit' }}>{inner}</a>;
};

const DonutChart = ({ size = 220, thickness = 28, segments }) => {
  const cx = size / 2, cy = size / 2;
  const r = (size - thickness) / 2;
  const circ = 2 * Math.PI * r;
  const total = segments.reduce((s, x) => s + x.value, 0);
  let offset = 0;
  const GAP = 4; // px gap between segments
  return (
    <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
      <circle cx={cx} cy={cy} r={r} fill="none"
              stroke="var(--border-subtle)" strokeWidth={thickness - 6}/>
      {segments.map((s, i) => {
        const len = (s.value / total) * circ;
        const dash = Math.max(0, len - GAP);
        const el = (
          <circle key={i}
                  cx={cx} cy={cy} r={r} fill="none"
                  stroke={s.color} strokeWidth={thickness}
                  strokeDasharray={`${dash} ${circ - dash}`}
                  strokeDashoffset={-offset}
                  strokeLinecap="butt"/>
        );
        offset += len;
        return el;
      })}
    </svg>
  );
};

const RiskDonut = () => {
  const w = SPAN_KPIS.worstCase;
  const segments = [
    { name: 'Stable',  value: w.stable, color: 'var(--status-stable)' },
    { name: 'Alert',   value: w.alert,  color: 'var(--status-alert)' },
    { name: 'Alarm',   value: w.alarm,  color: 'var(--status-alarm)' },
  ];
  return (
    <div className="donut-panel">
      <h3>Risk distribution per span</h3>
      <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: -8 }}>
        Each span's worst-case classification across all perspectives.
      </div>
      <div className="donut-wrap">
        <DonutChart segments={segments}/>
        <div className="donut-center">
          <div>
            <div className="n">{SPAN_KPIS.total}</div>
            <div className="l">Spans</div>
          </div>
        </div>
      </div>
      <div className="donut-legend">
        {segments.map(s => (
          <div className="lg-row" key={s.name}>
            <span className="dot" style={{ background: s.color }}/>
            <span className="name">{s.name}</span>
            <span className="pct">{Math.round((s.value / SPAN_KPIS.total) * 100)}%</span>
            <span className="ct">{s.value}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

const CriticalAssets = () => {
  const { rows, sort, toggle } = useSort(
    CRITICAL_ASSETS,
    {
      asset:   r => r.label,
      alarms:  r => r.alarms,
      alerts:  r => r.alerts,
    },
    { col: 'alarms', dir: 'desc' }
  );
  const goMap = (a) => { window.location.href = `../map/map.html#asset=${encodeURIComponent(a.id || a.label)}`; };
  return (
    <div className="support-panel">
      <div className="sp-hdr" style={{ display:'flex', alignItems:'center', justifyContent:'space-between', paddingRight: 16 }}>
        <h3>Assets in critical state</h3>
        <a className="chip-link" href="../map/map.html" style={{ marginBottom: 14 }}>See all on map <IArrowRight size={11}/></a>
      </div>
      <table className="tbl">
        <thead>
          <tr>
            <SortHeader colKey="asset"  sort={sort} onSort={toggle}>Asset</SortHeader>
            <SortHeader colKey="alarms" sort={sort} onSort={toggle} style={{ width: 110 }}>Alarm trees</SortHeader>
            <SortHeader colKey="alerts" sort={sort} onSort={toggle} style={{ width: 100 }}>Alert</SortHeader>
            <th style={{ width: 44 }}></th>
          </tr>
        </thead>
        <tbody>
          {rows.map(a => (
            <tr key={a.id} onClick={() => goMap(a)} title="Open on map">
              <td className="mono">{a.label}</td>
              <td><span className="pill alarm">{a.alarms}</span></td>
              <td><span className="pill alert">{a.alerts}</span></td>
              <td style={{ textAlign:'right', color:'var(--text-muted)' }}>
                <span title="See on map" style={{ display:'inline-flex' }}><IMap size={14}/></span>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

const ClusterTable = () => {
  // High-risk clusters = any cluster with at least one tree within fall range.
  const DATA = (window.CLUSTERS || []).filter(c => c.tier !== 'stable');
  const RANK = { alarm: 2, alert: 1, stable: 0 };
  const { rows, sort, toggle } = useSort(
    DATA,
    {
      id:      r => parseInt(String(r.spanNum), 10),
      span:    r => r.spanNum,
      trees:   r => r.treeCount,
      breach:  r => r.breaching,
      closest: r => r.closestDist,
      vitality: r => r.vitality,
      risk:    r => RANK[r.tier] * 1000 - r.closestDist, // alarm first, then closest
    },
    { col: 'risk', dir: 'desc' }
  );
  return (
    <div className="tbl-panel">
      <div className="hdr">
        <div className="title">
          <h3>High-risk tree clusters</h3>
          <div className="hint">Clusters with at least one tree within fall range of the corridor, ranked by severity.</div>
        </div>
        <a className="chip-link" href="../map/map.html">Click row to open on map <IArrowRight size={11}/></a>
      </div>
      <table className="tbl">
        <thead>
          <tr>
            <SortHeader colKey="id"      sort={sort} onSort={toggle} style={{ width: 130 }}>Cluster</SortHeader>
            <SortHeader colKey="span"    sort={sort} onSort={toggle} style={{ width: 90 }}>Asset</SortHeader>
            <SortHeader colKey="trees"   sort={sort} onSort={toggle} style={{ width: 80 }}>Trees</SortHeader>
            <SortHeader colKey="breach"  sort={sort} onSort={toggle} style={{ width: 90 }}>At-risk</SortHeader>
            <SortHeader colKey="closest" sort={sort} onSort={toggle}>Closest tree</SortHeader>
            <SortHeader colKey="vitality" sort={sort} onSort={toggle}>Avg. vitality</SortHeader>
            <th>Coordinates</th>
            <th style={{ width: 110 }}>Risk</th>
          </tr>
        </thead>
        <tbody>
          {rows.map(c => (
            <tr key={c.id}
                onClick={() => { window.location.href = `../map/map.html#cluster=${c.id}`; }}
                title="Open this cluster on the map">
              <td className="mono">{c.label}</td>
              <td className="mono">{c.span}</td>
              <td className="num">{c.treeCount}</td>
              <td className="num">
                <span className={'pill ' + c.tier} style={{ minWidth: 0 }}>{c.breaching} / {c.treeCount}</span>
              </td>
              <td className="num">{c.closestDist.toFixed(1)} m</td>
              <td className="num">{Math.round(c.vitality * 100)}%</td>
              <td className="mono" style={{ color: 'var(--text-muted)' }}>{c.lat}, {c.lng}</td>
              <td className="risk"><span className={'pill ' + c.tier}>{c.tier === 'alarm' ? 'Alarm' : 'Alert'}</span></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

const InterventionsTable = () => {
  // Parse '25 Apr 2026' → timestamp for numeric sort
  const dateTs = (s) => {
    const d = new Date(s + ' UTC');
    return isNaN(d) ? 0 : d.getTime();
  };
  const statusOrder = { 'cut': 0, 'partial': 1, 'no-cut': 2 };
  const { rows, sort, toggle } = useSort(
    INTERVENTIONS,
    {
      date:       r => dateTs(r.date),
      type:       r => r.type,
      action:     r => r.action,
      asset:      r => parseInt(String(r.asset).replace(/[^0-9]/g, ''), 10),
      contractor: r => r.contractor,
      status:     r => r.status ? statusOrder[r.status] : 99,
    },
    { col: 'date', dir: 'asc' }
  );
  return (
    <div className="tbl-panel">
      <div className="hdr">
        <div className="title">
          <h3>Interventions</h3>
          <div className="hint">Scheduled &amp; recent tree-work orders.</div>
        </div>
      </div>
      <table className="tbl">
        <thead>
          <tr>
            <SortHeader colKey="date"       sort={sort} onSort={toggle} style={{ width: 140 }}>Date</SortHeader>
            <SortHeader colKey="type"       sort={sort} onSort={toggle} style={{ width: 130 }}>Type</SortHeader>
            <SortHeader colKey="status"     sort={sort} onSort={toggle} style={{ width: 140 }}>Status</SortHeader>
            <SortHeader colKey="action"     sort={sort} onSort={toggle}>Action</SortHeader>
            <SortHeader colKey="asset"      sort={sort} onSort={toggle}>Asset</SortHeader>
            <SortHeader colKey="contractor" sort={sort} onSort={toggle}>Contractor</SortHeader>
          </tr>
        </thead>
        <tbody>
          {rows.map((x, i) => (
            <tr key={i} className={'int-row ' + x.type}>
              <td className="mono">{x.date}</td>
              <td><span className={'type-chip ' + x.type}>{x.type}</span></td>
              <td>
                {x.status
                  ? <span className={'pill cut-' + x.status}>{CUT_STATUS[x.status].label}</span>
                  : <span style={{ color: 'var(--text-muted)', font: 'var(--t-caption)' }}>Pending</span>}
              </td>
              <td>{x.action}</td>
              <td className="mono">{x.asset}</td>
              <td>{x.contractor}</td>
            </tr>
          ))}
          {rows.length === 0 && (
            <tr><td colSpan={6} style={{ padding: '20px 16px', textAlign: 'center', color: 'var(--text-muted)' }}>
              No intervention records in this export.
            </td></tr>
          )}
        </tbody>
      </table>
    </div>
  );
};

const AnalysisDatePicker = ({ value, onChange }) => {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef();
  React.useEffect(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', h); return () => document.removeEventListener('mousedown', h);
  }, []);
  return (
    <div className="date-picker" ref={ref}>
      <button className={'date-btn' + (open ? ' open' : '')} onClick={() => setOpen(o => !o)}>
        <span className="lbl">Last analysis</span>
        <span className="val">{value}</span>
        <span className="chev"><IChev size={14}/></span>
      </button>
      {open && (
        <div className="date-menu">
          {ANALYSIS_DATES.map(d => (
            <div key={d}
                 className={'opt' + (d === value ? ' sel' : '')}
                 onClick={() => { onChange(d); setOpen(false); }}>
              {d}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

Object.assign(window, {
  KpiCard, PerspectiveKpi, DonutChart, RiskDonut, CriticalAssets,
  ClusterTable, InterventionsTable, AnalysisDatePicker,
});