{% extends spa_base or "base.html" %}
{% block title %}Painel{% endblock %}
{% block extra_head %}
<style>
    .welcome-section {
        margin-bottom: 32px;
    }
    .welcome-section h1 {
        font-size: 1.8em;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 8px;
    }
    .welcome-section p {
        color: var(--text-muted);
        font-size: 0.95em;
    }

    /* Status Banner */
    .status-banner {
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        padding: 20px 24px;
        margin-bottom: 24px;
        border: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
    }
    .status-banner.success { border-left: 4px solid var(--green); }
    .status-banner.warning { border-left: 4px solid var(--gold); }
    .status-banner.info { border-left: 4px solid var(--primary); }
    .status-banner .status-text {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .status-banner .status-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2em;
    }
    .status-banner.success .status-icon { background: rgba(70,211,105,0.1); }
    .status-banner.warning .status-icon { background: rgba(245,197,24,0.1); }
    .status-banner.info .status-icon { background: rgba(229,9,20,0.1); }
    .status-banner .status-title {
        font-weight: 600;
        color: var(--text-primary);
        font-size: 0.95em;
    }
    .status-banner .status-desc {
        color: var(--text-muted);
        font-size: 0.85em;
        margin-top: 2px;
    }

    /* Stats Cards */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 32px;
    }
    .stat-card {
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        padding: 24px;
        border: 1px solid var(--border);
        text-align: center;
        transition: var(--transition);
    }
    .stat-card:hover { border-color: var(--border-hover); }
    .stat-card .stat-icon {
        font-size: 1.5em;
        margin-bottom: 12px;
    }
    .stat-card .num {
        font-size: 2em;
        font-weight: 700;
        color: var(--text-primary);
        line-height: 1;
    }
    .stat-card .label {
        font-size: 0.8em;
        color: var(--text-muted);
        margin-top: 8px;
        font-weight: 500;
    }

    /* Quick Actions */
    .quick-actions {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-bottom: 32px;
    }
    .action-card {
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        padding: 24px;
        border: 1px solid var(--border);
        text-decoration: none;
        transition: var(--transition);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }
    .action-card:hover {
        border-color: var(--primary);
        transform: translateY(-2px);
        box-shadow: var(--shadow-hover);
    }
    .action-card .action-icon {
        width: 56px;
        height: 56px;
        background: rgba(229,9,20,0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5em;
    }
    .action-card .action-title {
        font-weight: 600;
        color: var(--text-primary);
        font-size: 1em;
    }
    .action-card .action-desc {
        color: var(--text-muted);
        font-size: 0.85em;
    }

    /* Continue Watching */
    .continue-section {
        margin-bottom: 32px;
    }
    .continue-section h2 {
        font-size: 1.2em;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .continue-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
    }
    .continue-card {
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        overflow: hidden;
        border: 1px solid var(--border);
        cursor: pointer;
        transition: var(--transition);
        text-decoration: none;
    }
    .continue-card:hover {
        border-color: var(--border-hover);
        transform: scale(1.02);
    }
    .continue-thumb {
        height: 120px;
        background: var(--bg-surface);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5em;
        position: relative;
    }
    .continue-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .continue-info {
        padding: 12px 14px;
    }
    .continue-info h4 {
        font-size: 0.85em;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 4px;
    }
    .continue-info .meta {
        font-size: 0.75em;
        color: var(--text-muted);
    }

    /* Secondary Actions */
    .secondary-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 24px;
    }

    @media (max-width: 768px) {
        .stats-grid { grid-template-columns: repeat(2, 1fr); }
        .quick-actions { grid-template-columns: 1fr; }
        .continue-grid { grid-template-columns: repeat(2, 1fr); }
    }
</style>
{% endblock %}
{% block content %}
<div class="welcome-section">
    <h1>Bem-vindo de volta</h1>
    <p>O que voce quer assistir hoje?</p>
</div>

{% if pending_payment %}
<div class="status-banner warning">
    <div class="status-text">
        <div class="status-icon">&#x1f504;</div>
        <div>
            <div class="status-title">Pagamento Pendente</div>
            <div class="status-desc">Voce tem uma cobranca PIX pendente.</div>
        </div>
    </div>
    <a href="{{ url_for('pagamento', plan_type=pending_payment.plan_type) }}" class="btn btn-sm" style="background:var(--gold);color:#000;">Continuar Pagamento</a>
</div>
{% endif %}

{% if current_user.is_admin %}
<div class="status-banner info">
    <div class="status-text">
        <div class="status-icon">⚙️</div>
        <div>
            <div class="status-title">Conta de Administrador</div>
            <div class="status-desc">Acesse o painel administrativo para gerenciar a plataforma</div>
        </div>
    </div>
    <a href="{{ url_for('admin_panel') }}" class="btn btn-sm">Acessar Admin</a>
</div>
{% endif %}

{% if current_user.is_paid and current_user.paid_until and current_user.paid_until_utc > now %}
{% set time_diff = (current_user.paid_until_utc - now) %}
{% set remaining_days = time_diff.days %}
<div class="status-banner success">
    <div class="status-text">
        <div class="status-icon">⭐</div>
        <div>
            <div class="status-title">Plano Premium Ativo</div>
            <div class="status-desc">Acesso ilimitado até {{ current_user.paid_until|brdate }}</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>
    <a href="{{ url_for('conta') }}" class="btn btn-sm btn-outline">Ver Conta</a>
</div>
{% elif not current_user.can_watch() %}
<div class="status-banner warning">
    <div class="status-text">
        <div class="status-icon">⏰</div>
        <div>
            <div class="status-title">Tempo diário esgotado</div>
            <div class="status-desc">Assine o Premium para acesso ilimitado</div>
        </div>
    </div>
    <a href="{{ url_for('planos') }}" class="btn btn-sm">Ver Planos</a>
</div>
{% else %}
<div class="status-banner info">
    <div class="status-text">
        <div class="status-icon">⏱️</div>
        <div>
            <div class="status-title">Plano Gratuito</div>
            <div class="status-desc">Restam {{ horas }}h {{ minutos }}m de acesso hoje</div>
        </div>
    </div>
    <a href="{{ url_for('planos') }}" class="btn btn-sm">Assinar Premium</a>
</div>
{% endif %}

<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-icon">⏱️</div>
        <div class="num">{% if current_user.is_premium_active or current_user.is_admin %}Ilimitado{% elif can_watch %}{{ horas }}h {{ minutos }}m{% else %}0h{% endif %}</div>
        <div class="label">Tempo Hoje</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">📺</div>
        <div class="num" id="stat-canais">{{ qtd_canais }}</div>
        <div class="label">Canais ao Vivo</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">🎬</div>
        <div class="num">{{ qtd_filmes }}</div>
        <div class="label">Filmes</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">🎞️</div>
        <div class="num">{{ qtd_series }}</div>
        <div class="label">Séries</div>
    </div>
    {% if current_user.is_paid and current_user.paid_until and current_user.paid_until_utc > now %}
    {% set time_diff = (current_user.paid_until_utc - now) %}
    {% set remaining_days = time_diff.days %}
    <div class="stat-card" style="border-color:var(--green);">
        <div class="stat-icon">⭐</div>
        <div class="num" style="color:var(--green);">{% if remaining_days > 0 %}{{ remaining_days }}d{% else %}Hoje{% endif %}</div>
        <div class="label">Plano Expira</div>
    </div>
    {% endif %}
</div>

<div class="quick-actions">
    <a href="{{ url_for('canais') }}" class="action-card">
        <div class="action-icon">📺</div>
        <div class="action-title">Canais ao Vivo</div>
        <div class="action-desc">Assista TV ao vivo agora</div>
    </a>
    <a href="{{ url_for('filmes') }}" class="action-card">
        <div class="action-icon">🎬</div>
        <div class="action-title">Filmes</div>
        <div class="action-desc">Escolha um filme e assista agora</div>
    </a>
    <a href="{{ url_for('series') }}" class="action-card">
        <div class="action-icon">🎞️</div>
        <div class="action-title">Séries</div>
        <div class="action-desc">Temporadas, episódios e favoritos</div>
    </a>
</div>

{% if continue_items %}
<div class="continue-section">
    <h2>Continuar Assistindo</h2>
    <div class="continue-grid">
        {% for item in continue_items %}
        <a href="{{ url_for('player', tipo=item.tipo, item_id=item.id) }}" class="continue-card">
            <div class="continue-thumb">
                {% if item.logo %}
                <img src="{{ item.logo|proxy_logo }}" alt="{{ item.name }}" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" loading="lazy" decoding="async">
                <span style="display:none;">📺</span>
                {% else %}
                <span>📺</span>
                {% endif %}
            </div>
            <div class="continue-info">
                <h4 title="{{ item.name }}">{{ item.name }}</h4>
                <div class="meta">{{ item.group_title }} · {{ item.last_seen|btime }}</div>
            </div>
        </a>
        {% endfor %}
    </div>
</div>
{% endif %}

<div class="secondary-actions">
    <a href="{{ url_for('conta') }}" class="btn btn-outline">Minha Conta</a>
    <a href="{{ url_for('afiliados') }}" class="btn btn-outline">Programa de Afiliados</a>
    <a href="{{ url_for('favoritos') }}" class="btn btn-outline">Favoritos</a>
</div>

{% endblock %}