// debug-panel.jsx — dev tools as a full screen, reached from the Home footer
// "Debug" control (App only adds it when SHOW_DEBUG, i.e. ?debug=1). A simple
// vertical list of focusable actions so it's fully D-pad navigable on the
// glasses; ArrowLeft / Back returns to the trail.

function DebugPanel(props) {
  const {
    site, collected, forceEvents, forceBingo, forceHalloween, forceOsTrail, locActive,
    onClaimHere, onClaimAll, onReset,
    onSpoofHere, onWalkClaim, onResetLoc, onToggleWWDC, onToggleBingo, onToggleHalloween, onToggleOsTrail,
    onExit, onBack,
  } = props;
  const here = site ? site.name : "—";

  return (
    <div className="screen dbg-screen" data-back-on-left>
      <div className="bloom" style={{ width: 320, height: 180, top: -50, left: 130, opacity: 0.4 }} />
      <div className="statusbar">
        <span className="label">Debug · ?debug=1</span>
        <span className="label">{collected.length} claimed</span>
      </div>

      <div className="dbg-scroll" data-scroll>
        <div className="dbg-grp">Unlock flow (no real GPS)</div>
        <button className="dbg-btn primary focusable" data-focus data-autofocus disabled={!site} onClick={onWalkClaim}>
          ▶ I'm at “{here}” → walk claim flow
        </button>
        <div className="dbg-hint">
          {site ? "Animates the radar approach (~0.4 mi → Arrived) → Claim → secret unlocks."
                : "Open a site first (from the trail) to use this."}
        </div>
        <button className="dbg-btn focusable" data-focus disabled={!site} onClick={onClaimHere}>
          Skip: instant-claim “{here}”
        </button>
        <button className="dbg-btn focusable" data-focus onClick={onClaimAll}>Claim all patches</button>
        <button className="dbg-btn warn focusable" data-focus onClick={onReset}>Reset progress</button>

        <div className="dbg-grp">Location</div>
        <button className="dbg-btn focusable" data-focus disabled={!site} onClick={onSpoofHere}>
          Spoof location → at “{here}” (stay here)
        </button>
        <button className="dbg-btn focusable" data-focus onClick={onResetLoc}>
          Reset location{locActive ? " (spoofed)" : ""}
        </button>

        <div className="dbg-grp">Date</div>
        <button className="dbg-btn focusable" data-focus onClick={onToggleWWDC}>
          WWDC week: <b>{forceEvents ? "ON" : "OFF"}</b>
        </button>
        <button className="dbg-btn focusable" data-focus onClick={onToggleBingo}>
          WWDC Bingo: <b>{forceBingo ? "ON" : "OFF"}</b>
        </button>
        <button className="dbg-btn focusable" data-focus onClick={onToggleHalloween}>
          Halloween (Oct 31): <b>{forceHalloween ? "ON" : "OFF"}</b>
        </button>
        <button className="dbg-btn focusable" data-focus onClick={onToggleOsTrail}>
          OS Trail reveal (Fri WWDC): <b>{forceOsTrail ? "ON" : "OFF"}</b>
        </button>

        <button className="dbg-btn warn focusable" data-focus onClick={onExit}>Exit debug (clear ?debug)</button>
      </div>

      <div className="home-foot" style={{ marginTop: 4 }}>
        <button className="btn focusable" data-focus data-back onClick={onBack}>
          <window.Icon name="back" /> Trail
        </button>
      </div>
    </div>
  );
}

window.DebugPanel = DebugPanel;