{% extends "tv_base.html" %}
{% block title %}Minha Conta{% endblock %}
{% block content %}
<style>
    .tv-conta {
        max-width: 600px;
        margin: 0 auto;
        padding-top: 40px;
    }
    .tv-conta-card {
        background: var(--tv-surface);
        border-radius: var(--tv-radius-lg);
        padding: 40px;
        border: 1px solid var(--tv-highlight);
    }
    .tv-conta-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: var(--tv-elevated);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5em;
        margin: 0 auto 20px;
    }
    .tv-conta-name {
        text-align: center;
        font-size: 1.3em;
        font-weight: 700;
        margin-bottom: 24px;
    }
    .tv-conta-info {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .tv-conta-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid var(--tv-highlight);
        font-size: 0.9em;
    }
    .tv-conta-row:last-child { border-bottom: none; }
    .tv-conta-label { color: var(--tv-text-muted); }
    .tv-conta-value { color: var(--tv-text); font-weight: 600; }
    .tv-conta-value.active { color: var(--tv-green); }
    .tv-conta-value.inactive { color: var(--tv-primary); }
    .tv-conta-value.warning { color: var(--gold); }
    .tv-conta-btn {
        display: block;
        width: 100%;
        margin-top: 24px;
        padding: 16px;
        border-radius: var(--tv-radius);
        font-size: 0.9em;
        font-weight: 700;
        border: 2px solid var(--tv-highlight);
        background: transparent;
        color: var(--tv-text-secondary);
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        min-height: 56px;
        transition: var(--tv-transition);
    }
    .tv-conta-btn:focus,
    .tv-conta-btn.tv-focused {
        outline: 3px solid var(--tv-focus);
        outline-offset: 3px;
        border-color: var(--tv-focus);
    }
</style>

<div class="tv-conta">
    <div class="tv-conta-card">
        <div class="tv-conta-avatar">👤</div>
        <div class="tv-conta-name">{{ current_user.name or current_user.email }}</div>
        <div class="tv-conta-info">
            <div class="tv-conta-row">
                <span class="tv-conta-label">Email</span>
                <span class="tv-conta-value">{{ current_user.email }}</span>
            </div>
            <div class="tv-conta-row">
                <span class="tv-conta-label">Plano</span>
                <span class="tv-conta-value {% if current_user.is_premium_active or current_user.is_admin %}active{% else %}inactive{% endif %}">
                    {% if current_user.is_admin %}ADMIN{% elif current_user.is_premium_active %}Premium{% else %}Gratuito{% endif %}
                </span>
            </div>
            {% if current_user.is_admin %}
            <div class="tv-conta-row">
                <span class="tv-conta-label">Status</span>
                <span class="tv-conta-value active">⚡ Acesso Administrativo Ilimitado</span>
            </div>
            {% elif current_user.is_premium_active %}
            <div class="tv-conta-row">
                <span class="tv-conta-label">Status</span>
                <span class="tv-conta-value active">⭐ Acesso Ilimitado</span>
            </div>
            {% if remaining_days > 0 %}
            <div class="tv-conta-row">
                <span class="tv-conta-label">Dias Restantes</span>
                <span class="tv-conta-value active">{{ remaining_days }} dia(s)</span>
            </div>
            {% endif %}
            {% if current_user.expires_at %}
            <div class="tv-conta-row">
                <span class="tv-conta-label">Expira em</span>
                <span class="tv-conta-value">
                    {{ current_user.expires_at|bdate }}
                </span>
            </div>
            {% endif %}
            {% else %}
            <div class="tv-conta-row">
                <span class="tv-conta-label">Limite Diário</span>
                <span class="tv-conta-value inactive">{{ limit_h }}h por dia</span>
            </div>
            <div class="tv-conta-row">
                <span class="tv-conta-label">Usado Hoje</span>
                <span class="tv-conta-value inactive">{{ used_h }}h {{ used_m }}m</span>
            </div>
            <div class="tv-conta-row">
                <span class="tv-conta-label">Tempo Restante Hoje</span>
                <span class="tv-conta-value {% if horas == 0 and minutos == 0 %}warning{% else %}active{% endif %}">
                    {% if horas > 0 or minutos > 0 %}
                        ⏱️ {{ horas }}h {{ minutos }}m
                    {% else %}
                        ⏰ Esgotado
                    {% endif %}
                </span>
            </div>
            {% endif %}

            <div class="tv-conta-row">
                <span class="tv-conta-label">🕐 Fuso Horario</span>
                <select id="tzSelect" class="tv-conta-value" style="background:var(--tv-elevated); border:1px solid var(--tv-highlight); border-radius:var(--tv-radius-sm); padding:6px 10px; cursor:pointer;">
                    {% 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>
        </div>
        <a href="{{ url_for('logout') }}" class="tv-conta-btn tv-focusable">🔓 Sair da Conta</a>
    </div>
</div>
<script>
var tzSelect = document.getElementById('tzSelect');
if (tzSelect) {
    tzSelect.addEventListener('change', function() {
        fetch('/api/set_timezone', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({offset: parseFloat(this.value)})
        }).then(function(r) { return r.json(); }).then(function(d) {
            if (d.ok) location.reload();
        });
    });
}
</script>
{% endblock %}