{% extends spa_base or "base.html"%}
{% block title %}Admin - Enviar Email{% endblock %}
{% block extra_head %}
<style>
    .email-page { max-width: 1100px; }
    .stats-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 28px; }
    .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; text-align: center; }
    .stat-card .num { font-size: 2em; font-weight: 800; color: var(--text-primary); }
    .stat-card .lbl { font-size: 0.78em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
    .stat-card.pending .num { color: var(--gold); }
    .stat-card.sending .num { color: #64c8ff; }
    .stat-card.sent .num { color: var(--green); }
    .stat-card.failed .num { color: var(--primary); }
    .email-layout { display: grid; grid-template-columns: 1fr 380px; gap: 20px; }
    @media(max-width: 860px) { .email-layout { grid-template-columns: 1fr; } }
    .email-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; margin-bottom: 18px; }
    .email-card h3 { font-size: 0.95em; font-weight: 700; color: var(--text-primary); margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
    .form-group { margin-bottom: 16px; }
    .form-group label { display: block; font-size: 0.78em; 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.92em; transition: var(--transition); }
    .form-group textarea { min-height: 160px; resize: vertical; font-family: 'Segoe UI', Helvetica, Arial, sans-serif; }
    .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--primary); background: var(--bg-elevated); }
    .form-group .hint { font-size: 0.78em; color: var(--text-muted); margin-top: 4px; }
    .recipients-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
    @media(max-width: 600px) { .recipients-grid { grid-template-columns: repeat(2, 1fr); } }
    .recipient-opt { position: relative; }
    .recipient-opt input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
    .recipient-opt label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 10px; background: var(--bg-surface); border: 2px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: var(--transition); font-size: 0.85em; color: var(--text-secondary); text-align: center; }
    .recipient-opt input:checked + label { border-color: var(--primary); background: rgba(229,9,20,0.08); color: var(--text-primary); }
    .recipient-opt label .count { font-size: 1.5em; font-weight: 800; color: var(--text-primary); line-height: 1; }
    .recipient-opt label .sub { font-size: 0.72em; color: var(--text-muted); }
    .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); }
    .toggle-row:last-child { border-bottom: none; }
    .toggle-label { font-size: 0.9em; color: var(--text-secondary); }
    .toggle-switch { position: relative; width: 44px; height: 24px; cursor: pointer; }
    .toggle-switch input { display: none; }
    .toggle-slider { position: absolute; inset: 0; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 100px; transition: var(--transition); }
    .toggle-slider::before { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: var(--text-muted); border-radius: 50%; transition: var(--transition); }
    .toggle-switch input:checked + .toggle-slider { background: var(--primary); border-color: var(--primary); }
    .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); background: #fff; }
    .btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
    .preview-box { background: #0a0a0a; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; margin-top: 14px; }
    .preview-box .prev-header { font-size: 0.78em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
    .preview-box .prev-subject { font-size: 1.1em; font-weight: 700; color: var(--primary); margin-bottom: 10px; }
    .preview-box .prev-body { color: var(--text-secondary); font-size: 0.9em; line-height: 1.7; white-space: pre-wrap; max-height: 200px; overflow-y: auto; }
    .history-table { width: 100%; border-collapse: collapse; }
    .history-table th { text-align: left; padding: 10px 12px; font-size: 0.75em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }
    .history-table td { padding: 12px; font-size: 0.88em; color: var(--text-secondary); border-bottom: 1px solid rgba(255,255,255,0.03); vertical-align: middle; }
    .history-table tr:hover td { background: rgba(255,255,255,0.02); }
    .status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 100px; font-size: 0.75em; font-weight: 600; }
    .status-badge.pending { background: rgba(245,197,24,0.15); color: var(--gold); }
    .status-badge.sending { background: rgba(100,200,255,0.15); color: #64c8ff; }
    .status-badge.sent { background: rgba(70,211,105,0.15); color: var(--green); }
    .status-badge.failed { background: rgba(229,9,20,0.15); color: var(--primary); }
    .status-badge.cancelled { background: rgba(128,128,128,0.15); color: #888; }
    .progress-bar { height: 6px; background: var(--bg-surface); border-radius: 3px; overflow: hidden; margin-top: 6px; }
    .progress-bar .fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width 0.5s; }
    .info-box { background: rgba(229,9,20,0.05); border: 1px solid rgba(229,9,20,0.2); border-radius: var(--radius-md); padding: 12px 16px; font-size: 0.85em; color: var(--text-secondary); margin-bottom: 16px; display: flex; gap: 10px; align-items: flex-start; }
    .info-box .icon { font-size: 1.1em; flex-shrink: 0; }
    .custom-emails-area { display: none; margin-top: 10px; }
    .custom-emails-area.visible { display: block; }
    .delay-row { display: flex; align-items: center; gap: 10px; }
    .delay-row input { width: 70px !important; }
    .delay-row span { font-size: 0.85em; color: var(--text-muted); }
</style>
{% endblock %}
{% block content %}
<div class="email-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.45em; font-weight:700; color:var(--text-primary); margin-bottom:6px;">📧 Enviar E-mail</h1>
    <p style="color:var(--text-muted); font-size:0.88em; margin-bottom:24px;">Envie e-mails personalizados para usuários do plataforma com controle de ritmo e agendamento.</p>

    <div class="stats-row">
        <div class="stat-card">
            <div class="num">{{ stats.total }}</div>
            <div class="lbl">Total</div>
        </div>
        <div class="stat-card pending">
            <div class="num">{{ stats.pending }}</div>
            <div class="lbl">Agendados</div>
        </div>
        <div class="stat-card sending">
            <div class="num">{{ stats.sending }}</div>
            <div class="lbl">Enviando</div>
        </div>
        <div class="stat-card sent">
            <div class="num">{{ stats.sent }}</div>
            <div class="lbl">Enviados</div>
        </div>
        <div class="stat-card failed">
            <div class="num">{{ stats.failed }}</div>
            <div class="lbl">Falhas</div>
        </div>
    </div>

    <div class="email-layout">
        <div>
            <div class="email-card">
                <h3>✏️ Configurar E-mail</h3>

                <div class="info-box">
                    <span class="icon">ℹ️</span>
                    <span>O e-mail será enviado com o layout oficial do Troço Play (cabeçalho vermelho, corpo branco, rodapé com URL). Use o botão <strong>Visualizar</strong> para conferir antes de enviar.</span>
                </div>

                <form method="POST">
                    <input type="hidden" name="action" value="preview">

                    <div class="form-group">
                        <label>Remetente</label>
                        <select name="sender_email">
                            {% for key, label, email_addr in email_senders %}
                            <option value="{{ key }}" {% if form.sender_key==key %}selected{% endif %}>{{ label }} — {{ email_addr }}</option>
                            {% endfor %}
                        </select>
                        <div class="hint">Escolha qual e-mail será usado como remetente. Configure as variáveis SMTP_MARKETING_* no ambiente para ativar a opção Marketing.</div>
                    </div>

                    <div class="form-group">
                        <label>Assunto / Título</label>
                        <input type="text" name="subject" value="{{ form.subject or '' }}" placeholder="Ex: Novidades no Troço Play — setembro 2026" required>
                    </div>

                    <div class="form-group">
                        <label>Mensagem</label>
                        <textarea name="body" placeholder="Escreva sua mensagem aqui...&#10;&#10;Suporta texto plain. Links são convertidos automaticamente.">{{ form.body or '' }}</textarea>
                        <div class="hint">O layout profissional e o rodapé são aplicados automaticamente.</div>
                    </div>

                    <div class="btn-row">
                        <button type="submit" class="btn btn-ghost" style="border-color:var(--border);">🔍 Visualizar</button>
                    </div>
                </form>

                {% if preview %}
                <div class="preview-box">
                    <div class="prev-header">Prévia do e-mail</div>
                    <div class="prev-subject">{{ preview_subject }}</div>
                    <div class="prev-body">{{ preview_body }}</div>
                </div>
                {% endif %}
            </div>

            <div class="email-card">
                <h3>📬 Destinatários</h3>

                <div class="recipients-grid">
                    <div class="recipient-opt">
                        <input type="radio" name="recipients_type" id="rtype_custom" value="custom" {% if form.rtype=='custom' %}checked{% endif %} onchange="toggleCustom()">
                        <label for="rtype_custom">
                            <span class="count">✏️</span>
                            <span>Personalizado</span>
                            <span class="sub">E-mails manuales</span>
                        </label>
                    </div>
                    <div class="recipient-opt">
                        <input type="radio" name="recipients_type" id="rtype_all" value="all" {% if form.rtype=='all' %}checked{% endif %} onchange="toggleCustom()">
                        <label for="rtype_all">
                            <span class="count">{{ counts.all }}</span>
                            <span>Todos</span>
                            <span class="sub">Todos usuários</span>
                        </label>
                    </div>
                    <div class="recipient-opt">
                        <input type="radio" name="recipients_type" id="rtype_free" value="free" {% if form.rtype=='free' %}checked{% endif %} onchange="toggleCustom()">
                        <label for="rtype_free">
                            <span class="count">{{ counts.free }}</span>
                            <span>Free</span>
                            <span class="sub">Contas grátis</span>
                        </label>
                    </div>
                    <div class="recipient-opt">
                        <input type="radio" name="recipients_type" id="rtype_paid" value="paid" {% if form.rtype=='paid' %}checked{% endif %} onchange="toggleCustom()">
                        <label for="rtype_paid">
                            <span class="count">{{ counts.paid }}</span>
                            <span>VIP</span>
                            <span class="sub">Assinantes</span>
                        </label>
                    </div>
                    <div class="recipient-opt">
                        <input type="radio" name="recipients_type" id="rtype_banned" value="banned" {% if form.rtype=='banned' %}checked{% endif %} onchange="toggleCustom()">
                        <label for="rtype_banned">
                            <span class="count">{{ counts.banned }}</span>
                            <span>Banidos</span>
                            <span class="sub">Contas banidas</span>
                        </label>
                    </div>
                    <div class="recipient-opt">
                        <input type="radio" name="recipients_type" id="rtype_inactive" value="inactive" {% if form.rtype=='inactive' %}checked{% endif %} onchange="toggleCustom()">
                        <label for="rtype_inactive">
                            <span class="count">{{ counts.inactive }}</span>
                            <span>Inativos</span>
                            <span class="sub">Desativados</span>
                        </label>
                    </div>
                </div>

                <div id="customEmailArea" class="custom-emails-area {% if form.rtype=='custom' %}visible{% endif %}">
                    <div class="form-group" style="margin-bottom:0;">
                        <label>E-mails (separados por vírgula)</label>
                        <textarea name="recipients_emails" rows="3" placeholder="email1@exemplo.com, email2@exemplo.com, ...">{{ form.r_emails or '' }}</textarea>
                        <div class="hint">Digite os e-mails separados por vírgula.</div>
                    </div>
                </div>
            </div>

            <div class="email-card">
                <h3>⏱️ Envio e Agendamento</h3>

                <div class="delay-row" style="margin-bottom:16px;">
                    <div class="form-group" style="margin-bottom:0; flex:1;">
                        <label>Intervalo entre e-mails</label>
                        <div style="display:flex; align-items:center; gap:8px;">
                            <input type="number" name="delay_seconds" min="2" max="30" value="{{ form.delay or 5 }}">
                            <span>segundos entre cada envio</span>
                        </div>
                        <div class="hint">Tempo entre cada e-mail para evitar bloqueios SMTP. Recomendado: 3–5s.</div>
                    </div>
                </div>

                <div class="form-group">
                    <label>Enviar</label>
                    <div style="display:flex; gap:10px; flex-wrap:wrap; margin-top:4px;">
                        <label style="display:flex; align-items:center; gap:6px; padding:10px 16px; background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:0.88em; color:var(--text-secondary);">
                            <input type="radio" name="schedule_mode" value="now" checked> 🚀 Imediatamente
                        </label>
                        <label style="display:flex; align-items:center; gap:6px; padding:10px 16px; background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:0.88em; color:var(--text-secondary);">
                            <input type="radio" name="schedule_mode" value="later" onchange="document.getElementById('schedDiv').style.display=this.checked?'flex':'none'"> 📅 Agendar
                        </label>
                    </div>
                </div>

                <div id="schedDiv" style="display:none; margin-top:10px;">
                    <div class="form-group" style="margin-bottom:0;">
                        <label>Data e hora (UTC)</label>
                        <input type="datetime-local" name="scheduled_at" value="{{ form.scheduled or '' }}">
                        <div class="hint">Horário em UTC. Ex: 2026-09-06T03:00 = 00:00 Brasília.</div>
                    </div>
                </div>
            </div>

            <div class="email-card">
                <h3>🧪 Teste</h3>
                <form method="POST" style="display:flex; gap:10px; align-items:flex-end;">
                    <input type="hidden" name="action" value="test">
                    <input type="hidden" name="subject" value="{{ form.subject or '' }}">
                    <input type="hidden" name="body" value="{{ form.body or '' }}">
                    <input type="hidden" name="sender_email" value="{{ form.sender_key or 'default' }}">
                    <input type="hidden" name="recipients_type" value="{{ form.rtype or 'custom' }}">
                    <input type="hidden" name="recipients_emails" value="{{ form.r_emails or '' }}">
                    <input type="hidden" name="delay_seconds" value="{{ form.delay or 5 }}">
                    <div class="form-group" style="margin-bottom:0; flex:1;">
                        <label>E-mail de teste</label>
                        <input type="email" name="test_email" placeholder="seu@email.com">
                    </div>
                    <button type="submit" class="btn btn-ghost" style="white-space:nowrap;">Enviar Teste</button>
                </form>
            </div>

            <div class="btn-row" style="margin-top:8px;">
                <form method="POST" style="display:inline;">
                    <input type="hidden" name="action" value="send">
                    <input type="hidden" name="subject" value="{{ form.subject or '' }}">
                    <input type="hidden" name="body" value="{{ form.body or '' }}">
                    <input type="hidden" name="sender_email" value="{{ form.sender_key or 'default' }}">
                    <input type="hidden" name="recipients_type" value="{{ form.rtype or 'custom' }}">
                    <input type="hidden" name="recipients_emails" value="{{ form.r_emails or '' }}">
                    <input type="hidden" name="delay_seconds" value="{{ form.delay or 5 }}">
                    <button type="submit" class="btn" style="padding:14px 32px; font-size:1em;" onclick="return confirm('Enviar e-mail para todos os destinatários selecionados?')">🚀 Enviar Agora</button>
                </form>
                <form method="POST" style="display:inline;">
                    <input type="hidden" name="action" value="schedule">
                    <input type="hidden" name="subject" value="{{ form.subject or '' }}">
                    <input type="hidden" name="body" value="{{ form.body or '' }}">
                    <input type="hidden" name="sender_email" value="{{ form.sender_key or 'default' }}">
                    <input type="hidden" name="recipients_type" value="{{ form.rtype or 'custom' }}">
                    <input type="hidden" name="recipients_emails" value="{{ form.r_emails or '' }}">
                    <input type="hidden" name="delay_seconds" value="{{ form.delay or 5 }}">
                    <input type="hidden" name="scheduled_at" id="schedHidden">
                    <button type="submit" class="btn btn-outline" style="padding:14px 32px; font-size:1em;" onclick="let inp=document.querySelector('input[name=scheduled_at]'); document.getElementById('schedHidden').value=inp.value; return confirm('Agendar este e-mail para a data/hora definida?');">📅 Agendar</button>
                </form>
            </div>
        </div>

        <div>
            <div class="email-card">
                <h3>📋 Histórico Recente</h3>
                {% if recent %}
                <table class="history-table">
                    <thead>
                        <tr>
                            <th>Assunto</th>
                            <th>Status</th>
                            <th>Envio</th>
                            <th>Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for q in recent %}
                        <tr>
                            <td style="max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" title="{{ q.subject }}">{{ q.subject }}</td>
                            <td>
                                <span class="status-badge {{ q.status }}">
                                    {% if q.status=='pending' %}⏳{% elif q.status=='sending' %}⚡{% elif q.status=='sent' %}✅{% elif q.status=='failed' %}❌{% else %}🚫{% endif %}
                                    {{ q.status }}
                                </span>
                            </td>
                            <td>
                                {% if q.sent_at %}{{ q.sent_at.strftime('%d/%m %H:%M') }}{% elif q.scheduled_at %}{{ q.scheduled_at.strftime('%d/%m %H:%M') }}{% else %}{{ q.created_at.strftime('%d/%m %H:%M') }}{% endif %}
                                <div style="font-size:0.75em; color:var(--text-muted);">{{ q.sent_count }}/{{ q.total_recipients }}</div>
                                {% if q.total_recipients > 0 %}
                                <div class="progress-bar"><div class="fill" style="width:{{ (q.sent_count / q.total_recipients * 100)|round }}%"></div></div>
                                {% endif %}
                            </td>
                            <td>
                                {% if q.status in ('pending', 'sending') %}
                                <form method="POST" style="display:inline;">
                                    <input type="hidden" name="action" value="cancel">
                                    <input type="hidden" name="id" value="{{ q.id }}">
                                    <button type="submit" class="btn btn-ghost" style="padding:4px 8px; font-size:0.75em; color:var(--primary);" onclick="return confirm('Cancelar este envio?')">Cancelar</button>
                                </form>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <p style="color:var(--text-muted); font-size:0.88em; text-align:center; padding:20px;">Nenhum e-mail enviado ainda.</p>
                {% endif %}
            </div>

            <div class="email-card" style="background:rgba(245,197,24,0.03); border-color:rgba(245,197,24,0.2);">
                <h3 style="color:var(--gold);">⚠️ Boas Práticas</h3>
                <ul style="padding-left:16px; font-size:0.83em; color:var(--text-muted); line-height:1.9;">
                    <li>Use <strong>intervalo de 3–5s</strong> para evitar bloqueios SMTP.</li>
                    <li>Prefira <strong>agendar em horários de baixo movimento</strong>.</li>
                    <li>Evite linhas muito longas ou many links no corpo para não触发 spam.</li>
                    <li>Use um <strong>teste</strong> antes de enviar para todos.</li>
                    <li>Remova destinatários inválidos ou desativados antes de reenviar.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
function toggleCustom() {
    var sel = document.querySelector('input[name="recipients_type"]:checked').value;
    var area = document.getElementById('customEmailArea');
    if (sel === 'custom') {
        area.classList.add('visible');
    } else {
        area.classList.remove('visible');
    }
}
document.addEventListener('DOMContentLoaded', toggleCustom);
</script>
{% endblock %}