// ─────────────────────────────────────────────────────────────────────────────
// TreeGuard 1.1 — Tree Fall map (CLUSTER model, real data)
//
// Vegetation is resolved as CLUSTERS of neighbouring trees (one cluster per
// conductor span). Cluster definitions come from window.CLUSTERS (shared with
// the dashboard) and window.LINES (the 3 HV lines). The map shows ONE line at a
// time; its spans are laid left→right along a scrollable corridor.
//
// UNITS — kept deliberately separate (the data spans kilometres, the canvas is
// pixels):
//   * tier classification runs in METRES   (dist, fall, corridor all in m)
//   * placement / drawing runs in PIXELS    (perp = dist_m * PERP, etc.)
// At PX_PER_M ≠ 1 these must not be mixed, or spans get the wrong tier.
// ─────────────────────────────────────────────────────────────────────────────
const H = 760;            // canvas height (px)
const SPAN_W = 140;       // px per span along the corridor (readable; line scrolls)
const PERP = 2.2;         // px per metre — perpendicular (the risk axis)
const ALONG = 1.3;        // px per metre — along-line (visual spread of members only)
const MARGIN = 90;        // px padding at each end of the corridor

const LINES = window.LINES || [];
const ALL_CLUSTERS = window.CLUSTERS || [];

const TIER_RANK = { stable: 0, alert: 1, alarm: 2 };
// Height-aware fall-risk tier: a tree strikes the conductor when it is tall enough
// to span the 3D gap to it (m.gap, precomputed in the ETL). `margin` is the growth/
// uncertainty allowance (the slider). Mirrors tools/build_data.py.
const tierAt = (h, gap, margin) => (h >= gap ? 'alarm' : (h + margin >= gap ? 'alert' : 'stable'));
const tierLabel = (t) => (t === 'alarm' ? 'Alarm' : t === 'alert' ? 'Alert' : 'Clear');

// Corridor polygon — buffer (px) on each side of the tower spine (bisector offset).
const buildCorridor = (towers, halfPx) => {
  const top = [], bot = [];
  const n = towers.length;
  for (let i = 0; i < n; i++) {
    let dx, dy;
    if (i === 0) { dx = towers[1].x - towers[0].x; dy = towers[1].y - towers[0].y; }
    else if (i === n - 1) { dx = towers[n-1].x - towers[n-2].x; dy = towers[n-1].y - towers[n-2].y; }
    else {
      const a = towers[i-1], b = towers[i], c = towers[i+1];
      const dx1 = b.x - a.x, dy1 = b.y - a.y, dx2 = c.x - b.x, dy2 = c.y - b.y;
      const l1 = Math.hypot(dx1, dy1) || 1, l2 = Math.hypot(dx2, dy2) || 1;
      dx = dx1/l1 + dx2/l2; dy = dy1/l1 + dy2/l2;
    }
    const len = Math.hypot(dx, dy) || 1;
    const nx = -dy/len, ny = dx/len;
    const t = towers[i];
    top.push({ x: t.x + nx*halfPx, y: t.y + ny*halfPx });
    bot.push({ x: t.x - nx*halfPx, y: t.y - ny*halfPx });
  }
  return [...top, ...[...bot].reverse()]
    .map((p,i) => `${i===0?'M':'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ') + ' Z';
};

// Build the schematic geometry for one line: towers laid left→right with a gentle
// decorative wiggle; members projected by (da along-line, dist perpendicular).
const buildLineGeom = (lineId) => {
  const cl = ALL_CLUSTERS.filter(c => c.line === lineId).slice().sort((a, b) => a.spanNum - b.spanNum);
  const n = cl.length;
  const W = MARGIN * 2 + Math.max(1, n) * SPAN_W;
  const cy0 = H / 2;
  const towers = Array.from({ length: n + 1 }, (_, i) => {
    const x = MARGIN + i * SPAN_W;
    const t = i / Math.max(1, n);
    const y = cy0 + Math.sin(t * Math.PI * 4.2 + 0.4) * 46 + Math.sin(t * Math.PI * 9.1 + 1.0) * 16;
    return { id: i + 1, x, y };
  });
  const frame = (spanNum) => {
    const a = towers[spanNum - 1], b = towers[spanNum] || towers[spanNum - 1];
    const dx = b.x - a.x, dy = b.y - a.y, len = Math.hypot(dx, dy) || 1;
    const ux = dx / len, uy = dy / len;
    return { a, b, ux, uy, nx: -uy, ny: ux };
  };
  const clusters = cl.map(c => {
    const f = frame(c.spanNum);
    const ax = (f.a.x + f.b.x) / 2, ay = (f.a.y + f.b.y) / 2;   // anchor = span midpoint
    const members = c.members.map((m, i) => {
      const along = m.da * ALONG, perp = m.dist * PERP;
      return {
        ...m, mi: i,
        x: ax + f.ux * along + f.nx * m.side * perp,
        y: ay + f.uy * along + f.ny * m.side * perp,
        crownPx: Math.max(2.5, m.crownR * PERP),
        fallPx: m.fall * PERP,
      };
    });
    const cx = members.reduce((s, m) => s + m.x, 0) / members.length;
    const cy = members.reduce((s, m) => s + m.y, 0) / members.length;
    const hitR = Math.max(...members.map(m => Math.hypot(m.x - cx, m.y - cy) + m.crownPx)) + 6;
    return { ...c, ax, ay, cx, cy, hitR, members };
  });
  return { W, H, towers, clusters };
};

// Contour ellipses for terrain texture, tiled across the (wide) canvas.
const buildContours = (W) => Array.from({ length: Math.max(8, Math.ceil(W / 220)) }, (_, i) => {
  const a = i * 37.3;
  return { cx: (i * 233) % W, cy: 380 + Math.cos(a) * 230, rx: 110 + i % 5 * 44, ry: 70 + i % 7 * 28, rot: i * 19, major: i % 4 === 0 };
});

// Tree-fall radius envelope — outer support outline of every member's fall disk (px).
const buildEnvelopePath = (members, cx, cy, samples = 64) => {
  const pts = [];
  for (let i = 0; i < samples; i++) {
    const th = (i / samples) * Math.PI * 2;
    const ux = Math.cos(th), uy = Math.sin(th);
    let best = -Infinity;
    for (const m of members) {
      const d = (m.x - cx) * ux + (m.y - cy) * uy + m.fallPx;
      if (d > best) best = d;
    }
    pts.push([cx + ux * best, cy + uy * best]);
  }
  return pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' ') + ' Z';
};

const ClusterMarker = React.memo(({ c, analysisM, selected, onEnter, onMove, onLeave, onClick }) => {
  const vis = c.members.filter(m => (m.dist - m.crownR) <= analysisM);
  if (!vis.length) return null;
  const envelope = buildEnvelopePath(vis, c.cx, c.cy);
  return (
    <g className={'cluster-group' + (selected ? ' sel' : '')}>
      <path className={'cl-envelope ' + c.tier} d={envelope} />
      <g className={'cl-edge ' + c.tier} filter="url(#cluster-goo)">
        {vis.map(m => <circle key={'e'+m.mi} cx={m.x} cy={m.y} r={m.crownPx * 1.5} />)}
      </g>
      {selected && <circle className={'cluster-halo ' + c.tier} cx={c.cx} cy={c.cy} r={c.hitR + 4} />}
      <circle className="cluster-hit" cx={c.cx} cy={c.cy} r={c.hitR}
              onMouseEnter={e=>onEnter(c,e)} onMouseMove={e=>onMove(c,e)}
              onMouseLeave={onLeave} onClick={e=>onClick && onClick(c,e)} />
    </g>
  );
});

const MapCanvas = ({ filters, selectedSpan, onSpanClick, onSpanInfo, setTip, tip,
                     analysisM, analysisDraftM, dirty, onMapInteract,
                     geom, clusters, spanTier, focusCluster, selectedCluster, onClusterClick }) => {
  const ref = React.useRef();        // .map-stage — wheel target + measured viewport
  const svgRef = React.useRef();     // the <svg> — drag target + getScreenCTM source
  const sizeRef = React.useRef({ w: 0, h: 0 });               // live container size (px)
  const geomRef = React.useRef(geom); geomRef.current = geom; // live world geometry (W)
  const panRef = React.useRef(null); // active drag {sx,sy,vx,vy,vw,vh,rw,rh,moved}
  const draggedRef = React.useRef(false);                     // last gesture moved → suppress click
  const [locked, setLocked] = React.useState(null);
  const [panning, setPanning] = React.useState(false);
  const { W, towers } = geom;
  // viewBox window into world coords (0..W × 0..H). Seeded to a height-filling guess so the
  // first paint isn't the whole 16 000 px line; the measure effect refits to the exact aspect.
  const [view, setView] = React.useState(() => ({ x: 0, y: 0, w: Math.min(W, H * 1.7), h: H }));
  const viewRef = React.useRef(view); viewRef.current = view;  // current view for non-reactive reads
  const analysisPx = analysisM * PERP, analysisDraftPx = analysisDraftM * PERP;

  // ── viewBox clamps ──────────────────────────────────────────────────────────
  // Zoom-out is capped near the height-filling width (the strip keeps ~filling the
  // viewport — no zooming out to a thin band); zoom-in stops at ~1.4 spans. Panning is
  // bounded to the world; a line narrower/shorter than the view is centred.
  const clampWidth = React.useCallback((w) => {
    const { w: cW, h: cH } = sizeRef.current;
    const aspect = (cW && cH) ? cW / cH : 16 / 9;
    const maxW = H * aspect * 1.6;
    const minW = Math.min(SPAN_W * 1.4, maxW);
    return Math.min(Math.max(w, minW), maxW);
  }, []);
  const place = React.useCallback((x, y, w, h) => {
    const Wn = geomRef.current.W;
    const nx = (w >= Wn) ? (Wn - w) / 2 : Math.min(Math.max(x, 0), Wn - w);
    const ny = (h >= H)  ? (H - h) / 2  : Math.min(Math.max(y, 0), H - h);
    return { x: nx, y: ny, w, h };
  }, []);
  const makeInitial = React.useCallback(() => {
    const { w: cW, h: cH } = sizeRef.current;
    const aspect = (cW && cH) ? cW / cH : 16 / 9;
    return place(0, 0, H * aspect, H);   // fill the height, anchored at the line's left edge
  }, [place]);

  // Dismiss stale overlays (pinned tooltip, hover tip, span popover) on any pan/zoom.
  const dismissRef = React.useRef(() => {});
  dismissRef.current = () => { setLocked(null); setTip(null); onMapInteract && onMapInteract(); };

  // Measure the stage and (re)fit the viewBox to its aspect. On resize, the centre/zoom are
  // preserved (only the height is re-derived); the first measure seeds the initial view.
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const measure = () => {
      const r = el.getBoundingClientRect();
      const prev = sizeRef.current;
      sizeRef.current = { w: r.width, h: r.height };
      setView(v => {
        if (!prev.w || !prev.h) return makeInitial();
        const aspect = (r.width && r.height) ? r.width / r.height : 16 / 9;
        const cx = v.x + v.w / 2, cy = v.y + v.h / 2, hh = v.w / aspect;
        return place(cx - v.w / 2, cy - hh / 2, v.w, hh);
      });
    };
    measure();
    const ro = new ResizeObserver(measure);
    ro.observe(el);
    window.addEventListener('resize', measure);   // covers window resize; RO covers panel/layout changes
    return () => { ro.disconnect(); window.removeEventListener('resize', measure); };
  }, [makeInitial, place]);

  // Reset the view whenever the line (geometry) changes.
  React.useEffect(() => { setView(makeInitial()); }, [geom, makeInitial]);

  // Wheel = zoom toward the cursor. Native non-passive listener — React's synthetic onWheel
  // is passive and can't preventDefault (the page would scroll instead of the map zooming).
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onWheel = (e) => {
      e.preventDefault();
      const r = el.getBoundingClientRect();
      setView(v => {
        const { w: cW, h: cH } = sizeRef.current;
        const aspect = (cW && cH) ? cW / cH : v.w / v.h;
        const fx = (e.clientX - r.left) / r.width, fy = (e.clientY - r.top) / r.height;
        const wx = v.x + fx * v.w, wy = v.y + fy * v.h;        // world point under the cursor
        const w = clampWidth(v.w * (e.deltaY < 0 ? 0.85 : 1 / 0.85)), hh = w / aspect;
        return place(wx - fx * w, wy - fy * hh, w, hh);        // keep that point under the cursor
      });
      dismissRef.current();
    };
    el.addEventListener('wheel', onWheel, { passive: false });
    return () => el.removeEventListener('wheel', onWheel);
  }, [clampWidth, place]);

  // Drag = pan. A move > 4 px commits the drag (and flags draggedRef so the trailing click is
  // suppressed); listeners live on window so a fast drag that leaves the canvas still tracks.
  React.useEffect(() => {
    if (!panning) return;
    const onMove = (e) => {
      const p = panRef.current; if (!p) return;
      const dx = e.clientX - p.sx, dy = e.clientY - p.sy;
      if (!p.moved && Math.hypot(dx, dy) > 4) { p.moved = true; draggedRef.current = true; dismissRef.current(); }
      if (!p.moved) return;
      const wx = p.vx - dx * (p.vw / p.rw), wy = p.vy - dy * (p.vh / p.rh);
      setView(v => place(wx, wy, v.w, v.h));
    };
    const onUp = () => { panRef.current = null; setPanning(false); };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
    return () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); };
  }, [panning, place]);

  const onSvgMouseDown = (e) => {
    if (e.button !== 0) return;
    e.preventDefault();
    const r = svgRef.current.getBoundingClientRect();
    panRef.current = { sx: e.clientX, sy: e.clientY, vx: view.x, vy: view.y,
                       vw: view.w, vh: view.h, rw: r.width, rh: r.height, moved: false };
    draggedRef.current = false;
    setPanning(true);
  };

  const zoomBy = (factor) => {
    setView(v => {
      const { w: cW, h: cH } = sizeRef.current;
      const aspect = (cW && cH) ? cW / cH : v.w / v.h;
      const cx = v.x + v.w / 2, cy = v.y + v.h / 2;
      const w = clampWidth(v.w * factor), hh = w / aspect;
      return place(cx - w / 2, cy - hh / 2, w, hh);
    });
    dismissRef.current();
  };

  // Deep-link / list focus → centre the viewBox on the cluster and pin its tooltip. The pin is
  // computed directly from the new viewBox (world→screen is an exact linear map because the
  // viewBox aspect matches the container) — no RAF/getScreenCTM, so it can't race React's commit.
  React.useEffect(() => {
    if (focusCluster == null || !ref.current) return;
    const c = clusters.find(x => x.id === focusCluster);
    if (!c) { setLocked(null); return; }
    const cv = viewRef.current;                       // current zoom (read, don't depend on it)
    const nv = place(c.cx - cv.w / 2, c.cy - cv.h / 2, cv.w, cv.h);
    setView(nv);
    const r = ref.current.getBoundingClientRect();
    setLocked({ c, cx: ((c.cx - nv.x) / nv.w) * r.width, cy: ((c.cy - nv.y) / nv.h) * r.height });
  }, [focusCluster, clusters, analysisM, place]);

  const h = {
    onEnter: (c, e) => { if (panRef.current) return; const r = ref.current.getBoundingClientRect(); setTip({ c, cx: e.clientX - r.left, cy: e.clientY - r.top }); },
    onMove:  (c, e) => { if (panRef.current) return; const r = ref.current.getBoundingClientRect(); setTip({ c, cx: e.clientX - r.left, cy: e.clientY - r.top }); },
    onLeave: () => setTip(null),
    onClick: (c, e) => { e.stopPropagation(); if (draggedRef.current) { draggedRef.current = false; return; } const r = ref.current.getBoundingClientRect(); setLocked({ c, cx: e.clientX - r.left, cy: e.clientY - r.top }); onClusterClick && onClusterClick(c); },
  };
  const onBgClick = (e) => {
    if (draggedRef.current) { draggedRef.current = false; return; }
    if (!(e.target.classList && e.target.classList.contains('cluster-hit'))) setLocked(null);
  };
  const tt = tip || locked;
  // Scale bar is a fixed 60 screen px — relabel it from the live zoom (world m under those px).
  const scaleM = (view && sizeRef.current.w) ? Math.round(60 * (view.w / sizeRef.current.w) / PERP) : Math.round(60 / PERP);

  const spanColor = (spanNum) => {
    const t = spanTier(spanNum);
    return t === 'alarm' ? 'var(--status-alarm)' : t === 'alert' ? 'var(--status-alert)' : null;
  };

  return (
    <div ref={ref} className={'map-stage' + (panning ? ' panning' : '')} onClick={onBgClick}>
      <svg ref={svgRef} onMouseDown={onSvgMouseDown}
           viewBox={`${view.x} ${view.y} ${view.w} ${view.h}`}
           preserveAspectRatio="xMidYMid meet"
           style={{ display:'block', width:'100%', height:'100%' }}>
        <defs>
          <pattern id="corridor-diagonal" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(45)">
            <rect width="10" height="10" fill="rgba(242,178,89,0.06)"/>
            <line x1="0" y1="0" x2="0" y2="10" stroke="rgba(242,178,89,0.32)" strokeWidth="1.2"/>
          </pattern>
          <filter id="cluster-goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
            <feColorMatrix in="blur" mode="matrix"
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -10" result="goo"/>
          </filter>
        </defs>

        {buildContours(W).map((c,i)=>(
          <ellipse key={i} className={'contour'+(c.major?' major':'')}
                   cx={c.cx} cy={c.cy} rx={c.rx} ry={c.ry}
                   transform={`rotate(${c.rot} ${c.cx} ${c.cy})`}/>
        ))}

        {/* Analysis zone — the perpendicular band we examine (hatched). Risk is height-
            based (3D reach), so there is no separate perpendicular "safety corridor" band. */}
        <path className="corridor-hatch" d={buildCorridor(towers, analysisPx)}/>
        <path className="analysis-outline" d={buildCorridor(towers, analysisPx)}/>
        {dirty && analysisDraftPx !== analysisPx && (
          <path className="analysis-preview" d={buildCorridor(towers, analysisDraftPx)}/>
        )}

        {['stable','alert','alarm'].map(tier =>
          clusters.filter(c => c.tier === tier && filters[c.tier]).map(c => (
            <ClusterMarker key={c.id} c={c} analysisM={analysisM}
                           selected={selectedCluster === c.id}
                           onEnter={h.onEnter} onMove={h.onMove} onLeave={h.onLeave} onClick={h.onClick}/>
          ))
        )}

        {towers.slice(0,-1).map((a,si)=>{
          const b = towers[si+1];
          const col = spanColor(si+1);
          const handle = (e) => {
            if (draggedRef.current) { draggedRef.current = false; return; }
            const r = ref.current.getBoundingClientRect();
            onSpanInfo && onSpanInfo(si+1, e.clientX - r.left, e.clientY - r.top);
            onSpanClick(si+1);
          };
          return col ? (
            <line key={si} x1={a.x} y1={a.y} x2={b.x} y2={b.y}
                  stroke={col} strokeWidth={selectedSpan===si+1?3.5:2}
                  strokeOpacity={selectedSpan===si+1?1:0.65}
                  onClick={handle} style={{cursor:'pointer'}}/>
          ) : (
            <line key={si} x1={a.x} y1={a.y} x2={b.x} y2={b.y}
                  stroke="rgba(200,210,220,0.45)" strokeWidth={selectedSpan===si+1?3:1.5}
                  onClick={handle} style={{cursor:'pointer'}}/>
          );
        })}

        {towers.map(tw=>(
          <g key={tw.id}>
            <rect x={tw.x-4} y={tw.y-4} width={8} height={8} className="tower"
                  transform={`rotate(45 ${tw.x} ${tw.y})`}/>
            {tw.id % 5 === 1 && (
              <text className="tower-label" x={tw.x} y={tw.y-10} textAnchor="middle">T{tw.id}</text>
            )}
          </g>
        ))}
      </svg>

      <div className="map-zoom">
        <button type="button" onClick={() => zoomBy(0.7)} aria-label="Zoom in">+</button>
        <button type="button" onClick={() => zoomBy(1 / 0.7)} aria-label="Zoom out">−</button>
      </div>

      <div className="map-legend">
        <div className="lg-title">Tree-cluster fall risk</div>
        <div className="lg-row">
          <span className="sw alarm"></span>
          <div><div>Alarm</div><div className="sub">A tree is tall enough to fall onto the conductor</div></div>
        </div>
        <div className="lg-row">
          <span className="sw alert"></span>
          <div><div>Alert</div><div className="sub">A tree reaches the conductor within the growth margin</div></div>
        </div>
        <div className="lg-row">
          <span className="sw stable"></span>
          <div><div>Clear</div><div className="sub">No tree can reach the conductor</div></div>
        </div>
        <div className="lg-note">Filled shape = the cluster's canopy outline · dashed outer line = tree-fall radius of the outermost canopies</div>
      </div>

      <div className="map-scale-bar"><div className="scale-bar"/><span>{scaleM} m</span></div>

      {tt && (() => {
        const c = tt.c;
        const sw = ref.current ? ref.current.getBoundingClientRect().width : 1200;
        const sh = ref.current ? ref.current.getBoundingClientRect().height : 700;
        const left = tt.cx + 16 + 264 > sw ? Math.max(8, tt.cx - 264) : tt.cx + 16;
        const top  = Math.max(8, Math.min(tt.cy + 14, sh - 250));
        const breachers = c.members.filter(m => m.ltier !== 'stable').sort((a,b)=>a.dist-b.dist);
        return (
          <div className="tree-tooltip cluster-tt" style={{ left, top }}>
            <div className="tt-head">
              <span className="tt-id">{c.label}</span>
              <span className={`pill ${c.tier}`}>{tierLabel(c.tier)}</span>
            </div>
            <div className="tt-row"><span className="k">Span</span><span className="v">T{c.spanNum}–T{c.spanNum+1} · {c.span}</span></div>
            <div className="tt-row"><span className="k">Trees in cluster</span><span className="v">{c.treeCount}</span></div>
            <div className="tt-row"><span className="k">At-risk trees</span><span className="v">{c.breaching}</span></div>
            <div className="tt-row"><span className="k">Closest tree</span><span className="v">{c.closestDist.toFixed(1)} m</span></div>
            <div className="tt-row"><span className="k">Avg vitality</span><span className="v">{Math.round(c.vitality*100)}%</span></div>
            <div className="tt-row"><span className="k">Tallest</span><span className="v">{c.tallest.toFixed(1)} m</span></div>
            {breachers.length > 0 && (
              <div className="tt-breachers">
                <div className="tt-bh">Nearest at-risk trees</div>
                {breachers.slice(0,3).map((m,i)=>(
                  <div className="tt-brow" key={i}>
                    <span className={'bdot '+m.ltier}/>
                    <span className="bsp">{m.h.toFixed(0)} m tall</span>
                    <span className="bd">{m.dist.toFixed(1)} m from line</span>
                  </div>
                ))}
              </div>
            )}
            <div className="tt-coords">{c.lat}°N, {Math.abs(c.lng)}°W</div>
          </div>
        );
      })()}
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// APP
// ─────────────────────────────────────────────────────────────────────────────
const App = () => {
  const [filters, setFilters] = React.useState({ alarm:true, alert:true, stable:true });
  const toggle = (k) => setFilters(f=>({...f,[k]:!f[k]}));

  const [filterOpen, setFilterOpen] = React.useState(false);
  const [selectedLine, setSelectedLine] = React.useState((LINES[0] || {}).id);
  // `corridorM` is the fall-risk MARGIN (growth/uncertainty allowance, metres) — the
  // tier slider. (Name kept for brevity; it is no longer a perpendicular corridor width.)
  const [corridorM, setCorridorM] = React.useState(5);
  const [analysisM, setAnalysisM] = React.useState(125);
  const [corridorApplied, setCorridorApplied] = React.useState(5);
  const [analysisApplied, setAnalysisApplied] = React.useState(125);
  const dirty = corridorM !== corridorApplied || analysisM !== analysisApplied;

  React.useEffect(() => {
    const handler = () => setFilterOpen(o => !o);
    window.addEventListener('spotlite:toggle-filters', handler);
    return () => window.removeEventListener('spotlite:toggle-filters', handler);
  }, []);

  const geom = React.useMemo(() => buildLineGeom(selectedLine), [selectedLine]);

  // Live cluster classification under the applied corridor + analysis area.
  // Only the TIER is recomputed live (the closest stored members govern it);
  // treeCount / breaching / closestDist stay the true ETL aggregates (the stored
  // members are capped, so they can't be re-counted accurately here).
  const liveClusters = React.useMemo(() => geom.clusters.map(c => {
    let worst = 'stable';
    const members = c.members.map(m => {
      const lt = (m.dist - m.crownR) <= analysisApplied ? tierAt(m.h, m.gap, corridorApplied) : 'stable';
      if (TIER_RANK[lt] > TIER_RANK[worst]) worst = lt;
      return m.ltier === lt ? m : { ...m, ltier: lt };
    });
    return { ...c, members, tier: worst };
  }), [geom, corridorApplied, analysisApplied]);

  const counts = React.useMemo(() => {
    const o = { alarm:0, alert:0, stable:0 };
    liveClusters.forEach(c => o[c.tier]++);
    return o;
  }, [liveClusters]);

  const [selectedSpan, setSelectedSpan] = React.useState(null);
  const [selectedCluster, setSelectedCluster] = React.useState(null);
  const [tip, setTip] = React.useState(null);
  const [focusCluster, setFocusCluster] = React.useState(null);
  const [spanInfo, setSpanInfo] = React.useState(null);
  const [search, setSearch] = React.useState('');
  const [panelMode, setPanelMode] = React.useState('clusters');
  const [clusterTab, setClusterTab] = React.useState('alarms');

  // Deep links from the dashboard (#cluster= / #tier= / #asset=).
  React.useEffect(() => {
    const hash = (window.location.hash || '').replace(/^#/, '');
    if (!hash) return;
    const params = new URLSearchParams(hash);
    if (params.has('cluster')) {
      const id = params.get('cluster');
      const c = ALL_CLUSTERS.find(x => x.id === id);
      if (c) {
        setSelectedLine(c.line);
        setPanelMode('clusters');
        setClusterTab(c.tier === 'alert' ? 'alerts' : 'alarms');
        setSelectedCluster(c.id);
        setSelectedSpan(c.spanNum);
        setFocusCluster(c.id);
        return;
      }
    }
    if (params.has('tier')) {
      const tier = params.get('tier');
      if (tier === 'alarm' || tier === 'alert') {
        setPanelMode('clusters');
        setClusterTab(tier === 'alarm' ? 'alarms' : 'alerts');
        return;
      }
    }
    if (params.has('asset')) {
      const c = ALL_CLUSTERS.find(x => x.id === params.get('asset'));
      if (c) { setSelectedLine(c.line); setPanelMode('assets'); setSelectedSpan(c.spanNum); }
      return;
    }
  }, []);

  // ── Span tier (one cluster per span) + baseline-delta exploration ──
  const BASE_CORRIDOR_M = 5, BASE_ANALYSIS_M = 125;
  const spanTierAt = React.useCallback((spanNum, corM, anaM) => {
    let worst = 'stable';
    const c = geom.clusters.find(x => x.spanNum === spanNum);
    if (!c) return worst;
    for (const m of c.members) {
      if ((m.dist - m.crownR) > anaM) continue;
      const t = tierAt(m.h, m.gap, corM);
      if (TIER_RANK[t] > TIER_RANK[worst]) worst = t;
    }
    return worst;
  }, [geom]);
  const spanTier = React.useCallback((spanNum) => spanTierAt(spanNum, corridorApplied, analysisApplied),
    [spanTierAt, corridorApplied, analysisApplied]);
  const spanDelta = React.useCallback((spanNum) => {
    const cur  = spanTierAt(spanNum, corridorApplied, analysisApplied);
    const base = spanTierAt(spanNum, BASE_CORRIDOR_M, BASE_ANALYSIS_M);
    if (cur === base) return null;
    return { dir: TIER_RANK[cur] > TIER_RANK[base] ? 'up' : 'down', from: base, to: cur };
  }, [spanTierAt, corridorApplied, analysisApplied]);
  const baselineChanged = corridorApplied !== BASE_CORRIDOR_M || analysisApplied !== BASE_ANALYSIS_M;

  const hiddenByAnalysis = React.useMemo(() => {
    if (analysisApplied >= BASE_ANALYSIS_M) return { alarm: 0, alert: 0 };
    let alarm = 0, alert = 0;
    for (const c of geom.clusters) {
      for (const m of c.members) {
        const within = (m.dist - m.crownR) <= analysisApplied;
        const wouldShow = (m.dist - m.crownR) <= BASE_ANALYSIS_M;
        if (within || !wouldShow) continue;
        const t = tierAt(m.h, m.gap, corridorApplied);
        if (t === 'alarm') alarm++; else if (t === 'alert') alert++;
      }
    }
    return { alarm, alert };
  }, [geom, corridorApplied, analysisApplied]);
  const changedSpanCount = React.useMemo(
    () => geom.clusters.filter(c => spanDelta(c.spanNum)).length, [geom, spanDelta]);

  // Span (asset) list — this line's spans, sorted by live risk.
  const SPAN_LIST = React.useMemo(() => geom.clusters.map(c => {
    const t = spanTier(c.spanNum);
    return { id: c.spanNum, seq: c.spanSeq, label: `Span ${c.spanSeq} · T${c.spanNum}→T${c.spanNum+1}`,
             tier: t === 'stable' ? null : t, delta: spanDelta(c.spanNum) };
  }).sort((a,b)=>{ const o={alarm:0,alert:1,null:2}; return (o[a.tier]??2)-(o[b.tier]??2) || a.seq-b.seq; }),
  [geom, spanTier, spanDelta]);

  const clusterTier = clusterTab === 'alarms' ? 'alarm' : 'alert';
  const CLUSTER_LIST = liveClusters
    .filter(c => c.tier === clusterTier)
    .filter(c => {
      if (!search) return true;
      const q = search.toLowerCase();
      return c.label.toLowerCase().includes(q) || c.id.toLowerCase().includes(q)
          || c.span.toLowerCase().includes(q) || String(c.spanSeq).includes(q);
    })
    .sort((a,b) => a.closestDist - b.closestDist);

  const filteredSpans = SPAN_LIST.filter(s => !search || s.label.toLowerCase().includes(search.toLowerCase()));
  const togglePanel = (mode) => setPanelMode(m => m === mode ? null : mode);
  const ASSET_COUNT = SPAN_LIST.length;
  const CLUSTER_TOTAL = counts.alarm + counts.alert;
  const selectedLineObj = LINES.find(L => L.id === selectedLine) || {};

  const switchLine = (id) => {
    if (id === selectedLine) return;
    setSelectedLine(id);
    setSelectedSpan(null); setSelectedCluster(null); setFocusCluster(null);
    setTip(null); setSpanInfo(null);
  };
  const selectCluster = (c) => {
    setSelectedCluster(c.id === selectedCluster ? null : c.id);
    setSelectedSpan(c.spanNum);
    setFocusCluster(c.id === selectedCluster ? null : c.id);
  };

  return (
    <div className={'app' + (filterOpen ? ' filters-open' : '')}>
      <Sidebar activeModule="tree"/>
      <aside className={'filter-panel' + (filterOpen ? ' open' : '')}>
        <div className="fp-head">
          <h3>Filters</h3>
          <button className="fp-close" onClick={() => setFilterOpen(false)}>×</button>
        </div>
        <div className="fp-section">
          <h4>View mode</h4>
          <div className="fp-modes">
            <a className="fp-mode active"><span className="dot"/>Tree Fall</a>
            <a className="fp-mode" href="vegetation.html"><span className="dot"/>Vegetation Height</a>
            <a className="fp-mode" href="clearance.html"><span className="dot"/>Min. Clearance</a>
          </div>
        </div>
        <div className="fp-section">
          <div className="fp-slider-row"><span className="lbl">Fall-risk margin</span><span className="val">{corridorM} m</span></div>
          <input type="range" className="fp-range" min="0" max="30" step="5" value={corridorM} onChange={(e)=>setCorridorM(+e.target.value)}/>
          <div className="fp-stops"><span>0m</span><span>10m</span><span>20m</span><span>30m</span></div>
        </div>
        <div className="fp-section">
          <div className="fp-slider-row"><span className="lbl">Analysis area</span><span className="val">{analysisM} m</span></div>
          <input type="range" className="fp-range" min="25" max="150" step="25" value={analysisM} onChange={(e)=>setAnalysisM(+e.target.value)}/>
          <div className="fp-stops"><span>25m</span><span>50m</span><span>75m</span><span>100m</span><span>125m</span><span>150m</span></div>
        </div>
        <div className="fp-section fp-save-section">
          <div className="fp-applied-note">
            {dirty
              ? <>Pending: margin <b>{corridorM} m</b>, analysis <b>{analysisM} m</b></>
              : <>Applied: margin <b>{corridorApplied} m</b>, analysis <b>{analysisApplied} m</b></>}
          </div>
          <div className="fp-actions">
            <button className="fp-btn fp-btn-ghost" disabled={!dirty}
                    onClick={() => { setCorridorM(corridorApplied); setAnalysisM(analysisApplied); }}>Reset</button>
            <button className="fp-btn fp-btn-primary" disabled={!dirty}
                    onClick={() => { setCorridorApplied(corridorM); setAnalysisApplied(analysisM); }}>Save changes</button>
          </div>
        </div>
      </aside>
      <Subrail view="map"/>
      <main className="map-main">
        <TopBar crumb="Tree Fall Risk · Map" title={`HV Corridor · ${selectedLineObj.label || ''}`}>
          <div className="line-picker">
            {LINES.map(L => (
              <button key={L.id}
                      className={'line-pill' + (L.id === selectedLine ? ' active' : '')}
                      onClick={() => switchLine(L.id)}
                      title={`${L.label} — ${L.spanCount} spans`}>
                {L.label}<span className="lp-count">{L.spanCount}</span>
              </button>
            ))}
          </div>
          <a className="btn btn-ghost" href="../dashboard/dashboard.html"><IDashboard size={14}/> Dashboard</a>
        </TopBar>

        <div className="map-body">
          <aside className={'mp-side' + (panelMode === null ? ' collapsed' : '')}>
            {panelMode === 'assets' && (
              <>
                <div className="mp-section">
                  <div className="mp-search">
                    <span className="ic"><ISearch size={13}/></span>
                    <input placeholder="Search span…" value={search} onChange={e=>setSearch(e.target.value)}/>
                  </div>
                </div>
                <div className="mp-section">
                  <h4>Risk tier</h4>
                  {[
                    { k:'alarm',  label:'Alarm', desc:'A tree can fall onto the conductor' },
                    { k:'alert',  label:'Alert', desc:'Reaches within the growth margin' },
                    { k:'stable', label:'Clear', desc:'No tree can reach the conductor' },
                  ].map(({k,label,desc})=>(
                    <div key={k} className={`tier-row ${filters[k]?'on':'off'} ${k}`} onClick={()=>toggle(k)}>
                      <div className="tick">{filters[k]&&'✓'}</div>
                      <div>
                        <div style={{display:'flex',alignItems:'center',gap:8}}>
                          <span className={'swatch '+k}/>
                          <span className="t-name">{label}</span>
                          <span className="t-count">{counts[k]}</span>
                        </div>
                        <div className="t-desc">{desc}</div>
                      </div>
                    </div>
                  ))}
                </div>
                <div className="mp-section" style={{flex:1,minHeight:0,display:'flex',flexDirection:'column',paddingBottom:0}}>
                  <h4>Spans ({filteredSpans.length})</h4>
                  <div className="span-list">
                    {filteredSpans.map(s=>(
                      <div key={s.id} className={`span-row${selectedSpan===s.id?' sel':''}`}
                           onClick={()=>setSelectedSpan(s.id===selectedSpan?null:s.id)}>
                        <span>{s.label}</span>
                        <span style={{display:'flex',alignItems:'center',gap:6}}>
                          {s.delta && (
                            <span className={'crit-delta ' + s.delta.dir}
                                  title={`Criticality ${s.delta.dir==='up'?'escalated':'eased'}: ${s.delta.from} → ${s.delta.to}`}>
                              {s.delta.dir==='up'?'▲':'▼'}
                            </span>
                          )}
                          {s.tier==='alarm' && <span className="sc alarm">Alarm</span>}
                          {s.tier==='alert' && <span className="sc alert">Alert</span>}
                          {!s.tier && <span className="sc stable">Clear</span>}
                        </span>
                      </div>
                    ))}
                  </div>
                </div>
                <div className="mp-bottom">
                  Data vintage: current export<br/>
                  Coord. system: WGS84 (EPSG:4326)
                </div>
              </>
            )}

            {panelMode === 'clusters' && (
              <>
                <div className="mp-section">
                  <div className="mp-search">
                    <span className="ic"><ISearch size={13}/></span>
                    <input placeholder="Search cluster, span…" value={search} onChange={e=>setSearch(e.target.value)}/>
                  </div>
                </div>
                <div className="mp-subtabs">
                  <div className={'mp-subtab alarms' + (clusterTab==='alarms'?' active':'')} onClick={()=>setClusterTab('alarms')}>
                    Alarm clusters <span className="sc">{counts.alarm}</span>
                  </div>
                  <div className={'mp-subtab alerts' + (clusterTab==='alerts'?' active':'')} onClick={()=>setClusterTab('alerts')}>
                    Alert clusters <span className="sc">{counts.alert}</span>
                  </div>
                </div>
                <div className="tree-list">
                  {CLUSTER_LIST.map(c=>(
                    <div key={c.id}
                         className={`tree-row${selectedCluster===c.id?' sel':''}${clusterTab==='alerts'?' alerts':''}`}
                         onClick={()=>selectCluster(c)}>
                      <div className="tr-id">
                        {c.label}<span className="tr-span">{c.span}</span>
                      </div>
                      <div className="tr-meta cl-meta">
                        <span>{c.treeCount} trees · <b>{c.breaching}</b> at-risk</span>
                        <span className="v">{c.closestDist.toFixed(1)} m</span>
                      </div>
                      <div className="tr-meta cl-meta">
                        <span className="k">Avg vitality</span>
                        <span className="v">{Math.round(c.vitality*100)}%</span>
                      </div>
                    </div>
                  ))}
                  {CLUSTER_LIST.length===0 && (
                    <div style={{padding:'24px 18px',color:'var(--text-muted)',font:'400 12px/1.4 var(--font-sans)'}}>
                      No matching clusters.
                    </div>
                  )}
                </div>
                <div className="mp-bottom">
                  Data vintage: current export<br/>
                  Coord. system: WGS84 (EPSG:4326)
                </div>
              </>
            )}
          </aside>

          <div style={{position:'relative',flex:1,display:'flex'}}>
            {baselineChanged && (
              <div className="reval-banner" style={{top:60}}>
                <span className="ic"><IWarn size={15}/></span>
                <span>
                  Criticality re-evaluated for <b>{corridorApplied} m</b> margin / <b>{analysisApplied} m</b> analysis
                  {changedSpanCount > 0 && <> · <b>{changedSpanCount}</b> span{changedSpanCount===1?'':'s'} changed</>}
                  {(hiddenByAnalysis.alarm > 0 || hiddenByAnalysis.alert > 0) && (
                    <> · hidden: <span className="hide-alarm">{hiddenByAnalysis.alarm} alarm</span>, <span className="hide-alert">{hiddenByAnalysis.alert} alert</span></>
                  )}
                </span>
              </div>
            )}
            <div className="list-toggle">
              <button className={'lt-pill' + (panelMode==='assets'?' active':'')} onClick={()=>togglePanel('assets')} title="Show asset list">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="4" width="18" height="4" rx="1"/><rect x="3" y="10" width="18" height="4" rx="1"/><rect x="3" y="16" width="18" height="4" rx="1"/>
                </svg>
                Asset List <span className="lt-count">{ASSET_COUNT}</span>
              </button>
              <button className={'lt-pill' + (panelMode==='clusters'?' active':'')} onClick={()=>togglePanel('clusters')} title="Show cluster list">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="8" cy="9" r="3.2"/><circle cx="15" cy="8" r="2.6"/><circle cx="13" cy="15" r="3.4"/>
                </svg>
                Cluster List <span className="lt-count">{CLUSTER_TOTAL}</span>
              </button>
            </div>

            <MapCanvas
              filters={filters}
              selectedSpan={selectedSpan}
              onSpanClick={id=>setSelectedSpan(id===selectedSpan?null:id)}
              tip={tip}
              setTip={setTip}
              analysisM={analysisApplied}
              analysisDraftM={analysisM}
              dirty={dirty}
              geom={geom}
              clusters={liveClusters}
              spanTier={spanTier}
              focusCluster={focusCluster}
              selectedCluster={selectedCluster}
              onMapInteract={() => setSpanInfo(null)}
              onClusterClick={(c)=>{ setSelectedCluster(c.id); setSelectedSpan(c.spanNum); setPanelMode('clusters'); setClusterTab(c.tier==='alert'?'alerts':'alarms'); }}
              onSpanInfo={(spanNum, sx, sy) => {
                const c = liveClusters.find(x => x.spanNum === spanNum);
                setSpanInfo({ n: spanNum, seq: c ? c.spanSeq : spanNum, designation: c ? c.designation : '',
                              tier: spanTier(spanNum), alarms: c ? c.alarms : 0, alerts: c ? c.alerts : 0, x: sx, y: sy });
              }}
            />
            <SpanInfoPopover data={spanInfo} x={spanInfo ? spanInfo.x : 0} y={spanInfo ? spanInfo.y : 0} onClose={() => setSpanInfo(null)}/>
          </div>
        </div>
      </main>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);