// Shared app shell: primary sidebar + subrail + top bar.
// Used by dashboard and map views.

const Sidebar = ({ activeModule = 'tree' }) => (
  <aside className="sidenav">
    <div className="mark">S</div>
    <nav className="nav">
      <div className="nav-item active" title="Home"><IDashboard/></div>
      <div className="nav-item" title="Infrastructures"><ILayers/></div>
      <div className="nav-item" title="GeoPulse"><ICrosshair/></div>
      <div className="nav-item" title="Warnings"><IWarn/></div>
      <div className="nav-item" title="Users"><IUsers/></div>
      <div className="nav-item" title="Feedback"><IChat/></div>
    </nav>
    <div className="bottom">
      <div className="nav-item" title="Settings"><ISettings/></div>
      <div className="avatar">RM</div>
    </div>
  </aside>
);

const Subrail = ({ view, onView }) => {
  const items = [
    { id: 'dashboard', Icon: IDashboard, label: 'Dashboard', href: '../dashboard/dashboard.html' },
    { id: 'list',      Icon: IList,      label: 'List',      href: '../assets/assets.html' },
    { id: 'map',       Icon: IMap,       label: 'Map',       href: '../map/map.html' },
    { id: 'docs',      Icon: IDocs,      label: 'Documents', href: '#' },
  ];
  // Track filter-panel open state so the funnel icon gets the active style
  // (matching the map/dashboard icons) when the panel is visible.
  const [filtersOpen, setFiltersOpen] = React.useState(false);
  React.useEffect(() => {
    const onState = (e) => setFiltersOpen(!!(e.detail && e.detail.open));
    window.addEventListener('spotlite:filters-state', onState);
    return () => window.removeEventListener('spotlite:filters-state', onState);
  }, []);
  return (
    <div className="subrail">
      {items.map(it => (
        <a key={it.id}
           href={it.href}
           className={'sr-item' + (view === it.id ? ' active' : '')}
           title={it.label}
           onClick={(e) => { if (onView && it.id !== 'map' && it.id !== 'dashboard' && it.id !== 'list') { e.preventDefault(); onView(it.id); } }}>
          <it.Icon/>
        </a>
      ))}
      <div className="sep"/>
      <div className={'sr-item sr-filter' + (filtersOpen ? ' active' : '')}
           title="Filters"
           data-filter-toggle="1"
           onClick={() => window.dispatchEvent(new CustomEvent('spotlite:toggle-filters'))}
           style={{ cursor: 'pointer' }}><IFilter/></div>
    </div>
  );
};

const TopBar = ({ crumb, title, children }) => (
  <div className="topbar">
    <div>
      <div className="crumb"><span className="dot"/>{crumb}</div>
      <h1>{title}</h1>
    </div>
    <div className="actions">{children}</div>
  </div>
);

// ── Span info popover ────────────────────────────────────────────
// Shared across all map views. Pops up on conductor click; shows asset
// designation, tier pill, alarm/alert counts, length, and "View in asset
// list" link. Click X or outside to close.
//
// Props:
//   data: { n, tier, alarms, alerts, lengthM } | null
//   x, y: click position relative to .map-stage (px)
//   onClose: () => void
const SpanInfoPopover = ({ data, x, y, onClose }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!data) return;
    const onDown = (e) => {
      if (ref.current && !ref.current.contains(e.target)) onClose();
    };
    // Defer one frame so the click that opened us doesn't immediately close it
    const t = setTimeout(() => document.addEventListener('mousedown', onDown), 0);
    return () => { clearTimeout(t); document.removeEventListener('mousedown', onDown); };
  }, [data, onClose]);

  if (!data) return null;
  const { n, seq, tier, alarms = 0, alerts = 0, lengthM, voltage = '150 kV', infra = 'HV overhead line' } = data;
  const tierLabel = tier === 'alarm' ? 'Alarm' : tier === 'alert' ? 'Alert' : 'Stable';
  const designation = data.designation || `Span ${seq != null ? seq : n}`;
  const popoverW = 280;
  // Place to the right of the click; flip left if it would overflow
  const left = x + 14;
  const top  = Math.max(8, y - 24);
  return (
    <div className="span-popover" ref={ref} style={{ left, top }}>
      <div className="sp-head">
        <div className="title">
          <div className="name">Span {seq != null ? seq : n} — T{n}→T{n+1}</div>
          <div className="designation">{designation}</div>
        </div>
        <button className="close-btn" onClick={onClose} aria-label="Close">×</button>
      </div>
      <span className={'sp-pill ' + tier}>{tierLabel}</span>
      <div className="sp-row"><span className="k">Infrastructure</span><span className="v">{infra}</span></div>
      <div className="sp-row"><span className="k">Voltage</span><span className="v">{voltage}</span></div>
      {lengthM != null && <div className="sp-row"><span className="k">Span length</span><span className="v">{Math.round(lengthM)} m</span></div>}
      <div className="sp-row"><span className="k">Alarm trees</span><span className={'v ' + (alarms > 0 ? 'alarm' : '')}>{alarms}</span></div>
      <div className="sp-row"><span className="k">Alert trees</span><span className={'v ' + (alerts > 0 ? 'alert' : '')}>{alerts}</span></div>
      <div className="sp-foot">
        <a href="../assets/assets.html">View in asset list →</a>
      </div>
    </div>
  );
};

Object.assign(window, { Sidebar, Subrail, TopBar, SpanInfoPopover });