{% extends 'admin/custom_base.html' %}

{% block head %}
<style>
  .week-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.5rem; }
  @media (max-width:900px) { .week-grid { grid-template-columns:1fr; } }
  .week-card { background:var(--bg2); border:1px solid var(--border); border-radius:10px; overflow:hidden; transition:border-color .15s; }
  .week-card:hover { border-color:var(--purple); }
  .week-card.current { border-color:var(--purple); box-shadow:0 0 0 2px rgba(124,58,237,.18); }
  .week-card.has-override { border-color:var(--yellow,#f59e0b); }
  .week-head { display:flex; align-items:flex-start; gap:.75rem; padding:.85rem 1rem; cursor:pointer; user-select:none; }
  .week-num { font-size:1.5rem; font-weight:800; color:var(--purple-l); min-width:2.2rem; line-height:1; margin-top:.05rem; }
  .week-info { flex:1; min-width:0; }
  .week-dates { font-size:.72rem; color:var(--text3); margin-top:.15rem; }
  .week-challenge-title { font-weight:600; font-size:.88rem; color:var(--text); }
  .week-challenge-meta { font-size:.75rem; color:var(--text2); margin-top:.15rem; }
  .week-badges { display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.45rem; }
  .week-chevron { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-left:auto; transition:transform .22s; align-self:center; flex-shrink:0; }
  .week-chevron::before { content:''; width:7px; height:7px; border-right:1.5px solid var(--text3); border-bottom:1.5px solid var(--text3); transform:rotate(45deg); display:block; margin-top:-3px; }
  .week-card.expanded .week-chevron { transform:rotate(180deg); }
  .week-form { display:none; border-top:1px solid var(--border); padding:.85rem 1rem 1rem; background:var(--bg3); }
  .week-card.expanded .week-form { display:block; }
  .week-form-row { display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-end; margin-bottom:.6rem; }
  .week-form-row .form-group { margin:0; flex:1; min-width:80px; }
  .week-form-row .form-group label { font-size:.72rem; }
  .week-form-actions { display:flex; gap:.5rem; justify-content:flex-end; margin-top:.75rem; align-items:center; }
</style>
{% endblock %}

{% block body %}
<div class="container-fluid mt-3">
  <div class="page-header" style="margin-bottom:1.5rem">
    <h1>Weekly Challenges</h1>
    <p style="color:var(--text3);margin:0">Schedule challenges for the next 10 weeks. Click a week to expand and override.</p>
  </div>

  {% set rarity_names = {0:'Common',10:'Uncommon',20:'Rare',30:'Epic',50:'Legendary'} %}
  {% set rarity_badge = {0:'badge-gray',10:'badge-green',20:'badge-teal',30:'badge-purple',50:'badge-yellow'} %}

  <div class="week-grid">
    {% for w in weeks %}
    <div class="week-card {% if w.is_current %}current{% endif %} {% if w.override %}has-override{% endif %}" id="wc-{{ w.week_number }}">
      <div class="week-head" onclick="toggleWeek('wc-{{ w.week_number }}')">
        <div class="week-num">{{ '%02d' % w.week_number }}</div>
        <div class="week-info">
          <div class="week-challenge-title">
            {% if w.override and w.override.custom_title %}{{ w.override.custom_title }}
            {% elif w.override and w.override.challenge_id %}
              {{ all_challenges | selectattr('id', 'equalto', w.override.challenge_id) | map(attribute='title') | first | default(w.rotation_challenge.title) }}
            {% else %}{{ w.rotation_challenge.title }}{% endif %}
          </div>
          <div class="week-challenge-meta">
            {% set eff_xp = w.override.custom_reward_xp if w.override and w.override.custom_reward_xp else w.rotation_challenge.reward_xp %}
            {% set eff_target = w.override.custom_target if w.override and w.override.custom_target else w.rotation_challenge.target %}
            {{ eff_target }} games &bull; {{ eff_xp }} XP
          </div>
          <div class="week-badges">
            {% if w.is_current %}<span class="badge badge-green">Current</span>{% endif %}
            {% if w.override %}
              {% set r = w.override.custom_reward_rarity if w.override.custom_reward_rarity is not none else 0 %}
              <span class="badge {{ rarity_badge.get(r, 'badge-gray') }}">{{ rarity_names.get(r, r) }}</span>
              <span class="badge badge-yellow">Override</span>
            {% else %}
              {% set r = w.rotation_challenge.reward_rarity %}
              <span class="badge {{ rarity_badge.get(r, 'badge-gray') }}">{{ rarity_names.get(r, r) }}</span>
            {% endif %}
          </div>
          <div class="week-dates">{{ w.week_start }} → {{ w.week_end }}</div>
        </div>
        <span class="week-chevron"></span>
      </div>

      {% if SCOPE_ADMIN in scopes %}
      <div class="week-form">
        <form method="post">
          <input type="hidden" name="week_number" value="{{ w.week_number }}">
          <input type="hidden" name="action_type" value="save">
          <div class="week-form-row">
            <div class="form-group" style="flex:2;min-width:160px">
              <label>Challenge override</label>
              <select name="challenge_id">
                <option value="">— use rotation —</option>
                {% for ch in all_challenges %}
                <option value="{{ ch.id }}" {% if w.override and w.override.challenge_id == ch.id %}selected{% endif %}>{{ ch.title }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="form-group">
              <label>Target</label>
              <input type="number" name="custom_target" placeholder="—"
                     value="{{ w.override.custom_target if w.override and w.override.custom_target else '' }}"
                     style="width:70px" min="1" max="99">
            </div>
            <div class="form-group">
              <label>XP</label>
              <input type="number" name="custom_reward_xp" placeholder="—"
                     value="{{ w.override.custom_reward_xp if w.override and w.override.custom_reward_xp else '' }}"
                     style="width:80px" min="0">
            </div>
          </div>
          <div class="week-form-row">
            <div class="form-group">
              <label>Rarity</label>
              <select name="custom_reward_rarity" style="width:130px">
                <option value="0">Common</option>
                <option value="10" {% if w.override and w.override.custom_reward_rarity == 10 %}selected{% endif %}>Uncommon</option>
                <option value="20" {% if w.override and w.override.custom_reward_rarity == 20 %}selected{% endif %}>Rare</option>
                <option value="30" {% if w.override and w.override.custom_reward_rarity == 30 %}selected{% endif %}>Epic</option>
                <option value="50" {% if w.override and w.override.custom_reward_rarity == 50 %}selected{% endif %}>Legendary</option>
              </select>
            </div>
            <div class="form-group" style="flex:2;min-width:120px">
              <label>Custom title</label>
              <input type="text" name="custom_title" placeholder="Leave blank to use challenge title"
                     value="{{ w.override.custom_title if w.override and w.override.custom_title else '' }}"
                     maxlength="64">
            </div>
          </div>
          <div class="week-form-actions">
            {% if w.override %}
            <button type="submit" class="btn btn-red btn-sm" onclick="this.form.querySelector('[name=action_type]').value='clear'">Clear Override</button>
            {% endif %}
            <button type="submit" class="btn btn-primary btn-sm" onclick="this.form.querySelector('[name=action_type]').value='save'">Save</button>
          </div>
        </form>
      </div>
      {% endif %}
    </div>
    {% endfor %}
  </div>

  <div class="card">
    <div class="section-head"><h2>Available Challenges</h2></div>
    <div class="table-wrap">
      <table>
        <thead><tr><th>ID</th><th>Title</th><th>Activity</th><th>Target</th><th>Reward XP</th><th>Rarity</th></tr></thead>
        <tbody>
          {% for ch in all_challenges %}
          <tr>
            <td style="font-family:monospace;font-size:.78rem;color:var(--text3)">{{ ch.id }}</td>
            <td style="font-weight:600;font-size:.82rem">{{ ch.title }}</td>
            <td style="font-family:monospace;font-size:.72rem;color:var(--teal)">{{ ch.activity_guid[:8] }}…</td>
            <td>{{ ch.target }} games</td>
            <td style="color:var(--text2)">{{ ch.reward_xp }}</td>
            <td><span class="badge {{ rarity_badge.get(ch.reward_rarity, 'badge-gray') }}">{{ rarity_names.get(ch.reward_rarity, ch.reward_rarity) }}</span></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<script>
document.addEventListener('DOMContentLoaded', function () {
  {% for cat, msg in messages %}
  KR.toast({{ msg | tojson }}, '{{ 'success' if cat == 'success' else 'error' }}');
  {% endfor %}
});
</script>
{% endif %}
{% endwith %}

<script>
function toggleWeek(id) {
  const card = document.getElementById(id);
  card.classList.toggle('expanded');
}
</script>
{% endblock %}