/* FlightPlannerToolbar + FlightPlannerSidebar */

const { useState: useStateFPS } = React;

function FPToolbar({ mode, drawingArea, drawingWp, settingTakeoff, onDrawArea, onDrawWp, onFinish, onSetTakeoff, onClear }) {
  return (
    <div className="fp-toolbar">
      <div className="fp-tb-group">
        <div className="fp-tb-label">Draw</div>
        {mode === "area" ? (
          <button className={`fp-tb-btn ${drawingArea?"on area":""}`} onClick={onDrawArea} title="Draw survey area">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.8">
              <rect x="4" y="4" width="16" height="16" rx="1" strokeDasharray="3 2"/>
              <path d="M4 9h16M4 15h16M9 4v16M15 4v16" strokeOpacity="0.5"/>
            </svg>
            <span>Area</span>
          </button>
        ) : (
          <button className={`fp-tb-btn ${drawingWp?"on wp":""}`} onClick={onDrawWp} title="Draw waypoint route">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.8">
              <circle cx="6" cy="6" r="2"/><circle cx="18" cy="18" r="2"/><circle cx="14" cy="8" r="2"/>
              <path d="M7 7 13 8M15 10 17 16" strokeDasharray="2 1.5"/>
            </svg>
            <span>Route</span>
          </button>
        )}
        <button className="fp-tb-btn" onClick={onSetTakeoff} title="Set takeoff / home">
          <Icon name="pin" size={15}/>
          <span>Home</span>
        </button>
      </div>

      <div className="fp-tb-group">
        <div className="fp-tb-label">Edit</div>
        <button className="fp-tb-btn" disabled={!drawingArea && !drawingWp} onClick={onFinish} title="Finish drawing">
          <Icon name="check" size={15}/><span>Finish</span>
        </button>
        <button className="fp-tb-btn" onClick={onClear} title="Clear mission">
          <Icon name="x" size={15}/><span>Clear</span>
        </button>
      </div>

      <div className="fp-tb-group">
        <div className="fp-tb-label">View</div>
        <button className="fp-tb-btn" title="Fit to AOI"><Icon name="crosshair" size={15}/><span>Fit</span></button>
        <button className="fp-tb-btn" title="Map style"><Icon name="layers" size={15}/><span>Layers</span></button>
        <button className="fp-tb-btn" title="3D perspective"><Icon name="cog" size={15}/><span>3D</span></button>
      </div>

      <div className="fp-tb-group">
        <div className="fp-tb-label">Import</div>
        <button className="fp-tb-btn" title="Import KML/KMZ"><Icon name="upload" size={15}/><span>KML</span></button>
        <button className="fp-tb-btn" title="Load template"><Icon name="file" size={15}/><span>Preset</span></button>
      </div>

      <div style={{flex:1}}/>

      <div className="fp-tb-group fp-tb-ac">
        <div className="fp-tb-label">Platform</div>
        <div className="fp-tb-platform">
          <Icon name="drone" size={14}/>
          <div>
            <div className="tt">DJI M350 RTK</div>
            <div className="st">Zenmuse H30T · 84° FOV</div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ========== SIDEBAR ========== */
function FPSidebar(props) {
  return (
    <aside className="fp-side">
      {/* Stats row */}
      <div className="fp-stats">
        {props.mode === "area" ? (
          <>
            <div className="fp-stat"><div className="lab">Area</div><div className="val">{(props.metrics.area/10000).toFixed(1)} <span>ha</span></div></div>
            <div className="fp-stat"><div className="lab">Distance</div><div className="val">{props.metrics.distance<1000?props.metrics.distance.toFixed(0):`${(props.metrics.distance/1000).toFixed(1)}`}<span>{props.metrics.distance<1000?"m":"km"}</span></div></div>
            <div className="fp-stat"><div className="lab">Flight</div><div className="val">{Math.floor(props.metrics.time/60)}<span>m</span>{Math.round(props.metrics.time%60)}<span>s</span></div></div>
            <div className="fp-stat"><div className="lab">WPs</div><div className="val">{props.metrics.count}</div></div>
          </>
        ) : (
          <>
            <div className="fp-stat"><div className="lab">Waypoints</div><div className="val">{props.metrics.count}</div></div>
            <div className="fp-stat"><div className="lab">Distance</div><div className="val">{props.metrics.distance<1000?props.metrics.distance.toFixed(0):(props.metrics.distance/1000).toFixed(1)}<span>{props.metrics.distance<1000?"m":"km"}</span></div></div>
            <div className="fp-stat"><div className="lab">ETA</div><div className="val">{Math.floor(props.metrics.time/60)}<span>m</span>{Math.round(props.metrics.time%60)}<span>s</span></div></div>
            <div className="fp-stat"><div className="lab">Actions</div><div className="val">{props.waypoints.reduce((s,w)=>s+(w.actions?.length||0),0)}</div></div>
          </>
        )}
      </div>

      {props.mode === "area" ? <AreaPanel {...props}/> : <WaypointPanel {...props}/>}
    </aside>
  );
}

/* ========== AREA PANEL ========== */
function AreaPanel(p) {
  return (
    <div className="fp-panel-scroll">
      <Section title="Pass spacing" tone="area">
        <Slider label="Swathe spacing" min={5} max={60} step={1} unit="m" value={p.spacing} onChange={p.setSpacing} hint="Smaller = more passes, more overlap, longer flight."/>
      </Section>

      <Section title="Grid direction" tone="area">
        <div className="fp-seg">
          {[["N",0],["E",90],["S",180],["W",270]].map(([l,v]) => (
            <button key={l} className={p.angle===v?"on":""} onClick={()=>p.setAngle(v)}>{l}</button>
          ))}
        </div>
        <div className="fp-ang-row">
          <input type="range" min="0" max="359" value={p.angle} onChange={e=>p.setAngle(+e.target.value)} style={{flex:1}}/>
          <span className="mono fp-ang-val">{p.angle}°</span>
          <AngleDial angle={p.angle}/>
        </div>
      </Section>

      <Section title="Altitude & speed" tone="alt">
        <div className="fp-seg">
          {["ASL","ALT","AGL"].map(m => (
            <button key={m} className={p.altMode===m?"on alt":""} onClick={()=>p.setAltMode(m)}>{m}</button>
          ))}
        </div>
        <Stepper label={`Altitude · ${p.altMode}`} value={p.altitude} onChange={p.setAltitude} unit="m" steps={[-100,-10,10,100]} min={10} max={500}/>
        <Slider label="Flight speed" min={1} max={30} step={0.5} unit="m/s" value={p.speed} onChange={p.setSpeed}/>
      </Section>

      <Section title="Photogrammetry" tone="alt">
        <Stepper label="GSD target" value={p.gsd} onChange={p.setGsd} unit="cm/px" steps={[-1,-0.1,0.1,1]} min={0.1} max={99.9} decimals={1}/>
        <Slider label="Field of view" min={20} max={170} step={1} unit="°" value={p.fov} onChange={p.setFov}/>
        <div className="fp-seg">
          <button className={p.photoMode==="ortho"?"on alt":""} onClick={()=>p.setPhotoMode("ortho")}>
            <svg viewBox="0 0 20 16" width="18" height="14" fill="none" stroke="currentColor" strokeWidth="1.4">
              <rect x="8" y="2" width="4" height="4"/><path d="M10 6 L6 14 L14 14 Z" strokeDasharray="2 1"/>
            </svg>
            Ortho
          </button>
          <button className={p.photoMode==="oblique"?"on alt":""} onClick={()=>p.setPhotoMode("oblique")}>
            <svg viewBox="0 0 20 16" width="18" height="14" fill="none" stroke="currentColor" strokeWidth="1.4">
              <rect x="7" y="2" width="4" height="4" transform="rotate(-25 9 4)"/><path d="M10 6 L14 14 L4 14 Z" strokeDasharray="2 1"/>
            </svg>
            Oblique
          </button>
        </div>
        {p.photoMode === "oblique" && (
          <div className="fp-gimbal">
            <GimbalDial angle={p.gimbalAngle}/>
            <div style={{flex:1}}>
              <div className="fp-field-lab">Gimbal angle</div>
              <input type="range" min="-85" max="-40" value={p.gimbalAngle} onChange={e=>p.setGimbalAngle(+e.target.value)} style={{width:"100%"}}/>
              <div className="fp-ang-readout">{p.gimbalAngle}°</div>
              <div className="fp-hint">-90 = nadir · -40 = horizon</div>
            </div>
          </div>
        )}
      </Section>

      <Section title="Visualization" tone="area">
        <Toggle label="Curved corners (bezier)" value={p.curved} onChange={p.setCurved}/>
        <Toggle label="Cross-grid fill (90° second pass)" value={p.fillGrid} onChange={p.setFillGrid}/>
        <Toggle label="Show positions" value={p.showPositions} onChange={p.setShowPositions}/>
        <Toggle label="Show coverage footprints" value={p.showCoverage} onChange={p.setShowCoverage}/>
        <Toggle label="Show heatmap" value={p.showHeatmap} onChange={p.setShowHeatmap}/>
        {p.showHeatmap && (
          <>
            <div className="fp-seg">
              <button className={p.heatmapMode==="overlap"?"on area":""} onClick={()=>p.setHeatmapMode("overlap")}>Overlap</button>
              <button className={p.heatmapMode==="gsd"?"on area":""} onClick={()=>p.setHeatmapMode("gsd")}>GSD</button>
            </div>
            {p.heatmapMode==="overlap" && (
              <Slider label="Front overlap" min={30} max={95} step={5} unit="%" value={p.frontOverlap} onChange={p.setFrontOverlap}/>
            )}
            <div className="fp-legend">
              <span><i style={{background:"rgba(0,0,255,0.7)"}}/>min</span>
              <span><i style={{background:"rgba(0,255,255,0.7)"}}/></span>
              <span><i style={{background:"rgba(0,255,0,0.7)"}}/>optimal</span>
              <span><i style={{background:"rgba(255,255,0,0.7)"}}/></span>
              <span><i style={{background:"rgba(255,0,0,0.7)"}}/>max</span>
            </div>
          </>
        )}
      </Section>

      <Section title="Takeoff" tone="alt">
        <div className="fp-seg">
          <button className={p.takeoffMode==="safe"?"on alt":""} onClick={()=>p.setTakeoffMode("safe")}>Safe takeoff</button>
          <button className={p.takeoffMode==="direct"?"on alt":""} onClick={()=>p.setTakeoffMode("direct")}>Direct ascent</button>
        </div>
        {p.takeoffMode === "safe" && (
          <Stepper label="Safe altitude" value={p.takeoffSafeAlt} onChange={p.setTakeoffSafeAlt} unit="m" steps={[-10,-1,1,10]} min={1} max={500}/>
        )}
        <div className="fp-takeoff-st">
          {p.takeoff ? (<><Icon name="check_circle" size={11} style={{color:"#34d399"}}/> Home set · <span className="mono">{p.takeoff[0]},{p.takeoff[1]}</span></>)
                    : (<><Icon name="alert" size={11} style={{color:"#d4910c"}}/> No home point set — click "Home" in toolbar</>)}
        </div>
      </Section>
    </div>
  );
}

/* ========== WAYPOINT PANEL ========== */
function WaypointPanel(p) {
  const sel = p.wpSelected != null ? p.waypoints[p.wpSelected] : null;
  return (
    <div className="fp-panel-scroll">
      {sel ? (
        <WpDetail wp={sel} idx={p.wpSelected} total={p.waypoints.length}
                  onPrev={() => p.setWpSelected((p.wpSelected - 1 + p.waypoints.length) % p.waypoints.length)}
                  onNext={() => p.setWpSelected((p.wpSelected + 1) % p.waypoints.length)}
                  onClose={() => p.setWpSelected(null)}
                  onDelete={() => p.removeWp(p.wpSelected)}
                  update={(patch) => p.updateWp(p.wpSelected, patch)}
                  addAction={(t,d) => p.addActionToWp(p.wpSelected, t, d)}
                  removeAction={(id) => p.removeAction(p.wpSelected, id)}
                  updateAction={(id, patch) => p.updateAction(p.wpSelected, id, patch)}
                  moveAction={(id, dir) => p.moveAction(p.wpSelected, id, dir)}
                  globalAlt={p.wpAltitude} altMode={p.wpAltMode}/>
      ) : (
        <>
          <Section title="Waypoints list" tone="wp">
            <div className="fp-wplist">
              {p.waypoints.length === 0 ? (
                <div className="fp-empty">
                  <Icon name="crosshair" size={18}/>
                  <div>No waypoints yet</div>
                  <div className="sub">Click "Route" in the toolbar and drop points on the map.</div>
                </div>
              ) : p.waypoints.map((w, i) => (
                <button key={i} className="fp-wprow" onClick={() => p.setWpSelected(i)}>
                  <span className="fp-wpnum">{String(i+1).padStart(2,"0")}</span>
                  <span className="fp-wpcoord mono">{w.lat?.toFixed(5)} {w.lng?.toFixed(5)}</span>
                  <span className="fp-wpalt mono">{w.alt ?? p.wpAltitude}<i>m</i></span>
                  {w.actions?.length > 0 && <span className="fp-wpacts">{w.actions.length}</span>}
                </button>
              ))}
            </div>
          </Section>

          <Section title="Global flight parameters" tone="wp">
            <Stepper label="Flight speed" value={p.wpSpeed} onChange={p.setWpSpeed} unit="m/s" steps={[-5,-0.5,0.5,5]} min={1} max={30} decimals={1}/>
            <Stepper label="Global altitude" value={p.wpAltitude} onChange={p.setWpAltitude} unit="m" steps={[-100,-10,10,100]} min={10} max={500}/>
            <div className="fp-seg">
              {["ASL","ALT","AGL"].map(m => (
                <button key={m} className={p.wpAltMode===m?"on wp":""} onClick={()=>p.setWpAltMode(m)}>{m}</button>
              ))}
            </div>
          </Section>

          <Section title="Path type" tone="wp">
            <div className="fp-pathseg">
              {[
                ["straight","Straight","M 3 14 L 9 5 L 15 12 L 21 4"],
                ["rounded", "Rounded", "M 3 14 Q 8 14 9 9 Q 10 5 15 8 Q 20 10 21 4"],
                ["curved",  "Curved",  "M 3 14 C 6 14 6 5 12 8 C 18 11 18 3 21 4"],
              ].map(([v,l,d]) => (
                <button key={v} className={p.wpPath===v?"on wp":""} onClick={()=>p.setWpPath(v)}>
                  <svg viewBox="0 0 24 18" width="32" height="20" fill="none" stroke="currentColor" strokeWidth="1.6">
                    <path d={d}/>
                  </svg>
                  <span>{l}</span>
                </button>
              ))}
            </div>
          </Section>

          <Section title="Takeoff" tone="wp">
            <div className="fp-seg">
              <button className={p.takeoffMode==="safe"?"on wp":""} onClick={()=>p.setTakeoffMode("safe")}>Safe</button>
              <button className={p.takeoffMode==="direct"?"on wp":""} onClick={()=>p.setTakeoffMode("direct")}>Direct</button>
            </div>
            {p.takeoffMode === "safe" && (
              <Stepper label="Safe altitude" value={p.takeoffSafeAlt} onChange={p.setTakeoffSafeAlt} unit="m" steps={[-10,-1,1,10]} min={1} max={500}/>
            )}
            <div className="fp-takeoff-st">
              {p.takeoff ? (<><Icon name="check_circle" size={11} style={{color:"#34d399"}}/> Home set · <span className="mono">{p.takeoff[0]},{p.takeoff[1]}</span></>)
                        : (<><Icon name="alert" size={11} style={{color:"#d4910c"}}/> No home point — click "Home" in toolbar</>)}
            </div>
          </Section>

          <Section title="Overlays" tone="wp">
            <Toggle label="Show distance labels" value={p.wpShowDistances} onChange={p.setWpShowDistances}/>
            <Toggle label="Drone & FOV overlay" value={p.droneOverlay} onChange={p.setDroneOverlay}/>
          </Section>
        </>
      )}
    </div>
  );
}

/* ========== WP DETAIL ========== */
function WpDetail({ wp, idx, total, onPrev, onNext, onClose, onDelete, update,
                    addAction, removeAction, updateAction, moveAction, globalAlt, altMode }) {
  const [adding, setAdding] = useStateFPS(false);
  const overrideActive = wp.alt != null;
  return (
    <div className="fp-wpdetail">
      <div className="fp-wpdetail-hd">
        <span className="fp-wpbadge">WP{String(idx+1).padStart(2,"0")}</span>
        <span className="fp-wpcount">{idx+1} / {total}</span>
        <div style={{flex:1}}/>
        <button className="fp-iconbtn" onClick={onPrev} disabled={total<=1}><Icon name="chevron_right" size={12} style={{transform:"rotate(180deg)"}}/></button>
        <button className="fp-iconbtn" onClick={onNext} disabled={total<=1}><Icon name="chevron_right" size={12}/></button>
        <button className="fp-iconbtn danger" onClick={onDelete}><Icon name="x" size={12}/></button>
        <button className="fp-iconbtn" onClick={onClose}>×</button>
      </div>

      <div className="fp-wpdetail-body">
        <div className="fp-wpkv"><span>LAT</span><b className="mono">{wp.lat?.toFixed(6)}</b></div>
        <div className="fp-wpkv"><span>LNG</span><b className="mono">{wp.lng?.toFixed(6)}</b></div>

        <div className="fp-wpalt-box">
          <div className="fp-field-lab">Altitude · {altMode}</div>
          <Stepper value={wp.alt ?? globalAlt} onChange={(v)=>update({ alt: v })}
                   unit="m" steps={[-100,-10,10,100]} min={10} max={500} tone="wp"/>
          {overrideActive ? (
            <div className="fp-wpalt-note">
              <span>Override · global: {globalAlt} m</span>
              <button className="fp-link" onClick={() => update({ alt: null })}><Icon name="refresh" size={10}/>Global</button>
            </div>
          ) : (
            <div className="fp-wpalt-note"><span>Using global altitude</span></div>
          )}
        </div>

        <div className="fp-wpactions">
          <div className="fp-wpactions-hd">
            <span className="fp-field-lab">Actions</span>
            <button className="fp-addbtn" onClick={() => setAdding(v => !v)}>
              <Icon name="plus" size={11}/> Add
            </button>
          </div>

          {adding && (
            <div className="fp-actionmenu">
              {window.FP_HELPERS.ACTION_CATALOG.map(g => (
                <div key={g.group}>
                  <div className="fp-actionmenu-hd">{g.group}</div>
                  {g.items.map(it => (
                    <button key={it.type} className="fp-actionmenu-item"
                            onClick={() => { addAction(it.type, it.defaults); setAdding(false); }}>
                      {it.label}
                    </button>
                  ))}
                </div>
              ))}
            </div>
          )}

          {(!wp.actions || wp.actions.length === 0) && !adding && (
            <div className="fp-empty small">No actions</div>
          )}

          {wp.actions?.map((a, i) => (
            <div key={a.id} className="fp-actioncard">
              <div className="fp-ac-num">{i+1}</div>
              <div className="fp-ac-body">
                <div className="fp-ac-tt">{window.FP_HELPERS.actionSummary(a)}</div>
                <ActionParams a={a} onChange={(p)=>updateAction(a.id, p)}/>
              </div>
              <div className="fp-ac-controls">
                <button onClick={() => moveAction(a.id, -1)} disabled={i===0}><Icon name="arrow_up" size={10}/></button>
                <button onClick={() => moveAction(a.id, 1)} disabled={i===wp.actions.length-1}><Icon name="arrow_down" size={10}/></button>
                <button className="danger" onClick={() => removeAction(a.id)}><Icon name="x" size={10}/></button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ActionParams({ a, onChange }) {
  const p = a.params || {};
  const edit = (k, v) => onChange({ [k]: v });
  switch (a.type) {
    case "take_photo_fixed":
    case "gimbal_tilt":
      return <InlineStepper value={p.angle} onChange={v=>edit("angle",v)} unit="°" min={-90} max={0}/>;
    case "set_fov":
      return <InlineStepper value={p.fov} onChange={v=>edit("fov",v)} unit="°" min={10} max={180}/>;
    case "camera_zoom":
      return <InlineStepper value={p.level} onChange={v=>edit("level",v)} unit="×" min={1} max={10} step={0.5} decimals={1}/>;
    case "start_timed_interval":
      return <InlineStepper value={p.intervalSec} onChange={v=>edit("intervalSec",v)} unit="s" min={1} max={60}/>;
    case "start_distance_interval":
      return <InlineStepper value={p.intervalM} onChange={v=>edit("intervalM",v)} unit="m" min={1} max={500}/>;
    case "hover":
      return <InlineStepper value={p.durationSec} onChange={v=>edit("durationSec",v)} unit="s" min={1} max={300}/>;
    case "aircraft_yaw":
      return (
        <div style={{display:"flex", gap:6, alignItems:"center"}}>
          <InlineStepper value={p.angle} onChange={v=>edit("angle",v)} unit="°" min={-180} max={180}/>
          <label className="fp-mini"><input type="checkbox" checked={!!p.relative} onChange={e=>edit("relative", e.target.checked)}/> rel</label>
        </div>
      );
    default:
      return null;
  }
}

/* ========== COMMON CONTROLS ========== */
function Section({ title, tone = "", children }) {
  return (
    <div className={`fp-sec fp-sec-${tone}`}>
      <div className="fp-sec-hd">{title}</div>
      <div className="fp-sec-body">{children}</div>
    </div>
  );
}

function Slider({ label, min, max, step, unit, value, onChange, hint }) {
  return (
    <div className="fp-field">
      {label && <div className="fp-field-lab">{label}</div>}
      <div className="fp-slider-row">
        <input type="range" min={min} max={max} step={step} value={value} onChange={e=>onChange(+e.target.value)}/>
        <span className="fp-slider-val mono">{value}<i>{unit}</i></span>
      </div>
      {hint && <div className="fp-hint">{hint}</div>}
    </div>
  );
}

function Stepper({ label, value, onChange, unit, steps, min, max, decimals = 0, tone = "" }) {
  const fmt = (v) => decimals ? (+v).toFixed(decimals) : Math.round(v);
  const step = (d) => {
    let nv = +(value + d);
    if (min != null) nv = Math.max(min, nv);
    if (max != null) nv = Math.min(max, nv);
    onChange(+nv.toFixed(decimals));
  };
  return (
    <div className="fp-field">
      {label && <div className="fp-field-lab">{label}</div>}
      <div className={`fp-stepper ${tone}`}>
        {steps.filter(s=>s<0).map(s => <button key={s} onClick={()=>step(s)}>{s}</button>)}
        <input type="number" value={fmt(value)} onChange={e=>onChange(+e.target.value)}/>
        <span className="fp-unit">{unit}</span>
        {steps.filter(s=>s>0).map(s => <button key={s} onClick={()=>step(s)}>+{s}</button>)}
      </div>
    </div>
  );
}

function InlineStepper({ value, onChange, unit, min, max, step = 1, decimals = 0 }) {
  const clamp = (v) => Math.max(min, Math.min(max, v));
  const fmt = (v) => decimals ? (+v).toFixed(decimals) : Math.round(v);
  return (
    <div className="fp-inline-stepper">
      <button onClick={() => onChange(clamp(+(value - step).toFixed(decimals)))}>−</button>
      <span className="mono">{fmt(value)}<i>{unit}</i></span>
      <button onClick={() => onChange(clamp(+(value + step).toFixed(decimals)))}>+</button>
    </div>
  );
}

function Toggle({ label, value, onChange }) {
  return (
    <label className="fp-toggle">
      <span>{label}</span>
      <input type="checkbox" checked={!!value} onChange={e=>onChange(e.target.checked)}/>
      <span className="fp-toggle-knob"/>
    </label>
  );
}

function AngleDial({ angle }) {
  return (
    <div className="fp-dial-mini">
      <svg viewBox="0 0 40 40" width="32" height="32">
        <circle cx="20" cy="20" r="16" fill="none" stroke="rgba(52,211,153,0.25)" strokeWidth="1.2"/>
        <circle cx="20" cy="20" r="16" fill="none" stroke="#34d399" strokeWidth="1.4"
                strokeDasharray="2 6" strokeDashoffset="0"/>
        <g transform={`rotate(${angle} 20 20)`}>
          <path d="M 20 6 L 20 20" stroke="#34d399" strokeWidth="1.6" strokeLinecap="round"/>
          <circle cx="20" cy="6" r="2" fill="#34d399"/>
        </g>
        <circle cx="20" cy="20" r="1.6" fill="#0a0f1a" stroke="#34d399" strokeWidth="1"/>
      </svg>
    </div>
  );
}

function GimbalDial({ angle }) {
  // -40 to -85
  const deg = angle + 90; // 5 (nearly nadir) to 50 (shallow)
  return (
    <div className="fp-dial">
      <svg viewBox="0 0 80 80" width="72" height="72">
        <circle cx="40" cy="40" r="34" fill="rgba(96,165,250,0.06)" stroke="rgba(96,165,250,0.3)" strokeWidth="1"/>
        <path d="M 40 40 L 40 8 A 32 32 0 0 1 68 54 Z" fill="rgba(96,165,250,0.08)" stroke="rgba(96,165,250,0.3)"/>
        <line x1="40" y1="6" x2="40" y2="16" stroke="#60a5fa" strokeWidth="1"/>
        <line x1="40" y1="74" x2="40" y2="64" stroke="#60a5fa" strokeWidth="1"/>
        <text x="40" y="5" fontSize="6" textAnchor="middle" fill="#60a5fa">-40</text>
        <text x="40" y="80" fontSize="6" textAnchor="middle" fill="#60a5fa">-85</text>
        <g transform={`rotate(${-deg*2} 40 40)`}>
          <path d="M 40 40 L 40 12" stroke="#60a5fa" strokeWidth="2" strokeLinecap="round"/>
          <circle cx="40" cy="12" r="2.5" fill="#60a5fa"/>
        </g>
        <circle cx="40" cy="40" r="3" fill="#0a0f1a" stroke="#60a5fa" strokeWidth="1.2"/>
      </svg>
      <div className="fp-dial-val">{angle}°</div>
    </div>
  );
}

Object.assign(window, { FPToolbar, FPSidebar });