<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>KAOS — Hand to MIDI</title>
  <link rel="stylesheet" href="/static/style.css">
</head>
<body>

  <!-- ── Header ── -->
  <header>
    <div class="header-left">
      <span class="logo">KAOS</span>
      <span class="logo-sub">Hand → MIDI CC</span>
    </div>
    <div id="status-pill" class="pill pill-idle">
      <span id="status-dot">●</span>
      <span id="status-text">Connecting…</span>
    </div>
  </header>

  <main>

    <!-- ── Stats row ── -->
    <div class="stats-row">
      <div class="stat-card">
        <div class="stat-value" id="s-cap-fps">—</div>
        <div class="stat-label">Capture FPS</div>
      </div>
      <div class="stat-card">
        <div class="stat-value" id="s-vis-fps">—</div>
        <div class="stat-label">Vision FPS</div>
      </div>
      <div class="stat-card">
        <div class="stat-value" id="s-lat">—</div>
        <div class="stat-label">Latency ms</div>
      </div>
      <div class="stat-card accent">
        <div class="stat-value" id="s-cc">—</div>
        <div class="stat-label" id="s-cc-label">CC 11</div>
      </div>
    </div>

    <!-- ── CC bar ── -->
    <div class="cc-bar-wrap">
      <div class="cc-bar-track">
        <div class="cc-bar-fill" id="cc-bar"></div>
      </div>
      <div class="cc-bar-ends">
        <span>0</span>
        <span id="cc-raw-label">—</span>
        <span>127</span>
      </div>
    </div>

    <!-- ── Control grid ── -->
    <div class="grid">

      <!-- MIDI Output card -->
      <section class="card">
        <h3 class="card-title">MIDI Output</h3>

        <button id="btn-mute" class="btn btn-active wide" onclick="toggleMute()">
          ● MIDI Active
        </button>

        <div class="field">
          <label>Hand</label>
          <div class="segmented" id="hand-seg">
            <button class="seg-active" onclick="setHandLock('any')">Any</button>
            <button onclick="setHandLock('Left')">Left</button>
            <button onclick="setHandLock('Right')">Right</button>
          </div>
          <span class="hand-badge" id="hand-badge"></span>
        </div>

        <div class="field">
          <label>CC Number</label>
          <select id="cc-select" onchange="onCCSelect()">
            <option value="11">11 — Expression</option>
            <option value="1">1 — Modulation</option>
            <option value="74">74 — Brightness</option>
            <option value="custom">Custom…</option>
          </select>
        </div>

        <div class="field" id="cc-custom-row" style="display:none">
          <label>CC # (0–127)</label>
          <input type="number" id="cc-custom" min="0" max="127" value="11"
                 onchange="sendParam('cc_number', +this.value)">
        </div>

        <div class="field">
          <label>Rate limit</label>
          <div class="segmented" id="rate-seg">
            <button onclick="setRateLimit(30)">30</button>
            <button class="seg-active" onclick="setRateLimit(60)">60</button>
            <button onclick="setRateLimit(120)">120</button>
          </div>
          <span class="unit">Hz</span>
        </div>
      </section>

      <!-- Calibration card -->
      <section class="card">
        <h3 class="card-title">Calibration</h3>

        <div id="cal-indicator" class="cal-uncal">
          Not calibrated — hold hand far, click MIN; bring it near, click MAX
        </div>

        <div class="btn-pair" style="margin-top:10px;">
          <button class="btn btn-secondary" onclick="setMin()">
            ↕ Set MIN<br><small>hand far away</small>
          </button>
          <button class="btn btn-secondary" onclick="setMax()">
            ↕ Set MAX<br><small>hand close</small>
          </button>
        </div>

        <button class="btn btn-ghost" style="margin-top:8px;width:100%;"
                onclick="resetCal()">
          Reset calibration
        </button>
      </section>

      <!-- Shaping card -->
      <section class="card">
        <h3 class="card-title">Shaping</h3>

        <div class="toggle-row">
          <button id="btn-invert" class="btn btn-toggle" onclick="toggleInvert()">
            Invert: Off
          </button>
          <button id="btn-curve" class="btn btn-toggle btn-toggle-on" onclick="toggleCurve()">
            Curve: On
          </button>
        </div>

        <div class="slider-group">
          <label>
            Smoothing
            <span class="val" id="v-min_cutoff">1.0</span><span style="color:var(--muted);font-size:10px"> Hz</span>
          </label>
          <input type="range" id="sl-min_cutoff" min="0.1" max="8" step="0.1" value="1.0"
                 oninput="onSlider('min_cutoff', +this.value, 'v-min_cutoff', 1)">
          <div class="slider-hints"><span>0.1 (smooth)</span><span>8 (raw)</span></div>
        </div>

        <div class="slider-group">
          <label>
            Speed (β)
            <span class="val" id="v-beta">0.4</span>
          </label>
          <input type="range" id="sl-beta" min="0" max="2" step="0.05" value="0.4"
                 oninput="onSlider('beta', +this.value, 'v-beta', 2)">
          <div class="slider-hints"><span>0 (steady)</span><span>2 (fast)</span></div>
        </div>

        <div class="slider-group">
          <label>
            Deadzone
            <span class="val" id="v-deadzone">1</span>
          </label>
          <input type="range" id="sl-deadzone" min="0" max="5" step="1" value="1"
                 oninput="onSlider('deadzone', +this.value, 'v-deadzone', 0)">
          <div class="slider-hints"><span>0 (all)</span><span>5 (coarse)</span></div>
        </div>
      </section>

      <!-- Pitch Bend card -->
      <section class="card">
        <h3 class="card-title">Pitch Bend ← Hand Left / Right →</h3>

        <button id="btn-pitch" class="btn btn-toggle wide" onclick="togglePitch()">
          Pitch Bend: Off
        </button>

        <div id="pitch-controls" style="display:none; margin-top:12px;">

          <div class="pitch-meter-wrap">
            <div class="pitch-meter-track">
              <div class="pitch-meter-center"></div>
              <div class="pitch-meter-fill" id="pitch-bar"></div>
            </div>
            <div class="cc-bar-ends">
              <span>← down</span>
              <span id="pitch-val-label">0</span>
              <span>up →</span>
            </div>
          </div>

          <div class="field" style="margin-top:10px;">
            <button class="btn btn-secondary" style="flex:1" onclick="setPitchCenter()">
              ◎ Set Center<br><small>hand at neutral</small>
            </button>
            <button id="btn-pitch-inv" class="btn btn-toggle" onclick="togglePitchInvert()">
              Invert: Off
            </button>
          </div>

          <div class="slider-group">
            <label>
              Range
              <span class="val" id="v-pitch_range">0.25</span>
            </label>
            <input type="range" id="sl-pitch_range" min="0.05" max="0.5" step="0.01" value="0.25"
                   oninput="onSlider('pitch_range', +this.value, 'v-pitch_range', 2)">
            <div class="slider-hints"><span>narrow</span><span>wide</span></div>
          </div>

          <div class="slider-group">
            <label>
              Centre deadzone
              <span class="val" id="v-pitch_deadzone">0.04</span>
            </label>
            <input type="range" id="sl-pitch_deadzone" min="0" max="0.2" step="0.01" value="0.04"
                   oninput="onSlider('pitch_deadzone', +this.value, 'v-pitch_deadzone', 2)">
            <div class="slider-hints"><span>tight</span><span>wide null zone</span></div>
          </div>

        </div>
      </section>

      <!-- Preview card -->
      <section class="card">
        <h3 class="card-title">Camera Preview</h3>

        <button id="btn-preview" class="btn btn-toggle wide" onclick="togglePreview()">
          Preview: Off
        </button>

        <p class="hint" style="margin-top:8px;">
          Preview adds ~5–10 ms to vision latency. Disable for best performance.
        </p>

        <div id="preview-wrap" style="display:none; margin-top:12px;">
          <img id="preview-img" src="" alt="Hand preview"
               style="width:100%;max-width:320px;border-radius:6px;display:block;">
        </div>
      </section>

    </div><!-- /grid -->

    <footer>
      <span>KAOS · <a href="/health" target="_blank">/health</a></span>
      <button class="btn btn-ghost btn-quit" onclick="quitKaos()">Quit KAOS</button>
    </footer>

  </main>

  <script src="/static/app.js"></script>
  <script>
    function quitKaos() {
      if (!confirm('Stop the KAOS server?')) return;
      fetch('/quit', {method: 'POST'}).then(() => {
        document.body.innerHTML =
          '<div style="display:flex;align-items:center;justify-content:center;height:100vh;' +
          'font-family:monospace;font-size:1.2rem;color:#aaa;">Server stopped — you can close this tab.</div>';
      });
    }
  </script>
</body>
</html>
