{% extends "base.html" %}
{% block title %}Admin - Esportes{% endblock %}
{% block extra_head %}
<style>
    .admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
    .admin-header h1 { font-size: 1.5em; font-weight: 700; }
    .form-card { background: var(--bg-surface); border-radius: var(--radius-md); padding: 24px; margin-bottom: 32px; border: 1px solid var(--border); }
    .form-card label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.85em; color: var(--text-secondary); }
    .form-card textarea { width: 100%; min-height: 300px; font-family: monospace; font-size: 0.85em; padding: 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg); color: var(--text-primary); resize: vertical; }
    .form-card input[type="date"], .form-card input[type="text"] { padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg); color: var(--text-primary); font-size: 0.9em; }
    .form-row { display: flex; gap: 16px; align-items: flex-end; margin-bottom: 16px; flex-wrap: wrap; }
    .form-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
    .event-table { width: 100%; border-collapse: collapse; }
    .event-table th { text-align: left; padding: 10px 12px; font-size: 0.8em; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); }
    .event-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 0.85em; vertical-align: middle; }
    .event-table tr:hover td { background: var(--bg-elevated); }
    .event-table .sport-cell { font-weight: 600; color: var(--primary); }
    .event-table .champ-cell { color: var(--text-secondary); }
    .event-table .time-cell { font-weight: 700; white-space: nowrap; }
    .event-table .channels-cell { display: flex; gap: 4px; flex-wrap: wrap; }
    .event-table .ch-tag { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: 0.75em; font-weight: 600; background: rgba(70,211,105,0.1); color: var(--green); }
    .event-table .ch-tag.missing { background: rgba(255,255,255,0.05); color: var(--text-muted); }
    .btn-sm { padding: 6px 14px; font-size: 0.8em; }
    .btn-danger { background: var(--primary); color: #fff; border: none; padding: 10px 18px; border-radius: var(--radius-md); font-size: 0.85em; font-weight: 600; cursor: pointer; }
    .btn-danger:hover { opacity: 0.9; }
    .btn-outline-danger { background: transparent; color: var(--primary); border: 1px solid rgba(229,9,20,0.3); padding: 10px 18px; border-radius: var(--radius-md); font-size: 0.85em; font-weight: 600; cursor: pointer; }
    .btn-outline-danger:hover { background: rgba(229,9,20,0.1); }
    .delete-form { display: inline; }
    .delete-btn { background: none; border: none; color: var(--primary); cursor: pointer; font-size: 0.85em; padding: 4px 8px; border-radius: var(--radius-sm); transition: var(--transition); }
    .delete-btn:hover { background: rgba(229,9,20,0.1); }
    .edit-btn { background: none; border: none; color: var(--gold); cursor: pointer; font-size: 0.85em; padding: 4px 8px; border-radius: var(--radius-sm); transition: var(--transition); }
    .edit-btn:hover { background: rgba(245,197,24,0.1); }
    .empty-state { text-align: center; padding: 40px 20px; color: var(--text-muted); }
    .format-hint { font-size: 0.8em; color: var(--text-muted); margin-top: 8px; line-height: 1.6; }
    .format-hint code { background: var(--bg); padding: 1px 6px; border-radius: 4px; font-size: 0.9em; }
    .nav-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; color: var(--text-muted); text-decoration: none; font-size: 0.85em; }
    .nav-back:hover { color: var(--text-primary); }
    .bulk-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 16px 0; margin-bottom: 16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .bulk-bar form { display: flex; gap: 8px; align-items: center; }
    .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1000; align-items: center; justify-content: center; }
    .modal-overlay.active { display: flex; }
    .modal { background: var(--bg-surface); border-radius: var(--radius-lg); padding: 32px; max-width: 520px; width: 90%; max-height: 90vh; overflow-y: auto; }
    .modal h2 { margin-bottom: 20px; }
    .modal .field { margin-bottom: 14px; }
    .modal .field label { display: block; font-weight: 600; font-size: 0.8em; color: var(--text-secondary); margin-bottom: 4px; }
    .modal .field input, .modal .field textarea { width: 100%; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg); color: var(--text-primary); font-size: 0.9em; }
    .modal .field textarea { min-height: 60px; resize: vertical; }
    .modal .modal-actions { display: flex; gap: 12px; margin-top: 20px; justify-content: flex-end; }
    @media (max-width: 768px) {
        .event-table { font-size: 0.8em; }
        .event-table td, .event-table th { padding: 8px 6px; }
        .modal { padding: 20px; }
    }
</style>
{% endblock %}
{% block content %}
<a href="{{ url_for('admin_panel') }}" class="nav-back">← Voltar ao Painel</a>
<div class="admin-header">
    <h1>🏆 Gerenciar Esportes</h1>
</div>

<div class="form-card">
    <form method="POST">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="form-row">
            <div>
                <label for="event_date">Data dos Eventos</label>
                <input type="date" name="event_date" id="event_date" value="{{ today }}" required>
            </div>
        </div>
        <label for="events_text">Eventos (formato texto)</label>
        <textarea name="events_text" id="events_text" placeholder="Cole os eventos aqui..."></textarea>
        <div class="format-hint">
            <strong>Formato:</strong><br>
            <code>Esporte</code><br>
            <code>&nbsp;&nbsp;Campeonato</code><br>
            <code>&nbsp;&nbsp;&nbsp;&nbsp;18h00, Time A x Time B, Canal1, Canal2</code><br>
            <code>&nbsp;&nbsp;&nbsp;&nbsp;18h00, Time A x Time B (1x0), Canal1</code><br>
            <code>&nbsp;&nbsp;&nbsp;&nbsp;10h00, Nome do Evento (sem times), Canal1</code>
            <p style="color:var(--text-muted); font-size:0.8em; margin-top:8px;">⏰ Horários em <strong>Brasília (BRT)</strong></p>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn" style="background:var(--green);color:#fff;">Importar Eventos</button>
        </div>
    </form>
</div>

<div class="bulk-bar">
    <form method="POST" action="{{ url_for('admin_esportes_delete_all') }}" onsubmit="return confirm('Deletar TODOS os eventos de todas as datas?')">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button type="submit" class="btn-danger">🗑️ Deletar Todos</button>
    </form>
    <form method="POST" action="{{ url_for('admin_esportes_delete_date') }}" onsubmit="return confirm('Deletar todos os eventos desta data?')">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="date" name="date" value="{{ today }}" style="padding:8px 12px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--bg); color:var(--text-primary); font-size:0.85em;">
        <button type="submit" class="btn-outline-danger">🗑️ Deletar Data</button>
    </form>
</div>

{% if events %}
<div style="overflow-x:auto;">
<table class="event-table">
    <thead>
        <tr>
            <th>Data</th>
            <th>Esporte</th>
            <th>Campeonato</th>
            <th>Horário (BRT)</th>
            <th>Evento</th>
            <th>Canais</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        {% for ev in events %}
        <tr>
            <td style="white-space:nowrap;">{{ ev.event_date.strftime('%d/%m') }}</td>
            <td class="sport-cell">{{ ev.sport }}</td>
            <td class="champ-cell">{{ ev.championship }}</td>
            <td class="time-cell">{{ ev.event_time }}</td>
            <td>{{ ev.team1 }}{% if ev.team2 %} vs {{ ev.team2 }}{% endif %}{% if ev.score %} ({{ ev.score }}){% endif %}</td>
            <td class="channels-cell">
                {% set ch_list = ev.channels|from_json %}
                {% for ch_name in ch_list %}
                <span class="ch-tag">{{ ch_name }}</span>
                {% endfor %}
            </td>
            <td style="white-space:nowrap;">
                <button class="edit-btn" onclick="openEditModal({{ ev.id }})">✏️</button>
                <form class="delete-form" method="POST" action="{{ url_for('admin_esportes_delete', event_id=ev.id) }}" onsubmit="return confirm('Deletar este evento?')">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="delete-btn">🗑️</button>
                </form>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
</div>
{% else %}
<div class="empty-state">
    <p>Nenhum evento cadastrado.</p>
</div>
{% endif %}

<div class="modal-overlay" id="editModal">
    <div class="modal">
        <h2>✏️ Editar Evento</h2>
        <form method="POST" id="editForm">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div class="field">
                <label>Data</label>
                <input type="date" name="event_date" id="edit_date">
            </div>
            <div class="field">
                <label>Esporte</label>
                <input type="text" name="sport" id="edit_sport" required>
            </div>
            <div class="field">
                <label>Campeonato</label>
                <input type="text" name="championship" id="edit_champ">
            </div>
            <div class="field">
                <label>Horário</label>
                <input type="text" name="event_time" id="edit_time" required>
            </div>
            <div class="field">
                <label>Time 1</label>
                <input type="text" name="team1" id="edit_team1">
            </div>
            <div class="field">
                <label>Time 2</label>
                <input type="text" name="team2" id="edit_team2">
            </div>
            <div class="field">
                <label>Placar</label>
                <input type="text" name="score" id="edit_score" placeholder="ex: 1x0">
            </div>
            <div class="field">
                <label>Canais (separados por vírgula)</label>
                <input type="text" name="channels" id="edit_channels" placeholder="ex: SPORTV, ESPN4">
            </div>
            <div class="modal-actions">
                <button type="button" class="btn btn-outline" onclick="closeEditModal()">Cancelar</button>
                <button type="submit" class="btn" style="background:var(--green);color:#fff;">Salvar</button>
            </div>
        </form>
    </div>
</div>

<script>
var eventsData = {{ events_data|tojson }};

function openEditModal(id) {
    var data = eventsData.find(function(e) { return e.id === id; });
    if (!data) return;
    document.getElementById('editForm').action = '/admin/esportes/edit/' + id;
    document.getElementById('edit_date').value = data.event_date;
    document.getElementById('edit_sport').value = data.sport;
    document.getElementById('edit_champ').value = data.championship;
    document.getElementById('edit_time').value = data.event_time;
    document.getElementById('edit_team1').value = data.team1;
    document.getElementById('edit_team2').value = data.team2;
    document.getElementById('edit_score').value = data.score;
    var ch = data.channels || [];
    document.getElementById('edit_channels').value = ch.join(', ');
    document.getElementById('editModal').classList.add('active');
}

function closeEditModal() {
    document.getElementById('editModal').classList.remove('active');
}

document.getElementById('editModal').addEventListener('click', function(e) {
    if (e.target === this) closeEditModal();
});
</script>
{% endblock %}