// Picture-in-picture mini map

function MiniMap({ fleet, activeId, onSelect }){
  const t = useClock();
  // Normalize drone lat/lng into local 0..1 coords
  const lats = fleet.map(d=>d.lat), lngs = fleet.map(d=>d.lng);
  const latMin = Math.min(...lats) - 0.003, latMax = Math.max(...lats) + 0.003;
  const lngMin = Math.min(...lngs) - 0.003, lngMax = Math.max(...lngs) + 0.003;
  const project = (lat, lng) => ({
    x: ((lng - lngMin) / (lngMax - lngMin)) * 100,
    y: (1 - (lat - latMin) / (latMax - latMin)) * 100
  });

  return (
    <div style={ms.wrap}>
      <div style={ms.header}>
        <span style={ms.title}>TACTICAL · 2.4 km</span>
        <div style={ms.headerRight}>
          <span className="mono" style={ms.coord}>N 33.912 · W 118.421</span>
          <button style={ms.expand}>⤢</button>
        </div>
      </div>

      <div style={ms.map}>
        {/* Grid */}
        <svg style={ms.svg} viewBox="0 0 100 100" preserveAspectRatio="none">
          <defs>
            <pattern id="mgrid" width="10" height="10" patternUnits="userSpaceOnUse">
              <path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(110,242,196,.06)" strokeWidth=".2"/>
            </pattern>
            <radialGradient id="sweep" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor="rgba(110,242,196,.3)"/>
              <stop offset="100%" stopColor="rgba(110,242,196,0)"/>
            </radialGradient>
          </defs>
          <rect width="100" height="100" fill="url(#mgrid)"/>

          {/* Topo contour lines */}
          <g fill="none" stroke="rgba(150,170,160,.08)" strokeWidth=".15">
            <path d="M 10 80 Q 40 60 70 75 T 95 82"/>
            <path d="M 5 55 Q 35 40 65 50 T 98 60"/>
            <path d="M 15 30 Q 45 20 75 28 T 100 40"/>
          </g>

          {/* Restricted zone */}
          <rect x="62" y="12" width="22" height="18" fill="rgba(255,90,90,.06)" stroke="rgba(255,90,90,.4)" strokeWidth=".25" strokeDasharray="1 1"/>

          {/* Home base */}
          <g>
            <circle cx="50" cy="55" r="1.6" fill="var(--accent)"/>
            <circle cx="50" cy="55" r="3" fill="none" stroke="var(--accent)" strokeWidth=".2"/>
            <text x="53" y="58" fontSize="2.2" fill="var(--accent)" fontFamily="JetBrains Mono">HOME</text>
          </g>

          {/* Sweep */}
          <g style={{transformOrigin:'50% 55%', animation:'sweep 6s linear infinite'}}>
            <path d="M 50 55 L 50 10 A 45 45 0 0 1 85 35 Z" fill="url(#sweep)" opacity=".5"/>
          </g>
        </svg>

        {/* Drones */}
        {fleet.filter(d => d.link !== 'LOST').map(d => {
          const {x, y} = project(d.lat, d.lng);
          const active = d.id === activeId;
          return (
            <button key={d.id} style={{...ms.droneNode, left:`${x}%`, top:`${y}%`}} onClick={()=>onSelect(d.id)}>
              <div style={{...ms.droneMark, transform:`rotate(${d.head}deg)`, borderBottomColor: active ? 'var(--accent)' : 'rgba(230,230,230,.85)'}}/>
              {active && <div style={ms.droneRing}/>}
              <div className="mono" style={{...ms.droneLabel, color: active ? 'var(--accent)' : 'var(--ink-2)'}}>{d.id}</div>
            </button>
          );
        })}

        {/* Scale bar */}
        <div style={ms.scale}>
          <div style={ms.scaleBar}>
            <span style={{...ms.scaleSeg, background:'var(--ink-2)'}}/>
            <span style={{...ms.scaleSeg, background:'transparent', border:'1px solid var(--ink-2)'}}/>
          </div>
          <span className="mono" style={ms.scaleText}>500 m</span>
        </div>

        {/* Compass */}
        <div style={ms.compass} className="mono">N</div>
      </div>
    </div>
  );
}

const ms = {
  wrap: {
    position:'absolute', left:280, bottom:20, width:320, height:240,
    background:'rgba(10,14,19,.85)', border:'1px solid var(--line-2)',
    borderRadius:2, overflow:'hidden',
    backdropFilter:'blur(6px)', zIndex:10
  },
  header: {
    display:'flex', justifyContent:'space-between', alignItems:'center',
    padding:'8px 12px', borderBottom:'1px solid var(--line)',
    background:'rgba(0,0,0,.3)'
  },
  title: { fontSize:10, letterSpacing:'.2em', color:'var(--ink-2)', fontWeight:700 },
  headerRight: { display:'flex', alignItems:'center', gap:10 },
  coord: { fontSize:9, color:'var(--ink-3)' },
  expand: { fontSize:12, color:'var(--ink-2)' },

  map: { position:'relative', height:'calc(100% - 33px)', background:'#0a0f0b' },
  svg: { position:'absolute', inset:0, width:'100%', height:'100%' },

  droneNode: {
    position:'absolute', transform:'translate(-50%, -50%)',
    background:'transparent', padding:0
  },
  droneMark: {
    width:0, height:0, borderLeft:'5px solid transparent', borderRight:'5px solid transparent',
    borderBottom:'9px solid'
  },
  droneRing: {
    position:'absolute', left:'50%', top:'50%', transform:'translate(-50%,-50%)',
    width:18, height:18, border:'1px solid var(--accent)', borderRadius:'50%',
    animation:'pulse 1.8s infinite'
  },
  droneLabel: {
    position:'absolute', top:12, left:'50%', transform:'translateX(-50%)',
    fontSize:8.5, letterSpacing:'.08em', whiteSpace:'nowrap',
    textShadow:'0 1px 2px rgba(0,0,0,.9)'
  },

  scale: { position:'absolute', left:10, bottom:10, display:'flex', alignItems:'center', gap:6 },
  scaleBar: { display:'flex', width:50, height:4 },
  scaleSeg: { flex:1, height:'100%' },
  scaleText: { fontSize:9, color:'var(--ink-2)' },

  compass: {
    position:'absolute', right:10, top:10, width:24, height:24, borderRadius:'50%',
    border:'1px solid var(--line-2)', display:'flex', alignItems:'flex-start', justifyContent:'center',
    fontSize:9, color:'var(--accent)', paddingTop:2, background:'rgba(0,0,0,.3)'
  }
};

Object.assign(window, { MiniMap });