{% extends spa_base or "base.html"%}
{% block title %}Minha Conta{% endblock %}
{% block extra_head %}
<style>
    .account-page {
        max-width: 1000px;
        margin: 0 auto;
    }
    .page-header {
        margin-bottom: 32px;
    }
    .page-header h1 {
        font-size: 1.8em;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 8px;
    }
    .page-header p {
        color: var(--text-muted);
        font-size: 0.9em;
    }
    .account-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .account-card {
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        padding: 28px;
        border: 1px solid var(--border);
    }
    .account-card h2 {
        font-size: 1em;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .info-row {
        margin-bottom: 16px;
    }
    .info-row:last-child { margin-bottom: 0; }
    .info-label {
        font-size: 0.8em;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 6px;
        font-weight: 500;
    }
    .info-value {
        color: var(--text-primary);
        font-size: 0.95em;
    }
    .plan-status {
        background: var(--bg-surface);
        border-radius: var(--radius-md);
        padding: 16px;
        margin-bottom: 16px;
    }
    .plan-status.active {
        border-left: 3px solid var(--green);
    }
    .plan-status.free {
        border-left: 3px solid var(--primary);
    }
    .plan-status .status-title {
        font-weight: 600;
        margin-bottom: 4px;
    }
    .plan-status.active .status-title { color: var(--green); }
    .plan-status.free .status-title { color: var(--primary); }
    .plan-status .status-desc {
        color: var(--text-muted);
        font-size: 0.85em;
    }
    .plan-benefits {
        margin-top: 12px;
    }
    .plan-benefits p {
        color: var(--text-secondary);
        font-size: 0.85em;
        padding: 4px 0;
    }

    .form-group {
        margin-bottom: 16px;
    }
    .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: 6px;
        font-weight: 500;
    }
    .form-group input,
    .form-group select,
    .form-group textarea,
    .form-group .form-input {
        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.9em;
        transition: var(--transition);
    }
    .form-group select { cursor: pointer; }
    .form-group select option { background: var(--bg-surface); color: var(--text-primary); }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(229,9,20,0.22);
    }
    .form-group .btn {
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }

    .account-actions {
        margin-top: 24px;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    @media (max-width: 768px) {
        .account-grid { grid-template-columns: 1fr; }
    }
</style>
{% endblock %}
{% block content %}
<div class="account-page">
    <div class="page-header">
        <h1>Minha Conta</h1>
        <p>Gerencie suas informações e configurações</p>
    </div>

    <div class="account-grid">
        <div class="account-card">
            <h2>📋 Informações da Conta</h2>
            <div class="info-row">
                <div class="info-label">Email</div>
                <div class="info-value">{{ current_user.email }}</div>
            </div>
            <div class="info-row">
                <div class="info-label">Membro desde</div>
                <div class="info-value">{{ current_user.created_at|bdate }}</div>
            </div>
            <div class="info-row">
                <div class="info-label">Tipo de conta</div>
                <div class="info-value">
                    {% if current_user.is_admin %}
                    <span style="color:var(--primary); font-weight:600;">⚡ ADMIN</span>
                    {% elif current_user.is_paid and current_user.paid_until and current_user.paid_until_utc > now %}
                    <span style="color:var(--green); font-weight:600;">⭐ Premium</span>
                    {% else %}
                    <span style="color:var(--text-secondary);">🔒 Gratuito</span>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="account-card">
            <h2>💎 Meu Plano</h2>
            {% if current_user.is_paid and current_user.paid_until and current_user.paid_until_utc > now %}
            <div class="plan-status active">
                <div class="status-title">⭐ Premium Ativo — Acesso Ilimitado</div>
                <div class="status-desc" style="margin-top:6px;">Vence em: <strong style="color:var(--text-primary);">{{ current_user.paid_until|brdate }}</strong></div>
                {% if remaining_days > 0 %}
                <div class="status-desc" style="margin-top:4px;">Faltam <strong style="color:var(--green);">{{ remaining_days }} dia(s)</strong></div>
                {% elif remaining_days == 0 %}
                <div class="status-desc" style="margin-top:4px; color:var(--gold);">Vence hoje!</div>
                {% endif %}
            </div>
            <div class="plan-benefits">
                <p>✅ Acesso ilimitado a todo conteúdo</p>
                <p>✅ Sem limite de tempo</p>
                <p>✅ Suporte prioritário</p>
            </div>
            {% else %}
            <div class="plan-status free">
                <div class="status-title">🔒 Plano Gratuito</div>
                <div class="status-desc" style="margin-top:6px;">Limite diário: <strong style="color:var(--primary);">{{ limit_h }}h por dia</strong></div>
            </div>
            <div style="background:var(--bg-surface); border-radius:var(--radius-md); padding:12px 16px; margin-top:12px;">
                <div style="display:flex; justify-content:space-between; align-items:center; padding:4px 0; font-size:0.85em;">
                    <span style="color:var(--text-muted);">Usado hoje</span>
                    <span style="color:var(--text-secondary); font-weight:600;">{{ used_h }}h {{ used_m }}m</span>
                </div>
                <div style="display:flex; justify-content:space-between; align-items:center; padding:4px 0; font-size:0.85em;">
                    <span style="color:var(--text-muted);">Restante hoje</span>
                    <span style="color:{% if horas == 0 and minutos == 0 %}var(--primary){% else %}var(--green){% endif %}; font-weight:700;">
                        {% if horas > 0 or minutos > 0 %}
                            ⏱️ {{ horas }}h {{ minutos }}m
                        {% else %}
                            ⏰ Esgotado
                        {% endif %}
                    </span>
                </div>
            </div>
            <a href="{{ url_for('planos') }}" class="btn" style="margin-top:12px;">Ver Planos</a>
            {% endif %}
        </div>

        <div class="account-card" id="tvLoginSection">
            <h2>📺 Login na TV</h2>
            <p style="color:var(--text-muted); font-size:0.85em; margin-bottom:16px;">Gere um codigo de 8 digitos para entrar na TV sem digitar email e senha.</p>
            <div id="tvCodeDisplay" style="display:none;" role="status" aria-live="polite">
                <div style="text-align:center; padding:24px; background:var(--bg-surface); border-radius:var(--radius-md); margin-bottom:16px;">
                    <div style="font-size:0.8em; color:var(--text-muted); margin-bottom:8px;">Seu codigo (valido por 5 minutos)</div>
                    <div id="tvCode" style="font-size:2.4em; font-weight:800; letter-spacing:12px; color:var(--primary); font-family:monospace;" aria-label="Codigo para entrar na TV"></div>
                    <div id="tvCountdown" style="font-size:0.8em; color:var(--text-muted); margin-top:8px;"></div>
                </div>
                <button class="btn btn-outline" onclick="generateTvCode()" style="width:100%;"><span aria-hidden="true">🔁</span> Gerar Novo Codigo</button>
            </div>
            <button class="btn" id="tvGenerateBtn" onclick="generateTvCode()" style="width:100%;"><span aria-hidden="true">🔑</span> Gerar Codigo para TV</button>
            <p style="color:var(--text-muted); font-size:0.8em; margin-top:8px;">Digite este codigo na tela de login da sua TV.</p>
            <p id="tvCodeError" role="alert" aria-live="assertive" style="display:none; color:var(--primary); font-size:0.85em; margin-top:8px;"></p>
        </div>

        <script>
        function generateTvCode() {
            var btn = document.getElementById('tvGenerateBtn');
            var display = document.getElementById('tvCodeDisplay');
            var codeEl = document.getElementById('tvCode');
            var countdownEl = document.getElementById('tvCountdown');
            btn.disabled = true;
            btn.textContent = 'Gerando...';
            fetch('/api/tv/generate', {
                method: 'POST',
                headers: {'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')}
            }).then(function(r) { return r.json(); }).then(function(data) {
                codeEl.textContent = data.code;
                display.style.display = 'block';
                btn.style.display = 'none';
                var expiresIn = data.expires_in;
                countdownEl.textContent = 'Expira em ' + expiresIn + 's';
                var interval = setInterval(function() {
                    expiresIn--;
                    if (expiresIn <= 0) {
                        clearInterval(interval);
                        countdownEl.textContent = 'Codigo expirado. Gere um novo.';
                    } else {
                        countdownEl.textContent = 'Expira em ' + expiresIn + 's';
                    }
                }, 1000);
            }).catch(function() {
                btn.disabled = false;
                btn.textContent = 'Gerar Codigo para TV';
                var err = document.getElementById('tvCodeError');
                if (err) { err.textContent = 'Erro ao gerar codigo. Tente novamente.'; err.style.display = 'block'; }
            });
        }
        </script>

        <div class="account-card">
            <h2>🔑 Alterar Senha</h2>
            <form method="POST" action="{{ url_for('alterar_senha') }}">
                <div class="form-group">
                    <label for="current_password">Senha Atual</label>
                    <input type="password" id="current_password" name="current_password" autocomplete="current-password" required>
                </div>
                <div class="form-group">
                    <label for="new_password">Nova Senha</label>
                    <input type="password" id="new_password" name="new_password" autocomplete="new-password" required minlength="6" aria-describedby="newPassHelp">
                    <span id="newPassHelp" class="sr-only">A senha deve ter no mínimo 6 caracteres.</span>
                </div>
                <div class="form-group">
                    <label for="confirm_password">Confirmar Nova Senha</label>
                    <input type="password" id="confirm_password" name="confirm_password" autocomplete="new-password" required>
                </div>
                <button type="submit" class="btn">Alterar Senha</button>
            </form>
        </div>

        <div class="account-card">
            <h2>💬 WhatsApp</h2>
            <form method="POST" action="{{ url_for('alterar_whatsapp') }}">
                <div class="form-group">
                    <label for="whatsapp">WhatsApp (contato)</label>
                    <input type="tel" id="whatsapp" name="whatsapp" required value="{{ current_user.whatsapp or '' }}" placeholder="(00) 00000-0000" autocomplete="tel" aria-label="Número de WhatsApp com DDD">
                </div>
                <button type="submit" class="btn">Atualizar WhatsApp</button>
            </form>
        </div>

        <div class="account-card">
            <h2>🔞 Conteúdo Adulto</h2>
            <p style="color:var(--text-muted); font-size:0.85em; margin-bottom:16px;">Quando ativado, as categorias marcadas como adultas pelo administrador deixam de aparecer em Canais, Filmes e Séries (nem os itens, nem as categorias).</p>
            <form method="POST" action="{{ url_for('toggle_hide_adult') }}">
                <div class="form-group">
                    <label for="hide_adult" style="display:flex; align-items:center; gap:10px; cursor:pointer; text-transform:none; font-size:0.9em; color:var(--text-primary);">
                        <input type="checkbox" id="hide_adult" name="hide_adult" value="on" {% if current_user.hide_adult %}checked{% endif %} style="width:18px; height:18px; accent-color:var(--primary);">
                        Bloquear conteúdo adulto
                    </label>
                </div>
                <button type="submit" class="btn">Salvar Preferência</button>
            </form>
        </div>

        <div class="account-card">
            <h2><span aria-hidden="true">🕐</span> Fuso Horário</h2>
            <p id="tzHelp" style="color:var(--text-muted); font-size:0.85em; margin-bottom:12px;">Define o horário exibido no guia de programação (EPG), notificações e histórico em todo o site.</p>
            <form id="tzForm" onsubmit="return false;">
                <div class="form-group">
                    <label for="tzSelect">Seu fuso horário</label>
                    <select id="tzSelect" name="timezone" class="form-input" aria-describedby="tzHelp">
                        {% for h in range(-12, 15) %}
                        <option value="{{ h }}" {% if current_user.timezone_offset == h %}selected{% endif %}>UTC{{ '+' if h >= 0 else '' }}{{ h }}{% if h == -3 %} — Brasília{% elif h == -4 %} — Amazonas / Mato Grosso{% elif h == -5 %} — Acre{% elif h == 0 %} — UTC / Londres{% endif %}</option>
                        {% endfor %}
                    </select>
                </div>
                <button type="button" class="btn" id="tzSaveBtn" onclick="saveTz()">Salvar Fuso Horário</button>
                <p id="tzStatus" role="status" aria-live="polite" style="margin-top:10px; font-size:0.85em; color:var(--text-muted); min-height:1.2em;"></p>
            </form>
            <script>
            function saveTz() {
                var sel = document.getElementById('tzSelect');
                var btn = document.getElementById('tzSaveBtn');
                var st = document.getElementById('tzStatus');
                var offset = parseFloat(sel.value);
                btn.disabled = true;
                st.style.color = 'var(--text-muted)';
                st.textContent = 'Salvando...';
                fetch('/api/set_timezone', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({offset: offset})
                }).then(function(r) { return r.json(); }).then(function(d) {
                    btn.disabled = false;
                    if (d.ok) {
                        st.style.color = 'var(--green)';
                        st.textContent = 'Fuso horário atualizado! Recarregando os horários...';
                        setTimeout(function() { location.reload(); }, 1200);
                    } else {
                        st.style.color = 'var(--primary)';
                        st.textContent = 'Não foi possível salvar. Tente novamente.';
                    }
                }).catch(function() {
                    btn.disabled = false;
                    st.style.color = 'var(--primary)';
                    st.textContent = 'Erro de conexão. Tente novamente.';
                });
            }
            </script>
        </div>

        <div class="account-card">
            <h2>📧 Alterar Email</h2>
            <form method="POST" action="{{ url_for('alterar_email') }}">
                <div class="form-group">
                    <label for="new_email">Novo Email</label>
                    <input type="email" id="new_email" name="new_email" required value="{{ current_user.email }}" autocomplete="email">
                </div>
                <div class="form-group">
                    <label for="password_confirm">Sua Senha (confirmação)</label>
                    <input type="password" id="password_confirm" name="password_confirm" autocomplete="current-password" required>
                </div>
                <button type="submit" class="btn">Alterar Email</button>
            </form>
        </div>
    </div>

    <div class="account-actions">
        <a href="{{ url_for('dashboard') }}" class="btn btn-outline">&larr; Voltar ao Painel</a>
        <a href="{{ url_for('afiliados') }}" class="btn btn-outline">Programa de Afiliados</a>
        <a href="{{ url_for('suporte') }}" class="btn btn-outline">Suporte</a>
    </div>
</div>
{% endblock %}