{% extends "base.html" %}
{% block title %}Admin - Configurações M3U{% endblock %}
{% block extra_head %}
<style>
    .config-page {
        max-width: 700px;
    }
    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text-muted);
        text-decoration: none;
        font-size: 0.9em;
        font-weight: 500;
        margin-bottom: 20px;
    }
    .back-link:hover { color: var(--text-primary); }
    .config-header h1 {
        font-size: 1.5em;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 24px;
    }
    .config-form {
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        padding: 28px;
        border: 1px solid var(--border);
        margin-bottom: 24px;
    }
    .form-group {
        margin-bottom: 20px;
    }
    .form-group:last-child { margin-bottom: 0; }
    .form-group label {
        display: block;
        font-size: 0.8em;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
        font-weight: 500;
    }
    .form-group input[type="text"] {
        width: 100%;
        padding: 12px 14px;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        color: var(--text-primary);
        font-size: 0.85em;
        font-family: monospace;
        transition: var(--transition);
    }
    .form-group input[type="number"] {
        width: 100px;
        padding: 12px 14px;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        color: var(--text-primary);
        font-size: 0.9em;
        transition: var(--transition);
    }
    .form-group input:focus {
        outline: none;
        border-color: var(--text-secondary);
    }
    .form-row {
        display: flex;
        gap: 24px;
        align-items: flex-end;
        flex-wrap: wrap;
    }
    .form-row .form-group { flex: 1; min-width: 200px; }
    .checkbox-group {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 0;
    }
    .checkbox-group input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: var(--primary);
    }
    .checkbox-group label {
        color: var(--text-primary);
        font-size: 0.9em;
        margin-bottom: 0;
    }
    .form-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }
    .status-card {
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 20px;
    }
    .status-card h3 {
        color: var(--primary);
        font-size: 1em;
        font-weight: 600;
        margin-bottom: 16px;
    }
    .status-row {
        display: flex;
        gap: 8px;
        margin-bottom: 8px;
        font-size: 0.85em;
    }
    .status-row:last-child { margin-bottom: 0; }
    .status-label { color: var(--text-muted); }
    .status-value { color: var(--text-secondary); }
    .status-value.active { color: var(--green); }
    .status-value.inactive { color: var(--primary); }
    .status-value.mono {
        font-family: monospace;
        font-size: 0.9em;
        word-break: break-all;
    }
    @media (max-width: 768px) {
        .config-page {
            max-width: 100%;
        }
        .config-header h1 {
            font-size: 1.3em;
        }
        .config-form {
            padding: 20px;
        }
        .form-group input[type="text"],
        .form-group input[type="number"] {
            padding: 10px 12px;
            font-size: 0.85em;
        }
        .form-row {
            flex-direction: column;
            gap: 16px;
        }
        .form-row .form-group {
            min-width: 100%;
        }
        .form-actions {
            flex-direction: column;
        }
        .form-actions .btn {
            width: 100%;
            justify-content: center;
        }
        .status-card {
            padding: 16px;
        }
        .status-row {
            flex-direction: column;
            gap: 4px;
        }
    }
    @media (max-width: 480px) {
        .config-header h1 {
            font-size: 1.1em;
        }
        .config-form {
            padding: 16px;
        }
    }
</style>
{% endblock %}
{% block content %}
<div class="config-page">
    <a href="{{ url_for('admin_panel') }}" class="back-link">← Voltar ao Painel</a>

    <div class="config-header">
        <h1>Configurações M3U</h1>
    </div>

    <form method="POST" class="config-form">
        <div class="form-group">
            <label>URLs M3U / Credenciais (uma por linha)</label>
            <textarea name="m3u_urls" rows="8" style="width:100%; padding:12px 14px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); color:var(--text-primary); font-size:0.82em; font-family:monospace; resize:vertical;">{{ (settings.get('m3u_urls') or [settings.get('m3u_url', '')])|join('\n') }}</textarea>
            <small style="display:block; margin-top:8px; color:var(--text-muted); line-height:1.5;">O catálogo é importado pela primeira lista. Durante cada reprodução, o proxy usa uma credencial diferente para cada sessão ativa quando houver contas livres. Canais, filmes e séries continuam unificados no mesmo catálogo.</small>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label>Intervalo de Atualização M3U (minutos)</label>
                <input type="number" name="update_interval_minutes" value="{{ settings.get('update_interval_minutes', 5) }}" min="1" max="1440">
            </div>
            <div class="form-group">
                <div class="checkbox-group">
                    <input type="checkbox" name="auto_update" id="autoUpdate" {% if settings.auto_update %}checked{% endif %}>
                    <label for="autoUpdate">Atualização automática M3U</label>
                </div>
            </div>
        </div>

        <div style="border-top: 1px solid var(--border); margin: 16px 0; padding-top: 16px;">
            <div class="form-group">
                <label>URL do EPG / Guia de Programas</label>
                <input type="text" name="epg_url" value="{{ settings.get('epg_url', '') }}">
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label>Intervalo de Atualização EPG / Guia (minutos)</label>
                    <input type="number" name="epg_update_interval_minutes" value="{{ settings.get('epg_update_interval_minutes', 5) }}" min="1" max="1440">
                </div>
                <div class="form-group">
                    <div class="checkbox-group">
                        <input type="checkbox" name="epg_auto_update" id="epgAutoUpdate" {% if settings.get('epg_auto_update', True) %}checked{% endif %}>
                        <label for="epgAutoUpdate">Atualização automática EPG</label>
                    </div>
                </div>
            </div>
        </div>

        <div style="border-top: 1px solid var(--border); margin: 16px 0; padding-top: 16px;">
            <div class="form-row">
                <div class="form-group">
                    <label>Horas Gratuitas por Dia</label>
                    <input type="number" name="free_daily_hours" value="{{ settings.get('free_daily_hours', 4) }}" min="0.5" max="24" step="0.5">
                </div>
                <div class="form-group" style="justify-content:flex-end; display:flex; padding-top:22px;">
                    <span style="color:var(--text-muted); font-size:0.85em;">Tempo diário para usuários free</span>
                </div>
            </div>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn">Salvar Configurações</button>
            <button type="button" id="btn-force-m3u" class="btn btn-outline" onclick="forceM3U()">Forçar Atualização M3U</button>
            <button type="button" id="btn-force-epg" class="btn btn-outline" style="border-color:rgba(245,197,24,0.3); color:var(--gold);" onclick="forceEPG()">📺 Atualizar EPG</button>
        </div>
    </form>

    <!-- Progress Bar -->
    <div id="progress-panel" class="config-form" style="margin-top:24px; display:none;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
            <h3 id="progress-title" style="color:var(--text-primary); font-size:1.05em; font-weight:600;">⏳ Atualizacao em andamento...</h3>
            <a id="cancel-btn" href="/admin/m3u/cancel" onclick="return confirm('Cancelar atualizacao?')" style="display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:rgba(229,9,20,0.1); color:var(--primary); border:1px solid rgba(229,9,20,0.3); border-radius:var(--radius-sm); text-decoration:none; font-size:0.85em; font-weight:600;">✖ Cancelar</a>
        </div>
        <div style="background:var(--bg-surface); border-radius:var(--radius-lg); padding:20px; border:1px solid var(--border);">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
                <span id="progress-phase" style="color:var(--text-muted); font-size:0.85em; font-weight:500;">Preparando...</span>
                <span id="progress-percent" style="color:var(--text-primary); font-size:1.4em; font-weight:700;">0%</span>
            </div>
            <div style="width:100%; height:12px; background:var(--bg-card); border-radius:999px; overflow:hidden; margin-bottom:12px; border:1px solid var(--border);">
                <div id="progress-bar" style="height:100%; width:0%; background:linear-gradient(90deg, var(--green), #4ade80); border-radius:999px; transition:width 0.5s ease;"></div>
            </div>
            <div id="progress-message" style="color:var(--text-secondary); font-size:0.85em; margin-bottom:8px;">Aguardando inicio...</div>
            <div id="progress-details" style="display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:12px;">
                <div style="text-align:center; padding:8px; background:var(--bg-card); border-radius:var(--radius-sm); border:1px solid var(--border);">
                    <div id="pd-total" style="color:var(--text-primary); font-size:1.1em; font-weight:700;">0</div>
                    <div style="color:var(--text-muted); font-size:0.7em; text-transform:uppercase;">Total</div>
                </div>
                <div style="text-align:center; padding:8px; background:var(--bg-card); border-radius:var(--radius-sm); border:1px solid var(--border);">
                    <div id="pd-processed" style="color:var(--text-primary); font-size:1.1em; font-weight:700;">0</div>
                    <div style="color:var(--text-muted); font-size:0.7em; text-transform:uppercase;">Processados</div>
                </div>
                <div style="text-align:center; padding:8px; background:var(--bg-card); border-radius:var(--radius-sm); border:1px solid var(--border);">
                    <div id="pd-added" style="color:var(--green); font-size:1.1em; font-weight:700;">0</div>
                    <div style="color:var(--text-muted); font-size:0.7em; text-transform:uppercase;">Novos</div>
                </div>
                <div style="text-align:center; padding:8px; background:var(--bg-card); border-radius:var(--radius-sm); border:1px solid var(--border);">
                    <div id="pd-updated" style="color:var(--gold); font-size:1.1em; font-weight:700;">0</div>
                    <div style="color:var(--text-muted); font-size:0.7em; text-transform:uppercase;">Atualizados</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Upload Manual -->
    <div class="config-form" style="margin-top:24px;">
        <h3 style="color:var(--text-primary); font-size:1.05em; font-weight:600; margin-bottom:16px;">📤 Upload Manual de Arquivos</h3>
        <p style="color:var(--text-muted); font-size:0.85em; margin-bottom:20px;">Se a hospedagem nao consegue baixar automaticamente (timeout, cPanel, etc), voce pode enviar o arquivo diretamente.</p>
        <form method="POST" action="{{ url_for('admin_m3u_upload') }}" enctype="multipart/form-data" style="margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--border);">
            <div class="form-group">
                <label>Upload M3U / M3U8 / TXT</label>
                <input type="file" name="m3u_file" accept=".m3u,.m3u8,.txt" required style="width:100%; padding:10px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); color:var(--text-primary); font-size:0.85em;">
                <small style="display:block; margin-top:6px; color:var(--text-muted);">Selecione o arquivo M3U do seu computador. Será importado diretamente no catálogo.</small>
            </div>
            <button type="submit" class="btn" style="background:var(--green); color:#fff;">📥 Importar M3U</button>
        </form>
        <form method="POST" action="{{ url_for('admin_epg_upload') }}" enctype="multipart/form-data">
            <div class="form-group">
                <label>Upload EPG / XMLTV</label>
                <input type="file" name="epg_file" accept=".xml,.xmltv,.gz" required style="width:100%; padding:10px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); color:var(--text-primary); font-size:0.85em;">
                <small style="display:block; margin-top:6px; color:var(--text-muted);">Selecione o arquivo EPG (XML ou XMLTV) do seu computador. Aceita também .gz compactado.</small>
            </div>
            <button type="submit" class="btn" style="background:var(--gold); color:#000;">📺 Importar EPG</button>
        </form>
    </div>

    <div class="status-card">
        <h3>Status Atual</h3>
        <div class="status-row">
            <span class="status-label">M3U Auto-update:</span>
            {% if settings.auto_update %}
                {% if cpanel_mode %}
                <span class="status-value active">ATIVADO (via Cron)</span>
                <span class="status-value">(a cada {{ settings.get('update_interval_minutes', 5) }}min)</span>
                {% else %}
                <span class="status-value active">ATIVADO</span>
                <span class="status-value">(a cada {{ settings.get('update_interval_minutes', 5) }}min)</span>
                {% endif %}
            {% else %}
            <span class="status-value inactive">DESATIVADO</span>
            {% endif %}
        </div>
        <div class="status-row">
            <span class="status-label">EPG Auto-update:</span>
            {% if settings.get('epg_auto_update', True) %}
                {% if cpanel_mode %}
                <span class="status-value active">ATIVADO (via Cron)</span>
                <span class="status-value">(a cada {{ settings.get('epg_update_interval_minutes', 5) }}min)</span>
                {% else %}
                <span class="status-value active">ATIVADO</span>
                <span class="status-value">(a cada {{ settings.get('epg_update_interval_minutes', 5) }}min)</span>
                {% endif %}
            {% else %}
            <span class="status-value inactive">DESATIVADO</span>
            {% endif %}
        </div>
        {% if cpanel_mode %}
        <div class="status-row" style="margin-top:8px; padding-top:8px; border-top:1px solid var(--border);">
            <span class="status-label">Modo:</span>
            <span class="status-value" style="color:var(--gold);">cPanel - Use Cron Jobs para atualizacoes automaticas</span>
        </div>
        {% endif %}
        </div>
        <div class="status-row">
            <span class="status-label">M3U principal:</span>
            <span class="status-value mono">{{ (settings.get('m3u_urls') or [settings.get('m3u_url', '')])[0] }}</span>
        </div>
        <div class="status-row">
            <span class="status-label">Credenciais configuradas:</span>
            <span class="status-value">{{ (settings.get('m3u_urls') or [settings.get('m3u_url', '')])|length }}</span>
        </div>
        <div class="status-row">
            <span class="status-label">URL EPG:</span>
            <span class="status-value mono">{{ settings.get('epg_url', '') }}</span>
        </div>
    </div>
</div>

<script>
var pollTimer = null;
var progressUrl = '';
var progressType = '';

function startProgress(type) {
    progressType = type;
    progressUrl = type === 'epg' ? '/api/epg-progress' : '/api/m3u-progress';
    var panel = document.getElementById('progress-panel');
    var cancelBtn = document.getElementById('cancel-btn');
    if (cancelBtn) {
        cancelBtn.href = type === 'epg' ? '/admin/epg/cancel' : '/admin/m3u/cancel';
        cancelBtn.style.display = 'inline-flex';
    }
    panel.style.display = 'block';
    panel.scrollIntoView({behavior: 'smooth', block: 'start'});
    document.getElementById('progress-title').textContent = type === 'epg' ? '⏳ Atualizacao EPG em andamento...' : '⏳ Atualizacao M3U em andamento...';
    pollProgress();
    if (pollTimer) clearInterval(pollTimer);
    pollTimer = setInterval(pollProgress, 2000);
}

function pollProgress() {
    fetch(progressUrl)
    .then(function(r){ return r.json(); })
    .then(function(d) {
        var bar = document.getElementById('progress-bar');
        var pct = document.getElementById('progress-percent');
        var phase = document.getElementById('progress-phase');
        var msg = document.getElementById('progress-message');
        bar.style.width = d.percent + '%';
        pct.textContent = d.percent + '%';
        phase.textContent = {
            'init': 'Inicializando...',
            'download': '📡 Baixando...',
            'validate': '🔍 Validando...',
            'import': '⚙️ Importando catalogo...',
            'cleanup': '🧹 Limpando itens ausentes...',
            'done': '✅ Concluido!',
            'error': '❌ Erro',
            'cancelled': '🚫 Cancelado',
            'idle': 'Aguardando...'
        }[d.phase] || d.phase;
        msg.textContent = d.message || '';
        document.getElementById('pd-total').textContent = d.total || 0;
        document.getElementById('pd-processed').textContent = d.processed || 0;
        document.getElementById('pd-added').textContent = d.added || 0;
        document.getElementById('pd-updated').textContent = d.updated || 0;
        if (d.phase === 'done' || d.phase === 'error' || d.phase === 'cancelled' || !d.running) {
            clearInterval(pollTimer);
            pollTimer = null;
            var cancelBtn = document.getElementById('cancel-btn');
            if (cancelBtn) cancelBtn.style.display = 'none';
            if (d.phase === 'done') {
                bar.style.background = 'linear-gradient(90deg, var(--green), #4ade80)';
                document.getElementById('progress-title').textContent = '✅ Atualizacao concluida!';
            } else if (d.phase === 'error') {
                bar.style.background = 'linear-gradient(90deg, var(--primary), #ff6b6b)';
                document.getElementById('progress-title').textContent = '❌ Erro na atualizacao';
            } else if (d.phase === 'cancelled') {
                bar.style.background = 'linear-gradient(90deg, var(--gold), #fbbf24)';
                document.getElementById('progress-title').textContent = '🚫 Atualizacao cancelada';
            }
        }
    })
    .catch(function(){});
}

function forceM3U() {
    if (!confirm('Forcar atualizacao M3U agora?')) return;
    fetch('/admin/m3u/update')
    .then(function() { startProgress('m3u'); })
    .catch(function() { startProgress('m3u'); });
}
function forceEPG() {
    if (!confirm('Atualizar Guia de Programas (EPG)?')) return;
    fetch('/admin/epg/refresh')
    .then(function() { startProgress('epg'); })
    .catch(function() { startProgress('epg'); });
}
// Verificar se ja esta rodando ao carregar a pagina
(function() {
    fetch('/api/m3u-progress')
    .then(function(r){ return r.json(); })
    .then(function(d) {
        if (d.running) startProgress('m3u');
        else {
            return fetch('/api/epg-progress');
        }
    })
    .then(function(r) { if (r && r.json) return r.json(); })
    .then(function(d) {
        if (d && d.running) startProgress('epg');
    })
    .catch(function(){});
})();
</script>
{% endblock %}