{% extends "admin/base.html" %}
{% block page_title %}{% if match %}ویرایش{% else %}ساخت{% endif %} مسابقه{% endblock %}
{% block content %}
<div class="card animate-in" style="max-width:800px">
  <h3 style="margin-bottom:1.5rem">{% if match %}ویرایش مسابقه{% else %}ساخت مسابقه جدید{% endif %}</h3>
  <form method="POST" id="matchForm">
    {% if match %}
    <input type="hidden" name="_method" value="PUT">
    {% endif %}
    <div class="form-row">
      <div class="form-group">
        <label>عنوان مسابقه *</label>
        <input class="input" name="title" value="{{ match.title if match else '' }}" required placeholder="مثال: CS2 Competitive Weekly #1">
      </div>
      <div class="form-group">
        <label>بازی *</label>
        <select class="input" name="game_id" id="gameSelect" onchange="loadModes()" required>
          <option value="">انتخاب بازی...</option>
          {% for g in games %}
          <option value="{{ g.id }}" {% if match and g.id==match.game_id %}selected{% endif %}>{{ g.icon }} {{ g.name }}</option>
          {% endfor %}
        </select>
      </div>
    </div>
    <div class="form-row">
      <div class="form-group">
        <label>مود *</label>
        <select class="input" name="mode_id" id="modeSelect" required>
          <option value="">ابتدا بازی را انتخاب کنید</option>
          {% for m in modes %}
          <option value="{{ m.id }}" {% if match and m.id==match.mode_id %}selected{% endif %}>{{ m.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="form-group">
        <label>وضعیت</label>
        <select class="input" name="status">
          <option value="upcoming" {% if not match or match.status=='upcoming' %}selected{% endif %}>آینده</option>
          <option value="live" {% if match and match.status=='live' %}selected{% endif %}>زنده</option>
          <option value="finished" {% if match and match.status=='finished' %}selected{% endif %}>پایان‌یافته</option>
          <option value="cancelled" {% if match and match.status=='cancelled' %}selected{% endif %}>لغو شده</option>
        </select>
      </div>
      <div class="form-group">
        <label>ریجن *</label>
        <select class="input" name="region" required>
          {% for rc, rlabel in [('ir','ایران'),('eu','اروپا'),('ea','آسیا'),('na','آمریکا'),('global','گلوبال')] %}
          <option value="{{ rc }}" {% if match and match.region==rc %}selected{% elif not match and rc=='global' %}selected{% endif %}>{{ rlabel }}</option>
          {% endfor %}
        </select>
        <small style="color:var(--text-muted);font-size:0.72rem;display:block;margin-top:0.3rem">فقط بازیکنان همین ریجن + Global می‌بینند</small>
      </div>
    </div>
    <div class="form-row">
      <div class="form-group">
        <label>شروع *</label>
        <input class="input" type="datetime-local" name="starts_at" value="{{ match.starts_at.strftime('%Y-%m-%dT%H:%M') if match else '' }}" required>
      </div>
      <div class="form-group">
        <label>پایان</label>
        <input class="input" type="datetime-local" name="ends_at" value="{{ match.ends_at.strftime('%Y-%m-%dT%H:%M') if match and match.ends_at else '' }}">
      </div>
    </div>
    <div class="form-row">
      <div class="form-group">
        <label>ورودی</label>
        <input class="input" type="number" name="entry_fee" value="{{ match.entry_fee if match else 0 }}" min="0">
      </div>
      <div class="form-group">
        <label>پول جوایز</label>
        <input class="input" type="number" name="prize_pool" value="{{ match.prize_pool if match else 0 }}" min="0">
      </div>
    </div>
    <div class="form-row">
      <div class="form-group">
        <label>ورودی</label>
        <input class="input" type="number" name="entry_fee" value="{{ match.entry_fee if match else 0 }}" min="0">
      </div>
      <div class="form-group">
        <label>پول جوایز</label>
        <input class="input" type="number" name="prize_pool" value="{{ match.prize_pool if match else 0 }}" min="0">
      </div>
    </div>
    <div class="form-row">
      <div class="form-group">
        <label>ظرفیت</label>
        <input class="input" type="number" name="capacity" value="{{ match.capacity if match else 50 }}" min="1">
      </div>
      <div class="form-group">
        <label>
          <input type="checkbox" name="team_mode" value="1" {% if match and match.team_mode %}checked{% endif %} style="width:auto;margin-left:0.5rem">
          حالت تیمی
        </label>
      </div>
    </div>

    <!-- MATCH RULES (Task 14: admin writes rules, players see them at registration) -->
    <div class="form-group" style="background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0.9rem 1rem;margin-bottom:0.5rem">
      <label style="font-weight:700;color:var(--amber)">📋 قوانین مسابقه (نوشته‌ی ادمین)</label>
      <textarea class="input" name="rules" rows="6" placeholder="مثال:&#10;۱. هر بازیکن فقط با یک اکانت مجاز است.&#10;۲. کد روم ۱۰ دقیقه قبل از شروع منتشر می‌شود.&#10;۳. قطع شدن بیش از ۵ دقیقه = باخت.&#10;۴. تقلب = حذف دائمی." style="margin-top:0.5rem;resize:vertical;min-height:120px;line-height:1.8">{{ match.rules if match and match.rules else '' }}</textarea>
      <small style="color:var(--text-muted);font-size:0.72rem;display:block;margin-top:0.45rem;line-height:1.7">
        این متن هنگام ثبت‌نام به بازیکن نمایش داده می‌شود (قبل از تأیید ثبت‌نام، فقط قوانین نمایش داده می‌شود). هر خط یک بند قانون.
      </small>
    </div>

    <!-- REGISTRATION WINDOW (Task 14 — flipped: OPENS at midnight) -->
    <div class="form-group" style="background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0.9rem 1rem;margin-bottom:0.5rem">
      <label style="font-weight:700;color:var(--neon)">⏰ زمان باز شدن ثبت‌نام</label>
      <select class="input" name="reg_open_until_start" style="margin-top:0.5rem">
        <option value="0" {% if not match or not match.reg_open_until_start %}selected{% endif %}>باز شدن رأس ساعت ۱۲ شب (نیمه‌شبِ قبل از روز مسابقه) — حالت پیش‌فرض</option>
        <option value="1" {% if match and match.reg_open_until_start %}selected{% endif %}>استثنا (انتخاب ادمین): بدون انتظار — ثبت‌نام از همین لحظه باز است تا شروع مسابقه</option>
      </select>
      <small style="color:var(--text-muted);font-size:0.72rem;display:block;margin-top:0.45rem;line-height:1.7">
        در حالت پیش‌فرض، ثبت‌نام رأس ساعت ۱۲ شبِ قبل از روز مسابقه (نیمه‌شب) باز می‌شود و تا لحظه‌ی شروع مسابقه باز می‌ماند؛ قبل از آن بازیکنان نمی‌توانند ثبت‌نام کنند.<br>
        مسابقه‌ای که زمانش رد شده باشد در هیچ حالتی قابل ثبت‌نام نیست.
      </small>
    </div>

    {% if match %}
    <!-- CREDENTIALS SECTION -->
    <div class="credential-box">
      <h4 style="color:var(--primary);margin-bottom:1rem">مدیریت کد و رمز روم</h4>
      <div class="form-row">
        <div class="form-group">
          <label>کد روم</label>
          <input class="input" name="room_code" value="{{ match.room_code or '' }}" placeholder="کد ورود به روم">
        </div>
        <div class="form-group">
          <label>رمز روم</label>
          <input class="input" name="room_password" value="{{ match.room_password or '' }}" placeholder="رمز ورود به روم">
        </div>
      </div>
      <button type="submit" name="publish" value="1" class="btn btn-primary btn-sm" onclick="this.form.action='{{ url_for('admin.match_publish', mid=match.id) }}'">
        انتشار کد و رمز
      </button>
      {% if match.credentials_published %}
      <div style="margin-top:0.8rem;padding:0.8rem;background:rgba(140,100,235,0.08);border-radius:var(--radius-sm);font-family:monospace">
        <div style="color:var(--text-muted);font-size:0.8rem;margin-bottom:0.3rem">کد منتشر شده:</div>
        <div style="color:var(--primary);font-size:1.1rem">کد: {{ match.room_code or '—' }}  رمز: {{ match.room_password or '—' }}</div>
      </div>
      {% endif %}
    </div>
    {% endif %}

    <!-- SLOT CONFIGURATION -->
    <div class="card animate-in" style="margin-bottom:1.5rem">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem">
        <h4 style="margin:0;color:var(--neon)">پیکربندی اسلاتها (جایگاه بازیکنان)</h4>
        <button type="button" class="btn btn-outline btn-sm" onclick="addSlotGroup()">+ افزودن گروه اسلات</button>
      </div>
      <p style="font-size:0.8rem;color:var(--text-muted);margin-bottom:1rem">Define multiple slot groups (e.g., City, Normal). Each group has its own slots.</p>

      <!-- Quick Config: 8 slots per row, Team layout -->
      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem;padding:1rem;background:var(--surface2);border-radius:var(--r);border:1px solid var(--border)">
        <div class="form-group">
          <label>تعداد تیم‌ها</label>
          <input class="input" type="number" id="quickTeams" value="2" min="2" max="8" style="width:100%">
        </div>
        <div class="form-group">
          <label>اسلات در هر ردیف</label>
          <input class="input" type="number" id="quickSlotsPerRow" value="8" min="1" max="16" style="width:100%">
        </div>
        <div class="form-group">
          <label>بازیکن در هر اسلات</label>
          <input class="input" type="number" id="quickPlayersPerSlot" value="1" min="1" max="5" style="width:100%">
        </div>
      </div>
      <button type="button" class="btn btn-outline btn-sm" onclick="generateQuickLayout()" style="width:100%;margin-bottom:1rem">تولید چیدمان تیمی</button>

      <div id="slotGroupsContainer">
        <!-- Groups will be rendered here -->
      </div>

      <button type="button" class="btn btn-ghost btn-sm" onclick="addSlotGroup()" style="width:100%;margin-top:0.75rem">
        افزودن گروه اسلات جدید
      </button>

      <!-- Live Preview -->
      <div style="margin-top:1.5rem;padding:1rem;background:var(--surface2);border-radius:var(--r)">
        <div style="font-size:0.75rem;color:var(--text-muted);margin-bottom:0.75rem">پیش‌نمایش زنده:</div>
        <div id="slotPreviewGrid" style="display:flex;flex-wrap:wrap;gap:0.5rem"></div>
      </div>
      <input type="hidden" name="slot_layout_json" id="slotLayoutJson" value="">
    </div>

    <div class="flex" style="gap:0.8rem;margin-top:2rem">
      <button type="submit" name="save" value="1" class="btn btn-primary" style="flex:1;justify-content:center;padding:1rem;font-size:1.1rem">
        {% if match %}ذخیره تغییرات{% else %}ساخت مسابقه{% endif %}
      </button>
      <a href="{{ url_for('admin.matches_list') }}" class="btn btn-outline">انصراف</a>
    </div>
  </form>
</div>

<script>
function loadModes(){
  const gid=document.getElementById('gameSelect').value;
  const sel=document.getElementById('modeSelect');
  sel.innerHTML='<option value="">انتخاب مود...</option>';
  if(!gid)return;
  fetch('/api/game/modes/'+gid).then(r=>r.json()).then(modes=>{
    modes.forEach(m=>{ sel.innerHTML+=`<option value="${m.id}">${m.name}</option>`; });
  });
}
{% if match and match.mode_id %}
loadModes();
{% endif %}

/* Multi-Group Slot Config */
let slotGroupCounter = 0;
const DEFAULT_GROUPS = {{ sl.groups if sl and sl.groups else '[]' }};

function renderSlotGroups() {
  const container = document.getElementById('slotGroupsContainer');
  container.innerHTML = '';
  slotGroupCounter = 0;
  
  const groups = DEFAULT_GROUPS.length > 0 ? DEFAULT_GROUPS : [{name:'',slots:10,players_per_slot:1}];
  
  groups.forEach((g, i) => {
    addSlotGroupDOM(container, g.name, g.slots, g.players_per_slot || 1);
  });
  updateSlotPreview();
}

function addSlotGroup() {
  const container = document.getElementById('slotGroupsContainer');
  addSlotGroupDOM(container, '', 10, 1);
  updateSlotPreview();
}

function generateQuickLayout() {
  const teams = parseInt(document.getElementById('quickTeams').value) || 2;
  const slotsPerRow = parseInt(document.getElementById('quickSlotsPerRow').value) || 8;
  const playersPerSlot = parseInt(document.getElementById('quickPlayersPerSlot').value) || 1;
  
  const container = document.getElementById('slotGroupsContainer');
  container.innerHTML = '';
  slotGroupCounter = 0;
  
  for(let t = 1; t <= teams; t++) {
    const groupName = teams <= 2 ? (t === 1 ? 'تیم ۱' : 'تیم ۲') : 'تیم ' + t;
    addSlotGroupDOM(container, groupName, slotsPerRow, playersPerSlot);
  }
  updateSlotPreview();
}

function addSlotGroupDOM(container, name, slots, playersPerSlot) {
  const id = slotGroupCounter++;
  const div = document.createElement('div');
  div.className = 'slot-group-card';
  div.style.cssText = 'background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:1rem;margin-bottom:0.75rem;position:relative';
  div.id = `slotGroup_${id}`;
  div.innerHTML = `
    <button type="button" onclick="removeSlotGroup(${id})" style="position:absolute;top:0.5rem;left:0.5rem;background:none;border:none;color:var(--pink);cursor:pointer;font-size:1.1rem" title="حذف گروه">✕</button>
    <div class="form-row" style="margin-bottom:0">
      <div class="form-group" style="flex:1">
        <label>نام گروه</label>
        <input class="input slot-group-name" value="${name}" placeholder="مثال: City / Normal" oninput="updateSlotPreview()">
      </div>
      <div class="form-group" style="width:120px">
        <label>تعداد اسلات</label>
        <input class="input slot-group-slots" type="number" value="${slots}" min="1" max="100" oninput="updateSlotPreview()" onchange="updateSlotPreview()">
      </div>
      <div class="form-group" style="width:120px">
        <label>بازیکن در هر اسلات</label>
        <input class="input slot-group-pps" type="number" value="${playersPerSlot}" min="1" max="10" oninput="updateSlotPreview()" onchange="updateSlotPreview()">
      </div>
    </div>
  `;
  container.appendChild(div);
}

function removeSlotGroup(id) {
  const el = document.getElementById(`slotGroup_${id}`);
  if(el) el.remove();
  updateSlotPreview();
}

function updateSlotPreview() {
  const groups = [];
  document.querySelectorAll('.slot-group-card').forEach(card => {
    const name = card.querySelector('.slot-group-name')?.value || '';
    const slots = parseInt(card.querySelector('.slot-group-slots')?.value) || 0;
    const pps = parseInt(card.querySelector('.slot-group-pps')?.value) || 1;
    if(name && slots > 0) groups.push({name, slots, players_per_slot: pps});
  });
  
  document.getElementById('slotLayoutJson').value = JSON.stringify({groups});
  
  const grid = document.getElementById('slotPreviewGrid');
  grid.innerHTML = '';
  let offset = 0;
  groups.forEach(g => {
    const label = document.createElement('div');
    label.style.cssText = 'width:100%;font-size:0.75rem;color:var(--text-muted);margin-bottom:0.25rem;margin-top:' + (offset > 0 ? '0.5rem' : '0');
    label.textContent = `${g.name}: ${g.slots} اسلات × ${g.players_per_slot} نفر`;
    grid.appendChild(label);
    
    for(let i = 0; i < Math.min(g.slots, 20); i++) {
      const cell = document.createElement('div');
      cell.style.cssText = `width:28px;height:28px;border-radius:4px;background:rgba(140,100,235,0.1);border:1px solid rgba(140,100,235,0.3);display:flex;align-items:center;justify-content:center;font-size:0.65rem;color:var(--neon);font-family:'Orbitron'`;
      cell.textContent = offset + i + 1;
      grid.appendChild(cell);
    }
    if(g.slots > 20) {
      const more = document.createElement('span');
      more.style.cssText = 'font-size:0.7rem;color:var(--text-muted)';
      more.textContent = `+${g.slots - 20}...`;
      grid.appendChild(more);
    }
    offset += g.slots;
  });
  if(groups.length === 0) {
    grid.innerHTML = '<span style="color:var(--text-muted);font-size:0.8rem">گروه اسلات اضافه کنید</span>';
  }
}

document.addEventListener('DOMContentLoaded', renderSlotGroups);
</script>
{% endblock %}