{% extends spa_base or "base.html"%}
{% block title %}Admin - Notificar Usuarios{% endblock %}
{% block extra_head %}
<style>
    .notify-page { max-width: 700px; }
    .notify-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-bottom: 24px;
    }
    .notify-stat {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 16px;
        text-align: center;
    }
    .notify-stat .value {
        font-size: 1.5em;
        font-weight: 700;
        color: var(--text-primary);
    }
    .notify-stat .label {
        font-size: 0.75em;
        color: var(--text-muted);
        text-transform: uppercase;
        margin-top: 4px;
    }
    .notify-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 24px;
        margin-bottom: 20px;
    }
    .notify-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: 100px; resize: vertical; }
    .form-group input:focus, .form-group textarea:focus {
        outline: none;
        border-color: var(--text-secondary);
    }
    .target-options {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }
    .target-option {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: var(--transition);
    }
    .target-option:hover { border-color: var(--border-hover); }
    .target-option.selected { border-color: var(--primary); background: rgba(229,9,20,0.05); }
    .target-option input { display: none; }
    .target-option .info { font-size: 0.85em; color: var(--text-secondary); }
    .target-option .count { font-size: 0.75em; color: var(--text-muted); }
    .hint { font-size: 0.8em; color: var(--text-muted); margin-top: 4px; }
    .specific-email { display: none; margin-top: 12px; }
    .specific-email.active { display: block; }
    .channel-options {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }
    .channel-option {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: var(--transition);
    }
    .channel-option:hover { border-color: var(--border-hover); }
    .channel-option.selected { border-color: var(--primary); background: rgba(229,9,20,0.05); }
    .channel-option input { display: none; }
    .channel-option .info { font-size: 0.85em; color: var(--text-secondary); }
    @media (max-width: 768px) {
        .notify-stats { grid-template-columns: 1fr; }
        .target-options { grid-template-columns: 1fr; }
    }
</style>
{% endblock %}
{% block content %}
<div class="notify-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;">Enviar Notificacao</h1>

    <div class="notify-stats">
        <div class="notify-stat">
            <div class="value">{{ total_users }}</div>
            <div class="label">Total Usuarios</div>
        </div>
        <div class="notify-stat">
            <div class="value" style="color:var(--green);">{{ total_paid }}</div>
            <div class="label">Premium</div>
        </div>
        <div class="notify-stat">
            <div class="value" style="color:var(--gold);">{{ total_free }}</div>
            <div class="label">Free</div>
        </div>
    </div>

    <form method="POST">
        <div class="notify-card">
            <h3>Destinatarios</h3>
            <div class="target-options">
                <label class="target-option selected" onclick="selectTarget(this, 'all')">
                    <input type="radio" name="target" value="all" checked>
                    <div>
                        <div class="info">&#x1f465; Todos os Usuarios</div>
                        <div class="count">{{ total_users }} usuarios</div>
                    </div>
                </label>
                <label class="target-option" onclick="selectTarget(this, 'premium')">
                    <input type="radio" name="target" value="premium">
                    <div>
                        <div class="info">&#x2b50; Apenas Premium</div>
                        <div class="count">{{ total_paid }} usuarios</div>
                    </div>
                </label>
                <label class="target-option" onclick="selectTarget(this, 'free')">
                    <input type="radio" name="target" value="free">
                    <div>
                        <div class="info">&#x1f513; Apenas Free</div>
                        <div class="count">{{ total_free }} usuarios</div>
                    </div>
                </label>
                <label class="target-option" onclick="selectTarget(this, 'specific')">
                    <input type="radio" name="target" value="specific">
                    <div>
                        <div class="info">&#x1f4e7; Usuario Especifico</div>
                        <div class="count">por email</div>
                    </div>
                </label>
            </div>
            <div class="specific-email" id="specificEmail">
                <div class="form-group" style="margin-bottom:0;">
                    <label>Email do usuario</label>
                    <input type="email" name="email" placeholder="usuario@email.com">
                </div>
            </div>
        </div>

        <div class="notify-card">
            <h3>Canal de Envio</h3>
            <div class="channel-options">
                <label class="channel-option selected" onclick="selectChannel(this)">
                    <input type="radio" name="channel" value="both" checked>
                    <div>
                        <div class="info">&#x1f4e4; Notificacao + Email</div>
                    </div>
                </label>
                <label class="channel-option" onclick="selectChannel(this)">
                    <input type="radio" name="channel" value="notification">
                    <div>
                        <div class="info">&#x1f514; So Notificacao</div>
                    </div>
                </label>
                <label class="channel-option" onclick="selectChannel(this)">
                    <input type="radio" name="channel" value="email">
                    <div>
                        <div class="info">&#x2709; So Email</div>
                    </div>
                </label>
            </div>
        </div>

        <div class="notify-card">
            <h3>Mensagem</h3>
            <div class="form-group">
                <label>Titulo</label>
                <input type="text" name="title" placeholder="Ex: Novidade na plataforma!" required>
            </div>
            <div class="form-group">
                <label>Mensagem</label>
                <textarea name="message" placeholder="Escreva a mensagem que sera enviada..." required></textarea>
            </div>
            <div class="form-group">
                <label>Link (Opcional)</label>
                <input type="text" name="link" placeholder="/planos ou URL externa">
                <div class="hint">Link que o usuario sera redirecionado ao clicar na notificacao</div>
            </div>
        </div>

        <button type="submit" class="btn" style="width:auto;">Enviar Notificacao</button>
    </form>
</div>

<script>
function selectTarget(el, value) {
    document.querySelectorAll('.target-option').forEach(o => o.classList.remove('selected'));
    el.classList.add('selected');
    const specific = document.getElementById('specificEmail');
    if (value === 'specific') {
        specific.classList.add('active');
    } else {
        specific.classList.remove('active');
    }
}
function selectChannel(el) {
    document.querySelectorAll('.channel-option').forEach(o => o.classList.remove('selected'));
    el.classList.add('selected');
}
</script>
{% endblock %}