// Video Maker client. Renders take ~15-40s server-side, so the button holds a
// spinner and the copy warns before the wait rather than after it.
(function () {
  'use strict';
  var ANGLES = [
    { k: 'two', label: 'You only need two' },
    { k: 'pocket', label: 'Pocket change' },
    { k: 'phone', label: 'Runs from your phone' },
    { k: 'graveyard', label: 'Side-hustle graveyard' },
    { k: 'overview', label: 'General overview' }
  ];
  var $ = function (id) { return document.getElementById(id); };
  var angle = 'two', busy = false;

  function renderAngles() {
    var host = $('vdAngles');
    host.innerHTML = '';
    ANGLES.forEach(function (x) {
      var b = document.createElement('button');
      b.type = 'button';
      b.className = 'vd-angle' + (x.k === angle ? ' on' : '');
      b.textContent = x.label;
      b.addEventListener('click', function () { angle = x.k; renderAngles(); });
      host.appendChild(b);
    });
  }

  function showMeter(m) {
    if (!m || !m.limit) { $('vdMeter').textContent = ''; return; }
    $('vdMeter').innerHTML = '<b>' + m.remaining + '</b> of ' + m.limit + ' videos left this month';
  }

  function gate(msg) {
    var g = $('vdGate');
    g.style.display = 'block';
    g.innerHTML = msg;
    $('vdCard').style.opacity = '.55';
    $('vdGo').disabled = true;
    $('vdName').disabled = true;
  }

  async function boot() {
    renderAngles();
    try {
      var r = await fetch('/api/public/suite-meters');
      if (r.status === 401) { gate('You’re not signed in yet. <a href="/suite" style="color:var(--gold);font-weight:700">Open the Suite</a> and connect the wallet that holds your position, then come back.'); return; }
      if (r.status === 403) { gate('The Video Maker isn’t open for this position yet. <a href="/suite" style="color:var(--gold);font-weight:700">See your Suite</a>.'); return; }
      if (!r.ok) return;
      var d = await r.json();
      var m = d.meters && d.meters.video;
      if (m && m.reason === 'locked') {
        gate('The Video Maker unlocks at <b>Fabrica (level 3)</b>. You’re at level ' + d.level + ' — keep climbing and it opens, along with the Email Engine. <a href="/how-pay-works#exact-costs" style="color:var(--gold);font-weight:700">See what upgrades cost →</a>');
        return;
      }
      showMeter(m);
    } catch (e) {}
  }

  async function run() {
    if (busy) return;
    busy = true;
    $('vdErr').style.display = 'none';
    $('vdOut').style.display = 'none';
    $('vdGo').disabled = true;
    $('vdGo').innerHTML = '<span class="spin"></span>Rendering your video… (about a minute)';
    try {
      var r = await fetch('/api/public/suite-video', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ angle: angle, name: $('vdName').value.trim() })
      });
      var d = await r.json();
      if (!r.ok) {
        $('vdErr').textContent = d.error || 'That didn’t go through — try again.';
        $('vdErr').style.display = 'block';
        if (d.meter) showMeter(d.meter);
      } else {
        $('vdDl').href = d.url;
        $('vdSize').textContent = 'MP4 · about ' + d.mb + ' MB · ready to post anywhere.';
        $('vdOut').style.display = 'block';
        showMeter(d.meter);
        $('vdOut').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
      }
    } catch (e) {
      $('vdErr').textContent = 'Connection hiccup — try again.';
      $('vdErr').style.display = 'block';
    }
    busy = false;
    $('vdGo').disabled = false;
    $('vdGo').textContent = '🎬 Make my video';
  }

  document.addEventListener('DOMContentLoaded', function () {
    boot();
    $('vdGo').addEventListener('click', run);
    $('vdName').addEventListener('input', function () {
      $('vdPrev').textContent = $('vdName').value.trim() || 'Your name';
    });
  });
})();