{% extends 'base.html.twig' %}
{% block title %}Mon espace{% endblock %}
{% block body %}

<div class="page-header">
    <h1>Mon espace</h1>
    <div style="display:flex;gap:8px">
        <a href="{{ path('app_espace_profil') }}" class="btn btn-outline">Modifier mon profil</a>
        <a href="{{ path('app_espace_password') }}" class="btn btn-outline">Changer mon mot de passe</a>
    </div>
</div>

<div class="card">
    <h2 style="margin-bottom:16px">Mes expertises</h2>
    {% if myExpertises is not empty %}
    <table>
        <thead>
            <tr>
                <th>Expertise</th>
                <th>Niveau</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        {% set lvlc = {'initie': '#dce4f5', 'avance': '#fff8e1', 'expert': '#e8f5e9'} %}
        {% for ae in myExpertises %}
            <tr>
                <td><strong>{{ ae.expertise.label }}</strong></td>
                <td>
                    <span class="badge" style="background:{{ lvlc[ae.level] ?? '#eee' }};border:1px solid #00000020">{{ ae.levelLabel }}</span>
                </td>
                <td class="actions">
                    <form method="post" action="{{ path('app_espace_expertise_delete', {'id': ae.id}) }}" onsubmit="return confirm('Retirer cette expertise ?')">
                        <input type="hidden" name="_token" value="{{ csrf_token('expertise_delete_' ~ ae.id) }}">
                        <button class="btn btn-outline">Retirer</button>
                    </form>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p style="color:var(--muted)">Vous n'avez pas encore renseigné d'expertise.</p>
    {% endif %}

    {% if catalog is not empty %}
    <form method="post" action="{{ path('app_espace_expertise_add') }}" style="display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:16px">
        <input type="hidden" name="_token" value="{{ csrf_token('expertise_add') }}">
        <div>
            <label style="display:block;font-size:.85rem;color:var(--muted);margin-bottom:4px">Expertise</label>
            <select name="expertise_id" required>
                <option value="">— Choisir —</option>
                {% for e in catalog %}<option value="{{ e.id }}">{{ e.label }}</option>{% endfor %}
            </select>
        </div>
        <div>
            <label style="display:block;font-size:.85rem;color:var(--muted);margin-bottom:4px">Niveau</label>
            <select name="level" required>
                {% for key, label in levels %}<option value="{{ key }}">{{ label }}</option>{% endfor %}
            </select>
        </div>
        <button type="submit" class="btn">Ajouter</button>
    </form>
    {% else %}
    <p style="color:var(--muted);font-size:.85rem;margin-top:12px">Aucune expertise disponible dans le catalogue. Contactez un administrateur.</p>
    {% endif %}
</div>

{% if helpRequests is not empty %}
<div class="card">
    <h2 style="margin-bottom:16px">Demandes d'entraide reçues</h2>
    <table>
        <thead>
            <tr>
                <th>Campagne</th>
                <th>Site</th>
                <th>Date prévue</th>
                <th>Reçue le</th>
                <th>Statut</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        {% for req in helpRequests %}
            {% set colors = {
                'accepted': {bg: '#e8f5e9', color: '#2e7d32'},
                'refused':  {bg: '#fce4e4', color: '#c0392b'},
                'pending':  {bg: '#fff8e1', color: '#b45309'}
            } %}
            {% set c = colors[req.status] ?? colors.pending %}
            <tr>
                <td><strong>{{ req.campaign.displayName }}</strong></td>
                <td>{{ req.campaign.site ? req.campaign.site.name ~ ' — ' ~ req.campaign.site.city : '—' }}</td>
                <td>{{ req.campaign.scheduledAt ? req.campaign.scheduledAt|date('d/m/Y H:i') : '—' }}</td>
                <td>{{ req.createdAt|date('d/m/Y') }}</td>
                <td>
                    <span class="badge" style="background:{{ c.bg }};color:{{ c.color }};border:1px solid {{ c.color }}40">
                        {{ req.statusLabel }}
                    </span>
                </td>
                <td class="actions">
                    {% if req.isPending %}
                    <div
                        data-action-url="{{ path('help_request_respond', {'id': req.id}) }}"
                        data-to="{{ req.campaign.createdBy ? req.campaign.createdBy.email : '' }}"
                        data-campaign="{{ req.campaign.displayName }}"
                        data-site="{{ req.campaign.site ? req.campaign.site.name ~ ' — ' ~ req.campaign.site.city : '' }}"
                        data-date="{{ req.campaign.scheduledAt ? req.campaign.scheduledAt|date('d/m/Y') : '' }}"
                        style="display:flex;gap:6px;align-items:center"
                    >
                        <button type="button" class="btn respond-btn" data-action="accepted">Accepter</button>
                        <button type="button" class="btn btn-outline respond-btn" style="color:#c0392b;border-color:#c0392b" data-action="refused">Refuser</button>
                        <span class="respond-msg" style="font-size:.8rem;color:var(--muted);margin-left:4px"></span>
                    </div>
                    {% else %}
                    <span style="color:var(--muted);font-size:.85rem">
                        Répondu le {{ req.respondedAt ? req.respondedAt|date('d/m/Y') : '' }}
                    </span>
                    {% endif %}
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="card">
    <p style="color:var(--muted);text-align:center;padding:24px 0">Aucune demande d'entraide reçue pour le moment.</p>
</div>
{% endif %}

<script>
(function () {
    const porteurName = {{ app.user ? app.user.displayName|json_encode|raw : '""' }};

    document.querySelectorAll('.respond-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const container  = this.closest('[data-action-url]');
            const actionUrl  = container.dataset.actionUrl;
            const action     = this.dataset.action;
            const toEmail    = container.dataset.to;
            const campaign   = container.dataset.campaign;
            const site       = container.dataset.site;
            const date       = container.dataset.date;
            const msgEl      = container.querySelector('.respond-msg');

            // Désactiver les boutons pour éviter double-clic
            container.querySelectorAll('.respond-btn').forEach(b => b.disabled = true);
            msgEl.textContent = 'Envoi…';

            // Ouvrir Outlook avec email pré-rempli
            if (toEmail) {
                const verb    = action === 'accepted' ? "J'accepte" : "Je ne peux pas";
                const label   = action === 'accepted' ? 'Acceptation' : 'Refus';
                const subject = label + ' – Demande d\'entraide : ' + campaign;
                const body    = 'Bonjour,\n\n'
                    + verb + ' de participer à la campagne de tractage : ' + campaign
                    + (site ? '\nSite : ' + site : '')
                    + (date ? '\nDate prévue : ' + date : '')
                    + (porteurName ? '\n\nCordialement,\n' + porteurName : '');
                window.location.href = 'mailto:' + toEmail
                    + '?subject=' + encodeURIComponent(subject)
                    + '&body='    + encodeURIComponent(body);
            }

            // Mettre à jour le statut en DB via fetch
            const payload = new URLSearchParams({action: action});
            fetch(actionUrl, {method: 'POST', body: payload})
                .then(function (r) { return r.json(); })
                .then(function () {
                    msgEl.style.color = '#2e7d32';
                    msgEl.textContent = action === 'accepted' ? 'Accepté ✓' : 'Refusé ✓';
                    setTimeout(function () { location.reload(); }, 1000);
                })
                .catch(function () {
                    msgEl.style.color = '#c0392b';
                    msgEl.textContent = 'Erreur — réessayez.';
                    container.querySelectorAll('.respond-btn').forEach(b => b.disabled = false);
                });
        });
    });
})();
</script>

{% endblock %}