{% extends "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 {
        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 input:focus {
        outline: none;
        border-color: var(--text-secondary);
    }
    .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|bdate }}</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;">
                <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;"></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%;">🔁 Gerar Novo Codigo</button>
            </div>
            <button class="btn" id="tvGenerateBtn" onclick="generateTvCode()" style="width:100%;">🔑 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>
        </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';
                alert('Erro ao gerar codigo. Tente novamente.');
            });
        }
        </script>

        <div class="account-card">
            <h2>🔑 Alterar Senha</h2>
            <form method="POST" action="{{ url_for('alterar_senha') }}">
                <div class="form-group">
                    <label>Senha Atual</label>
                    <input type="password" name="current_password" required>
                </div>
                <div class="form-group">
                    <label>Nova Senha</label>
                    <input type="password" name="new_password" required minlength="6">
                </div>
                <div class="form-group">
                    <label>Confirmar Nova Senha</label>
                    <input type="password" name="confirm_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>WhatsApp (contato)</label>
                    <input type="tel" name="whatsapp" required value="{{ current_user.whatsapp or '' }}" placeholder="(00) 00000-0000">
                </div>
                <button type="submit" class="btn">Atualizar WhatsApp</button>
            </form>
        </div>

        <div class="account-card">
            <h2>🕐 Fuso Horario</h2>
            <p style="color:var(--text-muted); font-size:0.85em; margin-bottom:12px;">Selecione o fuso horario para exibir os horarios em todo o site.</p>
            <form id="tzForm">
                <div class="form-group">
                    <select id="tzSelect" class="form-input">
                        {% for h in range(-12, 15) %}
                        <option value="{{ h }}" {% if current_user.timezone_offset == h %}selected{% endif %}>UTC{{ '+' if h >= 0 else '' }}{{ h }}</option>
                        {% endfor %}
                    </select>
                </div>
                <button type="button" class="btn" onclick="saveTz()">Salvar Fuso Horario</button>
            </form>
            <script>
            function saveTz() {
                var offset = parseFloat(document.getElementById('tzSelect').value);
                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) {
                    if (d.ok) location.reload();
                });
            }
            </script>
        </div>

        <div class="account-card">
            <h2>📧 Alterar Email</h2>
            <form method="POST" action="{{ url_for('alterar_email') }}">
                <div class="form-group">
                    <label>Novo Email</label>
                    <input type="email" name="new_email" required value="{{ current_user.email }}">
                </div>
                <div class="form-group">
                    <label>Sua Senha (confirmação)</label>
                    <input type="password" name="password_confirm" 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 %}