{% extends 'admin/_layout.html.twig' %}

{% block title %}Dashboard Admin — Skeleton{% endblock %}
{% block page_title %}Dashboard Admin{% endblock %}

{% block admin_body %}

{# ── KPIs ── #}
<div class="adm-kpi-grid">
    <a href="{{ path('app_admin_user_index') }}" class="adm-card adm-kpi" style="text-decoration:none">
        <div class="adm-kpi-top">
            <div class="adm-kpi-ico" style="background:rgba(124,158,255,.12)">
                <svg viewBox="0 0 24 24" stroke="var(--accent)"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            </div>
        </div>
        <div class="adm-kpi-val">{{ totalUsers }}</div>
        <div class="adm-kpi-lbl">Utilisateur{{ totalUsers > 1 ? 's' : '' }}</div>
    </a>
    <a href="{{ path('app_admin_social_index') }}" class="adm-card adm-kpi" style="text-decoration:none">
        <div class="adm-kpi-top">
            <div class="adm-kpi-ico" style="background:rgba(94,207,174,.12)">
                <svg viewBox="0 0 24 24" stroke="var(--green)"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
            </div>
        </div>
        <div class="adm-kpi-val">{{ totalSocials }}</div>
        <div class="adm-kpi-lbl">Réseau{{ totalSocials > 1 ? 'x sociaux' : ' social' }}</div>
    </a>
    <a href="{{ path('app_admin_contact_index') }}" class="adm-card adm-kpi" style="text-decoration:none">
        <div class="adm-kpi-top">
            <div class="adm-kpi-ico" style="background:rgba(255,184,108,.12)">
                <svg viewBox="0 0 24 24" stroke="var(--orange)"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22 6 12 13 2 6"/></svg>
            </div>
        </div>
        <div class="adm-kpi-val">{{ totalMessages }}</div>
        <div class="adm-kpi-lbl">Message{{ totalMessages > 1 ? 's' : '' }}{% if unreadMessages > 0 %} <span style="font-size:.7rem;color:var(--orange);font-weight:500">({{ unreadMessages }} non lu{{ unreadMessages > 1 ? 's' : '' }})</span>{% endif %}</div>
    </a>
    {% if is_granted('ROLE_SUPER_ADMIN') %}
    <a href="{{ path('app_admin_error_log_index') }}" class="adm-card adm-kpi" style="text-decoration:none">
        <div class="adm-kpi-top">
            <div class="adm-kpi-ico" style="background:rgba(255,107,138,.1)">
                <svg viewBox="0 0 24 24" stroke="var(--red)"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
            </div>
        </div>
        <div class="adm-kpi-val">{{ totalErrors }}</div>
        <div class="adm-kpi-lbl">Erreur{{ totalErrors > 1 ? 's' : '' }}{% if unresolvedErrors > 0 %} <span style="font-size:.7rem;color:var(--red);font-weight:500">({{ unresolvedErrors }} non résolu{{ unresolvedErrors > 1 ? 'es' : 'e' }})</span>{% endif %}</div>
    </a>
    {% endif %}
</div>

{# ── Anciennes KPIs (désactivé) ──
<div class="adm-kpi-grid">
    <div class="adm-card adm-kpi">
        <div class="adm-kpi-top">
            <div class="adm-kpi-ico" style="background:rgba(124,158,255,.12)">
                <svg viewBox="0 0 24 24" stroke="var(--accent)"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            </div>
            <span class="adm-kpi-trend up">↑ 14%</span>
        </div>
        <div class="adm-kpi-val">1 284</div>
        <div class="adm-kpi-lbl">Utilisateurs actifs</div>
        <svg class="adm-spark" viewBox="0 0 100 28" preserveAspectRatio="none"><polyline points="0,24 15,20 30,22 45,13 60,15 75,7 90,9 100,4" fill="none" stroke="var(--accent)" stroke-width="1.5" opacity=".5"/></svg>
    </div>
    <div class="adm-card adm-kpi">
        <div class="adm-kpi-top">
            <div class="adm-kpi-ico" style="background:rgba(94,207,174,.12)">
                <svg viewBox="0 0 24 24" stroke="var(--green)"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
            </div>
            <span class="adm-kpi-trend up">↑ 8%</span>
        </div>
        <div class="adm-kpi-val">48 290 €</div>
        <div class="adm-kpi-lbl">Revenus MRR</div>
        <svg class="adm-spark" viewBox="0 0 100 28" preserveAspectRatio="none"><polyline points="0,26 15,22 30,18 45,16 60,12 75,8 90,5 100,3" fill="none" stroke="var(--green)" stroke-width="1.5" opacity=".5"/></svg>
    </div>
    <div class="adm-card adm-kpi">
        <div class="adm-kpi-top">
            <div class="adm-kpi-ico" style="background:rgba(255,184,108,.12)">
                <svg viewBox="0 0 24 24" stroke="var(--orange)"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
            </div>
            <span class="adm-kpi-trend up">↑ 5%</span>
        </div>
        <div class="adm-kpi-val">94,2%</div>
        <div class="adm-kpi-lbl">Taux de rétention</div>
        <svg class="adm-spark" viewBox="0 0 100 28" preserveAspectRatio="none"><polyline points="0,18 15,16 30,17 45,14 60,13 75,11 90,12 100,10" fill="none" stroke="var(--orange)" stroke-width="1.5" opacity=".5"/></svg>
    </div>
    <div class="adm-card adm-kpi">
        <div class="adm-kpi-top">
            <div class="adm-kpi-ico" style="background:rgba(255,107,138,.1)">
                <svg viewBox="0 0 24 24" stroke="var(--red)"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
            </div>
            <span class="adm-kpi-trend dn">↓ 2</span>
        </div>
        <div class="adm-kpi-val">7</div>
        <div class="adm-kpi-lbl">Tickets ouverts</div>
        <svg class="adm-spark" viewBox="0 0 100 28" preserveAspectRatio="none"><polyline points="0,10 15,12 30,9 45,14 60,11 75,16 90,18 100,20" fill="none" stroke="var(--red)" stroke-width="1.5" opacity=".5"/></svg>
    </div>
</div>
#}

{# ── Charts (désactivé) ──
<div class="adm-charts-row">
    <div class="adm-card adm-chart-card">
        <div class="adm-sh">
            <span class="adm-sh-title">Revenus mensuels</span>
            <div style="display:flex;gap:8px">
                <button class="adm-btn adm-btn-g" style="font-size:.72rem;padding:5px 10px">2025</button>
                <button class="adm-btn adm-btn-p" style="font-size:.72rem;padding:5px 10px">2026</button>
            </div>
        </div>
        <div class="adm-chart-area">
            <svg class="adm-chart" viewBox="0 0 540 140" width="100%" height="140">
                <defs><linearGradient id="ga" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#7C9EFF" stop-opacity=".25"/><stop offset="100%" stop-color="#7C9EFF" stop-opacity="0"/></linearGradient></defs>
                <line x1="0" y1="20" x2="540" y2="20" stroke="rgba(180,190,220,.2)" stroke-width=".8"/>
                <line x1="0" y1="50" x2="540" y2="50" stroke="rgba(180,190,220,.2)" stroke-width=".8"/>
                <line x1="0" y1="80" x2="540" y2="80" stroke="rgba(180,190,220,.2)" stroke-width=".8"/>
                <line x1="0" y1="110" x2="540" y2="110" stroke="rgba(180,190,220,.2)" stroke-width=".8"/>
                <path d="M20,100 C60,95 80,70 110,65 C140,60 160,75 200,60 C240,45 260,35 300,30 C340,25 360,38 400,28 C440,18 470,22 520,15" fill="url(#ga)" stroke="none"/>
                <path d="M20,100 C60,95 80,70 110,65 C140,60 160,75 200,60 C240,45 260,35 300,30 C340,25 360,38 400,28 C440,18 470,22 520,15" fill="none" stroke="#7C9EFF" stroke-width="2" stroke-linecap="round"/>
                <circle cx="110" cy="65" r="3.5" fill="#7C9EFF"/><circle cx="200" cy="60" r="3.5" fill="#7C9EFF"/><circle cx="300" cy="30" r="3.5" fill="#7C9EFF"/><circle cx="400" cy="28" r="3.5" fill="#7C9EFF"/><circle cx="520" cy="15" r="4.5" fill="#7C9EFF" stroke="white" stroke-width="2"/>
                <text x="20" y="130" font-family="DM Sans" font-size="10" fill="#8a8fa8">Jan</text>
                <text x="65" y="130" font-family="DM Sans" font-size="10" fill="#8a8fa8">Fév</text>
                <text x="110" y="130" font-family="DM Sans" font-size="10" fill="#8a8fa8">Mar</text>
                <text x="155" y="130" font-family="DM Sans" font-size="10" fill="#8a8fa8">Avr</text>
                <text x="200" y="130" font-family="DM Sans" font-size="10" fill="#8a8fa8">Mai</text>
                <text x="245" y="130" font-family="DM Sans" font-size="10" fill="#8a8fa8">Jun</text>
                <text x="290" y="130" font-family="DM Sans" font-size="10" fill="#8a8fa8">Jul</text>
                <text x="335" y="130" font-family="DM Sans" font-size="10" fill="#8a8fa8">Aoû</text>
                <text x="380" y="130" font-family="DM Sans" font-size="10" fill="#8a8fa8">Sep</text>
                <text x="425" y="130" font-family="DM Sans" font-size="10" fill="#8a8fa8">Oct</text>
                <text x="470" y="130" font-family="DM Sans" font-size="10" fill="#8a8fa8">Nov</text>
                <text x="510" y="130" font-family="DM Sans" font-size="10" fill="#8a8fa8">Déc</text>
            </svg>
        </div>
    </div>

    <div class="adm-card adm-donut-wrap">
        <div class="adm-sh" style="width:100%"><span class="adm-sh-title">Répartition plans</span></div>
        <svg viewBox="0 0 120 120" width="120" height="120">
            <circle cx="60" cy="60" r="46" fill="none" stroke="rgba(180,190,220,.15)" stroke-width="14"/>
            <circle cx="60" cy="60" r="46" fill="none" stroke="#7C9EFF" stroke-width="14" stroke-dasharray="110 179" stroke-dashoffset="0" stroke-linecap="round"/>
            <circle cx="60" cy="60" r="46" fill="none" stroke="#5ecfae" stroke-width="14" stroke-dasharray="98 191" stroke-dashoffset="-112" stroke-linecap="round"/>
            <circle cx="60" cy="60" r="46" fill="none" stroke="#C3B8F8" stroke-width="14" stroke-dasharray="52 237" stroke-dashoffset="-212" stroke-linecap="round"/>
            <circle cx="60" cy="60" r="46" fill="none" stroke="#FFB86C" stroke-width="14" stroke-dasharray="28 261" stroke-dashoffset="-266" stroke-linecap="round"/>
            <text x="60" y="56" text-anchor="middle" font-family="Cormorant Garamond" font-size="18" fill="#1a1a2e" font-weight="400">1 284</text>
            <text x="60" y="68" text-anchor="middle" font-family="DM Sans" font-size="8" fill="#8a8fa8">utilisateurs</text>
        </svg>
        <div class="adm-donut-legend">
            <div class="adm-leg-item"><div class="adm-leg-left"><div class="adm-leg-dot" style="background:var(--accent)"></div><span class="adm-leg-lbl">Starter</span></div><span class="adm-leg-val">38%</span></div>
            <div class="adm-leg-item"><div class="adm-leg-left"><div class="adm-leg-dot" style="background:var(--green)"></div><span class="adm-leg-lbl">Pro</span></div><span class="adm-leg-val">34%</span></div>
            <div class="adm-leg-item"><div class="adm-leg-left"><div class="adm-leg-dot" style="background:var(--accent2)"></div><span class="adm-leg-lbl">Enterprise</span></div><span class="adm-leg-val">18%</span></div>
            <div class="adm-leg-item"><div class="adm-leg-left"><div class="adm-leg-dot" style="background:var(--orange)"></div><span class="adm-leg-lbl">Free</span></div><span class="adm-leg-val">10%</span></div>
        </div>
    </div>
</div>
#}

{# ── Bottom grid ── #}
<div class="adm-bottom-grid">

    {# Users table #}
    <div class="adm-card adm-tbl-card">
        <div class="adm-sh">
            <span class="adm-sh-title">Derniers utilisateurs</span>
            <a href="{{ path('app_admin_user_index') }}" class="adm-btn adm-btn-g" style="font-size:.72rem;padding:5px 10px">Voir tout &rarr;</a>
        </div>
        <div class="adm-tbl-wrap">
            <table>
                <thead><tr><th>Utilisateur</th><th>Fournisseur</th><th>R&ocirc;le</th><th>Statut</th></tr></thead>
                <tbody>
                {% for user in latestUsers %}
                    <tr>
                        <td>
                            <div class="adm-u-cell">
                                <div class="adm-u-av" style="background:linear-gradient(135deg,var(--accent),var(--accent2)){% if user.isBanned %};opacity:.4{% endif %}">
                                    {{ user.firstName ? user.firstName|first|upper : '?' }}{{ user.lastName ? user.lastName|first|upper : '?' }}
                                </div>
                                <div>
                                    <div class="adm-u-name">{{ user.firstName ?? '' }} {{ user.lastName ?? '' }}</div>
                                    <div class="adm-u-email">{{ user.email }}</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            {% if user.provider == 'google' %}
                                <span class="adm-pill adm-pill-admin">Google</span>
                            {% else %}
                                <span class="adm-pill adm-pill-user">Email</span>
                            {% endif %}
                        </td>
                        <td>{% include 'admin/user/_role.html.twig' with {roles: user.roles} %}</td>
                        <td>
                            {% if user.isBanned %}
                                <span class="adm-pill adm-pill-paused">Banni</span>
                            {% elseif not user.isVerified %}
                                <span class="adm-pill adm-pill-trial">Non v&eacute;rifi&eacute;</span>
                            {% else %}
                                <span class="adm-pill adm-pill-active">Actif</span>
                            {% endif %}
                        </td>
                    </tr>
                {% else %}
                    <tr><td colspan="4" style="text-align:center;color:var(--muted);padding:24px">Aucun utilisateur</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {# Activity feed #}
    <div class="adm-card adm-feed-card">
        <div class="adm-sh"><span class="adm-sh-title">Activité récente</span><a href="{{ path('app_admin_activity_index') }}" class="adm-btn adm-btn-g" style="font-size:.72rem;padding:5px 10px">Voir tout &rarr;</a></div>
        <div class="adm-feed-list">
            {% for activity in activities %}
            {% set _cat = activity.category %}
            {% set _act = activity.action %}
            {# Color & icon per category/action #}
            {% if _act == 'deleted' or _act == 'batch_deleted' or _act == 'banned' %}
                {% set _color = 'var(--red)' %}
                {% set _bg = 'rgba(255,107,138,.1)' %}
                {% set _svg = '<svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>' %}
            {% elseif _act == 'created' or _act == 'received' %}
                {% set _color = 'var(--green)' %}
                {% set _bg = 'rgba(94,207,174,.12)' %}
                {% if _cat == 'user' %}
                    {% set _svg = '<svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>' %}
                {% elseif _cat == 'contact' %}
                    {% set _svg = '<svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22 6 12 13 2 6"/></svg>' %}
                {% else %}
                    {% set _svg = '<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>' %}
                {% endif %}
            {% elseif _act == 'updated' or _act == 'reordered' %}
                {% set _color = 'var(--accent)' %}
                {% set _bg = 'rgba(124,158,255,.12)' %}
                {% set _svg = '<svg viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>' %}
            {% elseif _act == 'toggled' %}
                {% set _color = 'var(--orange)' %}
                {% set _bg = 'rgba(255,184,108,.12)' %}
                {% set _svg = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>' %}
            {% elseif _act == 'resolved' or _act == 'batch_resolved' or _act == 'unbanned' %}
                {% set _color = 'var(--green)' %}
                {% set _bg = 'rgba(94,207,174,.12)' %}
                {% set _svg = '<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>' %}
            {% elseif _act == 'replied' %}
                {% set _color = 'var(--accent2)' %}
                {% set _bg = 'rgba(195,184,248,.15)' %}
                {% set _svg = '<svg viewBox="0 0 24 24"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>' %}
            {% elseif _act == 'reset_password' %}
                {% set _color = 'var(--orange)' %}
                {% set _bg = 'rgba(255,184,108,.12)' %}
                {% set _svg = '<svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>' %}
            {% else %}
                {% set _color = 'var(--muted)' %}
                {% set _bg = 'rgba(180,190,220,.1)' %}
                {% set _svg = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>' %}
            {% endif %}
            <div class="adm-feed-item">
                <div class="adm-feed-ico" style="background:{{ _bg }}"><span style="display:flex;stroke:{{ _color }};fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round">{{ _svg|raw }}</span></div>
                <div class="adm-feed-body">
                    <div class="adm-feed-title">{{ activity.description }}</div>
                    <div class="adm-feed-time">
                        {{ activity.createdAt|date('d/m/Y H:i') }}
                        {% if activity.performedBy %}<span style="margin-left:6px;opacity:.6">· {{ activity.performedBy }}</span>{% endif %}
                    </div>
                </div>
                <div class="adm-feed-dot" style="background:{{ _color }}"></div>
            </div>
            {% else %}
            <div style="text-align:center;padding:24px;color:var(--muted);font-size:.85rem">Aucune activité enregistrée.</div>
            {% endfor %}
        </div>
    </div>

</div>

{% endblock %}