// Gargantua v2 HUD: holographic side panel, telemetry, captions, presets.
// All visuals are CSS-driven; canvas underneath stays untouched.
// State flows in via props; the parent owns the simulation truth.

// Only useState is consumed in this file; the other hooks were imported when
// BHControlPanel still owned more local state and are now dead weight.
const _bhHudReact = { useState: React.useState };

function BHSlider(props) {
  const { label, value, min, max, step, onChange, fmt } = props;
  return (
    <div className="bh-slider-row">
      <div className="bh-slider-label">
        <span>{label}</span>
        <span className="bh-slider-val">
          {fmt ? fmt(value) : value.toFixed(2)}
        </span>
      </div>
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={(e) => onChange(parseFloat(e.target.value))}
        className="bh-slider"
      />
    </div>
  );
}

function BHControlPanel(props) {
  const {
    state,
    setState,
    presets,
    onPreset,
    quality,
    setQuality,
    scienceMode,
    setScienceMode,
  } = props;
  const [hidden, setHidden] = _bhHudReact.useState(false);
  return (
    <div className={"bh-panel" + (hidden ? " bh-panel-hidden" : "")}>
      <div className="bh-panel-header">
        <span>GARGANTUA · CONTROLS</span>
        <button
          className="bh-panel-toggle"
          onClick={() => setHidden((h) => !h)}
        >
          {hidden ? "▸" : "▾"}
        </button>
      </div>
      {!hidden && (
        <div className="bh-panel-body">
          <BHSlider
            label="Spin (a/M)"
            value={state.spin}
            min={0}
            max={0.998}
            step={0.001}
            onChange={(v) => setState({ spin: v })}
            fmt={(v) => v.toFixed(3)}
          />
          <BHSlider
            label="Accretion Rate"
            value={state.accretion}
            min={0.3}
            max={1.8}
            step={0.01}
            onChange={(v) => setState({ accretion: v })}
          />
          <BHSlider
            label="Disk Temperature"
            value={state.diskTemp}
            min={0.5}
            max={1.8}
            step={0.01}
            onChange={(v) => setState({ diskTemp: v })}
          />
          <BHSlider
            label="Camera Distance"
            value={state.targetDist}
            min={3.5}
            max={30}
            step={0.1}
            onChange={(v) => setState({ targetDist: v })}
            fmt={(v) => v.toFixed(1) + " M"}
          />
          <BHSlider
            label="Time Dilation"
            value={state.timeDilation}
            min={0.1}
            max={1.0}
            step={0.01}
            onChange={(v) => setState({ timeDilation: v })}
          />
          <BHSlider
            label="Jet Power"
            value={state.jetStrength}
            min={0}
            max={1.4}
            step={0.01}
            onChange={(v) => setState({ jetStrength: v })}
          />
          <div className="bh-presets">
            <div className="bh-presets-label">CAMERA PRESETS</div>
            <div className="bh-preset-grid">
              {presets.map((p, i) => (
                <button
                  key={p.key}
                  className="bh-preset-btn"
                  onClick={() => onPreset(p.key)}
                  title={"Hotkey: " + (i + 1)}
                >
                  <span className="bh-preset-num">{i + 1}</span>
                  <span className="bh-preset-name">{p.label}</span>
                </button>
              ))}
            </div>
          </div>
          <div className="bh-quality">
            <span className="bh-q-label">QUALITY</span>
            {["Low", "Medium", "Ultra"].map((q, i) => (
              <button
                key={q}
                className={"bh-q-btn" + (quality === i ? " bh-q-active" : "")}
                onClick={() => setQuality(i)}
              >
                {q}
              </button>
            ))}
          </div>
          <label className="bh-toggle-row">
            <input
              type="checkbox"
              checked={scienceMode}
              onChange={(e) => setScienceMode(e.target.checked)}
            />
            <span>Science overlay</span>
          </label>
        </div>
      )}
    </div>
  );
}

function BHTelemetry(props) {
  const { telemetry, visible } = props;
  if (!visible) return null;
  const fmt = (v, d) => (typeof v === "number" ? v.toFixed(d) : "—");
  return (
    <div className="bh-telemetry">
      <div className="bh-tel-title">TELEMETRY (T)</div>
      <div className="bh-tel-grid">
        <div>
          <b>r</b>
          <span>{fmt(telemetry.r, 2)} M</span>
        </div>
        <div>
          <b>v_orb</b>
          <span>{fmt(telemetry.vOrb, 3)} c</span>
        </div>
        <div>
          <b>T_disk</b>
          <span>{fmt(telemetry.tDisk, 2)} ×</span>
        </div>
        <div>
          <b>γ</b>
          <span>{fmt(telemetry.gamma, 2)}</span>
        </div>
        <div>
          <b>magnification</b>
          <span>{fmt(telemetry.magnification, 2)}×</span>
        </div>
        <div>
          <b>frame-drag</b>
          <span>{fmt(telemetry.frameDrag, 4)}</span>
        </div>
        <div>
          <b>fps</b>
          <span>{fmt(telemetry.fps, 0)}</span>
        </div>
        <div>
          <b>steps</b>
          <span>{telemetry.steps || "—"}</span>
        </div>
      </div>
    </div>
  );
}

function BHCaption(props) {
  const { caption } = props;
  if (!caption) return null;
  return (
    <div className="bh-caption">
      <div className="bh-caption-inner">{caption.text}</div>
    </div>
  );
}

function BHLookLabel(props) {
  const { label } = props;
  if (!label) return null;
  return (
    <div className="bh-look-label">
      <div className="bh-look-title">{label.title}</div>
      <div className="bh-look-body">{label.body}</div>
    </div>
  );
}

function BHFactPopup(props) {
  const { fact } = props;
  if (!fact) return null;
  return (
    <div className="bh-fact">
      <div className="bh-fact-tag">DID YOU KNOW</div>
      <div className="bh-fact-body">{fact}</div>
    </div>
  );
}

function BHEasterEgg(props) {
  const { onClick } = props;
  return (
    <button className="bh-egg" onClick={onClick} title="…">
      <span className="bh-egg-dot" />
    </button>
  );
}

function BHShareBar(props) {
  const { onShare, onScreenshot, onRecord, recording } = props;
  return (
    <div className="bh-sharebar">
      <button
        className="bh-share-btn"
        onClick={onScreenshot}
        title="Screenshot"
      >
        ◌
      </button>
      <button
        className={"bh-share-btn" + (recording ? " bh-share-rec" : "")}
        onClick={onRecord}
        title={recording ? "Stop recording" : "Record 8s"}
      >
        ●
      </button>
      <button className="bh-share-btn" onClick={onShare} title="Share">
        ↗
      </button>
    </div>
  );
}

window.BHControlPanel = BHControlPanel;
window.BHTelemetry = BHTelemetry;
window.BHCaption = BHCaption;
window.BHLookLabel = BHLookLabel;
window.BHFactPopup = BHFactPopup;
window.BHEasterEgg = BHEasterEgg;
window.BHShareBar = BHShareBar;