{% extends 'base.html.twig' %}

{% block body %}

<div class="page-header">
    <h1>{{ title }}</h1>
    <span style="color:var(--muted);font-size:.85rem">
        Création :
        {{ campaign.createdAt ? campaign.createdAt|date('d/m/Y H:i') : "générée à l'enregistrement" }}
    </span>
</div>

<div class="campaign-grid">

    {# ============ Colonne gauche : formulaire ============ #}
    <div class="card">
        {{ form_start(form) }}

        <div class="form-section">
            <h3 class="form-section-title">Campagne</h3>
            <div class="row">
                {{ form_row(form.site) }}
                {{ form_row(form.scheduledAt) }}
                {{ form_row(form.status) }}
            </div>
        </div>

        <div class="form-section">
            <h3 class="form-section-title">Types d'opération</h3>
            <details class="dropdown-check" data-noun="type d'opération" data-noun-plural="types d'opération">
                <summary><span data-summary></span></summary>
                <div class="dropdown-check-panel">
                    {{ form_widget(form.operationTypes) }}
                </div>
            </details>
        </div>

        <div class="form-section">
            <h3 class="form-section-title">Tracts</h3>
            <details class="dropdown-check" data-noun="tract" data-noun-plural="tracts">
                <summary><span data-summary></span></summary>
                <div class="dropdown-check-panel">
                    {{ form_widget(form.tracts) }}
                </div>
            </details>
        </div>

        <div class="form-section">
            <h3 class="form-section-title">Etablissement</h3>
            <div style="margin-bottom:12px">{{ form_row(form.perimetreType) }}</div>

            <div id="perimetre-box" style="display:none">
                <label style="margin-bottom:6px">
                    Etablissement(s)
                    <span id="perimetre-hint" style="font-weight:400;color:var(--muted);font-size:.8rem;margin-left:6px"></span>
                </label>
                <div id="perimetre-select" style="display:flex;flex-direction:column;gap:6px;margin-top:6px">
                    {{ form_widget(form.perimetres) }}
                </div>
            </div>
        </div>

        <div class="form-section" id="participants-section" style="display:none">
            <h3 class="form-section-title">Participants</h3>
            {% if canEditParticipants|default(true) %}
            <p style="color:var(--muted);font-size:.85rem;margin-bottom:10px">
                représentants ayant participé. Tapez les premières lettres d'un nom ou d'un prénom.
            </p>
            {% else %}
            <p style="color:var(--red);font-size:.85rem;margin-bottom:10px">
                Seul le représentant à l'origine de la campagne peut modifier les participants.
            </p>
            {% endif %}

            {{ form_widget(form.participants) }}
        </div>

        <div class="form-section">
            <h3 class="form-section-title">Remarques</h3>
            {{ form_widget(form.remarks) }}
        </div>

        <div class="actions" style="margin-top:16px">
            {{ form_widget(form.save, {attr: {class: 'btn'}}) }}
            <a class="btn btn-outline" href="/campaign">Retour</a>
        </div>
        {{ form_end(form) }}
    </div>

    {# ============ Colonne droite : infos site + demande d'entraide ============ #}
    <div>
        <div class="card">
            <h2 style="margin-bottom:12px">Informations du site</h2>

            <p id="site-empty" style="color:var(--muted);font-size:.9rem">
                Sélectionnez un site pour afficher ses informations.
            </p>

            <div id="site-info" style="display:none">
                <div class="mini-kpis">
                    <div><span class="mini-kpi-value" id="si-effectif">—</span><span class="mini-kpi-label">Effectif total</span></div>
                    <div><span class="mini-kpi-value" id="si-dept">—</span><span class="mini-kpi-label">Département</span></div>
                    <div><span class="mini-kpi-value" id="si-city">—</span><span class="mini-kpi-label">Ville</span></div>
                </div>

                <dl class="def-list" style="margin-top:14px">
                    <dt>Secrétaire de département (SDD)</dt><dd id="si-sdd">—</dd>
                    <dt>Référent du site</dt><dd id="si-referent">—</dd>
                </dl>

                <h3 class="form-section-title" style="margin-top:16px">
                    Etablissements du site
                    <span id="si-perim-note" style="font-weight:400;color:var(--muted);font-size:.78rem"></span>
                </h3>
                <div class="actions" style="margin:4px 0 8px">
                    <button type="button" class="btn btn-sm" data-perim-vue="actuels">Avant Regain</button>
                    <button type="button" class="btn btn-sm btn-outline" data-perim-vue="regain">Post Regain</button>
                </div>
                <div id="si-perimetres"></div>
                <div id="si-perimetres-regain" style="display:none"></div>
            </div>
        </div>

        <div class="card">
            <h2 style="margin-bottom:12px">Demande d'entraide</h2>

            <div id="no-site-msg" style="color:var(--muted);font-size:.9rem;margin-bottom:16px">
                Sélectionnez un site pour voir les représentants rattachés.
            </div>

            <div id="colleagues-box" style="display:none">
                <p style="font-size:.85rem;font-weight:600;margin-bottom:8px">représentants du site :</p>
                <ul id="colleagues-list" class="plain-list" style="margin-bottom:16px"></ul>

                <div style="margin-bottom:12px">
                    <label>Message</label>
                    <textarea id="help-message" rows="5">Bonjour,

J'aurais besoin de renfort pour cette campagne de tractage.

Merci d'avance.</textarea>
                </div>

                <a id="help-btn" href="#" class="btn" style="display:inline-block">
                    Envoyer une demande d'entraide
                </a>
            </div>
        </div>
    </div>

</div>

<script>
const colleaguesBySite = {{ colleaguesBySite|json_encode|raw }};
const siteInfoById     = {{ siteInfoById|json_encode|raw }};

const siteSelect    = document.querySelector('select[id$="_site"]');
const perimetreBox  = document.getElementById('perimetre-box');
const perimetreHint = document.getElementById('perimetre-hint');
const noSiteMsg     = document.getElementById('no-site-msg');
const colleaguesBox = document.getElementById('colleagues-box');
const colleaguesList= document.getElementById('colleagues-list');
const helpBtn       = document.getElementById('help-btn');
const helpMessage   = document.getElementById('help-message');
const typeRadios    = document.querySelectorAll('input[type="radio"][id*="perimetreType"]');

const siteEmpty     = document.getElementById('site-empty');
const siteInfoBox   = document.getElementById('site-info');

// Les entrées d'Etablissement basculent entre case à cocher et bouton radio selon
// le type choisi : on ne peut donc pas filtrer uniquement sur input[type="checkbox"].
function getPerimetreCheckboxes() {
    return Array.from(document.querySelectorAll(
        '#perimetre-select input[type="checkbox"], #perimetre-select input[type="radio"]'
    ));
}

// Identifiants des périmètres cochés (les valeurs des cases = id des entités Perimetre)
function selectedPerimetreIds() {
    return getPerimetreCheckboxes().filter(cb => cb.checked).map(cb => String(cb.value));
}

// N'afficher que les périmètres présents sur le site sélectionné (cohérent avec le panneau infos).
// On garde toujours visibles les périmètres déjà cochés à l'ouverture (édition), pour ne rien perdre.
function filterPerimetres() {
    const info = currentInfo();
    const presentIds = info ? (info.perimetresActuels || []).map(p => String(p.id)) : [];
    getPerimetreCheckboxes().forEach(cb => {
        const lab  = document.querySelector('label[for="' + cb.id + '"]');
        const show = presentIds.includes(String(cb.value)) || cb.defaultChecked;
        cb.style.display = show ? '' : 'none';
        if (lab) lab.style.display = show ? '' : 'none';
        if (!show && cb.checked) cb.checked = false;
    });
}

// ---- Etablissement : affichage + comportement selon le type ----
// mono  : boutons radio — l'unicité est garantie par le navigateur, pas par du JS
// multi : cases à cocher
// tout  : cases à cocher, toutes cochées et maintenues cochées
function currentPerimetreType() {
    const selected = document.querySelector('input[type="radio"][id*="perimetreType"]:checked');
    return selected ? selected.value : '';
}

// Les inputs gardent le même name (…[perimetres][]), donc en radio le navigateur
// les groupe et n'en soumet qu'un seul : Symfony reçoit un tableau d'un élément.
function setPerimetreInputType(inputType) {
    getPerimetreCheckboxes().forEach(cb => {
        if (cb.type !== inputType) { cb.type = inputType; }
    });
}

function keepOnlyFirstChecked() {
    getPerimetreCheckboxes().filter(cb => cb.checked).slice(1).forEach(cb => { cb.checked = false; });
}

function checkAllVisible() {
    getPerimetreCheckboxes().forEach(cb => {
        if (cb.style.display !== 'none') { cb.checked = true; }
    });
}

function updatePerimetreType() {
    const type = currentPerimetreType();

    if (!type) { perimetreBox.style.display = 'none'; return; }
    perimetreBox.style.display = '';

    filterPerimetres();

    if (type === 'mono') {
        perimetreHint.textContent = '(un seul Etablissement)';
        keepOnlyFirstChecked(); // avant la bascule : plusieurs radios cochés seraient incohérents
        setPerimetreInputType('radio');
    } else if (type === 'tout') {
        perimetreHint.textContent = '(tous les Etablissements du site)';
        setPerimetreInputType('checkbox');
        checkAllVisible();
    } else {
        perimetreHint.textContent = '(un ou plusieurs Etablissements)';
        setPerimetreInputType('checkbox');
    }

    renderPerimetres();
}

typeRadios.forEach(r => r.addEventListener('change', updatePerimetreType));

// Délégation : les inputs changent de type, un écouteur posé sur chacun serait fragile.
document.getElementById('perimetre-select').addEventListener('change', function () {
    if (currentPerimetreType() === 'tout') { checkAllVisible(); } // « tout » = tout : on ne décoche pas
    renderPerimetres();
});

// ---- Panneau d'informations du site ----
function currentInfo() {
    const siteId = siteSelect ? siteSelect.value : null;
    return siteId ? siteInfoById[siteId] : null;
}

function renderPerimetres() {
    const info = currentInfo();
    const box  = document.getElementById('si-perimetres');
    const note = document.getElementById('si-perim-note');
    if (!info) return;

    const selected = selectedPerimetreIds();
    const rows = info.perimetresActuels || [];
    const selCount = rows.filter(p => selected.includes(String(p.id))).length;
    note.textContent = rows.length
        ? (selCount ? '(' + selCount + ' sélectionné(s))' : '')
        : '(aucun Etablissement présent sur ce site)';

    box.innerHTML = rows.map(p => {
        const on = selected.includes(String(p.id));
        return `<div class="perim-line${on ? ' is-selected' : ''}">
            <div class="perim-line-head">
                <span class="perim-line-name">${p.label}</span>
                <span class="perim-line-eff">${p.effectif} <span style="color:var(--muted)">(${p.pct}%)</span></span>
            </div>
            <div class="bar-track"><div class="bar-fill" style="width:${p.pct}%"></div></div>
            <div class="perim-line-dsco">DSCO : ${p.dsco}</div>
        </div>`;
    }).join('');
}

// Effectifs projetés après la réorganisation Regain (informatif, non sélectionnable).
function renderPerimetresRegain() {
    const info = currentInfo();
    const box  = document.getElementById('si-perimetres-regain');
    if (!info || !box) return;

    const rows = info.perimetresRegain || [];
    box.innerHTML = rows.map(p => `<div class="perim-line">
            <div class="perim-line-head">
                <span class="perim-line-name">${p.label}</span>
                <span class="perim-line-eff">${p.effectif} <span style="color:var(--muted)">(${p.pct}%)</span></span>
            </div>
            <div class="bar-track"><div class="bar-fill" style="width:${p.pct}%"></div></div>
            <div class="perim-line-dsco">DSCO : ${p.dsco}</div>
        </div>`).join('');
}

// Bascule Avant / Post Regain dans le panneau.
document.querySelectorAll('[data-perim-vue]').forEach(function (btn) {
    btn.addEventListener('click', function () {
        const vue = btn.dataset.perimVue;
        document.querySelectorAll('[data-perim-vue]').forEach(function (b) {
            b.classList.toggle('btn-outline', b.dataset.perimVue !== vue);
        });
        document.getElementById('si-perimetres').style.display        = vue === 'actuels' ? '' : 'none';
        document.getElementById('si-perimetres-regain').style.display = vue === 'regain'  ? '' : 'none';
        document.getElementById('si-perim-note').style.display        = vue === 'actuels' ? '' : 'none';
    });
});

function updateSiteInfo() {
    const info = currentInfo();
    if (!info) {
        siteEmpty.style.display = '';
        siteInfoBox.style.display = 'none';
        return;
    }
    siteEmpty.style.display = 'none';
    siteInfoBox.style.display = '';
    document.getElementById('si-effectif').textContent = info.effectifTotal;
    document.getElementById('si-dept').textContent     = info.department || '—';
    document.getElementById('si-city').textContent     = info.city || '—';
    document.getElementById('si-sdd').textContent      = info.sdd || '—';
    document.getElementById('si-referent').textContent = info.referent || '—';
    filterPerimetres();
    renderPerimetres();
    renderPerimetresRegain();
}

// ---- Demande d'entraide ----
function updateColleagues() {
    const siteId = siteSelect ? siteSelect.value : null;
    const colleagues = siteId ? (colleaguesBySite[siteId] || []) : [];

    if (!siteId || colleagues.length === 0) {
        noSiteMsg.style.display = '';
        colleaguesBox.style.display = 'none';
        return;
    }
    noSiteMsg.style.display = 'none';
    colleaguesBox.style.display = '';
    colleaguesList.innerHTML = colleagues
        .map(c => `<li><strong>${c.firstName} ${c.lastName}</strong> — <a href="mailto:${c.email}">${c.email}</a></li>`)
        .join('');
    updateMailtoLink(colleagues);
}

// Libellés cochés d'un groupe de cases (types d'opération, établissements…)
function checkedLabels(inputs) {
    return inputs.filter(i => i.checked).map(i => {
        const l = document.querySelector('label[for="' + i.id + '"]');
        return l ? l.textContent.trim() : '';
    }).filter(Boolean);
}

// Bloc « infos de la campagne » ajouté au corps du mail.
function campaignInfoText(info) {
    const siteTxt = (siteSelect && siteSelect.selectedIndex >= 0) ? siteSelect.options[siteSelect.selectedIndex].text.trim() : '—';
    const dateEl  = document.querySelector('input[id$="_scheduledAt"]');
    const dateTxt = dateEl && dateEl.value ? dateEl.value.replace('T', ' ') : '—';
    const types   = checkedLabels(Array.from(document.querySelectorAll('input[id*="_operationTypes_"]')));
    const etabs   = checkedLabels(getPerimetreCheckboxes());

    const lines = [
        '— Informations de la campagne —',
        'Site : ' + siteTxt,
        'Date : ' + dateTxt,
        "Types d'opération : " + (types.length ? types.join(', ') : '—'),
        'Établissement(s) : ' + (etabs.length ? etabs.join(', ') : '—'),
        'Effectif du site : ' + (info ? info.effectifTotal : '—'),
    ];

    if (info) {
        lines.push('SDD : ' + (info.sdd || '—'));
        // DSCO des établissements concernés (ceux qui sont cochés).
        const selIds = selectedPerimetreIds();
        const dscos  = (info.perimetresActuels || [])
            .filter(p => selIds.includes(String(p.id)) && p.dsco)
            .map(p => p.label + ' → ' + p.dsco);
        if (dscos.length) {
            lines.push('DSCO concerné(s) :');
            dscos.forEach(d => lines.push('  • ' + d));
        }
    }
    return lines.join('\n');
}

function updateMailtoLink(colleagues) {
    const info = currentInfo();
    // Destinataires = représentants du site + SDD du site + DSCO des établissements cochés (en copie).
    let recipients = colleagues.map(c => c.email);
    if (info && Array.isArray(info.sddEmails)) { recipients = recipients.concat(info.sddEmails); }
    if (info) {
        const selIds = selectedPerimetreIds();
        (info.perimetresActuels || []).forEach(p => {
            if (selIds.includes(String(p.id)) && Array.isArray(p.dscoEmails)) {
                recipients = recipients.concat(p.dscoEmails);
            }
        });
    }
    recipients = Array.from(new Set(recipients.filter(Boolean)));

    const subject = encodeURIComponent('Demande d\'entraide — campagne de tractage');
    const body    = encodeURIComponent(helpMessage.value + '\n\n' + campaignInfoText(info));
    helpBtn.href  = `mailto:${recipients.join(',')}?subject=${subject}&body=${body}`;
}

// Reconstruit le lien mail si un site avec représentants est sélectionné.
function refreshMail() {
    const siteId = siteSelect ? siteSelect.value : null;
    const colleagues = siteId ? (colleaguesBySite[siteId] || []) : [];
    if (colleagues.length) updateMailtoLink(colleagues);
}

function onSiteChange() {
    updateSiteInfo();
    updateColleagues();
    // Un changement de site modifie la liste des Etablissements présents :
    // en « tout », les nouveaux doivent être cochés à leur tour.
    updatePerimetreType();
}

if (siteSelect) {
    siteSelect.addEventListener('change', onSiteChange);
}
if (helpMessage) {
    helpMessage.addEventListener('input', refreshMail);
}
// Les infos de la campagne (date, types, établissements) alimentent le corps du mail.
document.querySelector('form').addEventListener('change', refreshMail);

// ---- Participants ----
// Le widget d'autocomplétion est générique (base.html.twig, select.js-multiselect) :
// ici on ne gère plus que l'affichage conditionnel de la section.
const statusSelect = document.querySelector('select[id$="_status"]');
const partSection  = document.getElementById('participants-section');

// La section n'apparaît que sur une campagne « Réalisée ».
function updateParticipantsSection() {
    if (!statusSelect || !partSection) return;
    partSection.style.display = statusSelect.value === '{{ constant('App\\Entity\\Campaign::STATUS_COMPLETED') }}' ? '' : 'none';
}

if (statusSelect) {
    statusSelect.addEventListener('change', updateParticipantsSection);
}

// ---- Listes déroulantes à choix multiple (tracts, types d'opération) ----
// Le <details> gère l'ouverture ; ici on ne fait qu'afficher un résumé de la sélection.
document.querySelectorAll('.dropdown-check').forEach(function (dd) {
    const summary = dd.querySelector('[data-summary]');
    const noun    = dd.dataset.noun || 'élément';
    const nounPl  = dd.dataset.nounPlural || (noun + 's');

    function boxes() {
        return Array.from(dd.querySelectorAll('.dropdown-check-panel input[type="checkbox"]'));
    }
    function labelOf(cb) {
        const l = dd.querySelector('label[for="' + cb.id + '"]');
        return l ? l.textContent.trim() : '';
    }
    function updateSummary() {
        const chosen = boxes().filter(cb => cb.checked);
        if (!chosen.length) {
            summary.textContent = 'Aucun ' + noun + ' sélectionné';
            return;
        }
        summary.textContent = chosen.length <= 2
            ? chosen.map(labelOf).join(', ')
            : chosen.length + ' ' + nounPl + ' sélectionnés';
    }

    dd.addEventListener('change', updateSummary);
    updateSummary();
});

// Refermer les panneaux au clic extérieur.
document.addEventListener('click', function (e) {
    document.querySelectorAll('.dropdown-check[open]').forEach(function (dd) {
        if (!dd.contains(e.target)) dd.removeAttribute('open');
    });
});

// Init au chargement
updatePerimetreType();
onSiteChange();
updateParticipantsSection();
</script>

{% endblock %}