{{ block content }}
{{ formfields }}

<!-- Dark background container -->
<div id="yt-container" style="position:fixed; top:0; left:0; width:100vw; height:100vh; background:#1a1a2e; z-index:9999;">

  <!-- YouTube player (hidden off-screen for meditation) -->
  <div id="yt-wrapper" style="position:absolute; top:0; left:0; width:100%; height:100%;">
    <div id="yt-player" style="width:100%; height:100%;"></div>
  </div>

  <!-- Transparent overlay to block YouTube UI elements -->
  <!-- <div style="position:absolute; top:0; left:0; width:100%; height:100%; z-index:10000;"></div> -->

  <!-- Meditation overlay with canvas blob -->
  <div id="breathing-overlay" style="display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:10001;">
    <canvas id="blob-canvas" style="position:absolute; top:0; left:0; width:100%; height:100%;"></canvas>
  </div>

</div>

{{ endblock }}

{{ block scripts }}
<script>
  var isMeditation = '{{ is_meditation }}' === 'yes';

  // ── Blob canvas (only initialised if meditation) ──────────
  function initBlob() {
    const canvas = document.getElementById('blob-canvas');
    const ctx    = canvas.getContext('2d');

    function resize() {
      canvas.width  = window.innerWidth;
      canvas.height = window.innerHeight;
    }
    resize();
    window.addEventListener('resize', resize);

    const BREATH_DURATION = 10000;

    function easeInOut(t) {
      return t < 0.5
        ? 4 * t * t * t
        : 1 - Math.pow(-2 * t + 2, 3) / 2;
    }

    function drawSmoothBlob(cx, cy, baseR, scale, morphPhase) {
      const numPoints = 8;
      const points = [];

      for (let i = 0; i < numPoints; i++) {
        const angle = (i / numPoints) * Math.PI * 2 - Math.PI / 2;
        const wobble = 1
          + Math.sin(i * 1.2 + morphPhase * 0.8) * 0.06
          + Math.sin(i * 2.1 + morphPhase * 0.5) * 0.03;
        const r = baseR * scale * wobble;
        points.push({
          x: cx + Math.cos(angle) * r,
          y: cy + Math.sin(angle) * r,
        });
      }

      ctx.beginPath();
      const len = points.length;
      for (let i = 0; i < len; i++) {
        const p0 = points[(i - 1 + len) % len];
        const p1 = points[i];
        const p2 = points[(i + 1) % len];
        const p3 = points[(i + 2) % len];

        const cp1x = p1.x + (p2.x - p0.x) / 6;
        const cp1y = p1.y + (p2.y - p0.y) / 6;
        const cp2x = p2.x - (p3.x - p1.x) / 6;
        const cp2y = p2.y - (p3.y - p1.y) / 6;

        if (i === 0) ctx.moveTo(p1.x, p1.y);
        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, p2.x, p2.y);
      }
      ctx.closePath();

      const r = baseR * scale;
      const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, r * 1.8);
      grad.addColorStop(0.0,  'rgba(190, 225, 240, 1.0)');
      grad.addColorStop(0.3,  'rgba(160, 210, 235, 0.85)');
      grad.addColorStop(0.6,  'rgba(130, 195, 225, 0.55)');
      grad.addColorStop(0.85, 'rgba(110, 180, 215, 0.20)');
      grad.addColorStop(1.0,  'rgba(100, 170, 210, 0.0)');
      ctx.fillStyle = grad;
      ctx.fill();
    }

    let start      = null;
    let morphPhase = 0;

    function render(timestamp) {
      if (!start) start = timestamp;
      const elapsed = timestamp - start;
      const t       = (elapsed % BREATH_DURATION) / BREATH_DURATION;
      const breathT = easeInOut(t < 0.5 ? t * 2 : (1 - t) * 2);
      const scale   = 0.75 + breathT * 0.35;
      morphPhase   += 0.004;

      const cx    = canvas.width  / 2;
      const cy    = canvas.height / 2;
      const baseR = Math.min(canvas.width, canvas.height) * 0.18;

      // Dark background matching yt-container
      ctx.fillStyle = '#1a1a2e';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      // Soft glow behind blob
      const glow = ctx.createRadialGradient(cx, cy, 0, cx, cy, baseR * 2.5);
      glow.addColorStop(0,   'rgba(170, 215, 235, 0.18)');
      glow.addColorStop(0.6, 'rgba(170, 215, 235, 0.06)');
      glow.addColorStop(1,   'rgba(170, 215, 235, 0.0)');
      ctx.fillStyle = glow;
      ctx.beginPath();
      ctx.arc(cx, cy, baseR * 2.5, 0, Math.PI * 2);
      ctx.fill();

      drawSmoothBlob(cx, cy, baseR, scale, morphPhase);
      requestAnimationFrame(render);
    }
    requestAnimationFrame(render);
  }

  // ── YouTube ───────────────────────────────────────────────
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  document.head.appendChild(tag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('yt-player', {
      videoId: '{{ curvid }}',
      playerVars: {
        autoplay: 1,
        controls: 1,
        disablekb: 1,
        fs: 0,
        modestbranding: 1,
        rel: 0,
        playsinline: 1,
        iv_load_policy: 3,
        showinfo: 0,
        autohide: 1,
      },
      events: {
        onReady: function(event) {
          event.target.playVideo();
          if (isMeditation) {
            document.getElementById('yt-wrapper').style.top = '-9999px';
            var overlay = document.getElementById('breathing-overlay');
            overlay.style.display = 'block';
            initBlob();
          }
        },
        onStateChange: function(event) {
          if (event.data === YT.PlayerState.ENDED) {
            console.log("Video ended — submitting form");
            document.querySelector('form').submit();
          }
        }
      }
    });
  }
</script>
{{ endblock }}