<div class="section-title">
  <h1><%= torneo.nombre %></h1>
  <a class="btn btn-ghost btn-sm" href="/admin">← Volver</a>
</div>

<div class="stats" style="margin-bottom:20px">
  <div class="stat"><div class="label">Estado</div>
    <div class="value"><span class="badge badge-<%= torneo.estado %>"><%= fmt.estadoLabel(torneo.estado) %></span></div></div>
  <div class="stat"><div class="label">Jackpot</div>
    <div class="value"><%= fmt.dinero(jackpot.total, torneo.moneda) %></div></div>
  <div class="stat"><div class="label">Quinielas activas</div>
    <div class="value"><%= jackpot.cantidad %></div></div>
</div>

<!-- Cambiar estado -->
<section class="card">
  <h2>Estado del torneo</h2>
  <form action="/admin/torneos/<%= torneo.id %>/estado" method="post" class="row" style="align-items:flex-end">
    <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
    <div class="field" style="margin:0">
      <label for="estado">Cambiar a</label>
      <select id="estado" name="estado">
        <% ['config','abierto','en_curso','cerrado'].forEach(function (e) { %>
          <option value="<%= e %>" <%= torneo.estado === e ? 'selected' : '' %>><%= fmt.estadoLabel(e) %></option>
        <% }); %>
      </select>
    </div>
    <div><button class="btn" type="submit">Actualizar estado</button></div>
  </form>
  <p class="muted" style="margin-top:10px;font-size:.85rem">
    <strong>config</strong>: no visible · <strong>abierto</strong>: admite compras y pronósticos ·
    <strong>en curso</strong>: solo pronósticos de partidos no iniciados · <strong>cerrado</strong>: finalizado.
  </p>
</section>

<!-- Configuración -->
<section class="card">
  <h2>Configuración</h2>
  <form action="/admin/torneos/<%= torneo.id %>" method="post">
    <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
    <div class="field">
      <label for="cnombre">Nombre</label>
      <input type="text" id="cnombre" name="nombre" value="<%= torneo.nombre %>" />
    </div>
    <div class="row">
      <div class="field">
        <label for="precio">Precio por quiniela</label>
        <input type="number" step="0.01" id="precio" name="precio_quiniela" value="<%= torneo.precio_quiniela %>" />
      </div>
      <div class="field">
        <label for="moneda">Moneda</label>
        <input type="text" id="moneda" name="moneda" value="<%= torneo.moneda %>" />
      </div>
    </div>
    <div class="row">
      <div class="field">
        <label for="exacto">Puntos marcador exacto</label>
        <input type="number" id="exacto" name="pts_marcador_exacto" value="<%= torneo.pts_marcador_exacto %>" />
      </div>
      <div class="field">
        <label for="ganador">Puntos acertar ganador</label>
        <input type="number" id="ganador" name="pts_ganador" value="<%= torneo.pts_ganador %>" />
      </div>
      <div class="field">
        <label for="comision">Comisión / casa (%)</label>
        <input type="number" step="0.01" id="comision" name="comision_pct" value="<%= torneo.comision_pct %>" />
      </div>
    </div>
    <button class="btn" type="submit">Guardar configuración</button>
  </form>
</section>

<!-- Reparto -->
<section class="card">
  <h2>Esquema de reparto del jackpot</h2>
  <form action="/admin/torneos/<%= torneo.id %>/reparto" method="post">
    <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
    <table>
      <thead><tr><th>Posición</th><th>Porcentaje (%)</th></tr></thead>
      <tbody>
        <% var filas = reparto.length ? reparto : [{posicion:1,porcentaje:60},{posicion:2,porcentaje:30},{posicion:3,porcentaje:10}]; %>
        <% for (var i = 0; i < 5; i++) { var r = filas[i] || {posicion:i+1, porcentaje:''}; %>
          <tr>
            <td><input type="number" name="posicion" value="<%= r.posicion %>" min="1" /></td>
            <td><input type="number" step="0.01" name="porcentaje" value="<%= r.porcentaje %>" /></td>
          </tr>
        <% } %>
      </tbody>
    </table>
    <p class="muted" style="font-size:.85rem">Deja en blanco las posiciones que no uses. La suma de porcentajes debería dar 100.</p>
    <button class="btn" type="submit">Guardar reparto</button>
  </form>
</section>

<!-- Fases -->
<section class="card">
  <h2>Fases</h2>
  <form action="/admin/torneos/<%= torneo.id %>/fases" method="post" class="row" style="align-items:flex-end">
    <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
    <div class="field" style="margin:0"><label>Nombre</label>
      <input type="text" name="nombre" placeholder="Fase de grupos J1" required /></div>
    <div class="field" style="margin:0;max-width:110px"><label>Orden</label>
      <input type="number" name="orden" value="<%= fases.length %>" /></div>
    <div><button class="btn" type="submit">Agregar</button></div>
  </form>
  <% if (fases.length) { %>
    <ul style="margin-top:14px">
      <% fases.forEach(function (f) { %><li><%= f.orden %>. <%= f.nombre %></li><% }); %>
    </ul>
  <% } %>
</section>

<!-- Partidos -->
<section class="card">
  <h2>Partidos</h2>
  <form action="/admin/torneos/<%= torneo.id %>/partidos" method="post">
    <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
    <div class="row">
      <div class="field"><label>Local</label><input type="text" name="equipo_local" required /></div>
      <div class="field"><label>Visitante</label><input type="text" name="equipo_visitante" required /></div>
    </div>
    <div class="row">
      <div class="field"><label>Fase</label>
        <select name="fase_id">
          <option value="">— sin fase —</option>
          <% fases.forEach(function (f) { %><option value="<%= f.id %>"><%= f.nombre %></option><% }); %>
        </select>
      </div>
      <div class="field"><label>Inicio (deadline)</label>
        <input type="datetime-local" name="inicia_en" required /></div>
    </div>
    <button class="btn" type="submit">Agregar partido</button>
  </form>

  <hr />

  <!-- Carga masiva -->
  <h3 style="margin-bottom:6px">⚡ Carga masiva (pegar varios)</h3>
  <p class="muted" style="font-size:.85rem;margin-top:0">
    Una línea por partido, con columnas <strong>Fase, Local, Visitante, Fecha y hora</strong>
    separadas por coma, <code>|</code> o tabulador (puedes copiar/pegar desde Excel).
    La fase es opcional; las fases nuevas se crean solas. Fecha: <code>AAAA-MM-DD HH:MM</code>.
    <a href="/plantilla-partidos.csv" download>Descargar plantilla CSV</a>.
  </p>
  <form action="/admin/torneos/<%= torneo.id %>/partidos/masivo" method="post">
    <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
    <div class="field">
      <textarea name="datos" rows="7" style="width:100%;font-family:monospace;font-size:.85rem"
        placeholder="Fase de grupos J1, México, Polonia, 2026-06-11 18:00&#10;Fase de grupos J1, Argentina, Arabia Saudita, 2026-06-11 21:00"></textarea>
    </div>
    <button class="btn" type="submit">Cargar partidos</button>
  </form>

  <hr />

  <% if (partidos.length === 0) { %>
    <p class="muted">Sin partidos todavía.</p>
  <% } else { %>
    <table>
      <thead><tr><th>Fase</th><th>Partido</th><th>Inicio</th><th>Resultado</th><th></th></tr></thead>
      <tbody>
        <% partidos.forEach(function (p) { %>
          <tr>
            <td class="muted"><%= p.fase_nombre || '—' %></td>
            <td><%= p.equipo_local %> vs <%= p.equipo_visitante %></td>
            <td class="muted"><%= fmt.fecha(p.inicia_en) %></td>
            <td>
              <form action="/admin/partidos/<%= p.id %>/resultado" method="post" class="inline">
                <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
                <input class="score-input" type="number" min="0" name="goles_local"
                       value="<%= p.goles_local != null ? p.goles_local : '' %>" />
                <span>-</span>
                <input class="score-input" type="number" min="0" name="goles_visitante"
                       value="<%= p.goles_visitante != null ? p.goles_visitante : '' %>" />
                <button class="btn btn-sm btn-green" type="submit">Guardar</button>
                <% if (p.estado === 'finalizado') { %><span class="badge badge-finalizado">final</span><% } %>
              </form>
            </td>
            <td style="white-space:nowrap">
              <a class="btn btn-sm btn-ghost" href="/admin/partidos/<%= p.id %>/editar">Editar</a>
              <form action="/admin/partidos/<%= p.id %>/eliminar" method="post" class="inline"
                    onsubmit="return confirm('¿Eliminar <%= p.equipo_local %> vs <%= p.equipo_visitante %>?');">
                <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
                <button class="btn btn-sm btn-red" type="submit">Borrar</button>
              </form>
            </td>
          </tr>
        <% }); %>
      </tbody>
    </table>
  <% } %>
</section>

<p class="center"><a class="btn btn-ghost" href="/admin/torneos/<%= torneo.id %>/reparto">Ver ranking y reparto →</a></p>
