{% extends 'base.html.twig' %}
{% block title %}Settings – Rise Mailer{% endblock %}

{% block stylesheets %}
<style>
:root{--primary:#7c3aed;--secondary:#ec4899}
.pg-wrap{max-width:760px;margin:0 auto}
.card-s{background:#fff;border-radius:1.1rem;box-shadow:0 4px 18px rgba(0,0,0,.07);overflow:hidden;margin-bottom:1.5rem}
.card-head{padding:1.1rem 1.5rem;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:.5rem}
.card-head h3{font-size:.95rem;font-weight:700;color:#1e293b;margin:0}
.card-body{padding:1.5rem}
.fl{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1.1rem}
.fl label{font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em}
.form-ctrl{border:1.5px solid #e2e8f0;border-radius:.65rem;padding:.6rem .9rem;font-size:.875rem;
           font-family:inherit;color:#1e293b;background:#fff;transition:border-color .2s;width:100%;outline:none}
.form-ctrl:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,58,237,.1)}
.radio-group{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.25rem}
.radio-card{flex:1;min-width:120px;border:2px solid #e2e8f0;border-radius:.75rem;padding:.75rem 1rem;cursor:pointer;
            display:flex;align-items:center;gap:.5rem;transition:all .2s;background:#fff}
.radio-card:hover{border-color:#c4b5fd}
.radio-card input[type=radio]{accent-color:var(--primary);width:16px;height:16px;flex-shrink:0}
.radio-card.selected{border-color:var(--primary);background:#faf5ff}
.radio-card span{font-size:.82rem;font-weight:600;color:#374151}
.radio-card .rc-icon{font-size:1.1rem;color:var(--primary)}
.btn-save{background:linear-gradient(135deg,var(--primary),var(--secondary));border:none;border-radius:.75rem;
          padding:.65rem 1.5rem;color:#fff;font-weight:700;font-size:.9rem;cursor:pointer;
          display:inline-flex;align-items:center;gap:.4rem;transition:opacity .2s}
.btn-save:hover{opacity:.88}
.section-hidden{display:none}
.hint{font-size:.72rem;color:#94a3b8;margin-top:.25rem}
.alert-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;border-radius:.75rem;
               padding:.75rem 1rem;font-size:.875rem;margin-bottom:1.25rem;display:flex;align-items:center;gap:.5rem}
</style>
{% endblock %}

{% block body %}
<div class="pg-wrap">

<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;flex-wrap:wrap;gap:.5rem">
    <h1 style="font-size:1.5rem;font-weight:700;color:#fff;margin:0;display:flex;align-items:center;gap:.5rem">
        <i class="bi bi-gear-fill"></i> Settings
    </h1>
</div>

{% for msg in app.flashes('success') %}
<div class="alert-success"><i class="bi bi-check-circle-fill"></i> {{ msg }}</div>
{% endfor %}

<div class="card-s animate-fade-in">
    <div class="card-head">
        <i class="bi bi-envelope-gear-fill" style="color:var(--primary)"></i>
        <h3>Email Sender Configuration</h3>
    </div>
    <div class="card-body">
        <form method="post" action="{{ path('app_settings_mailer') }}" id="mailerForm">

            <p style="font-size:.8rem;color:#64748b;margin-bottom:1.25rem">
                Choose how Rise Mailer sends emails on your behalf. You can use the shared system mailer or connect your own provider.
            </p>

            {# Service selector #}
            <div style="margin-bottom:1.5rem">
                <div style="font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.6rem">Email Service</div>
                <div class="radio-group">
                    <label class="radio-card {% if config.service == 'system' or config.service is null %}selected{% endif %}" id="rc-system">
                        <input type="radio" name="service" value="system"
                            {% if config.service == 'system' or config.service is null %}checked{% endif %}
                            onchange="switchService('system')">
                        <i class="bi bi-server rc-icon"></i>
                        <span>System Default</span>
                    </label>
                    <label class="radio-card {% if config.service == 'brevo' %}selected{% endif %}" id="rc-brevo">
                        <input type="radio" name="service" value="brevo"
                            {% if config.service == 'brevo' %}checked{% endif %}
                            onchange="switchService('brevo')">
                        <i class="bi bi-send rc-icon"></i>
                        <span>Brevo API</span>
                    </label>
                    <label class="radio-card {% if config.service == 'gmail' %}selected{% endif %}" id="rc-gmail">
                        <input type="radio" name="service" value="gmail"
                            {% if config.service == 'gmail' %}checked{% endif %}
                            onchange="switchService('gmail')">
                        <i class="bi bi-google rc-icon"></i>
                        <span>Gmail</span>
                    </label>
                    <label class="radio-card {% if config.service == 'smtp' %}selected{% endif %}" id="rc-smtp">
                        <input type="radio" name="service" value="smtp"
                            {% if config.service == 'smtp' %}checked{% endif %}
                            onchange="switchService('smtp')">
                        <i class="bi bi-hdd-network rc-icon"></i>
                        <span>Custom SMTP</span>
                    </label>
                </div>
            </div>

            {# Free-tier notice for System Default #}
            <div id="notice-system" class="{% if config.service != 'system' and config.service is not null %}section-hidden{% endif %}" style="background:#faf5ff;border:1.5px solid #c4b5fd;border-radius:.75rem;padding:.75rem 1rem;margin-bottom:1.25rem;font-size:.8rem;color:#6d28d9;display:flex;align-items:flex-start;gap:.5rem">
                <i class="bi bi-info-circle-fill" style="flex-shrink:0;margin-top:.05rem"></i>
                <span><strong>Free tier:</strong> System Default uses the platform's shared mailer — limited to <strong>100 emails per day</strong>. Connect your own Gmail, Brevo, or SMTP account to remove this limit.</span>
            </div>

            {# Always shown: From fields #}
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem">
                <div class="fl" style="margin-bottom:0">
                    <label>From Email</label>
                    <input type="email" name="from_email" class="form-ctrl"
                           value="{{ config.fromEmail }}" placeholder="you@example.com">
                    <div class="hint">Shown as the sender address</div>
                </div>
                <div class="fl" style="margin-bottom:0">
                    <label>From Name</label>
                    <input type="text" name="from_name" class="form-ctrl"
                           value="{{ config.fromName }}" placeholder="Your Name or Brand">
                    <div class="hint">Shown as the sender display name</div>
                </div>
            </div>

            {# Brevo section #}
            <div id="section-brevo" class="{% if config.service != 'brevo' %}section-hidden{% endif %}" style="margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid #f1f5f9">
                <div style="font-size:.8rem;font-weight:600;color:#475569;margin-bottom:.75rem;display:flex;align-items:center;gap:.4rem">
                    <i class="bi bi-send" style="color:var(--primary)"></i> Brevo API Settings
                </div>
                <div class="fl">
                    <label>Brevo API Key</label>
                    <input type="password" name="brevo_api_key" class="form-ctrl"
                           value="{{ config.brevoApiKey }}" placeholder="xkeysib-...">
                    <div class="hint">Found in your Brevo account under SMTP &amp; API</div>
                </div>
            </div>

            {# Gmail section #}
            <div id="section-gmail" class="{% if config.service != 'gmail' %}section-hidden{% endif %}" style="margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid #f1f5f9">
                <div style="font-size:.8rem;font-weight:600;color:#475569;margin-bottom:.75rem;display:flex;align-items:center;gap:.4rem">
                    <i class="bi bi-google" style="color:var(--primary)"></i> Gmail Settings
                </div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
                    <div class="fl" style="margin-bottom:0">
                        <label>Gmail Address</label>
                        <input type="email" name="smtp_user" id="gmail_user" class="form-ctrl"
                               value="{% if config.service == 'gmail' %}{{ config.smtpUser }}{% endif %}"
                               placeholder="you@gmail.com">
                    </div>
                    <div class="fl" style="margin-bottom:0">
                        <label>App Password</label>
                        <input type="password" name="smtp_pass" id="gmail_pass" class="form-ctrl"
                               placeholder="16-character app password">
                        <div class="hint">Generate at myaccount.google.com → Security → App passwords</div>
                    </div>
                </div>
            </div>

            {# SMTP section #}
            <div id="section-smtp" class="{% if config.service != 'smtp' %}section-hidden{% endif %}" style="margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid #f1f5f9">
                <div style="font-size:.8rem;font-weight:600;color:#475569;margin-bottom:.75rem;display:flex;align-items:center;gap:.4rem">
                    <i class="bi bi-hdd-network" style="color:var(--primary)"></i> SMTP Settings
                </div>
                <div style="display:grid;grid-template-columns:2fr 1fr;gap:1rem;margin-bottom:1rem">
                    <div class="fl" style="margin-bottom:0">
                        <label>SMTP Host</label>
                        <input type="text" name="smtp_host" class="form-ctrl"
                               value="{{ config.smtpHost }}" placeholder="smtp.example.com">
                    </div>
                    <div class="fl" style="margin-bottom:0">
                        <label>Port</label>
                        <input type="number" name="smtp_port" class="form-ctrl"
                               value="{{ config.smtpPort ?? 587 }}" placeholder="587">
                    </div>
                </div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
                    <div class="fl" style="margin-bottom:0">
                        <label>Username</label>
                        <input type="text" name="smtp_user" class="form-ctrl"
                               value="{{ config.smtpUser }}" placeholder="smtp username">
                    </div>
                    <div class="fl" style="margin-bottom:0">
                        <label>Password</label>
                        <input type="password" name="smtp_pass" class="form-ctrl"
                               placeholder="Leave blank to keep current">
                    </div>
                </div>
            </div>

            <div style="margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid #f1f5f9">
                <button type="submit" class="btn-save">
                    <i class="bi bi-floppy2-fill"></i> Save Settings
                </button>
            </div>

        </form>
    </div>
</div>

</div>
{% endblock %}

{% block javascripts %}
<script>
const services = ['system', 'brevo', 'gmail', 'smtp'];

function switchService(val) {
    services.forEach(s => {
        const card = document.getElementById('rc-' + s);
        const sec  = document.getElementById('section-' + s);
        if (card) card.classList.toggle('selected', s === val);
        if (sec)  sec.classList.toggle('section-hidden', s !== val);
    });
    const notice = document.getElementById('notice-system');
    if (notice) notice.classList.toggle('section-hidden', val !== 'system');
}

// Init on load
(function() {
    const checked = document.querySelector('input[name="service"]:checked');
    if (checked) switchService(checked.value);
})();
</script>
{% endblock %}