{% extends 'account/base_account.html.twig' %}

{% block title %}{{ actu ? 'Éditer' : 'Nouveau post' }} — Mon Actu{% endblock %}

{% block content %}
<div class="page-header">
    <div style="display:flex; align-items:center; gap:12px; margin-bottom:8px;">
        <a href="{{ path('app_actu_index', {beneficiaireId: beneficiaire.id}) }}" style="color:#86868b;text-decoration:none;font-size:13px;">← Mes posts</a>
    </div>
    <h1 class="page-title">{{ actu ? '✏️ Éditer le post' : '✨ Nouveau post' }}</h1>
    <p class="page-subtitle">{{ beneficiaire.prenom }} {{ beneficiaire.nom }} · {{ beneficiaire.commande.packType|upper }}</p>
</div>

<form method="post"
      action="{{ actu ? path('app_actu_edit', {id: actu.id}) : path('app_actu_new', {beneficiaireId: beneficiaire.id}) }}"
      enctype="multipart/form-data">

    <div style="display:grid; grid-template-columns:1fr 340px; gap:24px; align-items:start;">

        {# ── FORMULAIRE GAUCHE ── #}
        <div style="display:flex; flex-direction:column; gap:16px;">

            {# Contenu #}
            <div class="card">
                <div style="padding:18px 22px; border-bottom:1px solid #f0f0f5;">
                    <span style="font-family:monospace;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#86868b;">Contenu du post</span>
                </div>
                <div style="padding:22px; display:flex; flex-direction:column; gap:16px;">

                    {# Titre #}
                    <div>
                        <label style="display:block;font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:#86868b;margin-bottom:7px;">Titre *</label>
                        <input type="text" name="titre" required
                               value="{{ actu ? actu.titre : '' }}"
                               placeholder="Ex : Villa 4 chambres piscine — Quartier Capitole"
                               style="width:100%;background:#f5f5f7;border:1px solid #e5e5ea;border-radius:10px;padding:11px 14px;font-size:14px;color:#1d1d1f;outline:none;">
                    </div>

                    {# Catégorie #}
                    <div>
                        <label style="display:block;font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:#86868b;margin-bottom:7px;">Catégorie</label>
                        <div style="display:flex;gap:8px;flex-wrap:wrap;">
                            {% for key, label in categories %}
                                <label style="cursor:pointer;">
                                    <input type="radio" name="categorie" value="{{ key }}"
                                           {{ (actu and actu.categorie == key) or (not actu and key == 'realisation') ? 'checked' : '' }}
                                           style="display:none;" class="cat-radio">
                                    <span class="cat-pill" data-cat="{{ key }}" style="display:inline-block;padding:7px 14px;border-radius:20px;border:1px solid #e5e5ea;font-size:13px;cursor:pointer;background:#f5f5f7;color:#86868b;transition:all .15s;">
                                        {{ label }}
                                    </span>
                                </label>
                            {% endfor %}
                        </div>
                    </div>

                    {# Contenu #}
                    <div>
                        <label style="display:block;font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:#86868b;margin-bottom:7px;">Contenu * <span style="font-weight:normal;">(3–5 lignes recommandées)</span></label>
                        <textarea name="contenu" required rows="5"
                                  placeholder="Décrivez votre actualité de façon claire et engageante…"
                                  style="width:100%;background:#f5f5f7;border:1px solid #e5e5ea;border-radius:10px;padding:11px 14px;font-size:14px;color:#1d1d1f;outline:none;resize:vertical;line-height:1.6;">{{ actu ? actu.contenu : '' }}</textarea>
                    </div>

                    {# Image #}
                    <div>
                        <label style="display:block;font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:#86868b;margin-bottom:7px;">Image (optionnel)</label>
                        {% if actu and actu.imageFilename %}
                            <div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;">
                                <img src="{{ actu.imageUrl }}" alt="" style="width:80px;height:60px;border-radius:8px;object-fit:cover;">
                                <div>
                                    <div style="font-size:13px;color:#1d1d1f;margin-bottom:4px;">Image actuelle</div>
                                    <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#ff3b30;cursor:pointer;">
                                        <input type="checkbox" name="removeImage" value="1"> Supprimer l'image
                                    </label>
                                </div>
                            </div>
                        {% endif %}
                        <div style="border:2px dashed #e5e5ea;border-radius:12px;padding:24px;text-align:center;cursor:pointer;transition:all .2s;" id="upload-zone">
                            <div style="font-size:26px;margin-bottom:8px;">🖼️</div>
                            <div style="font-size:13px;color:#86868b;"><strong style="color:#007aff;">Cliquez pour uploader</strong> ou glissez-déposez<br>JPG, PNG, WebP · Max 2 Mo · Ratio recommandé 16:9</div>
                            <input type="file" name="image" id="image-input" accept="image/*" style="display:none;">
                        </div>
                        <div id="image-preview" style="display:none;margin-top:10px;">
                            <img id="preview-img" alt="" style="max-width:100%;border-radius:10px;max-height:200px;object-fit:cover;">
                        </div>
                    </div>

                    {# CTA #}
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                        <div>
                            <label style="display:block;font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:#86868b;margin-bottom:7px;">Lien CTA (optionnel)</label>
                            <input type="url" name="ctaUrl"
                                   value="{{ actu ? actu.ctaUrl : '' }}"
                                   placeholder="https://…"
                                   style="width:100%;background:#f5f5f7;border:1px solid #e5e5ea;border-radius:10px;padding:11px 14px;font-size:14px;color:#1d1d1f;outline:none;">
                        </div>
                        <div>
                            <label style="display:block;font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:#86868b;margin-bottom:7px;">Texte du bouton</label>
                            <input type="text" name="ctaTexte"
                                   value="{{ actu ? actu.ctaTexte : '' }}"
                                   placeholder="Ex : Demander une visite"
                                   style="width:100%;background:#f5f5f7;border:1px solid #e5e5ea;border-radius:10px;padding:11px 14px;font-size:14px;color:#1d1d1f;outline:none;">
                        </div>
                    </div>
                </div>
            </div>

            {# Options de publication #}
            <div class="card" style="padding:20px 22px;">
                <div style="font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#86868b;margin-bottom:14px;">Options de publication</div>

                <div style="display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid #f0f0f5;">
                    <div>
                        <div style="font-size:14px;color:#1d1d1f;">📌 Épingler en haut</div>
                        <div style="font-size:12px;color:#86868b;margin-top:2px;">Ce post apparaît en premier sur votre carte</div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" name="epingle" value="1" {{ actu and actu.epingle ? 'checked' : '' }}>
                        <span class="toggle-track"></span>
                    </label>
                </div>

                <div style="display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid #f0f0f5;">
                    <div>
                        <div style="font-size:14px;color:#1d1d1f;">🔔 Envoyer une notification push</div>
                        <div style="font-size:12px;color:#86868b;margin-top:2px;">Notifier vos abonnés dès la publication</div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" name="sendPush" value="1" checked>
                        <span class="toggle-track"></span>
                    </label>
                </div>

                <div style="display:flex;align-items:center;justify-content:space-between;padding:11px 0;">
                    <div>
                        <div style="font-size:14px;color:#1d1d1f;">👁️ Publier immédiatement</div>
                        <div style="font-size:12px;color:#86868b;margin-top:2px;">Désactivez pour enregistrer en brouillon</div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" name="publierImmediatement" value="1" checked id="toggle-publier">
                        <span class="toggle-track"></span>
                    </label>
                </div>
            </div>

        </div>

        {# ── BARRE LATÉRALE ── #}
        <div style="position:sticky; top:80px;">

            {# Actions #}
            <div class="card" style="padding:20px 22px; margin-bottom:16px;">
                <div style="font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#86868b;margin-bottom:14px;">Publication</div>
                <div style="display:flex;flex-direction:column;gap:10px;">
                    <button type="submit" style="width:100%;padding:12px;background:#007aff;color:white;border:none;border-radius:10px;font-family:monospace;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;" id="btn-submit">
                        Publier →
                    </button>
                    <a href="{{ path('app_actu_index', {beneficiaireId: beneficiaire.id}) }}" style="display:block;text-align:center;padding:11px;background:#f5f5f7;color:#86868b;border-radius:10px;font-family:monospace;font-size:12px;text-decoration:none;">
                        Annuler
                    </a>
                </div>
            </div>

            {# Bonnes pratiques #}
            <div class="card" style="padding:18px 20px;">
                <div style="font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#86868b;margin-bottom:12px;">💡 Bonnes pratiques</div>
                <ul style="list-style:none;display:flex;flex-direction:column;gap:8px;">
                    <li style="font-size:12px;color:#3a3a3c;line-height:1.5;">📝 Titre : 8–12 mots, avec prix ou résultat concret</li>
                    <li style="font-size:12px;color:#3a3a3c;line-height:1.5;">✂️ Contenu : 3–5 lignes max, aller à l'essentiel</li>
                    <li style="font-size:12px;color:#3a3a3c;line-height:1.5;">🎯 CTA : toujours un lien d'action (contact, devis…)</li>
                    <li style="font-size:12px;color:#3a3a3c;line-height:1.5;">📅 Fréquence : 1–2 posts par semaine</li>
                    <li style="font-size:12px;color:#3a3a3c;line-height:1.5;">📌 Épinglez vos meilleures offres ou témoignages</li>
                </ul>
            </div>
        </div>

    </div>
</form>

<style>
.toggle-switch { position:relative; display:inline-block; width:44px; height:26px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-track { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#e5e5ea; border-radius:13px; transition:.2s; }
.toggle-track::after { content:''; position:absolute; height:20px; width:20px; left:3px; bottom:3px; background:white; border-radius:50%; transition:.2s; }
.toggle-switch input:checked + .toggle-track { background:#007aff; }
.toggle-switch input:checked + .toggle-track::after { transform:translateX(18px); }
.cat-radio:checked + .cat-pill { background:rgba(0,122,255,.15); border-color:#007aff; color:#007aff; }
</style>

<script>
// Upload zone
document.getElementById('upload-zone').addEventListener('click', () => {
    document.getElementById('image-input').click();
});
document.getElementById('image-input').addEventListener('change', function() {
    if (this.files && this.files[0]) {
        const reader = new FileReader();
        reader.onload = e => {
            document.getElementById('preview-img').src = e.target.result;
            document.getElementById('image-preview').style.display = 'block';
        };
        reader.readAsDataURL(this.files[0]);
        document.getElementById('upload-zone').style.borderColor = '#34c759';
    }
});

// Catégorie pills
document.querySelectorAll('.cat-radio').forEach(radio => {
    radio.addEventListener('change', function() {
        document.querySelectorAll('.cat-pill').forEach(p => {
            p.style.background = '#f5f5f7';
            p.style.borderColor = '#e5e5ea';
            p.style.color = '#86868b';
        });
        if (this.checked) {
            const pill = this.nextElementSibling;
            pill.style.background = 'rgba(0,122,255,.15)';
            pill.style.borderColor = '#007aff';
            pill.style.color = '#007aff';
        }
    });
    // Init
    if (radio.checked) {
        const pill = radio.nextElementSibling;
        pill.style.background = 'rgba(0,122,255,.15)';
        pill.style.borderColor = '#007aff';
        pill.style.color = '#007aff';
    }
});

// Bouton texte selon toggle publier
document.getElementById('toggle-publier').addEventListener('change', function() {
    document.getElementById('btn-submit').textContent = this.checked ? 'Publier →' : 'Enregistrer brouillon';
});
</script>
{% endblock %}