{% extends "base.html" %}

{% block head %}
<script src="/static/js/three.min.js"></script>
<script src="/static/js/OBJLoader.js"></script>
<script src="/static/js/moto3d.js?v=20260912_10"></script>
<script src="/static/js/motoar.js?v=20260912_10"></script>
{% endblock %}

{% block content %}
<!-- Live Camera Background for iOS / non-WebXR browsers -->
<video id="arCameraVideo" playsinline webkit-playsinline autoplay muted style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:8990; pointer-events:none;"></video>

<!-- Start AR Screen (required to activate user gesture for camera & WebXR) -->
<div id="arStartScreen" style="display:flex; position:fixed; inset:0; z-index:9200; background:rgba(6,9,15,0.92); backdrop-filter:blur(18px); align-items:center; justify-content:center; padding:20px; font-family:'Inter',sans-serif;">
  <div style="background:var(--bg3); border:1px solid var(--border); border-radius:18px; padding:32px 28px; max-width:440px; width:100%; text-align:center; box-shadow:0 12px 40px rgba(0,0,0,0.6); animation:slideDown .25s ease;">
    <div style="margin-bottom:14px; display:inline-flex; align-items:center; justify-content:center; width:68px; height:68px; border-radius:18px; background:rgba(34,211,238,0.08); border:1px solid rgba(34,211,238,0.25); box-shadow:0 0 24px rgba(34,211,238,0.15);">
      <img src="/IMAGES/motometi_icon_1_neg.png" alt="MOTOMETI" style="width:42px; height:42px; object-fit:contain;">
    </div>
    <h2 style="font-size:22px; font-weight:800; color:var(--txt); margin:0 0 6px 0;">MOTOMETI AR</h2>
    <p style="font-size:13px; color:var(--txt-dim); margin:0 0 20px 0; line-height:1.5;">
      View your SoundVision speaker clusters and rigging angles projected in 3D directly in the arena through your phone's camera.
    </p>
    
    <div id="arDeviceBadge" style="display:inline-flex; align-items:center; gap:8px; padding:6px 14px; background:rgba(34,211,238,0.1); border:1px solid rgba(34,211,238,0.3); border-radius:20px; font-size:12px; font-weight:600; color:var(--cyan); margin-bottom:18px;">
      <span>🔍</span> <span id="arDeviceBadgeText">Detecting sensor mode...</span>
    </div>

    <!-- Start Angle & Direction Selector -->
    <div style="background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:14px 16px; margin-bottom:12px; text-align:left;">
      <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
        <span style="font-size:11px; font-weight:700; color:var(--txt-dim); text-transform:uppercase; letter-spacing:0.8px;">Start Angle & Direction</span>
        <span id="arStartAngleLabel" style="font-size:13px; font-weight:800; color:var(--amber); font-family:'JetBrains Mono',monospace;">0° (FOH to Stage)</span>
      </div>

      <div style="display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:8px;">
        <button type="button" class="btn sm" id="btnAngleFOH" onclick="MOTOAR.setAnglePreset('foh')" style="font-size:11px; padding:8px; justify-content:center; background:rgba(245,158,11,0.18); border:1px solid rgba(245,158,11,0.45); color:var(--amber); font-weight:700; border-radius:8px;">
          🎧 FOH to Stage (0°)
        </button>
        <button type="button" class="btn sm" id="btnAngleStage" onclick="MOTOAR.setAnglePreset('stage')" style="font-size:11px; padding:8px; justify-content:center; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:var(--txt-dim); font-weight:600; border-radius:8px;">
          🎭 From Stage (180°)
        </button>
      </div>

      <div style="display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:8px;">
        <button type="button" class="btn sm" id="btnAngleCompass" onclick="MOTOAR.setAnglePreset('compass')" style="font-size:11px; padding:8px; justify-content:center; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:var(--txt-dim); font-weight:600; border-radius:8px;" title="Use stage compass azimuth from settings">
          🧭 Compass (<span id="arStageAzLabel">Azimuth</span>)
        </button>
        <button type="button" class="btn sm" id="btnAngleCustom" onclick="MOTOAR.setAnglePreset('custom')" style="font-size:11px; padding:8px; justify-content:center; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:var(--txt-dim); font-weight:600; border-radius:8px;">
          📐 Custom Angle
        </button>
      </div>

      <div id="arCustomAngleWrap" style="display:none; align-items:center; gap:10px; margin-top:8px; padding-top:8px; border-top:1px dashed rgba(255,255,255,0.08);">
        <input id="arStartAngleSlider" type="range" min="0" max="355" step="5" value="0"
          style="flex:1; accent-color:#f59e0b;"
          oninput="MOTOAR.onSliderAngleChange(this.value)">
        <span id="arCustomDegValue" style="font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; color:var(--amber); width:45px; text-align:right;">0°</span>
      </div>
    </div>

    <!-- Venue 3D Model Selector in Start Screen -->
    <div style="background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:12px 16px; margin-bottom:20px; display:flex; align-items:center; justify-content:space-between;">
      <div style="display:flex; align-items:center; gap:10px;">
        <span style="font-size:22px;">🏟️</span>
        <div style="text-align:left;">
          <div style="font-size:12px; font-weight:700; color:var(--txt);">3D Venue Model</div>
          <div id="arStartVenueSub" style="font-size:10px; color:var(--txt-dim);">Display arena & stage geometry in AR</div>
        </div>
      </div>
      <button type="button" id="arStartVenueToggleBtn" onclick="MOTOAR.toggleVenue()" class="btn sm" style="font-size:11px; padding:6px 14px; border-radius:8px; font-weight:700; background:rgba(34,211,238,0.18); border:1px solid rgba(34,211,238,0.45); color:var(--cyan); transition:all 0.15s; cursor:pointer;">
        ✓ On
      </button>
    </div>

    <div style="display:flex; flex-direction:column; gap:10px;">
      <button id="btnStartAR" onclick="MOTOAR.startAR()" class="btn amber" style="padding:14px 20px; font-size:15px; font-weight:700; border-radius:12px; display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; box-shadow:0 4px 20px rgba(245,158,11,0.35);">
        <span>🚀</span> <span>Start AR View</span>
      </button>
      <button onclick="window.location.href='/clusters'" class="btn" style="padding:10px 16px; font-size:13px; border-radius:10px;">
        Back to Clusters
      </button>
    </div>

    <div style="margin-top:20px; font-size:11px; color:var(--txt-mute); line-height:1.4;">
      Works on both <strong>iPhone (Safari)</strong> and <strong>Android (Chrome)</strong>.<br>Remember to grant camera and motion sensor permissions when prompted.
    </div>
  </div>
</div>

<!-- Main AR HUD Overlay (Visible once AR session is active) -->
<div id="arOverlay" style="display:none;position:fixed;inset:0;z-index:9100;flex-direction:column;font-family:'Inter',sans-serif;">

  <!-- Top bar -->
  <div style="display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:rgba(9,14,26,0.86);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,0.08);pointer-events:all;gap:8px;flex-wrap:wrap;">
    <div style="display:flex;align-items:center;gap:10px;">
      <span style="width:8px;height:8px;background:#22c55e;border-radius:50%;box-shadow:0 0 8px #22c55e;display:inline-block;animation:arDot 1.5s ease-in-out infinite;"></span>
      <span style="font-weight:800;font-size:13px;color:#e2e8f0;letter-spacing:.5px;">MOTOMETI <span style="background:linear-gradient(135deg,#f59e0b,#8b5cf6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;">AR</span></span>
      <span id="arCompassBadge" style="font-size:10px;font-weight:700;color:var(--amber);background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.3);border-radius:12px;padding:2px 8px;display:flex;align-items:center;gap:3px;font-family:'JetBrains Mono',monospace;">🧭 <span id="arCompassText">0°</span></span>
    </div>

    <div style="display:flex;align-items:center;gap:6px;flex-wrap:wrap;">
      <!-- 3D Venue Model On/Off Toggle -->
      <button id="arVenueBtn" onclick="MOTOAR.toggleVenue()" style="background:rgba(34,211,238,0.18);border:1px solid rgba(34,211,238,0.45);border-radius:8px;color:#22d3ee;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;padding:6px 11px;cursor:pointer;pointer-events:all;display:flex;align-items:center;gap:5px;transition:all .15s;box-shadow:0 0 10px rgba(34,211,238,0.2);" title="Toggle 3D Venue model in AR">
        <span>🏟️</span> <span id="arVenueBtnText">Venue: ON</span>
      </button>

      <label style="font-size:11px;color:#64748b;display:flex;align-items:center;gap:4px;pointer-events:all;background:rgba(255,255,255,0.03);padding:4px 8px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);">
        Scale
        <input id="arScale" type="range" min="0.2" max="3" step="0.1" value="1"
          style="width:55px;accent-color:#f59e0b;"
          oninput="if(typeof MOTOAR!=='undefined')MOTOAR.setScale(+this.value)">
        <span id="arScaleVal" style="color:#f59e0b;font-size:10px;width:24px;font-family:'JetBrains Mono',monospace;">1.0×</span>
      </label>

      <button id="arFlipBtn" onclick="MOTOAR.flip180()" style="background:rgba(139,92,246,0.12);border:1px solid rgba(139,92,246,0.3);border-radius:8px;color:#c4b5fd;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;padding:6px 10px;cursor:pointer;pointer-events:all;display:flex;align-items:center;gap:4px;transition:background .15s,border-color .15s;" title="Flip model 180°">↺ 180°</button>
      <button id="arSettingsBtn" onclick="arToggleSettings()" style="background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.3);border-radius:8px;color:#f59e0b;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;padding:6px 10px;cursor:pointer;pointer-events:all;display:flex;align-items:center;gap:4px;transition:background .15s,border-color .15s;">⚙ Origin</button>
      <button id="arLaserBtn" onclick="MOTOAR.toggleLaserAim()" style="background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.3);border-radius:8px;color:#f87171;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;padding:6px 10px;cursor:pointer;pointer-events:all;display:flex;align-items:center;gap:4px;transition:background .15s,border-color .15s;">🔴 Laser</button>
      <button onclick="MOTOAR.stopAR()" style="background:rgba(248,113,113,0.16);border:1px solid rgba(248,113,113,0.35);border-radius:8px;color:#f87171;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;padding:6px 12px;cursor:pointer;pointer-events:all;">✕ Exit</button>
    </div>
  </div>

  <!-- Hint text (top of center area) -->
  <div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;pointer-events:none;padding:20px 0;">

    <div id="arHintText" style="background:rgba(9,14,26,0.78);border:1px solid rgba(245,158,11,0.35);border-radius:14px;padding:10px 20px;font-size:13px;color:#f59e0b;text-align:center;backdrop-filter:blur(10px);"></div>

    <!-- Crosshair (exact screen centre) -->
    <div id="arCrosshair" style="transition:transform .12s,filter .12s;">
      <svg width="52" height="52" viewBox="0 0 52 52" fill="none">
        <circle cx="26" cy="26" r="14" stroke="rgba(245,158,11,0.65)" stroke-width="1.5"/>
        <circle cx="26" cy="26" r="3"  fill="rgba(245,158,11,0.85)"/>
        <line x1="26" y1="5"  x2="26" y2="16" stroke="rgba(245,158,11,0.65)" stroke-width="1.5" stroke-linecap="round"/>
        <line x1="26" y1="36" x2="26" y2="47" stroke="rgba(245,158,11,0.65)" stroke-width="1.5" stroke-linecap="round"/>
        <line x1="5"  y1="26" x2="16" y2="26" stroke="rgba(245,158,11,0.65)" stroke-width="1.5" stroke-linecap="round"/>
        <line x1="36" y1="26" x2="47" y2="26" stroke="rgba(245,158,11,0.65)" stroke-width="1.5" stroke-linecap="round"/>
      </svg>
    </div>

    <!-- Focus panel — appears when crosshair is on a cluster -->
    <div id="arFocusPanel" style="display:none;width:260px;">
      <div style="background:rgba(9,14,26,0.93);border:1px solid rgba(245,158,11,0.4);border-radius:14px;padding:14px 18px;backdrop-filter:blur(14px);text-align:center;">
        <div id="arFocusName" style="font-weight:800;font-size:18px;margin-bottom:4px;"></div>
        <div id="arFocusType" style="font-size:11px;color:#64748b;margin-bottom:8px;font-family:'JetBrains Mono',monospace;"></div>
        <div id="arFocusData" style="font-size:12px;color:#94a3b8;"></div>
        <button id="arFocusLaserBtn" onclick="MOTOAR.toggleLaserOnFocus()" style="margin-top:10px; width:100%; background:rgba(34,211,238,0.1); border:1px solid rgba(34,211,238,0.3); border-radius:8px; color:#22d3ee; font-weight:700; padding:6px 0; cursor:pointer; pointer-events:all; transition:0.2s">⚡ Toggle All Lasers</button>
        <div id="arFocusCabinetLasers" style="display:flex;flex-wrap:wrap;justify-content:center;margin-top:2px;"></div>
      </div>
    </div>

  </div>


  <!-- ── Anchor Nudge Panel — toggled by ⚙ Origin button in top bar ────── -->
  <div id="arNudgePanel" style="display:none;flex-direction:column;align-items:center;gap:6px;
    padding:10px 14px;background:rgba(9,14,26,0.88);backdrop-filter:blur(14px);
    border-top:1px solid rgba(245,158,11,0.18);pointer-events:all;">

    <!-- Row 1: title + quick rotate + re-place -->
    <div style="display:flex;justify-content:space-between;align-items:center;width:100%;max-width:380px;margin-bottom:6px;gap:6px;flex-wrap:wrap;">
      <span style="font-size:10px;font-weight:700;color:#64748b;letter-spacing:.8px;text-transform:uppercase;">Origin Adjustment</span>

      <div style="display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap;">
        <button onclick="MOTOAR.toggleVenue()" style="background:rgba(34,211,238,0.15);border:1px solid rgba(34,211,238,0.35);border-radius:6px;color:#22d3ee;font-size:10px;font-weight:700;padding:4px 8px;cursor:pointer;" title="Toggle 3D Venue model">🏟️ Venue</button>
        <button onclick="MOTOAR.flip180()" style="background:rgba(139,92,246,0.15);border:1px solid rgba(139,92,246,0.35);border-radius:6px;color:#c4b5fd;font-size:10px;font-weight:700;padding:4px 8px;cursor:pointer;" title="Flip model 180°">↺ 180°</button>
        <button onclick="MOTOAR.alignToView()" style="background:rgba(34,211,238,0.12);border:1px solid rgba(34,211,238,0.3);border-radius:6px;color:#22d3ee;font-size:10px;font-weight:700;padding:4px 8px;cursor:pointer;" title="Align model to current field of view">🎯 Align to me</button>
        <button id="arStepBtn" onclick="toggleArStepMode()" style="background:rgba(34,211,238,0.1);border:1px solid rgba(34,211,238,0.3);border-radius:6px;color:#22d3ee;font-size:10px;font-weight:700;padding:4px 8px;cursor:pointer;transition:0.2s">Step: 90&deg;</button>
        <button onclick="MOTOAR.resetPlace()"
          style="background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.35);border-radius:6px;
                 color:#f59e0b;font-size:10px;font-weight:700;padding:4px 8px;cursor:pointer;font-family:'Inter',sans-serif;">
          ↩ Re-place
        </button>
      </div>
    </div>

    <!-- Row 2: XZ nudge grid + rotate -->
    <div style="display:flex;align-items:center;gap:12px;">

      <!-- XZ nudge compass -->
      <div style="display:grid;grid-template-columns:repeat(3,36px);grid-template-rows:repeat(3,36px);gap:3px;">
        <div></div>
        <button onclick="doArNudge('z',-1)" title="Forward" style="border-radius:8px;background:rgba(51,153,255,0.15);border:1px solid rgba(51,153,255,0.35);color:#3399ff;font-size:15px;cursor:pointer;">↑</button>
        <div></div>
        <button onclick="doArNudge('x',-1)" title="Left"    style="border-radius:8px;background:rgba(51,153,255,0.15);border:1px solid rgba(51,153,255,0.35);color:#3399ff;font-size:15px;cursor:pointer;">←</button>
        <div id="arNudgeCenter" style="display:flex;align-items:center;justify-content:center;font-size:9px;color:#475569;text-align:center;line-height:1.1;">0.5m</div>
        <button onclick="doArNudge('x', 1)" title="Right"   style="border-radius:8px;background:rgba(51,153,255,0.15);border:1px solid rgba(51,153,255,0.35);color:#3399ff;font-size:15px;cursor:pointer;">→</button>
        <div></div>
        <button onclick="doArNudge('z', 1)" title="Back"    style="border-radius:8px;background:rgba(51,153,255,0.15);border:1px solid rgba(51,153,255,0.35);color:#3399ff;font-size:15px;cursor:pointer;">↓</button>
        <div></div>
      </div>

      <!-- Vertical separator -->
      <div style="width:1px;height:60px;background:rgba(255,255,255,0.07);"></div>

      <!-- Y (height) nudge -->
      <div style="display:flex;flex-direction:column;align-items:center;gap:3px;">
        <button onclick="doArNudge('y', 1)" title="Up"
          style="border-radius:8px;background:rgba(51,255,102,0.12);border:1px solid rgba(51,255,102,0.3);color:#33ff66;font-size:15px;width:36px;height:36px;cursor:pointer;">↑</button>
        <span style="font-size:9px;color:#475569;">Y</span>
        <button onclick="doArNudge('y',-1)" title="Down"
          style="border-radius:8px;background:rgba(51,255,102,0.12);border:1px solid rgba(51,255,102,0.3);color:#33ff66;font-size:15px;width:36px;height:36px;cursor:pointer;">↓</button>
      </div>

      <!-- Vertical separator -->
      <div style="width:1px;height:60px;background:rgba(255,255,255,0.07);"></div>

      <!-- Rotate -->
      <div style="display:flex;flex-direction:column;align-items:center;gap:3px;">
        <button onclick="doArRotate(1)" title="Rotate left"
          style="border-radius:8px;background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.3);color:#f59e0b;font-size:15px;width:36px;height:36px;cursor:pointer;">↺</button>
        <div style="display:flex;flex-direction:column;align-items:center;line-height:1.1;">
          <span id="arRotLabel" style="font-size:9px;color:#475569;">90&deg;</span>
          <span id="arCurrentRotDeg" style="font-size:9px;color:var(--amber);font-weight:700;font-family:'JetBrains Mono',monospace;">0&deg;</span>
        </div>
        <button onclick="doArRotate(-1)" title="Rotate right"
          style="border-radius:8px;background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.3);color:#f59e0b;font-size:15px;width:36px;height:36px;cursor:pointer;">↻</button>
      </div>

    </div>

    <!-- Axis legend -->
    <div style="display:flex;gap:14px;font-size:9px;color:#475569;">
      <span><span style="color:#ff3333">■</span> X (right/left)</span>
      <span><span style="color:#3399ff">■</span> Z (depth fwd/back)</span>
      <span><span style="color:#33ff66">■</span> Y (height up/down)</span>
    </div>
  </div>

</div>

{% endblock %}

{% block scripts %}
<script src="/static/js/ar.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    if (typeof MOTOAR !== 'undefined' && typeof MOTOAR.initStartScreen === 'function') {
      MOTOAR.initStartScreen();
    }
  });
</script>
{% endblock %}