{% extends spa_base or "base.html"%}
{% block title %}Admin - Manutencao{% endblock %}
{% block extra_head %}
<style>
    .maint-page { max-width: 700px; }
    .maint-status {
        padding: 20px 24px;
        border-radius: var(--radius-lg);
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 16px;
        border: 1px solid var(--border);
    }
    .maint-status.active {
        background: rgba(229,9,20,0.08);
        border-color: var(--primary);
    }
    .maint-status.inactive {
        background: rgba(70,211,105,0.05);
        border-color: var(--green);
    }
    .maint-status .icon { font-size: 2em; }
    .maint-status .info h3 { font-size: 1.1em; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
    .maint-status .info p { color: var(--text-muted); font-size: 0.85em; }
    .maint-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 24px;
        margin-bottom: 20px;
    }
    .maint-card h3 {
        font-size: 1em;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 16px;
    }
    .form-group { margin-bottom: 16px; }
    .form-group label {
        display: block;
        font-size: 0.8em;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 6px;
        font-weight: 500;
    }
    .form-group input, .form-group textarea, .form-group select {
        width: 100%;
        padding: 10px 14px;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        color: var(--text-primary);
        font-size: 0.9em;
    }
    .form-group textarea { min-height: 80px; resize: vertical; }
    .form-group input:focus, .form-group textarea:focus {
        outline: none;
        border-color: var(--text-secondary);
    }
    .toggle-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 0;
        border-bottom: 1px solid var(--border);
    }
    .toggle-row:last-child { border-bottom: none; }
    .toggle-label { font-size: 0.9em; color: var(--text-secondary); }
    .toggle-switch {
        position: relative;
        width: 48px;
        height: 26px;
        cursor: pointer;
    }
    .toggle-switch input { display: none; }
    .toggle-slider {
        position: absolute;
        inset: 0;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: 100px;
        transition: var(--transition);
    }
    .toggle-slider::before {
        content: '';
        position: absolute;
        top: 3px; left: 3px;
        width: 18px; height: 18px;
        background: var(--text-muted);
        border-radius: 50%;
        transition: var(--transition);
    }
    .toggle-switch input:checked + .toggle-slider {
        background: var(--primary);
        border-color: var(--primary);
    }
    .toggle-switch input:checked + .toggle-slider::before {
        transform: translateX(22px);
        background: #fff;
    }
    .hint { font-size: 0.8em; color: var(--text-muted); margin-top: 4px; }
</style>
{% endblock %}
{% block content %}
<div class="maint-page">
    <a href="{{ url_for('admin_panel') }}" style="color:var(--text-muted); text-decoration:none; font-size:0.9em; display:inline-flex; align-items:center; gap:6px; margin-bottom:20px;">← Voltar ao Painel</a>

    <h1 style="font-size:1.5em; font-weight:700; color:var(--text-primary); margin-bottom:24px;">Manutencao do Site</h1>

    <div class="maint-status {% if settings.maintenance_enabled %}active{% else %}inactive{% endif %}">
        <div class="icon">{% if settings.maintenance_enabled %}&#x1f534;{% else %}&#x1f7e2;{% endif %}</div>
        <div class="info">
            <h3>{% if settings.maintenance_enabled %}Manutencao ATIVA{% else %}Site ONLINE{% endif %}</h3>
            <p>{% if settings.maintenance_enabled %}O site esta indisponivel para usuarios normais e visitantes. Admin continua com acesso total a tudo (inclusive para testar).{% else %}O site esta funcionando normalmente para todos.{% endif %}</p>
        </div>
        <form method="POST" style="margin-left:auto;">
            <input type="hidden" name="action" value="toggle">
            <button type="submit" class="btn" style="{% if settings.maintenance_enabled %}background:var(--green);{% else %}background:var(--primary);{% endif %}">
                {% if settings.maintenance_enabled %}Desativar Manutencao{% else %}Ativar Manutencao{% endif %}
            </button>
        </form>
    </div>

    <form method="POST">
        <input type="hidden" name="action" value="save">

        <div class="maint-card">
            <h3>Configuracoes</h3>
            <div class="toggle-row">
                <span class="toggle-label">Manutencao Ativada</span>
                <label class="toggle-switch">
                    <input type="checkbox" name="enabled" {% if settings.maintenance_enabled %}checked{% endif %}>
                    <span class="toggle-slider"></span>
                </label>
            </div>
            <div class="form-group" style="margin-top:16px;">
                <label>Mensagem exibida aos usuarios</label>
                <textarea name="message" placeholder="Sistema em manutencao. Volte em breve.">{{ settings.maintenance_message or '' }}</textarea>
            </div>
        </div>

        <div class="maint-card">
            <h3>Modo de Manutencao</h3>
            <p style="color:var(--text-muted); font-size:0.85em; margin-bottom:16px;">Nenhuma secao selecionada = manutencao global (bloqueia todo o conteudo do site, TV e apps). Selecione apenas as abas/modulos especificos para manutencao granular. Login, painel admin, download do app e streaming em andamento seguem sempre liberados.</p>
            <div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:12px;">
                {% set sections = settings.maintenance_sections or [] %}
                <label style="display:flex; align-items:center; gap:8px; padding:12px; background:var(--bg-surface); border-radius:8px; border:1px solid var(--border); cursor:pointer;">
                    <input type="checkbox" name="section_canais" {% if 'canais' in sections %}checked{% endif %}> 📺 Canais ao Vivo (Site)
                </label>
                <label style="display:flex; align-items:center; gap:8px; padding:12px; background:var(--bg-surface); border-radius:8px; border:1px solid var(--border); cursor:pointer;">
                    <input type="checkbox" name="section_filmes" {% if 'filmes' in sections %}checked{% endif %}> 🎬 Filmes (Site)
                </label>
                <label style="display:flex; align-items:center; gap:8px; padding:12px; background:var(--bg-surface); border-radius:8px; border:1px solid var(--border); cursor:pointer;">
                    <input type="checkbox" name="section_series" {% if 'series' in sections %}checked{% endif %}> 🎞️ Series (Site)
                </label>
                <label style="display:flex; align-items:center; gap:8px; padding:12px; background:var(--bg-surface); border-radius:8px; border:1px solid var(--border); cursor:pointer;">
                    <input type="checkbox" name="section_tv_canais" {% if 'tv_canais' in sections %}checked{% endif %}> 📺 Canais (App TV)
                </label>
                <label style="display:flex; align-items:center; gap:8px; padding:12px; background:var(--bg-surface); border-radius:8px; border:1px solid var(--border); cursor:pointer;">
                    <input type="checkbox" name="section_tv_filmes" {% if 'tv_filmes' in sections %}checked{% endif %}> 🎬 Filmes (App TV)
                </label>
                <label style="display:flex; align-items:center; gap:8px; padding:12px; background:var(--bg-surface); border-radius:8px; border:1px solid var(--border); cursor:pointer;">
                    <input type="checkbox" name="section_tv_series" {% if 'tv_series' in sections %}checked{% endif %}> 🎞️ Series (App TV)
                </label>
                <label style="display:flex; align-items:center; gap:8px; padding:12px; background:var(--bg-surface); border-radius:8px; border:1px solid var(--border); cursor:pointer;">
                    <input type="checkbox" name="section_app_mobile" {% if 'app_mobile' in sections %}checked{% endif %}> 📱 App Mobile
                </label>
                <label style="display:flex; align-items:center; gap:8px; padding:12px; background:var(--bg-surface); border-radius:8px; border:1px solid var(--border); cursor:pointer;">
                    <input type="checkbox" name="section_app_tv" {% if 'app_tv' in sections %}checked{% endif %}> 📺 App TV (Android)
                </label>
            </div>
        </div>

        <div class="maint-card">
            <h3>Categoria / Escopo</h3>
            <p style="color:var(--text-muted); font-size:0.85em; margin-bottom:16px;">Escolha a categoria de abas/paginas para bloquear. "Todas" aplica a manutencao globalmente. As categorias compatem com as secoes definidas abaixo.</p>
            <div style="display:flex; gap:10px; flex-wrap:wrap;">
                {% for val, label in maintenance_categories %}
                <label style="display:flex; align-items:center; gap:6px; padding:10px 14px; background:var(--bg-surface); border-radius:8px; border:1px solid var(--border); cursor:pointer;">
                    <input type="radio" name="category" value="{{ val }}" {% if (settings.maintenance_category or 'all') == val %}checked{% endif %}> {{ label }}
                </label>
                {% endfor %}
            </div>
        </div>

        <div class="maint-card">
            <h3>Plataformas Alvo</h3>
            <p style="color:var(--text-muted); font-size:0.85em; margin-bottom:16px;">Selecione onde a manutencao se aplica. Visitantes detectados fora dessas plataformas continuam com acesso normal.</p>
            <div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:12px;">
                {% set platforms = settings.maintenance_platforms or [] %}
                <label style="display:flex; align-items:center; gap:8px; padding:12px; background:var(--bg-surface); border-radius:8px; border:1px solid var(--border); cursor:pointer;">
                    <input type="checkbox" name="platform_site" {% if 'site' in platforms %}checked{% endif %}> 🌐 Site (web)
                </label>
                <label style="display:flex; align-items:center; gap:8px; padding:12px; background:var(--bg-surface); border-radius:8px; border:1px solid var(--border); cursor:pointer;">
                    <input type="checkbox" name="platform_app_mobile" {% if 'app_mobile' in platforms %}checked{% endif %}> 📱 App Mobile
                </label>
                <label style="display:flex; align-items:center; gap:8px; padding:12px; background:var(--bg-surface); border-radius:8px; border:1px solid var(--border); cursor:pointer;">
                    <input type="checkbox" name="platform_app_tv" {% if 'app_tv' in platforms %}checked{% endif %}> 📺 App TV
                </label>
                <label style="display:flex; align-items:center; gap:8px; padding:12px; background:var(--bg-surface); border-radius:8px; border:1px solid var(--border); cursor:pointer;">
                    <input type="checkbox" name="platform_celular" {% if 'celular' in platforms %}checked{% endif %}> 📱 Celular (browser)
                </label>
            </div>
        </div>

        <div class="maint-card">
            <h3>Paginas Especificas (Opcional)</h3>
            <p style="color:var(--text-muted); font-size:0.85em; margin-bottom:16px;">Lista separada por virgula de rotas/endpoint keys (aceita <code>/canais,/filmes,/tv/canais</code> ou <code>canais,filmes,tv_player</code>). Quando preenchido, a manutencao aplica-se SOMENTE a essas paginas — deixe vazio para usar as secoes/categoria.</p>
            <div class="form-group">
                <input type="text" name="pages" value="{{ maintenance_pages or '' }}" placeholder="canais,filmes,tv_player">
            </div>
        </div>

        <div class="maint-card">
            <h3>Agendamento</h3>
            <div class="toggle-row" style="margin-bottom:12px;">
                <span class="toggle-label">Aplicar imediatamente (ignora horario de inicio/fim)</span>
                <label class="toggle-switch">
                    <input type="checkbox" name="immediate" {% if settings.maintenance_immediate %}checked{% endif %}>
                    <span class="toggle-slider"></span>
                </label>
            </div>
            <p style="color:var(--text-muted); font-size:0.85em; margin-bottom:16px;">Desative "Aplicar imediatamente" para restringir a manutencao a uma janela de horario. Preencha inicio e fim (UTC).</p>
            <div style="display:flex; gap:16px; flex-wrap:wrap;">
                <div class="form-group" style="flex:1; min-width:200px;">
                    <label>Data/Hora Inicio</label>
                    <input type="datetime-local" name="start" value="{{ settings.maintenance_start or '' }}">
                    <div class="hint">Quando a manutencao comeca</div>
                </div>
                <div class="form-group" style="flex:1; min-width:200px;">
                    <label>Data/Hora Fim</label>
                    <input type="datetime-local" name="end" value="{{ settings.maintenance_end or '' }}">
                    <div class="hint">Quando a manutencao termina automaticamente</div>
                </div>
            </div>
        </div>

        <button type="submit" class="btn" style="width:auto;">Salvar Configuracoes</button>
    </form>
</div>
{% endblock %}