{% extends '@App/base.html.twig' %}

{% block title %}Tableau de bord{% endblock %}

{% block body %}
    {% embed '@App/partials/layout/_app_shell.html.twig' %}
        {% block shell_content %}
            {% set dashboard = staff_dashboard %}
            {% set today_tasks = task_dashboard.today|default([])|slice(0, 5) %}
            {% set chart_max = max(dashboard.financial.objective, dashboard.financial.collected, 1) %}
            {% set collected_points = [] %}
            {% set objective_points = [] %}
            {% for value in dashboard.financial.collected_series %}
                {% set x = 24 + (loop.index0 * 62) %}
                {% set y = 132 - ((value / chart_max) * 110) %}
                {% set collected_points = collected_points|merge([x ~ ',' ~ y|round(1)]) %}
            {% endfor %}
            {% for value in dashboard.financial.objective_series %}
                {% set x = 24 + (loop.index0 * 62) %}
                {% set y = 132 - ((value / chart_max) * 110) %}
                {% set objective_points = objective_points|merge([x ~ ',' ~ y|round(1)]) %}
            {% endfor %}

            <style>
                .staff-dashboard{background:#f3f7fb;border-radius:18px;padding:22px;min-height:calc(100vh - 48px)}
                .staff-hero{margin-bottom:20px}
                .staff-hero h1{font-size:34px;line-height:1.12;font-weight:800;color:#26323f;margin:0 0 8px}
                .staff-hero p{color:#678094;font-size:15px;margin:0}
                .dash-grid{display:grid;gap:18px}
                .kpi-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
                .two-grid{grid-template-columns:1fr 1fr}
                .main-grid{grid-template-columns:250px minmax(0,1fr)}
                .dash-card{background:#fff;border:1px solid #dde7f0;border-radius:10px;box-shadow:0 2px 8px rgba(15,23,42,.03)}
                .dash-card.pad{padding:18px}
                .dash-title{font-size:20px;font-weight:800;color:#2d3845;margin:0}
                .dash-subtitle{font-size:12px;color:#6f8295;margin:2px 0 0}
                .kpi-card{min-height:84px;padding:15px}
                .kpi-label{font-size:12px;font-weight:600;color:#6f8295;margin-bottom:4px}
                .kpi-value{font-size:30px;line-height:1;font-weight:800;color:#102235}
                .kpi-value.green{color:#37c973}.kpi-value.blue{color:#06486f}.kpi-value.amber{color:#ffb703}
                .kpi-note{font-size:11px;font-weight:700;color:#6f8295;margin-top:5px}.kpi-note.green{color:#37c973}.kpi-note.amber{color:#ffb703}
                .priority-list{display:grid;gap:8px;margin-top:14px}
                .priority-item{border-radius:9px;padding:13px 14px;border:1px solid;background:#fff;font-size:12px;font-weight:800}
                .priority-item div:last-child{font-weight:600;margin-top:2px}
                .priority-danger{background:#fff0f3;border-color:#ffc2cb;color:#ff5d80}
                .priority-warning{background:#fff7ec;border-color:#ffd1a1;color:#ff8a00}
                .priority-amber{background:#fffbe6;border-color:#ffe28a;color:#c79000}
                .finance-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
                .metric-box{border-radius:9px;padding:14px;border:1px solid}
                .metric-box.green{background:#eafaf2;border-color:#bceccd}.metric-box.blue{background:#eff6ff;border-color:#bfdbfe}
                .metric-label{font-size:12px;font-weight:800;color:#6f8295;text-transform:uppercase}
                .metric-value{font-size:30px;font-weight:800;margin-top:4px}.metric-value.green{color:#37c973}.metric-value.blue{color:#06486f}
                .finance-chart{height:188px;margin-top:8px}
                .chart-legend{display:flex;gap:16px;justify-content:center;font-size:12px;font-weight:700;color:#6f8295;margin-bottom:4px}
                .legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px}
                .project-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
                .project-card{padding:12px}
                .project-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#73869a;font-weight:800;margin-bottom:10px}
                .project-status{background:#dcfce7;color:#22a861;border-radius:5px;padding:5px 9px}
                .project-title{font-size:15px;font-weight:800;color:#26323f;display:flex;align-items:center;gap:8px;min-height:28px}
                .project-logo{width:28px;height:28px;border-radius:50%;object-fit:cover;background:#eef4fb}
                .project-amount{font-size:26px;line-height:1;font-weight:800;color:#06486f;margin:8px 0 6px}
                .progress-thin{height:6px;background:#eaf0f6;border-radius:999px;overflow:hidden}
                .progress-thin span{display:block;height:100%;background:#37c973;border-radius:999px}
                .project-foot{display:flex;justify-content:space-between;font-size:11px;font-weight:800;color:#37c973;margin:6px 0 10px}
                .project-btn{display:block;width:100%;border-radius:5px;background:#06486f;color:#fff;text-align:center;text-decoration:none;font-size:11px;font-weight:800;padding:8px}
                .stat-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 8px}
                .soft-row{border:1px solid;border-radius:8px;padding:11px 13px;display:flex;justify-content:space-between;font-size:13px;font-weight:800;margin-top:8px}
                .soft-blue{background:#eff6ff;border-color:#cfe1ff;color:#06486f}.soft-green{background:#eafaf2;border-color:#bceccd;color:#20a85f}
                .soft-red{background:#fff0f3;border-color:#ffc2cb;color:#ff5d80}.soft-yellow{background:#fffbe6;border-color:#ffe28a;color:#c79000}
                .soft-neutral{background:#fff;border-color:#dde7f0;color:#6f8295}
                .mini-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
                .mini-stat{border:1px solid #dde7f0;border-radius:8px;text-align:center;padding:14px 10px}
                .mini-stat strong{display:block;font-size:26px;line-height:1;color:#9aa8b6}.mini-stat span{font-size:11px;color:#6f8295;font-weight:700}
                .activity-list{display:grid;gap:8px;margin-top:16px}
                .activity-item{border:1px solid #dde7f0;border-radius:9px;padding:12px 14px;color:#8a9aab;font-size:12px;font-weight:800}
                .activity-item small{display:block;color:#6f8295;margin-top:2px}
                .task-list{display:grid;gap:8px;margin-top:14px}
                .task-item{border:1px solid #dde7f0;border-radius:9px;padding:12px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center}
                .task-title{font-size:14px;font-weight:800;color:#26323f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
                .task-meta{font-size:12px;font-weight:700;color:#8a9aab;margin-top:3px}
                .task-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
                .task-empty{border:1px dashed #d7e1eb;border-radius:9px;padding:18px;text-align:center;color:#8a9aab;font-size:13px;font-weight:800;margin-top:14px}
                @media (max-width:1199.98px){.kpi-grid,.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.main-grid,.two-grid{grid-template-columns:1fr}}
                @media (max-width:767.98px){.staff-dashboard{padding:16px}.kpi-grid,.project-grid,.finance-metrics,.stat-pair{grid-template-columns:1fr}.staff-hero h1{font-size:28px}.task-item{grid-template-columns:1fr}.task-actions{justify-content:flex-start}}
            </style>

            <div class="staff-dashboard">
                <section class="staff-hero">
                    <h1>Bonjour {{ dashboard.greeting_name }} 👋</h1>
                    <p>Voici un aperçu de vos projets et partenariats</p>
                </section>

                <section class="dash-grid kpi-grid mb-3">
                    <div class="dash-card kpi-card"><div class="kpi-label">Collecté (total)</div><div class="kpi-value green">{{ dashboard.kpis.total_collected|number_format(0, ',', ' ') }} €</div><div class="kpi-note green">Sur {{ dashboard.kpis.objective|number_format(0, ',', ' ') }} €</div></div>
                    <div class="dash-card kpi-card"><div class="kpi-label">Projets actifs</div><div class="kpi-value">{{ dashboard.kpis.active_projects }}</div><div class="kpi-note">Organisation courante</div></div>
                    <div class="dash-card kpi-card"><div class="kpi-label">Partenaires actifs</div><div class="kpi-value">{{ dashboard.kpis.active_partners }}</div><div class="kpi-note">Mécènes et sponsors</div></div>
                    <div class="dash-card kpi-card"><div class="kpi-label">En prospection</div><div class="kpi-value">{{ dashboard.kpis.prospection }}</div><div class="kpi-note amber">Opportunités ouvertes</div></div>
                    <div class="dash-card kpi-card"><div class="kpi-label">Conformité</div><div class="kpi-value green">{{ dashboard.kpis.conformity }}%</div><div class="kpi-note">{{ dashboard.kpis.signed_conventions }} convention(s) signée(s)</div></div>
                </section>

                <section class="dash-card pad mb-3">
                    <div class="d-flex align-items-start justify-content-between gap-3">
                        <div>
                            <h2 class="dash-title">Tâches à réaliser ce jour</h2>
                            <p class="dash-subtitle">Actions à traiter en priorité aujourd'hui</p>
                        </div>
                        <a href="{{ path('app_under_construction') }}" class="btn btn-sm btn-outline-primary" data-turbo-frame="_top">Voir toutes les taches</a>
                    </div>

                    {% if today_tasks is empty %}
                        <div class="task-empty">Aucune tâche prévue aujourd'hui.</div>
                    {% else %}
                        <div class="task-list">
                            {% for task in today_tasks %}
                                <div class="task-item">
                                    <div class="min-w-0">
                                        <div class="task-title">{{ task.title }}</div>
                                        <div class="task-meta">
                                            {{ task.dueAt ? task.dueAt|date('d/m/Y H:i') : 'Sans échéance' }}
                                            {% if task.sourceLabel %} · {{ task.sourceLabel }}{% endif %}
                                        </div>
                                    </div>
                                    <div class="task-actions">
                                        <span class="badge text-bg-secondary">{{ task_priorities[task.priority]|default(task.priority|default('Normal')) }}</span>
                                        {% if task.status != 'done' %}
                                            <a class="btn btn-sm btn-success" href="{{ path('app_under_construction') }}" data-turbo-frame="_top">Terminer</a>
                                        {% endif %}
                                        <a class="btn btn-sm btn-light" href="{{ path('app_under_construction') }}" data-turbo-frame="_top">Ouvrir</a>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}
                </section>

                <section class="dash-grid main-grid mb-3">
                    <div class="dash-card pad">
                        <h2 class="dash-title">Priorités urgentes</h2>
                        <div class="priority-list">
                            {% for priority in dashboard.priorities %}
                                <div class="priority-item priority-{{ priority.tone }}"><div>{{ priority.title }}</div><div>{{ priority.subtitle }}</div></div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="dash-card pad">
                        <h2 class="dash-title">Vue financière globale</h2>
                        <p class="dash-subtitle">Répartition mécénat et sponsoring</p>
                        <div class="finance-metrics">
                            <div class="metric-box green"><div class="metric-label">Collecté</div><div class="metric-value green">{{ dashboard.financial.collected|number_format(0, ',', ' ') }} €</div><div class="kpi-note">{{ dashboard.financial.objective > 0 ? ((dashboard.financial.collected / dashboard.financial.objective) * 100)|round : 0 }}% du total objectif</div></div>
                            <div class="metric-box blue"><div class="metric-label">Objectif</div><div class="metric-value blue">{{ dashboard.financial.objective|number_format(0, ',', ' ') }} €</div><div class="kpi-note">{{ dashboard.kpis.active_projects }} projet(s) actif(s)</div></div>
                        </div>
                        <div class="chart-legend"><span><i class="legend-dot" style="background:#37c973"></i>Collecté</span><span><i class="legend-dot" style="background:#a8b8cb"></i>Objectif</span></div>
                        <svg class="finance-chart" viewBox="0 0 730 160" preserveAspectRatio="none" aria-hidden="true">
                            {% for y in [22,50,78,106,134] %}<line x1="24" y1="{{ y }}" x2="706" y2="{{ y }}" stroke="#edf2f7" stroke-width="1" />{% endfor %}
                            <polyline points="{{ objective_points|join(' ') }}" fill="none" stroke="#a8b8cb" stroke-width="2" stroke-dasharray="5 5" />
                            <polyline points="{{ collected_points|join(' ') }}" fill="none" stroke="#37b965" stroke-width="3" />
                            {% for month in dashboard.financial.months %}<text x="{{ 24 + (loop.index0 * 62) }}" y="156" text-anchor="middle" fill="#526579" font-size="10">{{ month }}</text>{% endfor %}
                        </svg>
                    </div>
                </section>

                <section class="dash-card pad mb-3">
                    <div class="d-flex align-items-start justify-content-between gap-3 mb-3">
                        <div><h2 class="dash-title">Vos projets</h2><p class="dash-subtitle">Suivi de l'avancement et des financements</p></div>
                        <div class="d-flex gap-2"><a class="btn btn-sm btn-outline-success" href="{{ path('app_under_construction') }}" data-turbo-frame="_top">+ Créer un projet</a><a class="btn btn-sm btn-outline-primary" href="{{ path('app_under_construction') }}">Voir tous les projets</a></div>
                    </div>
                    <div class="dash-grid project-grid">
                        {% for project in dashboard.projects %}
                            <article class="dash-card project-card">
                                <div class="project-head"><span class="project-status">{{ project.status }}</span><span>{{ project.date ? project.date|date('d/m/Y') : '' }}</span></div>
                                <div class="project-title">{% if project.logo %}<img class="project-logo" src="{{ asset(project.logo) }}" alt="">{% endif %}{{ project.title }}</div>
                                <div class="project-amount">{{ project.received|number_format(0, ',', ' ') }} €</div>
                                <div class="text-end small fw-bold text-muted">/ {{ project.objective|number_format(0, ',', ' ') }} €</div>
                                <div class="progress-thin"><span style="width:{{ project.progress }}%"></span></div>
                                <div class="project-foot"><span>{{ project.progress }}% atteint</span></div>
                                <a class="project-btn" href="{{ path('app_under_construction') }}">Voir le projet</a>
                            </article>
                        {% else %}
                            <div class="text-muted">Aucun projet actif.</div>
                        {% endfor %}
                    </div>
                </section>

                <section class="dash-grid two-grid mb-3">
                    <div class="dash-card pad">
                        <h2 class="dash-title">Prospection commerciale</h2>
                        <div class="stat-pair"><div class="dash-card kpi-card"><div class="kpi-label">Total en prospection</div><div class="kpi-value">{{ dashboard.prospection.total }}</div></div><div class="dash-card kpi-card soft-yellow"><div class="kpi-label">Opportunités ouvertes</div><div class="kpi-value amber">{{ dashboard.prospection.open }}</div></div></div>
                        <div class="soft-row soft-blue"><span>En cours</span><span>{{ dashboard.prospection.open }}</span></div>
                        <div class="soft-row soft-green"><span>Validées</span><span>{{ dashboard.prospection.validated }}</span></div>
                        <div class="soft-row soft-red"><span>Refusées</span><span>{{ dashboard.prospection.refused }}</span></div>
                    </div>
                    <div class="dash-card pad">
                        <h2 class="dash-title">Trésorerie & Apports</h2>
                        <div class="stat-pair"><div class="metric-box green"><div class="metric-label">Apports réalisés</div><div class="metric-value green">{{ dashboard.treasury.realized_amount|number_format(0, ',', ' ') }} €</div></div><div class="metric-box blue"><div class="metric-label">Prévisionnels restants</div><div class="metric-value blue">{{ dashboard.treasury.remaining_amount|number_format(0, ',', ' ') }} €</div></div></div>
                        <div class="soft-row soft-green"><span>Réalisés</span><span>{{ dashboard.treasury.done }}</span></div>
                        <div class="soft-row soft-yellow"><span>En attente</span><span>{{ dashboard.treasury.pending }}</span></div>
                        <div class="soft-row soft-red"><span>En retard</span><span>{{ dashboard.treasury.late }}</span></div>
                    </div>
                </section>

                <section class="dash-grid two-grid mb-3">
                    <div class="dash-card pad"><h2 class="dash-title">Conventions & Conformité</h2><div class="mini-stat-grid"><div class="mini-stat soft-red"><strong>{{ dashboard.conventions.to_create }}</strong><span>À créer</span></div><div class="mini-stat soft-yellow"><strong>{{ dashboard.conventions.pending }}</strong><span>En attente</span></div><div class="mini-stat soft-green"><strong>{{ dashboard.conventions.active }}</strong><span>Actives</span></div></div><p class="dash-subtitle mt-3">Conventions suivies sur les projets ouverts</p></div>
                    <div class="dash-card pad"><h2 class="dash-title">Contreparties</h2><div class="mini-stat-grid"><div class="mini-stat"><strong>{{ dashboard.benefits.todo }}</strong><span>À faire</span></div><div class="mini-stat soft-blue"><strong>{{ dashboard.benefits.progress }}</strong><span>En cours</span></div><div class="mini-stat soft-green"><strong>{{ dashboard.benefits.done }}</strong><span>Réalisées</span></div></div><div class="soft-row soft-green mt-3"><span>Taux de réalisation</span><span>{{ dashboard.benefits.rate }}%</span></div></div>
                </section>

                <section class="dash-card pad">
                    <h2 class="dash-title">Activité récente</h2>
                    <p class="dash-subtitle">Dernières actions sur vos projets</p>
                    <div class="activity-list">
                        {% for activity in dashboard.activities %}
                            <div class="activity-item">{{ activity.text }}<small>{{ activity.date ? activity.date|date('d/m/Y H:i') : '' }}</small></div>
                        {% else %}
                            <div class="activity-item">Aucune activité récente.</div>
                        {% endfor %}
                    </div>
                </section>
            </div>
        {% endblock %}
    {% endembed %}
{% endblock %}