{% extends "base.html" %}
{% block title %}Wheel · {{ app_name }}{% endblock %}
{% block body %}
<h1>🎡 Wheel of Fortune <a class="gear" href="/settings#wheel" title="segments and cooldown">⚙</a></h1>
<section class="grid2 wheelgrid">
  <div class="card wheelcard">
    <div class="wheel-stage">
      <div class="pointer">▼</div>
      <svg id="wheel" viewBox="0 0 360 360" class="wheel">
        {% for s in segs %}
        <g class="wedge">
          <path d="{{ s.path }}" fill="{{ s.color }}" stroke="#0b0d14" stroke-width="2"/>
          <text x="{{ '%.1f'|format(s.tx) }}" y="{{ '%.1f'|format(s.ty) }}" transform="rotate({{ '%.1f'|format(s.mid - 90) }} {{ '%.1f'|format(s.tx) }} {{ '%.1f'|format(s.ty) }})" text-anchor="middle" dominant-baseline="middle">{{ s.label }}</text>
        </g>
        {% endfor %}
        <circle cx="180" cy="180" r="22" fill="#0b0d14" stroke="#e8e9f1" stroke-width="3"/>
      </svg>
    </div>
    <div class="spin-row">
      {% set blocked = (not st.active) or st.frozen or cooldown > 0 %}
      <button id="spin" class="primary big" data-cooldown="{{ cooldown|int }}" {% if blocked %}disabled{% endif %}>
        {%- if not st.active %}Lock up to spin{% elif st.frozen %}Frozen — unfreeze first{% elif cooldown > 0 %}Cooling down · {{ cooldown|dur }}{% else %}SPIN{% endif -%}
      </button>
      <div id="result" class="result" aria-live="polite"></div>
    </div>
    <p class="hint">Cooldown {{ cooldown_minutes }} min · {{ segs|length }} segments · edit them in <a href="/settings#wheel">settings</a>.</p>
  </div>
  <div class="card">
    <h3>History</h3>
    <ul class="events compact" id="spin-history">
      {% for e in history %}<li class="ev"><span class="ev-ico">🎡</span><div class="ev-body"><div class="ev-head"><b>{{ e.p.label }}</b>{% if e.delta_seconds %}<span class="delta {{ 'plus' if e.delta_seconds > 0 else 'minus' }}">{{ e.delta_seconds|sdur }}</span>{% endif %}{% if e.p.task_title %}<span class="badge">task: {{ e.p.task_title }}</span>{% endif %}</div></div><time>{{ e.ts|rel(now) }}</time></li>
      {% else %}<li class="hint">No spins yet.</li>{% endfor %}
    </ul>
  </div>
</section>
{% endblock %}
{% block scripts %}
<script>
(function () {
  const wheel = document.getElementById('wheel');
  const btn = document.getElementById('spin');
  const result = document.getElementById('result');
  const hist = document.getElementById('spin-history');
  let rot = 0, spinning = false;
  function cooldownLoop(sec) {
    if (sec <= 0) { btn.disabled = false; btn.textContent = 'SPIN'; return; }
    btn.disabled = true; btn.textContent = 'Cooling down · ' + Latch.dur(sec);
    setTimeout(() => cooldownLoop(sec - 1), 1000);
  }
  const initial = parseInt(btn.dataset.cooldown || '0', 10);
  if (initial > 0) cooldownLoop(initial);
  btn.addEventListener('click', async () => {
    if (spinning) return;
    spinning = true; btn.disabled = true; result.textContent = ''; result.className = 'result';
    let j;
    try {
      const r = await fetch('/wheel/spin', { method: 'POST', headers: { 'Accept': 'application/json' } });
      j = await r.json();
      if (!r.ok) throw new Error(j.error || 'The wheel refused.');
    } catch (e) {
      result.textContent = e.message; result.className = 'result err'; spinning = false; btn.disabled = false; return;
    }
    const seg = 360 / j.count;
    const mid = (j.index + 0.5) * seg + (Math.random() - 0.5) * seg * 0.6;
    const target = (360 - mid + 360) % 360;
    const cur = ((rot % 360) + 360) % 360;
    const delta = ((target - cur) % 360 + 360) % 360;
    rot += 360 * 6 + delta;
    wheel.style.transition = 'transform 5.2s cubic-bezier(.12,.72,.08,1)';
    wheel.style.transform = 'rotate(' + rot + 'deg)';
    setTimeout(() => {
      result.innerHTML = '<b>' + j.segment.label + '</b><span>' + j.text + '</span>';
      result.className = 'result show ' + j.segment.effect;
      const li = document.createElement('li'); li.className = 'ev';
      li.innerHTML = '<span class="ev-ico">🎡</span><div class="ev-body"><div class="ev-head"><b></b></div></div><time>just now</time>';
      li.querySelector('b').textContent = j.segment.label;
      const first = hist.querySelector('li'); if (first && first.classList.contains('hint')) first.remove();
      hist.prepend(li);
      Latch.resync();
      spinning = false;
      cooldownLoop(j.cooldown_seconds);
    }, 5300);
  });
})();
</script>
{% endblock %}