{% extends "base.html" %}
{% block title %}Studio — Pay RTC, Generate Video · Image · Voice{% endblock %}

{% block extra_css %}
<style>
  .st-wrap { max-width: 860px; margin: 0 auto; padding: 8px 0 48px; }
  .st-hero { text-align:center; padding: 26px 16px 6px; }
  .st-hero h1 { font-size: 30px; margin-bottom: 8px; }
  .st-hero p { color: var(--text-secondary); font-size:16px; max-width:580px; margin:0 auto; }
  .st-modes { display:flex; justify-content:center; gap:8px; margin:18px auto 6px; flex-wrap:wrap; }
  .st-mode { padding:9px 20px; border:1px solid var(--border); background:var(--bg-secondary); color:var(--text-secondary);
    border-radius:999px; cursor:pointer; font-weight:700; font-size:14px; }
  .st-mode.active { background:var(--accent); color:#0a0a0a; border-color:var(--accent); }
  .st-bal { text-align:center; margin: 12px 0 6px; color: var(--text-secondary); font-size: 14px; }
  .st-bal strong { color:#ffcf33; font-size: 18px; }
  .st-prompt { width:100%; box-sizing:border-box; background:var(--bg-secondary); border:1px solid var(--border);
    border-radius:var(--radius); color:var(--text-primary); padding:14px; font-size:15px; min-height:84px; resize:vertical; margin:10px 0 6px; }
  .st-seconds { display:flex; align-items:center; gap:12px; justify-content:center; margin:6px 0 4px; flex-wrap:wrap; }
  .st-seconds label { color:var(--text-secondary); font-size:14px; } .st-seconds label strong { color:#ffcf33; font-size:17px; }
  .st-seconds input[type=range] { width:240px; accent-color:var(--accent); }
  .st-sec-note { color:var(--text-muted); font-size:12px; }
  .price .pps { color:var(--text-muted); font-size:12px; font-weight:400; }
  .tiers { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:8px; }
  @media (max-width: 680px){ .tiers { grid-template-columns: 1fr; } }
  .tier { position:relative; background:var(--bg-secondary); border:1px solid var(--border); border-left-width:5px;
    border-radius:var(--radius); padding:16px 18px; }
  .tier.t0 { border-left-color:#2ba640; } .tier.t1 { border-left-color:#3ea6ff; } .tier.t2 { border-left-color:#ff4444; }
  .tier h3 { font-size:17px; margin-bottom:4px; } .tier p { color:var(--text-secondary); font-size:13px; margin-bottom:10px; }
  .tier .price { font-size:24px; font-weight:800; color:#ffcf33; margin-bottom:10px; }
  .tier .tbadge { position:absolute; top:14px; right:14px; font-size:10px; font-weight:700; padding:3px 9px; border-radius:999px; color:#fff; }
  .tier.t0 .tbadge { background:#2ba640; } .tier.t1 .tbadge { background:#3ea6ff; } .tier.t2 .tbadge { background:#ff4444; }
  .tier .gen { width:100%; padding:10px; border:none; border-radius:999px; background:var(--accent); color:#0a0a0a; font-weight:700; cursor:pointer; }
  .tier .gen:hover { background:var(--accent-hover); } .tier .gen:disabled { opacity:.5; cursor:default; }
  .st-single { text-align:center; margin-top:8px; }
  .st-single .gen { padding:13px 34px; border:none; border-radius:999px; background:var(--accent); color:#0a0a0a; font-weight:800; font-size:16px; cursor:pointer; }
  .st-single .gen:disabled { opacity:.5; cursor:default; }
  .st-single .price { color:#ffcf33; font-weight:700; }
  .st-status { text-align:center; margin:18px auto; max-width:600px; color:var(--text-secondary); font-size:14px; min-height:20px; }
  .st-status a { color:var(--accent); font-weight:700; }
  .st-result { max-width:600px; margin:16px auto 0; text-align:center; }
  .st-result img { max-width:100%; border-radius:var(--radius); border:1px solid var(--border); }
  .st-result audio { width:100%; margin-top:6px; }
  .st-foot { text-align:center; color:var(--text-muted); font-size:12px; margin-top:24px; }
</style>
{% endblock %}

{% block content %}
<div class="st-wrap">
  <div class="st-hero">
    <span style="display:inline-block;background:#3ea6ff;color:#001;font-weight:700;font-size:12px;letter-spacing:.5px;padding:4px 12px;border-radius:999px;margin-bottom:12px;">🎬 BOTTUBE STUDIO</span>
    <h1>Pay RTC · Generate AI Media</h1>
    <p>Type a prompt, pick a mode, pay in RTC — video, image, or voice, rendered on our own pipeline. No gatekeepers.</p>
  </div>

  <div class="st-modes" role="tablist" aria-label="Generation mode">
    <button type="button" id="tab-video" class="st-mode active" data-mode="video" role="tab" aria-controls="mode-video" aria-selected="true" tabindex="0" onclick="stMode('video')">🎬 Video</button>
    <button type="button" id="tab-image" class="st-mode" data-mode="image" role="tab" aria-controls="mode-image" aria-selected="false" tabindex="-1" onclick="stMode('image')">🖼️ Image</button>
    <button type="button" id="tab-voice" class="st-mode" data-mode="voice" role="tab" aria-controls="mode-voice" aria-selected="false" tabindex="-1" onclick="stMode('voice')">🔊 Voice</button>
    <button type="button" id="tab-model" class="st-mode" data-mode="model" role="tab" aria-controls="mode-model" aria-selected="false" tabindex="-1" onclick="stMode('model')">🧊 3D</button>
    <button type="button" id="tab-i2v" class="st-mode" data-mode="i2v" role="tab" aria-controls="mode-i2v" aria-selected="false" tabindex="-1" onclick="stMode('i2v')">🎞️ Image→Video</button>
  </div>

  <div class="st-bal" id="st-bal">Checking your RTC balance…</div>

  <label for="st-prompt" class="sr-only">Video prompt description</label>
  <textarea class="st-prompt" id="st-prompt" maxlength="1000" placeholder="Describe what you want…"></textarea>

  <!-- VIDEO: seconds selector + 3 tiers -->
  <div id="mode-video" role="tabpanel" aria-labelledby="tab-video">
    <div class="st-seconds">
      <label for="sec-slider">Length: <strong id="sec-val">5</strong> s</label>
      <input type="range" id="sec-slider" min="3" max="8" value="5" step="1" oninput="stSeconds()">
      <span class="st-sec-note">longer = more RTC</span>
      <label style="color:var(--text-secondary);font-size:13px;margin-left:10px;">🔊 Audio:
        <select id="audio-mode" style="background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border);border-radius:6px;padding:2px 6px;">
          <option value="">Off</option><option value="music">🎵 Music</option><option value="ambient">🌫️ Ambient/SFX</option>
        </select></label>
    </div>
    <div class="tiers">
      {% for t in video_tiers %}
      <div class="tier t{{ loop.index0 }}" data-rps="{{ t.rtc_per_sec }}">
        <span class="tbadge">{{ t.badge }}</span>
        <h3>{{ t.name }}</h3>
        <p>{{ t.desc }}</p>
        <div class="price"><span class="pc">{{ '%.1f'|format(t.rtc_per_sec * 5) }}</span> RTC <span class="pps">({{ t.rtc_per_sec }}/s)</span></div>
        <button class="gen" data-tier="{{ t.key }}" data-rps="{{ t.rtc_per_sec }}" onclick="stGenerate('video', this.getAttribute('data-tier'))">Generate · <span class="btnc">{{ '%.1f'|format(t.rtc_per_sec * 5) }}</span> RTC</button>
      </div>
      {% endfor %}
    </div>
  </div>

  <!-- IMAGE -->
  <div class="st-single" id="mode-image" role="tabpanel" aria-labelledby="tab-image" style="display:none" hidden>
    <p style="color:var(--text-secondary);font-size:14px;margin-bottom:12px;">A single high-quality AI image (Gemini 2.5 Flash Image). Posted nowhere — yours to download.</p>
    <button class="gen" onclick="stGenerate('image')">Generate Image · <span class="price">{{ image_rtc }} RTC</span></button>
  </div>

  <!-- VOICE -->
  <div class="st-single" id="mode-voice" role="tabpanel" aria-labelledby="tab-voice" style="display:none" hidden>
    <p style="color:var(--text-secondary);font-size:14px;margin-bottom:12px;">Type up to ~600 characters; we voice it in the Sophia Elya XTTS voice.</p>
    <button class="gen" id="voice-btn" onclick="stGenerate('voice')">Generate Voice · <span class="price">{{ voice_rtc }} RTC</span></button>
  </div>

  <!-- 3D MODEL -->
  <div class="st-single" id="mode-model" role="tabpanel" aria-labelledby="tab-model" style="display:none" hidden>
    <p style="color:var(--text-secondary);font-size:14px;margin-bottom:12px;">Describe an object; we generate a downloadable 3D model (GLB) on our own TRELLIS pipeline. ~2 min.</p>
    <button class="gen" onclick="stGenerate('model')">Generate 3D Model · <span class="price">{{ model_rtc }} RTC</span></button>
    <div style="margin-top:12px;"><a href="/studio/models" style="color:var(--accent);font-weight:700;font-size:14px;">🧊 Browse the 3D model gallery →</a></div>
  </div>

  <!-- IMAGE -> VIDEO -->
  <div class="st-single" id="mode-i2v" role="tabpanel" aria-labelledby="tab-i2v" style="display:none" hidden>
    <p style="color:var(--text-secondary);font-size:14px;margin-bottom:12px;">Upload an image; Wan 2.2 animates it into video. Describe the motion in the prompt. Priced per second.</p>
    <label for="i2v-file" class="sr-only">Upload image for video animation</label>
    <input type="file" id="i2v-file" accept="image/*" style="margin-bottom:10px;color:var(--text-secondary);">
    <div class="st-seconds" style="margin:6px 0 10px;">
      <label for="sec-slider-i2v">Length: <strong id="sec-val-i2v">5</strong> s</label>
      <input type="range" id="sec-slider-i2v" min="3" max="8" value="5" step="1" oninput="stSecondsI2v()">
      <label style="color:var(--text-secondary);font-size:13px;margin-left:10px;">🔊 Audio:
        <select id="audio-mode-i2v" style="background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border);border-radius:6px;padding:2px 6px;">
          <option value="">Off</option><option value="music">🎵 Music</option><option value="ambient">🌫️ Ambient/SFX</option>
        </select></label>
    </div>
    <button class="gen" id="i2v-btn" onclick="stGenerate('i2v')">Animate Image · <span class="btnc-i2v">5</span> RTC</button>
  </div>

  <div class="st-status" id="st-status" role="status" aria-live="polite" aria-atomic="true"></div>
  <div class="st-result" id="st-result"></div>

  <div class="st-foot">
    Generation engine is pluggable — more backends soon. RTC powers it; no gatekeepers.
    Need RTC? <a href="/bridge/wrtc">Bridge credits</a>.
  </div>
</div>

<script>
(function () {
  var statusEl = document.getElementById("st-status");
  var resultEl = document.getElementById("st-result");
  var balEl = document.getElementById("st-bal");
  var promptEl = document.getElementById("st-prompt");
  var curMode = "video";
  var signedIn = false, voiceEnabled = true, i2vRate = 1.0;

  function allButtons(){ return document.querySelectorAll(".gen"); }
  function setBusy(b){ allButtons().forEach(function(x){ x.disabled = b; }); }
  function say(m){ statusEl.textContent = m == null ? "" : String(m); }
  function clearResult(){ resultEl.replaceChildren(); }
  function safeAmount(value) {
    var n = Number(value);
    return Number.isFinite(n) ? String(n) : "?";
  }
  function safeHttpUrl(value) {
    try {
      var url = new URL(String(value || ""), window.location.origin);
      if (url.protocol !== "http:" && url.protocol !== "https:") return "";
      return url.href;
    } catch (e) {
      return "";
    }
  }
  function safeSameOriginUrl(value) {
    var href = safeHttpUrl(value);
    if (!href) return "";
    try {
      return new URL(href).origin === window.location.origin ? href : "";
    } catch (e) {
      return "";
    }
  }
  function setBalance(value) {
    var strong = document.createElement("strong");
    strong.textContent = safeAmount(value) + " RTC";
    balEl.replaceChildren("Your balance: ", strong);
  }
  function setLoginPrompt() {
    var link = document.createElement("a");
    link.href = "/login";
    link.textContent = "log in";
    balEl.replaceChildren("Sign in to generate — ", link, ".");
  }
  function renderDownloadLink(url, label) {
    var wrap = document.createElement("div");
    wrap.style.marginTop = "8px";
    var link = document.createElement("a");
    link.href = url;
    link.download = "";
    link.textContent = label;
    wrap.appendChild(link);
    return wrap;
  }
  function renderImageResult(mediaUrl) {
    var img = document.createElement("img");
    img.src = mediaUrl;
    img.alt = "generated image";
    img.loading = "lazy";
    img.decoding = "async";
    img.width = 720;
    img.height = 720;
    resultEl.replaceChildren(img, renderDownloadLink(mediaUrl, "Download image →"));
  }
  function renderAudioResult(mediaUrl) {
    var audio = document.createElement("audio");
    audio.controls = true;
    audio.autoplay = true;
    audio.src = mediaUrl;
    resultEl.replaceChildren(audio, renderDownloadLink(mediaUrl, "Download audio →"));
  }
  function renderModelResult(modelUrl, formats) {
    var viewer = document.createElement("model-viewer");
    viewer.src = modelUrl;
    viewer.setAttribute("camera-controls", "");
    viewer.setAttribute("auto-rotate", "");
    viewer.setAttribute("ar", "");
    viewer.setAttribute("shadow-intensity", "1");
    viewer.style.cssText = "width:100%;height:360px;background:#111;border-radius:8px;";

    var wrap = renderDownloadLink(modelUrl, "Download GLB →");
    if (Array.isArray(formats) && formats.length) {
      var safeFormats = formats.map(function (item) { return String(item); }).join(", ");
      wrap.appendChild(document.createTextNode(" · formats: " + safeFormats));
    }
    resultEl.replaceChildren(viewer, wrap);
  }
  function sayWithWatchLink(watchUrl) {
    var href = safeSameOriginUrl(watchUrl);
    if (!href) {
      say("🎬 Done — check your channel.");
      return;
    }
    var link = document.createElement("a");
    link.href = href;
    link.textContent = "Watch your video →";
    statusEl.replaceChildren("🎬 Done! ", link);
  }

  window.stMode = function (mode) {
    curMode = mode;
    document.querySelectorAll(".st-mode").forEach(function(b){
      var selected = b.getAttribute("data-mode") === mode;
      b.classList.toggle("active", selected);
      b.setAttribute("aria-selected", String(selected));
      b.tabIndex = selected ? 0 : -1;
    });
    ["video","image","voice","model","i2v"].forEach(function(m){
      var panel = document.getElementById("mode-" + m);
      var selected = mode === m;
      panel.style.display = selected ? "" : "none";
      panel.hidden = !selected;
    });
    say(""); clearResult();
    var ph = {
      video: "Describe the video you want… e.g. 'a neon cajun bayou at night, fireflies over the water, cinematic'",
      image: "Describe the image… e.g. 'a vintage IBM POWER8 server glowing in a cathedral of voltage, dramatic light'",
      voice: "Type what Sophia should say… e.g. 'Welcome to Elyan Labs. Let me show you what we built.'",
      model: "Describe an object to model in 3D… e.g. 'a low-poly treasure chest, game-ready'",
      i2v: "Describe the motion… e.g. 'gentle wind, the character blinks and breathes, slow camera push-in'"
    };
    promptEl.placeholder = ph[mode] || "";
  };

  function loadInfo() {
    fetch("/api/studio/info", { credentials: "same-origin" })
      .then(function(r){ return r.json(); })
      .then(function(d){
        signedIn = !!d.signed_in;
        voiceEnabled = d.voice_enabled !== false;
        try { i2vRate = d.tiers.video.full_ai.rtc_per_sec || 1.0; window.stSecondsI2v && window.stSecondsI2v(); } catch (e) {}
        if (!signedIn) { setLoginPrompt(); setBusy(true); }
        else { setBalance(d.rtc_balance); }
        if (!voiceEnabled) {
          var vb = document.getElementById("voice-btn");
          if (vb) { vb.disabled = true; vb.textContent = "Voice temporarily unavailable"; }
        }
      })
      .catch(function(){ balEl.textContent = ""; });
  }
  loadInfo();

  window.stSeconds = function () {
    var s = parseInt((document.getElementById("sec-slider") || {}).value || "5", 10);
    var sv = document.getElementById("sec-val"); if (sv) sv.textContent = s;
    document.querySelectorAll("#mode-video .tier").forEach(function (card) {
      var rps = parseFloat(card.getAttribute("data-rps") || "0");
      var cost = Math.round(rps * s * 100) / 100;
      card.querySelectorAll(".pc, .btnc").forEach(function (el) { el.textContent = cost; });
    });
  };
  stSeconds();

  function _doGenerate(payload) {
    setBusy(true); clearResult();
    say((payload.type === "image" || payload.type === "voice") ? "Charging RTC and generating…" : "Charging RTC and starting generation…");
    fetch("/api/studio/generate", {
      method: "POST", headers: { "Content-Type": "application/json" },
      credentials: "same-origin", body: JSON.stringify(payload)
    }).then(function(r){ return r.json().then(function(d){ return { ok: r.ok, status: r.status, d: d }; }); })
      .then(function(res){
        if (!res.ok) {
          setBusy(false);
          if (res.status === 402) say("Not enough RTC — " + (res.d.balance||0) + " RTC, need " + res.d.needed + ".");
          else say(res.d.error || ("error " + res.status));
          return;
        }
        setBalance(res.d.new_balance);
        if (res.d.type === "image") {
          setBusy(false); say("✅ Charged " + res.d.charged_rtc + " RTC.");
          var imageUrl = safeHttpUrl(res.d.media_url);
          if (imageUrl) renderImageResult(imageUrl);
          else say("Image generated, but the returned media URL was invalid.");
        } else if (res.d.type === "voice") {
          setBusy(false); say("✅ Charged " + res.d.charged_rtc + " RTC.");
          var audioUrl = safeHttpUrl(res.d.media_url);
          if (audioUrl) renderAudioResult(audioUrl);
          else say("Voice generated, but the returned media URL was invalid.");
        } else {
          say("✅ Charged " + res.d.charged_rtc + " RTC. Generating… this can take a couple minutes.");
          var statusUrl = safeSameOriginUrl(res.d.status_url);
          if (statusUrl) poll(statusUrl);
          else { setBusy(false); say("Generation started, but the returned status URL was invalid."); }
        }
      })
      .catch(function(){ setBusy(false); say("Couldn't reach the studio. Try again."); });
  }

  window.stGenerate = function (mode, tier) {
    var prompt = (promptEl.value || "").trim();
    if (!prompt) { say("Type a prompt first."); return; }
    if (mode === "i2v") {
      var fi = document.getElementById("i2v-file");
      if (!fi || !fi.files || !fi.files[0]) { say("Choose an image to animate first."); return; }
      var reader = new FileReader();
      reader.onload = function () {
        _doGenerate({ type: "i2v", prompt: prompt, image: reader.result,
                      seconds: parseInt((document.getElementById("sec-slider-i2v")||{}).value || "5", 10),
                      audio: (document.getElementById("audio-mode-i2v")||{}).value || "" });
      };
      reader.readAsDataURL(fi.files[0]);
      return;
    }
    var payload = { type: mode, prompt: prompt };
    if (mode === "video") {
      payload.tier = tier;
      payload.seconds = parseInt((document.getElementById("sec-slider") || {}).value || "5", 10);
      payload.audio = (document.getElementById("audio-mode") || {}).value || "";
    }
    _doGenerate(payload);
  };

  window.stSecondsI2v = function () {
    var s = parseInt((document.getElementById("sec-slider-i2v") || {}).value || "5", 10);
    var sv = document.getElementById("sec-val-i2v"); if (sv) sv.textContent = s;
    var bc = document.querySelector(".btnc-i2v"); if (bc) bc.textContent = Math.round(i2vRate * s * 100) / 100;
  };

  function poll(url) {
    var tries = 0;
    var consecutiveFailures = 0;
    var pollInFlight = false;
    var finished = false;
    var maxFailures = 3;

    function finish(message) {
      if (finished) return;
      finished = true;
      clearInterval(iv);
      setBusy(false);
      if (message) say(message);
    }

    function recordFailure(detail) {
      if (finished) return;
      consecutiveFailures++;
      if (consecutiveFailures >= maxFailures) {
        finish("Job status is unavailable after " + maxFailures + " attempts. Your generation may still be running; check your channel before starting another charge.");
        return;
      }
      say("Job status temporarily unavailable (" + detail + "; retry " + consecutiveFailures + "/" + maxFailures + ").");
    }

    var iv = setInterval(function(){
      if (finished || pollInFlight) return Promise.resolve();
      if (tries >= 120) {
        finish("Still working — check your channel shortly.");
        return Promise.resolve();
      }
      tries++;
      pollInFlight = true;
      return fetch(url, { credentials: "same-origin" }).then(function(r){
        return r.json().catch(function(){ return null; }).then(function(d){
          return { httpOK: r.ok, status: r.status, body: d };
        });
      }).then(function(result){
        if (!result.httpOK) {
          recordFailure("HTTP " + result.status);
          return;
        }
        var d = result.body;
        if (!d || typeof d !== "object" || Array.isArray(d)) {
          recordFailure("invalid response");
          return;
        }
        consecutiveFailures = 0;
        if (d.model_url) {
          finish("🧊 Done! Charged successfully.");
          var modelUrl = safeHttpUrl(d.model_url);
          if (modelUrl) renderModelResult(modelUrl, d.formats);
          else say("3D model generated, but the returned model URL was invalid.");
        } else if (d.status === "completed" || d.video_id) {
          var watch = d.watch_url || (d.video_id ? ("/watch/" + d.video_id) : null);
          finish();
          watch ? sayWithWatchLink(watch) : say("🎬 Done — check your channel.");
        } else if (d.status === "failed" || d.error) {
          finish("Generation failed: " + (d.error || "unknown") + ". (RTC for failed jobs is refunded.)");
        } else {
          say("Generating… (" + (d.status || "working") + ")");
        }
      }).catch(function(){
        recordFailure("network error");
      }).finally(function(){
        pollInFlight = false;
      });
    }, 3000);
  }
})();
</script>
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
{% endblock %}