window.GDD = window.GDD || {};

const { useState, useEffect, useRef, useCallback, useMemo } = React;
const TH = window.GDD.THREE;

/* ── Scale constants ── */
const SCALE = 0.5;         // world position scale
const ORBIT_SCALE = 0.22;  // orbital radius scale
const PLANET_SCALE = 0.7;  // planet mesh scale

function StarMapDemo() {
  const containerRef = useRef(null);
  const sceneRef = useRef(null);
  const [systems, setSystems] = useState([]);
  const [connections, setConnections] = useState([]);
  const [selected, setSelected] = useState(null);
  const [destination, setDestination] = useState(null);
  const [hovered, setHovered] = useState(null);
  const [waypoints, setWaypoints] = useState([]);
  const [route, setRoute] = useState([]);
  const [searchQuery, setSearchQuery] = useState('');
  const [systemFilter, setSystemFilter] = useState('all');
  const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0, target: null });
  const systemMeshesRef = useRef([]);
  const routeLineRef = useRef(null);
  const connLinesRef = useRef([]);
  const animIdRef = useRef(null);
  const cameraCtrlRef = useRef(null);
  const minimapCanvasRef = useRef(null);
  const focusTargetRef = useRef(null);
  const orbitalBodiesRef = useRef([]);
  const asteroidBeltsRef = useRef([]);

  /* ── Celestial data ── */
  const celestialData = useMemo(() => {
    return window.GDD.CONSTANTS.CELESTIAL_BODIES || {};
  }, []);

  const selectedCelestial = useMemo(() => {
    if (!selected) return null;
    return celestialData[selected.id] || null;
  }, [selected, celestialData]);

  /* ── Load data ── */
  useEffect(() => {
    window.GDD.api.getSystems().then(s => setSystems(s));
    window.GDD.api.getConnections().then(c => setConnections(c));
  }, []);

  /* ── Camera fly-to on selection ── */
  useEffect(() => {
    if (!focusTargetRef.current || !cameraCtrlRef.current) return;
    cameraCtrlRef.current.flyTo(focusTargetRef.current.x, focusTargetRef.current.y, focusTargetRef.current.z || 0);
    focusTargetRef.current = null;
  }, [selected]);

  /* ── Context menu close on click / Escape / scroll ── */
  useEffect(() => {
    const close = () => setContextMenu(prev => ({ ...prev, visible: false }));
    const onKey = (e) => { if (e.key === 'Escape') close(); };
    window.addEventListener('click', close);
    window.addEventListener('keydown', onKey);
    return () => { window.removeEventListener('click', close); window.removeEventListener('keydown', onKey); };
  }, []);

  /* ── Build 3D scene ── */
  useEffect(() => {
    if (systems.length === 0) return;
    const container = containerRef.current;
    if (!container) return;

    // Cleanup previous
    if (sceneRef.current) {
      sceneRef.current.scene.traverse(child => {
        if (child.geometry) child.geometry.dispose();
        if (child.material) { if (child.material.map) child.material.map.dispose(); child.material.dispose(); }
      });
      sceneRef.current.renderer.dispose();
      if (sceneRef.current.renderer.domElement.parentNode) sceneRef.current.renderer.domElement.parentNode.removeChild(sceneRef.current.renderer.domElement);
      if (animIdRef.current) cancelAnimationFrame(animIdRef.current);
      if (cameraCtrlRef.current) cameraCtrlRef.current.dispose();
    }

    const scene = new THREE.Scene();
    scene.fog = new THREE.FogExp2(0x040810, 0.0003);

    const w = container.clientWidth;
    const h = container.clientHeight;
    const camera = new THREE.PerspectiveCamera(50, w / h, 0.1, 5000);
    camera.position.set(0, 180, 220);
    camera.lookAt(0, 0, 0);

    const renderer = TH.createRenderer(container, { clearColor: 0x040810 });
    renderer.setSize(w, h);
    TH.handleResize(renderer, camera, container);

    // Star field
    const stars = TH.createStarField(4000, 2500);
    scene.add(stars);

    // Nebulae
    TH.addNebula(scene, 0x22d3ee, [-100, 50, -300], 400);
    TH.addNebula(scene, 0xa78bfa, [200, -80, -200], 300);
    TH.addNebula(scene, 0xf0a030, [0, 100, -250], 200);

    // Grid
    const grid = new THREE.GridHelper(600, 30, 0x0d1520, 0x0d1520);
    grid.material.transparent = true;
    grid.material.opacity = 0.12;
    scene.add(grid);

    TH.setupSpaceLighting(scene);

    // Build system meshes
    systemMeshesRef.current = [];
    orbitalBodiesRef.current = [];
    asteroidBeltsRef.current = [];

    systems.forEach(sys => {
      const group = TH.createStarSystem(sys, SCALE);
      scene.add(group);
      systemMeshesRef.current.push(group);

      // Create celestial bodies for this system
      const cData = celestialData[sys.id];
      if (!cData) return;
      const sysPos = new THREE.Vector3(sys.x * SCALE, sys.y * SCALE, 0);

      cData.bodies.forEach(body => {
        if (body.type === 'belt') {
          // Asteroid belt
          const belt = TH.createAsteroidBelt(
            body.innerOrbit * ORBIT_SCALE,
            body.outerOrbit * ORBIT_SCALE,
            body.count,
            { basePeriod: 20, maxInclination: 0.12 }
          );
          belt.position.copy(sysPos);
          scene.add(belt);
          asteroidBeltsRef.current.push({ belt, parentPos: sysPos });
          return;
        }

        // Planet
        const orbitR = body.orbit * ORBIT_SCALE;
        const planetSize = body.size * PLANET_SCALE;
        const planetMesh = TH.createPlanetMesh(planetSize, body.color, body.atmosphere);
        scene.add(planetMesh);

        // Orbit trail
        const trail = TH.createOrbitTrail(orbitR, body.ecc, body.inc, 0x1a3050, 0.18);
        trail.position.copy(sysPos);
        scene.add(trail);

        // Orbital body
        const orbBody = new TH.OrbitalBody({
          mesh: planetMesh,
          parentPos: sysPos,
          orbitRadius: orbitR,
          eccentricity: body.ecc,
          inclination: body.inc,
          period: body.period,
        });

        // Rings
        if (body.hasRings) {
          const rings = TH.createRingSystem(planetSize * 1.3, planetSize * 2.1, body.color, 0.25);
          planetMesh.add(rings);
        }

        // Moons
        if (body.moons) {
          body.moons.forEach(moon => {
            const moonSize = moon.size * PLANET_SCALE * 0.8;
            const moonMesh = TH.createPlanetMesh(moonSize, moon.color);
            scene.add(moonMesh);

            const moonOrbitR = moon.orbit * ORBIT_SCALE * 0.5;
            const moonTrail = TH.createOrbitTrail(moonOrbitR, 0, 0, 0x0d1a2a, 0.08);
            scene.add(moonTrail);

            const moonBody = new TH.OrbitalBody({
              mesh: moonMesh,
              orbitRadius: moonOrbitR,
              period: moon.period,
            });
            orbBody.children.push(moonBody);
          });
        }

        // Stations in orbit around planets
        if (sys.stations && body.type === 'terrestrial') {
          sys.stations.forEach((stn, si) => {
            const stnMesh = TH.createOrbitalStation(planetSize * 0.25, 0x22d3ee);
            scene.add(stnMesh);
            const stnOrbitR = planetSize * 2.5 + si * 1.5;
            const stnTrail = TH.createOrbitTrail(stnOrbitR, 0, 0, 0x22d3ee, 0.06);
            scene.add(stnTrail);
            const stnBody = new TH.OrbitalBody({
              mesh: stnMesh,
              orbitRadius: stnOrbitR,
              period: 3 + si,
              phase: si * Math.PI * 0.7,
            });
            orbBody.children.push(stnBody);
          });
        }

        orbitalBodiesRef.current.push(orbBody);
      });
    });

    // Connection lines
    connLinesRef.current = [];
    connections.forEach(([a, b]) => {
      const sa = systems.find(s => s.id === a);
      const sb = systems.find(s => s.id === b);
      if (!sa || !sb) return;
      const line = TH.createConnectionLine(
        { x: sa.x * SCALE, y: sa.y * SCALE, z: 0 },
        { x: sb.x * SCALE, y: sb.y * SCALE, z: 0 },
        0x1c2a3f, 0.4
      );
      scene.add(line);
      connLinesRef.current.push({ line, a, b });
    });

    // Camera controller
    const ctrl = new TH.OrbitController(camera, renderer.domElement, new THREE.Vector3(0, 0, 0));
    ctrl.minDistance = 8;
    ctrl.maxDistance = 400;
    ctrl.dampingFactor = 0.08;
    ctrl.rotateSpeed = 0.4;
    ctrl.zoomSpeed = 0.8;
    ctrl.panSpeed = 0.5;
    ctrl.enablePan = true;
    ctrl.panButton = 2;
    cameraCtrlRef.current = ctrl;

    sceneRef.current = { scene, camera, renderer, stars };

    // Animation loop
    const clock = new THREE.Clock();
    const animate = () => {
      animIdRef.current = requestAnimationFrame(animate);
      const dt = clock.getDelta();
      const t = clock.elapsedTime;
      ctrl.update(dt);

      stars.rotation.y = t * 0.001;

      // Pulse system glows
      systemMeshesRef.current.forEach(group => {
        const glow = group.children[1];
        if (glow) {
          const base = 6 * SCALE;
          glow.scale.setScalar(base + Math.sin(t * 2 + group.position.x) * 0.5);
        }
      });

      // Update orbital bodies (Keplerian physics)
      orbitalBodiesRef.current.forEach(ob => ob.update(dt));

      // Update asteroid belts
      asteroidBeltsRef.current.forEach(ab => TH.updateAsteroidBelt(ab.belt, dt, ab.parentPos));

      renderer.render(scene, camera);
    };
    animate();

    const onResize = () => TH.handleResize(renderer, camera, container);
    window.addEventListener('resize', onResize);

    return () => {
      if (animIdRef.current) cancelAnimationFrame(animIdRef.current);
      window.removeEventListener('resize', onResize);
      if (cameraCtrlRef.current) cameraCtrlRef.current.dispose();
    };
  }, [systems, celestialData]);

  /* ── Draw minimap ── */
  useEffect(() => {
    const canvas = minimapCanvasRef.current;
    if (!canvas || systems.length === 0) return;
    const ctx = canvas.getContext('2d');
    const W = canvas.width;
    const H = canvas.height;
    const xs = systems.map(s => s.x);
    const ys = systems.map(s => s.y);
    const minX = Math.min(...xs) - 40;
    const maxX = Math.max(...xs) + 40;
    const minY = Math.min(...ys) - 40;
    const maxY = Math.max(...ys) + 40;
    const scaleX = (W - 20) / (maxX - minX);
    const scaleY = (H - 20) / (maxY - minY);
    const sc = Math.min(scaleX, scaleY);
    const mapX = (x) => 10 + (x - minX) * sc;
    const mapY = (y) => H - 10 - (y - minY) * sc;

    ctx.clearRect(0, 0, W, H);
    ctx.fillStyle = 'rgba(8,12,20,0.95)';
    ctx.fillRect(0, 0, W, H);

    ctx.strokeStyle = 'rgba(28,42,63,0.6)';
    ctx.lineWidth = 0.5;
    connections.forEach(([a, b]) => {
      const sa = systems.find(s => s.id === a);
      const sb = systems.find(s => s.id === b);
      if (!sa || !sb) return;
      ctx.beginPath(); ctx.moveTo(mapX(sa.x), mapY(sa.y)); ctx.lineTo(mapX(sb.x), mapY(sb.y)); ctx.stroke();
    });

    if (route.length > 1) {
      ctx.strokeStyle = '#22d3ee'; ctx.lineWidth = 1.5; ctx.setLineDash([3, 2]);
      ctx.beginPath();
      route.forEach((s, i) => { if (i === 0) ctx.moveTo(mapX(s.x), mapY(s.y)); else ctx.lineTo(mapX(s.x), mapY(s.y)); });
      ctx.stroke(); ctx.setLineDash([]);
    }

    systems.forEach(sys => {
      const x = mapX(sys.x), y = mapY(sys.y);
      const isSel = selected && selected.id === sys.id;
      const isDest = destination === sys.id;
      const isHov = hovered && hovered.id === sys.id;
      let col = '#5a6b82';
      if (sys.security >= 0.5) col = '#22c55e';
      else if (sys.security >= 0.2) col = '#f0a030';
      else col = '#ef4444';
      if (isSel) { ctx.fillStyle = '#f0a030'; ctx.beginPath(); ctx.arc(x, y, 5, 0, Math.PI * 2); ctx.fill(); }
      if (isDest) { ctx.strokeStyle = '#22d3ee'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.arc(x, y, 6, 0, Math.PI * 2); ctx.stroke(); }
      const r = isHov ? 3 : isSel ? 4 : 2.5;
      ctx.fillStyle = col; ctx.globalAlpha = isHov || isSel ? 1 : 0.7;
      ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill(); ctx.globalAlpha = 1;
      if (isSel || isHov || isDest) {
        ctx.font = '8px JetBrains Mono, monospace';
        ctx.fillStyle = isSel ? '#f1f5f9' : '#94a3b8';
        ctx.textAlign = 'center'; ctx.fillText(sys.name, x, y - 8);
      }
    });
  }, [systems, connections, selected, hovered, destination, route]);

  /* ── Update route 3D line ── */
  useEffect(() => {
    if (!sceneRef.current) return;
    const { scene } = sceneRef.current;
    if (routeLineRef.current) {
      scene.remove(routeLineRef.current);
      if (routeLineRef.current.geometry) routeLineRef.current.geometry.dispose();
      if (routeLineRef.current.material) routeLineRef.current.material.dispose();
      routeLineRef.current = null;
    }
    if (route.length > 1) {
      const line = TH.createRouteLine(route.map(s => ({ x: s.x * SCALE, y: s.y * SCALE, z: 1 })), 0x22d3ee);
      scene.add(line);
      routeLineRef.current = line;
    }
  }, [route]);

  /* ── Update selection visuals ── */
  useEffect(() => {
    systemMeshesRef.current.forEach(group => {
      const sys = group.userData;
      const isSel = selected && selected.id === sys.id;
      const isHov = hovered && hovered.id === sys.id;
      const isDest = destination === sys.id;
      const isWP = waypoints.some(w => w.id === sys.id);

      const core = group.children[0];
      if (core) core.scale.setScalar(isSel ? 2.0 : isHov ? 1.5 : isDest ? 1.6 : isWP ? 1.3 : 1);

      const glow = group.children[1];
      if (glow) {
        let col = new THREE.Color(sys.color);
        if (isDest) col = new THREE.Color(0x22d3ee);
        else if (isSel) col = new THREE.Color(0xf0a030);
        else if (isWP) col = new THREE.Color(0xa78bfa);
        glow.material.color.copy(col);
      }

      const label = group.children[2];
      if (label) {
        let color = '#5a6b82', size = 18;
        if (isSel) { color = '#f1f5f9'; size = 22; }
        else if (isHov) { color = '#d4dce8'; size = 20; }
        else if (isDest) { color = '#22d3ee'; size = 20; }
        else if (isWP) { color = '#a78bfa'; size = 19; }
        const prefix = isDest ? '⊕ ' : isWP ? '◇ ' : '';
        TH.updateLabelText(label, prefix + sys.name, color, size);
      }
    });
  }, [selected, hovered, destination, waypoints]);

  /* ── Highlight connections ── */
  useEffect(() => {
    connLinesRef.current.forEach(({ line, a, b }) => {
      const isOnRoute = route.some((s, i) => {
        const next = route[i + 1];
        return next && ((a === s.id && b === next.id) || (b === s.id && a === next.id));
      });
      const isActive = selected && (selected.id === a || selected.id === b);
      if (isOnRoute) { line.material.color.set(0x22d3ee); line.material.opacity = 0.5; }
      else if (isActive) { line.material.color.set(0xf0a030); line.material.opacity = 0.5; }
      else { line.material.color.set(0x1c2a3f); line.material.opacity = 0.25; }
    });
  }, [selected, route]);

  /* ── Raycast helper ── */
  const raycastSystems = useCallback((e) => {
    if (!sceneRef.current) return null;
    const { camera } = sceneRef.current;
    const rect = containerRef.current.getBoundingClientRect();
    const mouse = new THREE.Vector2(
      ((e.clientX - rect.left) / rect.width) * 2 - 1,
      -((e.clientY - rect.top) / rect.height) * 2 + 1
    );
    const cores = systemMeshesRef.current.map(g => g.children[0]).filter(Boolean);
    const hits = TH.raycast(mouse, camera, cores);
    if (hits.length > 0) return hits[0].object.parent;
    return null;
  }, []);

  /* ── Click ── */
  const handleClick = useCallback((e) => {
    const group = raycastSystems(e);
    if (group) setSelected(group.userData);
    else setSelected(null);
  }, [raycastSystems]);

  /* ── Double-click ── */
  const handleDoubleClick = useCallback((e) => {
    const group = raycastSystems(e);
    if (group) {
      const sys = group.userData;
      setSelected(sys);
      focusTargetRef.current = { x: sys.x * SCALE, y: sys.y * SCALE, z: 0 };
    }
  }, [raycastSystems]);

  /* ── Hover ── */
  const handleMove = useCallback((e) => {
    const group = raycastSystems(e);
    if (group) { setHovered(group.userData); containerRef.current.style.cursor = 'pointer'; }
    else { setHovered(null); containerRef.current.style.cursor = 'grab'; }
  }, [raycastSystems]);

  /* ── Right-click context menu ── */
  const handleContextMenu = useCallback((e) => {
    e.preventDefault();
    e.stopPropagation();
    const group = raycastSystems(e);
    setContextMenu({
      visible: true,
      x: Math.min(e.clientX, window.innerWidth - 200),
      y: Math.min(e.clientY, window.innerHeight - 250),
      target: group ? group.userData : null,
    });
  }, [raycastSystems]);

  /* ── Actions ── */
  const setDestFor = useCallback((sys) => {
    setDestination(sys.id);
    const sol = systems.find(s => s.id === 'sol');
    setRoute(sol && sys.id !== 'sol' ? [sol, sys] : [sys]);
  }, [systems]);

  const addWaypointFor = useCallback((sys) => {
    setWaypoints(prev => {
      if (prev.some(w => w.id === sys.id)) return prev;
      const next = [...prev, sys];
      const sol = systems.find(s => s.id === 'sol');
      setRoute(sol ? [sol, ...next] : next);
      return next;
    });
  }, [systems]);

  const handleSetDestination = useCallback(() => { if (selected) setDestFor(selected); }, [selected, setDestFor]);
  const handleAddWaypoint = useCallback(() => { if (selected) addWaypointFor(selected); }, [selected, addWaypointFor]);

  const handleClearRoute = useCallback(() => { setDestination(null); setWaypoints([]); setRoute([]); }, []);
  const handleZoomTo = useCallback((level) => { if (cameraCtrlRef.current) cameraCtrlRef.current.distance = level; }, []);
  const handleResetView = useCallback(() => {
    const ctrl = cameraCtrlRef.current;
    if (!ctrl) return;
    ctrl.target.set(0, 0, 0); ctrl.distance = 200; ctrl.theta = Math.PI / 4; ctrl.phi = Math.PI / 3;
  }, []);

  /* ── Filtered systems ── */
  const filteredSystems = useMemo(() => {
    let list = systems;
    if (searchQuery) { const q = searchQuery.toLowerCase(); list = list.filter(s => s.name.toLowerCase().includes(q)); }
    if (systemFilter !== 'all') {
      if (systemFilter === 'highsec') list = list.filter(s => s.security >= 0.5);
      else if (systemFilter === 'lowsec') list = list.filter(s => s.security >= 0.2 && s.security < 0.5);
      else if (systemFilter === 'nullsec') list = list.filter(s => s.security < 0.2);
    }
    return list;
  }, [systems, searchQuery, systemFilter]);

  const currentSystem = systems.find(s => s.id === 'sol');
  const destSystem = destination ? systems.find(s => s.id === destination) : null;

  const secColor = (sec) => { if (sec >= 0.5) return 'var(--green)'; if (sec >= 0.2) return 'var(--accent)'; return 'var(--red)'; };
  const secBg = (sec) => { if (sec >= 0.5) return 'var(--green-bg)'; if (sec >= 0.2) return 'var(--accent-bg)'; return 'var(--red-bg)'; };
  const planetIcon = (t) => { if (t === 'gas') return '⛽'; if (t === 'terrestrial') return '🌍'; return '●'; };

  /* ══════════════════════════════════════
     RENDER
     ══════════════════════════════════════ */
  return (
    <div style={{ position: 'relative', width: '100%', height: '100vh', background: '#040810', overflow: 'hidden' }}>

      {/* 3D Canvas */}
      <div ref={containerRef} style={{ position: 'absolute', inset: 0, zIndex: 0, cursor: 'grab' }}
        onClick={handleClick} onDoubleClick={handleDoubleClick} onMouseMove={handleMove} onContextMenu={handleContextMenu} />

      {/* ═══ Custom Context Menu ═══ */}
      {contextMenu.visible && (
        <div onClick={(e) => e.stopPropagation()} style={{
          position: 'fixed', left: contextMenu.x, top: contextMenu.y, zIndex: 9999, minWidth: '200px',
          background: 'rgba(10,16,28,0.97)', border: '1px solid var(--border-light)',
          borderRadius: 'var(--radius-lg)', backdropFilter: 'blur(16px)',
          boxShadow: '0 8px 40px rgba(0,0,0,0.7), 0 0 1px rgba(34,211,238,0.15)', overflow: 'hidden',
          fontFamily: 'var(--font-mono)', fontSize: '11px',
        }}>
          {contextMenu.target ? (
            <>
              {/* System header */}
              <div style={{ padding: '8px 12px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: '8px', background: 'rgba(15,22,35,0.6)' }}>
                <span style={{ width: '8px', height: '8px', borderRadius: '50%', background: contextMenu.target.color, boxShadow: `0 0 6px ${contextMenu.target.color}` }} />
                <span style={{ flex: 1, color: 'var(--fg-bright)', fontWeight: 600, fontSize: '12px' }}>{contextMenu.target.name}</span>
                <span style={{ fontSize: '9px', padding: '1px 5px', borderRadius: 'var(--radius-pill)', background: secBg(contextMenu.target.security), color: secColor(contextMenu.target.security) }}>
                  {contextMenu.target.security.toFixed(1)}
                </span>
              </div>
              {/* Quick info */}
              <div style={{ padding: '6px 12px', borderBottom: '1px solid var(--border)', display: 'flex', flexDirection: 'column', gap: '3px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <span style={{ color: 'var(--muted)', fontSize: '9px' }}>TYPE</span>
                  <span style={{ color: 'var(--fg-dim)', fontSize: '9px' }}>{contextMenu.target.type}</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <span style={{ color: 'var(--muted)', fontSize: '9px' }}>PLANETS</span>
                  <span style={{ color: 'var(--fg-dim)', fontSize: '9px' }}>{contextMenu.target.planets}</span>
                </div>
                {celestialData[contextMenu.target.id] && (
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span style={{ color: 'var(--muted)', fontSize: '9px' }}>FACTION</span>
                    <span style={{ color: 'var(--fg-dim)', fontSize: '9px' }}>{celestialData[contextMenu.target.id].faction}</span>
                  </div>
                )}
              </div>
              {/* Actions */}
              <div style={{ padding: '4px' }}>
                {[
                  { icon: '✦', label: 'Show Details', action: () => { setSelected(contextMenu.target); focusTargetRef.current = { x: contextMenu.target.x * SCALE, y: contextMenu.target.y * SCALE, z: 0 }; setContextMenu(prev => ({...prev, visible: false})); } },
                  { icon: '⊕', label: 'Set Destination', action: () => { setDestFor(contextMenu.target); setContextMenu(prev => ({...prev, visible: false})); }, highlight: 'var(--cyan)' },
                  { icon: '◇', label: 'Add Waypoint', action: () => { addWaypointFor(contextMenu.target); setContextMenu(prev => ({...prev, visible: false})); } },
                  { icon: '◎', label: 'Focus Camera', action: () => { focusTargetRef.current = { x: contextMenu.target.x * SCALE, y: contextMenu.target.y * SCALE, z: 0 }; setContextMenu(prev => ({...prev, visible: false})); } },
                  { icon: '⚐', label: 'Bookmark', action: () => setContextMenu(prev => ({...prev, visible: false})) },
                ].map((item, i) => (
                  <div key={i} onClick={item.action} style={{
                    padding: '7px 10px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '10px',
                    color: 'var(--fg-dim)', borderRadius: 'var(--radius-sm)', transition: 'all 0.1s',
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--surface-raised)'; e.currentTarget.style.color = 'var(--fg-bright)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--fg-dim)'; }}>
                    <span style={{ width: '16px', textAlign: 'center', color: item.highlight || (i === 0 ? 'var(--cyan)' : 'var(--muted)') }}>{item.icon}</span>
                    {item.label}
                  </div>
                ))}
              </div>
            </>
          ) : (
            <>
              <div style={{ padding: '8px 12px', borderBottom: '1px solid var(--border)', color: 'var(--muted)', fontSize: '9px', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
                Star Map Controls
              </div>
              <div style={{ padding: '4px' }}>
                {[
                  { icon: '⟳', label: 'Reset View', action: () => { handleResetView(); setContextMenu(prev => ({...prev, visible: false})); } },
                  { icon: '⊞', label: 'Zoom — Region', action: () => { handleZoomTo(120); setContextMenu(prev => ({...prev, visible: false})); } },
                  { icon: '⊡', label: 'Zoom — Show All', action: () => { handleZoomTo(280); setContextMenu(prev => ({...prev, visible: false})); } },
                  { icon: '◎', label: 'Zoom — System', action: () => { handleZoomTo(30); setContextMenu(prev => ({...prev, visible: false})); } },
                ].map((item, i) => (
                  <div key={i} onClick={item.action} style={{
                    padding: '7px 10px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '10px',
                    color: 'var(--fg-dim)', borderRadius: 'var(--radius-sm)', transition: 'all 0.1s',
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--surface-raised)'; e.currentTarget.style.color = 'var(--fg-bright)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--fg-dim)'; }}>
                    <span style={{ width: '16px', textAlign: 'center', color: 'var(--muted)' }}>{item.icon}</span>
                    {item.label}
                  </div>
                ))}
              </div>
            </>
          )}
        </div>
      )}

      {/* ═══ HUD Overlay ═══ */}
      <div style={{ position: 'absolute', inset: 0, zIndex: 1, display: 'flex', flexDirection: 'column', pointerEvents: 'none' }}>

        {/* ═══ TOP BAR ═══ */}
        <div style={{
          height: '40px', display: 'flex', alignItems: 'center', padding: '0 14px', gap: '12px',
          background: 'linear-gradient(180deg, rgba(8,12,20,0.94) 0%, rgba(8,12,20,0.6) 80%, transparent 100%)',
          fontFamily: 'var(--font-mono)', fontSize: '11px', pointerEvents: 'auto', flexShrink: 0,
        }}>
          <button onClick={() => window.history.back()} title="Back to Docs" style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)', color: 'var(--muted)', cursor: 'pointer', padding: '2px 8px', fontSize: '11px', display: 'flex', alignItems: 'center', gap: '4px', transition: 'all 0.15s' }}
            onMouseEnter={e => { e.currentTarget.style.color = 'var(--fg-bright)'; e.currentTarget.style.borderColor = 'var(--border-light)'; }}
            onMouseLeave={e => { e.currentTarget.style.color = 'var(--muted)'; e.currentTarget.style.borderColor = 'var(--border)'; }}
          >
            <span style={{ fontSize: '9px' }}>◀</span> DOCS
          </button>
          <div style={{ width: 1, height: 18, background: 'var(--border-light)' }} />
          <span style={{ fontSize: '12px', fontWeight: 600, color: 'var(--fg-bright)', fontFamily: 'var(--font-display)' }}>STAR MAP</span>
          <span style={{ fontSize: '9px', padding: '2px 8px', borderRadius: 'var(--radius-pill)', fontWeight: 600, background: secBg(currentSystem?.security || 1), color: secColor(currentSystem?.security || 1), border: `1px solid ${secColor(currentSystem?.security || 1)}33` }}>
            {currentSystem?.name || 'Sol'} · {currentSystem?.security.toFixed(1) || '1.0'}
          </span>
          <div style={{ width: 1, height: 18, background: 'var(--border-light)' }} />
          <span style={{ color: 'var(--muted)', fontSize: '9px', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Systems</span>
          <span style={{ color: 'var(--fg-bright)', fontWeight: 600 }}>{systems.length}</span>
          <div style={{ width: 1, height: 18, background: 'var(--border-light)' }} />
          <span style={{ color: 'var(--muted)', fontSize: '9px', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Bridges</span>
          <span style={{ color: 'var(--fg-bright)', fontWeight: 600 }}>{connections.length}</span>

          {destination && (
            <>
              <div style={{ width: 1, height: 18, background: 'var(--border-light)' }} />
              <span style={{ color: 'var(--cyan)', fontSize: '9px', display: 'flex', alignItems: 'center', gap: '5px' }}>
                <span style={{ width: '5px', height: '5px', borderRadius: '50%', background: 'var(--cyan)', boxShadow: '0 0 6px var(--cyan)' }} />
                DEST: {destSystem?.name}
                <span style={{ color: 'var(--muted)' }}>· {route.length - 1} jump{route.length - 1 !== 1 ? 's' : ''}</span>
              </span>
            </>
          )}

          <div style={{ marginLeft: 'auto', display: 'flex', gap: '4px', alignItems: 'center' }}>
            <span style={{ color: 'var(--muted)', fontSize: '8px', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Zoom</span>
            {[{ label: 'SYS', dist: 30 }, { label: 'REG', dist: 120 }, { label: 'ALL', dist: 280 }].map(z => (
              <button key={z.label} onClick={() => handleZoomTo(z.dist)} style={{
                padding: '2px 8px', fontSize: '9px', fontFamily: 'var(--font-mono)', borderRadius: 'var(--radius-sm)',
                background: 'var(--surface-raised)', border: '1px solid var(--border)', color: 'var(--fg-dim)', cursor: 'pointer', fontWeight: 500,
              }}>{z.label}</button>
            ))}
            <div style={{ width: 1, height: 14, background: 'var(--border-light)', margin: '0 4px' }} />
            <button onClick={handleResetView} style={{
              padding: '2px 8px', fontSize: '9px', fontFamily: 'var(--font-mono)', borderRadius: 'var(--radius-sm)',
              background: 'var(--surface-raised)', border: '1px solid var(--border)', color: 'var(--muted)', cursor: 'pointer',
            }}>RESET</button>
          </div>
        </div>

        {/* ═══ MIDDLE AREA ═══ */}
        <div style={{ flex: 1, display: 'flex', minHeight: 0, position: 'relative' }}>

          {/* ═══ LEFT — System Details Panel ═══ */}
          <div style={{
            width: '260px', display: 'flex', flexDirection: 'column',
            pointerEvents: 'auto', flexShrink: 0, minHeight: 0, overflow: 'hidden',
          }}>
            <div style={{
              flex: 1, minHeight: 0, overflowY: 'auto', padding: '8px',
              display: 'flex', flexDirection: 'column', gap: '6px',
            }}>
            {selected ? (
              <>
                {/* System Header */}
                <div style={{
                  background: 'rgba(15,22,35,0.92)', border: '1px solid var(--border)',
                  borderRadius: 'var(--radius-lg)', backdropFilter: 'blur(10px)', overflow: 'hidden',
                }}>
                  <div style={{ padding: '8px 12px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <span style={{ width: '8px', height: '8px', borderRadius: '50%', background: selected.color, boxShadow: `0 0 8px ${selected.color}` }} />
                    <div style={{ flex: 1 }}>
                      <div style={{ fontFamily: 'var(--font-display)', fontSize: '14px', fontWeight: 600, color: 'var(--fg-bright)' }}>{selected.name}</div>
                    </div>
                    <span style={{
                      fontFamily: 'var(--font-mono)', fontSize: '10px', padding: '1px 6px',
                      borderRadius: 'var(--radius-pill)', fontWeight: 600,
                      background: secBg(selected.security), color: secColor(selected.security),
                      border: `1px solid ${secColor(selected.security)}33`,
                    }}>{selected.security.toFixed(1)}</span>
                  </div>

                  <div style={{ padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                      <span style={{ color: 'var(--muted)', fontSize: '10px', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Star Type</span>
                      <span style={{ color: 'var(--fg-dim)', fontSize: '11px' }}>{selected.type}</span>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                      <span style={{ color: 'var(--muted)', fontSize: '10px', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Planets</span>
                      <span style={{ color: 'var(--fg-dim)', fontSize: '11px', fontFamily: 'var(--font-mono)' }}>{selected.planets}</span>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                      <span style={{ color: 'var(--muted)', fontSize: '10px', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Stations</span>
                      <span style={{ color: 'var(--fg-dim)', fontSize: '11px' }}>{selected.stations?.length || 0}</span>
                    </div>
                    {selected.stations && selected.stations.length > 0 && (
                      <div style={{ marginTop: '2px', maxHeight: '80px', overflowY: 'auto' }}>
                        {selected.stations.map((stn, i) => (
                          <div key={i} style={{ fontSize: '9px', color: 'var(--cyan)', padding: '2px 0', display: 'flex', alignItems: 'center', gap: '4px' }}>
                            <span style={{ width: '3px', height: '3px', borderRadius: '50%', background: 'var(--cyan)' }} />{stn}
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </div>

                {/* ═══ System Details (Celestial Bodies) ═══ */}
                {selectedCelestial && (
                  <div style={{
                    background: 'rgba(15,22,35,0.92)', border: '1px solid var(--border)',
                    borderRadius: 'var(--radius-lg)', backdropFilter: 'blur(10px)', overflow: 'hidden',
                  }}>
                    <div style={{ padding: '6px 12px', borderBottom: '1px solid var(--border)' }}>
                      <div style={{ fontSize: '10px', color: 'var(--fg-dim)', lineHeight: 1.5, marginBottom: '6px' }}>
                        {selectedCelestial.description}
                      </div>
                      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
                        <span style={{ fontSize: '8px', fontFamily: 'var(--font-mono)', padding: '2px 6px', borderRadius: 'var(--radius-pill)', background: 'var(--accent-bg)', color: 'var(--accent)', border: '1px solid var(--accent-border)' }}>
                          {selectedCelestial.faction}
                        </span>
                        <span style={{ fontSize: '8px', fontFamily: 'var(--font-mono)', padding: '2px 6px', borderRadius: 'var(--radius-pill)', background: 'var(--surface-raised)', color: 'var(--fg-dim)' }}>
                          Pop: {selectedCelestial.population}
                        </span>
                      </div>
                    </div>

                    {/* Resources */}
                    {selectedCelestial.resources.length > 0 && (
                      <div style={{ padding: '6px 12px', borderBottom: '1px solid var(--border)', display: 'flex', gap: '4px', flexWrap: 'wrap' }}>
                        <span style={{ fontSize: '8px', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--muted)', marginRight: '4px' }}>Ore:</span>
                        {selectedCelestial.resources.map((r, i) => (
                          <span key={i} style={{ fontSize: '8px', fontFamily: 'var(--font-mono)', padding: '1px 5px', borderRadius: 'var(--radius-pill)', background: 'var(--purple-bg)', color: 'var(--purple)' }}>{r}</span>
                        ))}
                      </div>
                    )}

                    {/* Celestial Bodies List */}
                    <div style={{ padding: '4px 6px', maxHeight: '220px', overflowY: 'auto' }}>
                      {selectedCelestial.bodies.map((body, i) => (
                        <div key={i} style={{
                          padding: '5px 8px', display: 'flex', alignItems: 'center', gap: '6px',
                          borderBottom: i < selectedCelestial.bodies.length - 1 ? '1px solid rgba(28,42,63,0.3)' : 'none',
                        }}>
                          {/* Icon */}
                          <span style={{ width: '14px', height: '14px', borderRadius: body.type === 'belt' ? '2px' : '50%', background: body.color || '#5a4a3a', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '6px' }}>
                            {body.type === 'belt' ? '·' : ''}
                          </span>
                          <div style={{ flex: 1, minWidth: 0 }}>
                            <div style={{ fontSize: '10px', color: 'var(--fg-dim)', fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{body.name}</div>
                            <div style={{ fontSize: '8px', color: 'var(--muted)', fontFamily: 'var(--font-mono)' }}>
                              {body.type === 'belt'
                                ? `${body.count} objects · ${body.innerOrbit}-${body.outerOrbit} AU`
                                : `${body.type} · orbit ${body.orbit} AU · T ${body.period.toFixed(1)}s`
                              }
                            </div>
                          </div>
                          {body.ecc > 0.05 && (
                            <span style={{ fontSize: '7px', fontFamily: 'var(--font-mono)', color: 'var(--accent)', padding: '1px 4px', background: 'var(--accent-bg)', borderRadius: 'var(--radius-pill)' }}>
                              e={body.ecc.toFixed(2)}
                            </span>
                          )}
                          {body.moons && body.moons.length > 0 && (
                            <span style={{ fontSize: '7px', fontFamily: 'var(--font-mono)', color: 'var(--cyan)', padding: '1px 4px', background: 'var(--cyan-bg)', borderRadius: 'var(--radius-pill)' }}>
                              {body.moons.length} moon{body.moons.length > 1 ? 's' : ''}
                            </span>
                          )}
                          {body.hasRings && (
                            <span style={{ fontSize: '7px', fontFamily: 'var(--font-mono)', color: 'var(--purple)', padding: '1px 4px', background: 'var(--purple-bg)', borderRadius: 'var(--radius-pill)' }}>rings</span>
                          )}
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {/* Connections */}
                <div style={{
                  background: 'rgba(15,22,35,0.92)', border: '1px solid var(--border)',
                  borderRadius: 'var(--radius-lg)', backdropFilter: 'blur(10px)', overflow: 'hidden',
                }}>
                  <div style={{ padding: '6px 12px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: '6px' }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: '9px', textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--muted)' }}>Connections</span>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: '8px', color: 'var(--fg-dim)', marginLeft: 'auto' }}>
                      {connections.filter(([a, b]) => a === selected.id || b === selected.id).length} jumps
                    </span>
                  </div>
                  <div style={{ padding: '4px 6px', maxHeight: '200px', overflowY: 'auto' }}>
                    {connections.filter(([a, b]) => a === selected.id || b === selected.id).map(([a, b]) => {
                      const neighborId = a === selected.id ? b : a;
                      const neighbor = systems.find(s => s.id === neighborId);
                      if (!neighbor) return null;
                      return (
                        <div key={neighborId}
                          onClick={() => { setSelected(neighbor); focusTargetRef.current = { x: neighbor.x * SCALE, y: neighbor.y * SCALE, z: 0 }; }}
                          onContextMenu={(e) => { e.preventDefault(); e.stopPropagation(); setContextMenu({ visible: true, x: Math.min(e.clientX, window.innerWidth - 200), y: Math.min(e.clientY, window.innerHeight - 250), target: neighbor }); }}
                          style={{
                            display: 'flex', alignItems: 'center', gap: '6px', padding: '4px 8px',
                            borderRadius: '4px', cursor: 'pointer', transition: 'background 0.15s',
                            borderLeft: `2px solid ${secColor(neighbor.security)}`,
                          }}
                          onMouseEnter={(e) => e.currentTarget.style.background = 'var(--surface-raised)'}
                          onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
                          <span style={{ flex: 1, fontSize: '10px', color: 'var(--fg-dim)' }}>{neighbor.name}</span>
                          <span style={{
                            fontFamily: 'var(--font-mono)', fontSize: '8px', padding: '1px 4px',
                            borderRadius: 'var(--radius-pill)', background: secBg(neighbor.security), color: secColor(neighbor.security),
                          }}>{neighbor.security.toFixed(1)}</span>
                        </div>
                      );
                    })}
                  </div>
                </div>


              </>
            ) : (
              <div style={{
                background: 'rgba(15,22,35,0.92)', border: '1px solid var(--border)',
                borderRadius: 'var(--radius-lg)', backdropFilter: 'blur(10px)', padding: '16px 12px', textAlign: 'center',
              }}>
                <div style={{ fontSize: '1.5rem', marginBottom: '8px', color: 'var(--accent)' }}>✦</div>
                <div style={{ fontSize: '11px', color: 'var(--fg-dim)', lineHeight: 1.6 }}>
                  Click a system to select<br />Double-click to focus<br />Right-click for options<br />Scroll to zoom
                </div>
              </div>
            )}
            </div>
          </div>

          {/* CENTER — hover tooltip */}
          <div style={{ flex: 1, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none' }}>
            {hovered && hovered.id !== selected?.id && (
              <div style={{
                position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
                background: 'rgba(15,22,35,0.92)', border: '1px solid var(--border)',
                borderRadius: 'var(--radius-md)', backdropFilter: 'blur(8px)',
                padding: '6px 12px', fontFamily: 'var(--font-mono)', fontSize: '10px',
                display: 'flex', alignItems: 'center', gap: '8px', whiteSpace: 'nowrap',
              }}>
                <span style={{ width: '6px', height: '6px', borderRadius: '50%', background: hovered.color }} />
                <span style={{ color: 'var(--fg-bright)', fontWeight: 600 }}>{hovered.name}</span>
                <span style={{ color: secColor(hovered.security), fontSize: '9px' }}>SEC {hovered.security.toFixed(1)}</span>
                <span style={{ color: 'var(--muted)', fontSize: '9px' }}>{hovered.type}</span>
                {celestialData[hovered.id] && (
                  <span style={{ color: 'var(--muted)', fontSize: '8px' }}>{celestialData[hovered.id].bodies.length} bodies</span>
                )}
              </div>
            )}
          </div>

          {/* ═══ RIGHT — System List ═══ */}
          <div style={{
            width: '220px', display: 'flex', flexDirection: 'column',
            pointerEvents: 'auto', flexShrink: 0, minHeight: 0, overflow: 'hidden',
          }}>
            <div style={{
              flex: 1, minHeight: 0, overflowY: 'auto', padding: '8px',
              display: 'flex', flexDirection: 'column', gap: '6px',
            }}>
            {/* Search */}
            <div style={{ position: 'relative' }}>
              <input type="text" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} placeholder="Search systems..." style={{
                width: '100%', padding: '6px 10px 6px 28px', fontSize: '10px', fontFamily: 'var(--font-mono)',
                background: 'rgba(15,22,35,0.92)', border: '1px solid var(--border)', borderRadius: 'var(--radius-md)',
                color: 'var(--fg)', backdropFilter: 'blur(8px)', outline: 'none',
              }} />
              <span style={{ position: 'absolute', left: '10px', top: '50%', transform: 'translateY(-50%)', fontSize: '11px', color: 'var(--muted)' }}>⌕</span>
            </div>

            {/* Filter tabs */}
            <div style={{ display: 'flex', borderRadius: 'var(--radius-md)', overflow: 'hidden', border: '1px solid var(--border)', background: 'rgba(15,22,35,0.92)' }}>
              {[
                { key: 'all', label: 'ALL' },
                { key: 'highsec', label: 'HI', col: 'var(--green)' },
                { key: 'lowsec', label: 'LO', col: 'var(--accent)' },
                { key: 'nullsec', label: 'NULL', col: 'var(--red)' },
              ].map(f => (
                <button key={f.key} onClick={() => setSystemFilter(f.key)} style={{
                  flex: 1, padding: '4px 0', fontSize: '8px', fontFamily: 'var(--font-mono)',
                  textTransform: 'uppercase', letterSpacing: '0.06em', border: 'none',
                  background: systemFilter === f.key ? 'var(--surface-raised)' : 'transparent',
                  color: systemFilter === f.key ? (f.col || 'var(--fg-bright)') : 'var(--muted)',
                  cursor: 'pointer', borderBottom: systemFilter === f.key ? `1.5px solid ${f.col || 'var(--accent)'}` : '1.5px solid transparent',
                }}>{f.label}</button>
              ))}
            </div>

            {/* System list */}
            <div style={{
              background: 'rgba(15,22,35,0.92)', border: '1px solid var(--border)',
              borderRadius: 'var(--radius-lg)', backdropFilter: 'blur(10px)', overflow: 'hidden', flex: 1,
              display: 'flex', flexDirection: 'column', minHeight: 0,
            }}>
              <div style={{ padding: '6px 10px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: '6px' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: '9px', textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--muted)' }}>Systems</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: '8px', color: 'var(--fg-dim)', marginLeft: 'auto' }}>{filteredSystems.length}</span>
              </div>
              <div style={{ flex: 1, overflowY: 'auto', padding: '2px' }}>
                {filteredSystems.map(sys => {
                  const isSel = selected?.id === sys.id;
                  const isDest = destination === sys.id;
                  const isWP = waypoints.some(w => w.id === sys.id);
                  return (
                    <div key={sys.id}
                      onClick={() => setSelected(sys)}
                      onDoubleClick={() => { setSelected(sys); focusTargetRef.current = { x: sys.x * SCALE, y: sys.y * SCALE, z: 0 }; }}
                      onContextMenu={(e) => { e.preventDefault(); e.stopPropagation(); setContextMenu({ visible: true, x: Math.min(e.clientX, window.innerWidth - 200), y: Math.min(e.clientY, window.innerHeight - 250), target: sys }); }}
                      style={{
                        display: 'flex', alignItems: 'center', gap: '6px', padding: '5px 8px',
                        borderRadius: '4px', cursor: 'pointer', transition: 'background 0.15s',
                        background: isSel ? 'var(--accent-bg)' : isDest ? 'var(--cyan-bg)' : 'transparent',
                        borderLeft: `2px solid ${isDest ? 'var(--cyan)' : isWP ? 'var(--purple)' : secColor(sys.security)}`,
                      }}
                      onMouseEnter={(e) => { if (!isSel && !isDest) e.currentTarget.style.background = 'var(--surface-raised)'; }}
                      onMouseLeave={(e) => { if (!isSel && !isDest) e.currentTarget.style.background = 'transparent'; }}>
                      <span style={{ width: '5px', height: '5px', borderRadius: '50%', background: sys.color, flexShrink: 0 }} />
                      <span style={{ flex: 1, fontSize: '10px', color: isSel ? 'var(--fg-bright)' : 'var(--fg-dim)', fontWeight: isSel ? 600 : 400, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                        {isDest ? '⊕ ' : isWP ? '◇ ' : ''}{sys.name}
                      </span>
                      <span style={{
                        fontFamily: 'var(--font-mono)', fontSize: '8px', padding: '1px 4px',
                        borderRadius: 'var(--radius-pill)', background: secBg(sys.security), color: secColor(sys.security),
                      }}>{sys.security.toFixed(1)}</span>
                    </div>
                  );
                })}
              </div>
            </div>
            </div>
          </div>
        </div>

        {/* ═══ BOTTOM BAR ═══ */}
        <div style={{ display: 'flex', gap: '6px', padding: '0 8px 8px', pointerEvents: 'auto', flexShrink: 0, alignItems: 'stretch' }}>

          {/* Route */}
          <div style={{
            background: 'rgba(15,22,35,0.92)', border: '1px solid var(--border)',
            borderRadius: 'var(--radius-lg)', backdropFilter: 'blur(10px)', overflow: 'hidden', flex: 2,
          }}>
            <div style={{ padding: '5px 10px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: '6px' }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: '9px', textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--muted)' }}>
                <span style={{ width: '3px', height: '3px', borderRadius: '50%', background: 'var(--cyan)', display: 'inline-block', marginRight: '4px' }} />Autopilot Route
              </span>
              {route.length > 1 && (
                <>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: '8px', color: 'var(--cyan)', marginLeft: '4px' }}>{route.length - 1} jump{route.length - 1 !== 1 ? 's' : ''}</span>
                  <button onClick={handleClearRoute} style={{
                    marginLeft: 'auto', padding: '1px 6px', fontSize: '8px', fontFamily: 'var(--font-mono)',
                    background: 'var(--red-bg)', border: '1px solid rgba(239,68,68,0.2)', borderRadius: 'var(--radius-sm)', color: 'var(--red)', cursor: 'pointer',
                  }}>CLEAR</button>
                </>
              )}
              {!route.length && <span style={{ fontFamily: 'var(--font-mono)', fontSize: '8px', color: 'var(--muted)', marginLeft: 'auto' }}>No route set</span>}
            </div>
            {route.length > 0 && (
              <div style={{ padding: '6px 10px', display: 'flex', alignItems: 'center', gap: '4px', overflowX: 'auto', scrollbarWidth: 'thin' }}>
                {route.map((sys, i) => (
                  <React.Fragment key={sys.id}>
                    <div style={{
                      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '2px',
                      padding: '2px 8px', borderRadius: '4px',
                      background: i === route.length - 1 ? 'var(--cyan-bg)' : i === 0 ? 'var(--green-bg)' : 'transparent', minWidth: '60px',
                    }}>
                      <span style={{ fontSize: '9px', color: i === 0 ? 'var(--green)' : i === route.length - 1 ? 'var(--cyan)' : 'var(--fg-dim)', fontWeight: 600 }}>
                        {i === 0 ? '⬡' : i === route.length - 1 ? '⊕' : '◇'} {sys.name}
                      </span>
                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: '7px', color: secColor(sys.security) }}>{sys.security.toFixed(1)}</span>
                    </div>
                    {i < route.length - 1 && <span style={{ color: 'var(--cyan)', fontSize: '10px', opacity: 0.4 }}>→</span>}
                  </React.Fragment>
                ))}
              </div>
            )}
          </div>

          {/* Ship Status */}
          <div style={{
            background: 'rgba(15,22,35,0.92)', border: '1px solid var(--border)',
            borderRadius: 'var(--radius-lg)', backdropFilter: 'blur(10px)', overflow: 'hidden', flex: 0.8,
          }}>
            <div style={{ padding: '5px 10px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: '6px' }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: '9px', textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--muted)' }}>
                <span style={{ width: '3px', height: '3px', borderRadius: '50%', background: 'var(--accent)', display: 'inline-block', marginRight: '4px' }} />Ship
              </span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: '8px', color: 'var(--fg-dim)', marginLeft: 'auto' }}>Venture</span>
            </div>
            <div style={{ padding: '6px 10px', display: 'flex', gap: '12px', alignItems: 'center' }}>
              {[{ label: 'SH', value: 100, color: '#22d3ee' }, { label: 'AR', value: 100, color: '#f0a030' }, { label: 'HU', value: 100, color: '#22c55e' }, { label: 'CA', value: 85, color: '#a78bfa' }].map(bar => (
                <div key={bar.label} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '3px', flex: 1 }}>
                  <div style={{ width: '100%', height: '3px', background: 'rgba(255,255,255,0.04)', borderRadius: 'var(--radius-pill)', overflow: 'hidden' }}>
                    <div style={{ height: '100%', width: `${bar.value}%`, background: bar.color, borderRadius: 'var(--radius-pill)' }} />
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: '7px', color: bar.color }}>{bar.label}</span>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: '7px', color: 'var(--fg-dim)' }}>{bar.value}%</span>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Wallet & Time */}
          <div style={{
            background: 'rgba(15,22,35,0.92)', border: '1px solid var(--border)',
            borderRadius: 'var(--radius-lg)', backdropFilter: 'blur(10px)', overflow: 'hidden', flex: 0.5,
            display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '6px 10px',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginBottom: '4px' }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: '13px', fontWeight: 700, color: 'var(--accent)', letterSpacing: '-0.02em' }}>₢125,000</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: '3px' }}>
                <span style={{ width: '4px', height: '4px', borderRadius: '50%', background: 'var(--green)', boxShadow: '0 0 4px var(--green)' }} />
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: '8px', color: 'var(--fg-dim)' }}>Online</span>
              </span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: '8px', color: 'var(--muted)', marginLeft: 'auto' }}>14:23 UTC</span>
            </div>
          </div>

          {/* Minimap */}
          <div style={{
            background: 'rgba(15,22,35,0.92)', border: '1px solid var(--border)',
            borderRadius: 'var(--radius-lg)', backdropFilter: 'blur(10px)', overflow: 'hidden', width: '180px', flexShrink: 0,
          }}>
            <div style={{ padding: '4px 10px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: '6px' }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: '9px', textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--muted)' }}>Overview</span>
            </div>
            <div style={{ padding: '4px' }}>
              <canvas ref={minimapCanvasRef} width={168} height={110} style={{ width: '100%', height: 'auto', borderRadius: 'var(--radius-sm)', display: 'block' }} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.GDD.StarMapDemo = StarMapDemo;