{% extends "_base.html" %}
{% block title %}This Week · Cauldron{% endblock %}
{% block content %}

<div class="page-head">
  <div class="crumb">// plan · week of {{ week_start.strftime('%b %-d') }}</div>
  <h1>this <span class="accent">week</span></h1>
  <div class="lede">
    {% if plan.locked_at %}
      locked
      {% if plan.locked_reason == 'user' and locked_by_display %}
        by <span style="color: var(--green-bright);">{{ locked_by_display }}</span>
      {% else %}
        automatically
      {% endif %}
      · {{ plan.locked_at.strftime('%a %-I:%M %p') }}
    {% else %}
      pool has {{ pick_count }} pinned. ai generation lands in v0.3 — for now, lock when ready to mark this week done.
    {% endif %}
  </div>
</div>

<section class="panel {% if plan.locked_at %}purple{% else %}green{% endif %}">
  <div class="panel-head">
    <h2>state</h2>
    {% if plan.locked_at %}
      <span class="pill pill-mute">{{ 'auto-locked' if plan.locked_reason == 'auto' else 'locked' }}</span>
    {% else %}
      <span class="pill pill-ok">open</span>
    {% endif %}
    <span class="ctx">week of {{ week_start.strftime('%b %-d, %Y') }}</span>
  </div>

  {% if plan.locked_at %}
    <p>this week's plan is locked. it'll archive Sunday night and a fresh week opens Monday.</p>
    {% if plan.locked_reason == 'user' and plan.locked_by_sub == current_user_sub %}
      <p class="muted">🏆 you locked this one in.</p>
    {% endif %}
  {% else %}
    <p>nothing's stopping you from locking right now. or wait — generator's coming and the race is part of the deal.</p>
    <div class="btn-row">
      <button class="btn btn-purple" type="button" onclick="lockPlan(this)">🔒 lock this week</button>
      <a class="btn" href="/picks">view pool ({{ pick_count }})</a>
    </div>
  {% endif %}
</section>

<section class="panel">
  <div class="panel-head">
    <h2>scoreboard</h2>
    <span class="ctx">user-locked weeks only</span>
  </div>

  {% if streak and streak.count >= 2 %}
  <p style="font-size: 1.05em; margin: .2em 0 1em 0;">
    🔥 <strong style="color: var(--green-bright);">{{ streak.display_name }}</strong>
    on a <strong>{{ streak.count }}-week</strong> run.
  </p>
  {% endif %}

  {% if scoreboard and scoreboard|selectattr("wins")|list %}
  <table style="width: 100%; border-collapse: collapse; font-size: .95em;">
    <thead>
      <tr style="border-bottom: 1px solid var(--line);">
        <th style="text-align: left; color: var(--purple); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; font-family: var(--mono); font-weight: 600; padding: 6px 0;">member</th>
        <th style="text-align: right; color: var(--purple); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; font-family: var(--mono); font-weight: 600; padding: 6px 0;">wins</th>
        <th style="text-align: right; color: var(--purple); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; font-family: var(--mono); font-weight: 600; padding: 6px 0;">last</th>
      </tr>
    </thead>
    <tbody>
      {% for s in scoreboard %}
      <tr style="border-bottom: 1px solid var(--line-soft);">
        <td style="padding: 8px 0;">
          {{ loop.index }}.
          <strong style="color: {% if loop.first and s.wins %}var(--green-bright){% else %}var(--bone){% endif %};">
            {{ s.display_name or s.email.split('@')[0] }}
          </strong>
          {% if s.sub == current_user_sub %}<span class="muted">· you</span>{% endif %}
        </td>
        <td style="text-align: right; padding: 8px 0; font-family: var(--mono); color: var(--bone);">{{ s.wins or 0 }}</td>
        <td style="text-align: right; padding: 8px 0; font-family: var(--mono); color: var(--muted); font-size: .85em;">
          {{ s.last_win.strftime('%b %-d') if s.last_win else '—' }}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
    <p class="muted">nobody's locked a week yet. be the first.</p>
  {% endif %}
</section>

<script>
async function lockPlan(btn) {
  btn.disabled = true; btn.textContent = '…';
  try {
    const r = await fetch('/api/plan/lock', { method: 'POST' });
    if (!r.ok) throw new Error(r.status);
    location.reload();
  } catch (e) {
    btn.disabled = false; btn.innerHTML = '🔒 lock this week';
  }
}
</script>

{% endblock %}