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

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

{% set schedule_status = {
    draft: {label: 'Brouillon', tone: 'warning'},
    ready: {label: 'Prêt à publier', tone: 'success'},
    published: {label: 'Publié', tone: 'info'},
    modified_after_publication: {label: 'Modifié', tone: 'warning'},
    locked: {label: 'Verrouillé', tone: 'muted'},
    archived: {label: 'Archivé', tone: 'muted'},
    cancelled: {label: 'Annulé', tone: 'danger'}
} %}
{% set day_labels = ['LUN', 'MAR', 'MER', 'JEU', 'VEN', 'SAM', 'DIM'] %}

{% block content %}
<div class="data-page planning-dashboard" data-controller="planning-dashboard">
    <div class="data-page__header">
        <div>
            <nav class="data-breadcrumb" aria-label="Fil d'Ariane">
                <span>Plannings</span>
                <i class="ti ti-chevron-right" aria-hidden="true"></i>
                <strong>Tableau de bord</strong>
            </nav>
            <h1>Tableau de bord planning</h1>
            <p>Vue d'ensemble et pilotage de la gestion des plannings Staffelia</p>
        </div>
        <div class="data-page__actions">
            <a class="data-button data-button--primary" href="{{ path('planning_schedule_new') }}">
                <i class="ti ti-plus" aria-hidden="true"></i>
                Créer un planning
            </a>
        </div>
    </div>

    <div class="metric-grid planning-dashboard__metrics">
        <article class="metric-card">
            <span class="metric-card__label">Plannings à publier</span>
            <span class="metric-card__icon metric-card__icon--blue"><i class="ti ti-send" aria-hidden="true"></i></span>
            <strong class="metric-card__value">{{ stats.to_publish|default(0) }}</strong>
            <span class="metric-card__trend">+ {{ schedules_to_publish|length }} depuis hier</span>
        </article>
        {#<article class="metric-card">
            <span class="metric-card__label">Shifts non affectés</span>
            <span class="metric-card__icon metric-card__icon--amber"><i class="ti ti-user-x" aria-hidden="true"></i></span>
            <strong class="metric-card__value">{{ stats.unassigned|default(0) }}</strong>
            <span class="metric-card__trend metric-card__trend--danger"><i class="ti ti-alert-circle" aria-hidden="true"></i> Action requise</span>
        </article>#}
        <article class="metric-card">
            <span class="metric-card__label">Conflits ouverts</span>
            <span class="metric-card__icon metric-card__icon--red"><i class="ti ti-alert-triangle" aria-hidden="true"></i></span>
            <strong class="metric-card__value">{{ stats.conflicts|default(0) }}</strong>
            <span class="metric-card__caption">{{ stats.blocking_conflicts|default(0) }} bloquant{{ stats.blocking_conflicts|default(0) > 1 ? 's' : '' }}</span>
        </article>
        <article class="metric-card">
            <span class="metric-card__label">Heures planifiées</span>
            <span class="metric-card__icon metric-card__icon--green"><i class="ti ti-clock" aria-hidden="true"></i></span>
            <strong class="metric-card__value">{{ stats.week_hours|default(0)|number_format(0, ',', ' ') }} h</strong>
            <span class="metric-card__caption">Cette semaine</span>
        </article>
        <article class="metric-card">
            <span class="metric-card__label">Modifs récentes</span>
            <span class="metric-card__icon metric-card__icon--purple"><i class="ti ti-bolt" aria-hidden="true"></i></span>
            <strong class="metric-card__value">{{ stats.recent_changes|default(0) }}</strong>
            <span class="metric-card__caption">Dernières 24h</span>
        </article>
    </div>

    <div class="planning-dashboard__layout">
        <main class="planning-dashboard__main">
            <section class="data-card planning-panel">
                <div class="planning-panel__header">
                    <h2><i class="ti ti-calendar-plus" aria-hidden="true"></i>Plannings à publier</h2>
                    <a href="{{ path('planning_week') }}">Tout voir</a>
                </div>
                <div class="data-table-wrap">
                    <table class="data-table data-table--planning-dashboard">
                        <thead>
                            <tr>
                                <th>Planning</th>
                                <th>Établissement</th>
                                <th>Statut</th>
                                <th>Conflits</th>
                                <th class="data-table__actions">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for schedule in schedules_to_publish %}
                            {% set status = schedule_status[schedule.status]|default({label: schedule.status|capitalize, tone: 'muted'}) %}
                            <tr data-planning-dashboard-target="row" data-url="{{ path('planning_schedule_show', {id: schedule.id}) }}" data-action="dblclick->planning-dashboard#openRow">
                                <td>
                                    <strong class="data-main-text">{{ schedule.title }}</strong>
                                    <span class="data-sub-text">{{ schedule.periodStart|date('d/m/Y') }} au {{ schedule.periodEnd|date('d/m/Y') }}</span>
                                </td>
                                <td>{{ schedule.etablissement ? schedule.etablissement.nom : 'Tous les établissements' }}</td>
                                <td><span class="data-badge data-badge--{{ status.tone }}"><i></i>{{ status.label }}</span></td>
                                {% set schedule_conflict_count = schedule_conflicts[schedule.id]|default(0) %}
                                <td><span class="planning-conflict-count">{{ schedule_conflict_count > 0 ? schedule_conflict_count : '—' }}</span></td>
                                <td class="data-table__actions">
                                    <a class="data-button data-button--secondary" href="{{ path('planning_week', {start: schedule.periodStart|date('Y-m-d')}) }}">{{ schedule.status == 'draft' ? 'Continuer' : 'Voir' }}</a>
                                </td>
                            </tr>
                        {% else %}
                            <tr><td colspan="5"><section class="data-empty-panel">Aucun planning à publier.</section></td></tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>

            {#<section class="data-card planning-panel">
                <div class="planning-panel__header">
                    <h2><i class="ti ti-users-minus" aria-hidden="true"></i>Shifts non affectés</h2>
                </div>
                <div class="planning-unassigned-grid">
                    {% for shift in unassigned_shifts %}
                        <article class="planning-unassigned-card">
                            <div>
                                <span>{{ day_labels[(shift.date|date('N')) - 1]|default('') }} {{ shift.startTime|date('H:i') }}-{{ shift.endTime|date('H:i') }}</span>
                                <strong>{{ shift.title }}</strong>
                                <small>{{ shift.requiredEmployees }} poste{{ shift.requiredEmployees > 1 ? 's' : '' }} ouvert{{ shift.requiredEmployees > 1 ? 's' : '' }}</small>
                            </div>
                            <a class="data-icon-button" href="{{ path('planning_shift_edit', {id: shift.id}) }}" aria-label="Affecter">
                                <i class="ti ti-user-plus" aria-hidden="true"></i>
                            </a>
                        </article>
                    {% else %}
                        <section class="data-empty-panel">Tous les shifts sont affectés.</section>
                    {% endfor %}
                </div>
            </section>#}

            <section class="data-card planning-panel">
                <div class="planning-panel__header planning-panel__header--compact">
                    <h2>Aperçu de la semaine</h2>
                    <div class="planning-legend">
                        <span><i class="planning-dot planning-dot--morning"></i>Matin</span>
                        <span><i class="planning-dot planning-dot--afternoon"></i>Après-midi</span>
                        <span><i class="planning-dot planning-dot--absence"></i>Absence</span>
                    </div>
                </div>
                <div class="planning-week-preview">
                    {% for day in week_preview.days %}
                        <article class="{{ day.is_weekend ? 'is-muted' : '' }}">
                            <header>
                                <span>{{ day_labels[(day.date|date('N')) - 1]|default('') }}</span>
                                <strong>{{ day.date|date('d') }}</strong>
                            </header>
                            <div>
                                {% for item in day.items|slice(0, 3) %}
                                    <span class="planning-week-pill planning-week-pill--{{ item.tone }}">{{ item.label }}</span>
                                {% else %}
                                    <span class="planning-week-empty"></span>
                                {% endfor %}
                            </div>
                        </article>
                    {% endfor %}
                </div>
            </section>
        </main>

        <aside class="planning-dashboard__side">
            <section class="data-card planning-panel planning-alert-panel">
                <div class="planning-panel__header">
                    <h2><i class="ti ti-alert-triangle" aria-hidden="true"></i>Conflits critiques</h2>
                </div>
                <div class="planning-conflict-tags">
                    {% for item in conflict_summary %}
                        <span><i class="{{ item.icon }}" aria-hidden="true"></i>{{ item.label }}</span>
                    {% else %}
                        <span class="is-muted">Aucun conflit critique</span>
                    {% endfor %}
                </div>
                <a class="planning-alert-link" href="{{ path('planning_conflict_index') }}">Gérer tous les conflits ({{ stats.conflicts|default(0) }})</a>
            </section>

            <section class="data-card planning-panel">
                <div class="planning-panel__header">
                    <h2><i class="ti ti-plane-departure" aria-hidden="true"></i>Absences à venir</h2>
                </div>
                <div class="planning-person-list">
                    {% for request in upcoming_absences %}
                        {% set salarie = request.salarie %}
                        {% set photo_path = salarie and salarie.photo ? salarie.photo|trim : null %}
                        {% set avatar_src = photo_path ? (photo_path starts with 'http://' or photo_path starts with 'https://' ? photo_path : asset(photo_path starts with '/' ? photo_path|slice(1) : photo_path)) : null %}
                        {% set initials = salarie ? (salarie.prenom|default('?')|first ~ salarie.nom|default('')|first)|upper : '?' %}
                        <a class="planning-person-row" href="{{ path('app_leave_show', {id: request.id}) }}">
                            <span class="data-avatar {{ avatar_src ? '' : 'data-avatar--initials' }}">
                                {% if avatar_src %}<img src="{{ avatar_src }}" alt="{{ salarie }}">{% else %}{{ initials }}{% endif %}
                            </span>
                            <span>
                                <strong>{{ salarie }}</strong>
                                <small>{{ request.startDate|date('d/m') }} · {{ request.leaveType.nom }}</small>
                            </span>
                            <i class="ti ti-chevron-right" aria-hidden="true"></i>
                        </a>
                    {% else %}
                        <section class="data-empty-panel">Aucune absence approuvée à venir.</section>
                    {% endfor %}
                </div>
            </section>

            <section class="data-card planning-panel">
                <div class="planning-panel__header">
                    <h2><i class="ti ti-history" aria-hidden="true"></i>Activité récente</h2>
                </div>
                <div class="planning-activity-list">
                    {% for item in history %}
                        <article>
                            <i class="planning-activity-dot planning-activity-dot--{{ loop.index0 % 3 }}"></i>
                            <div>
                                <strong>{{ item.action|replace({'_': ' '})|capitalize }}</strong>
                                <span>{{ item.message|default(item.schedule ? item.schedule.title : 'Mise à jour planning') }}</span>
                                <small>{{ item.createdAt|date('d/m/Y H:i') }}</small>
                            </div>
                        </article>
                    {% else %}
                        <section class="data-empty-panel">Aucune activité récente.</section>
                    {% endfor %}
                </div>
            </section>
        </aside>
    </div>
</div>
{% endblock %}