{% extends 'admin/layout.html.twig' %}
{% block title %}À traiter — Walk The Line{% endblock %}
{% block admin_body %}
{% set lateCount = 0 %}{% set todayCount = 0 %}{% set upcomingCount = 0 %}
{% for item in items %}
    {% if item.nextActionDate and item.nextActionDate < today %}{% set lateCount = lateCount + 1 %}
    {% elseif item.nextActionDate == today %}{% set todayCount = todayCount + 1 %}
    {% else %}{% set upcomingCount = upcomingCount + 1 %}{% endif %}
{% endfor %}
{% set taskActions = [] %}
{% if can_permission('VENUE_CONTACT',2) %}{% set taskActions = [{label:'Nouveau contact terrain',href:path('admin_field_contact_new'),icon:'bi-lightning-charge',primary:true}] %}{% endif %}
{% include 'admin/ui/_page_header.html.twig' with {
    page_eyebrow: 'Pilotage quotidien',
    page_title: 'À traiter',
    page_subtitle: 'Les actions sont classées par urgence. Ouvrez un dossier pour enregistrer l’action réellement effectuée.',
    page_actions: taskActions
} %}

<div class="task-summary mb-3" aria-label="Résumé des échéances">
    <button class="task-filter is-active" type="button" data-task-filter="all"><strong>{{ items|length }}</strong><span>Toutes</span></button>
    <button class="task-filter" type="button" data-task-filter="late"><strong>{{ lateCount }}</strong><span>En retard</span></button>
    <button class="task-filter" type="button" data-task-filter="today"><strong>{{ todayCount }}</strong><span>Aujourd’hui</span></button>
    <button class="task-filter" type="button" data-task-filter="upcoming"><strong>{{ upcomingCount }}</strong><span>À venir</span></button>
</div>

<div class="mobile-card-list task-mobile-list">
{% for p in items %}
    {% set late = p.nextActionDate and p.nextActionDate < today %}
    {% set dueToday = p.nextActionDate == today %}
    {% set category = late ? 'late' : (dueToday ? 'today' : 'upcoming') %}
    {% set venue = p.venueEntity %}
    {% set contact = p.targetContact ?: (venue ? venue.primaryContact : null) %}
    <article class="card business-card task-card" data-task-category="{{ category }}">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-start gap-2 mb-2">
                <span class="badge {{ late ? 'text-bg-danger' : (dueToday ? 'text-bg-dark' : 'text-bg-warning') }}">{{ late ? 'En retard' : (dueToday ? 'Aujourd’hui' : 'À venir') }}</span>
                <time class="small text-secondary">{{ p.nextActionDate ? p.nextActionDate|date('d/m/Y') : 'Dès que possible' }}</time>
            </div>
            <h2 class="h5 mb-1">{{ p.nextAction ?: 'Premier contact' }}</h2>
            <div class="fw-semibold">{{ venue ? venue.name : p.venue }}</div>
            <div class="small text-secondary mb-3">{{ venue ? venue.city : p.city }}{% if contact %} · {{ contact.name }}{% endif %}</div>
            {% if p.status %}<div class="small mb-3"><span class="text-secondary">Étape :</span> {{ p.status.name }}</div>{% endif %}
            <div class="card-actions">
                <a class="btn btn-dark touch-target flex-grow-1" href="{{ path('admin_prospection_show',{id:p.id}) }}#next-action">Traiter</a>
                {% if contact and contact.phone %}<a class="btn btn-outline-secondary icon-only-action" href="tel:{{ contact.phone|replace({' ':''}) }}" aria-label="Appeler {{ contact.name }}"><i class="bi bi-telephone" aria-hidden="true"></i></a>{% endif %}
                {% if contact and contact.email %}<a class="btn btn-outline-secondary icon-only-action" href="mailto:{{ contact.email }}" aria-label="Écrire à {{ contact.name }}"><i class="bi bi-envelope" aria-hidden="true"></i></a>{% endif %}
            </div>
        </div>
    </article>
{% else %}
    <div class="empty-state"><i class="bi bi-check2-circle empty-state-icon" aria-hidden="true"></i><h2 class="h5">Rien à traiter</h2><p class="text-secondary mb-0">Aucune action n’est attendue dans la fenêtre actuelle.</p></div>
{% endfor %}
</div>

<div class="card table-card desktop-table-only">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0 data-table" data-order-column="1" data-order-dir="asc">
            <thead class="table-light"><tr><th>Urgence</th><th>Date</th><th>Action</th><th>Lieu et contact</th><th>Responsable</th><th>Étape</th><th data-orderable="false"><span class="visually-hidden">Action</span></th></tr></thead>
            <tbody>
            {% for p in items %}
                {% set late = p.nextActionDate and p.nextActionDate < today %}
                {% set dueToday = p.nextActionDate == today %}
                {% set category = late ? 'late' : (dueToday ? 'today' : 'upcoming') %}
                {% set venue = p.venueEntity %}
                {% set contact = p.targetContact ?: (venue ? venue.primaryContact : null) %}
                <tr data-task-category="{{ category }}">
                    <td><span class="badge {{ late ? 'text-bg-danger' : (dueToday ? 'text-bg-dark' : 'text-bg-warning') }}">{{ late ? 'En retard' : (dueToday ? 'Aujourd’hui' : 'À venir') }}</span></td>
                    <td class="text-nowrap" data-order="{{ p.nextActionDate ? p.nextActionDate|date('Y-m-d') : '' }}">{{ p.nextActionDate ? p.nextActionDate|date('d/m/Y') : 'Dès que possible' }}</td>
                    <td class="fw-semibold">{{ p.nextAction ?: 'Premier contact' }}</td>
                    <td><strong>{{ venue ? venue.name : p.venue }}</strong><span class="d-block small text-secondary">{{ venue ? venue.city : p.city }}{% if contact %} · {{ contact.name }}{% endif %}</span></td>
                    <td>{{ p.createdBy ? p.createdBy.displayName : '—' }}</td>
                    <td>{{ p.status ? p.status.name : '—' }}</td>
                    <td class="text-end"><a class="btn btn-sm btn-dark touch-target" href="{{ path('admin_prospection_show',{id:p.id}) }}#next-action">Traiter</a></td>
                </tr>
            {% else %}<tr><td colspan="7" class="text-center text-secondary py-5">Rien à traiter dans la fenêtre actuelle.</td></tr>{% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block javascripts %}{{ parent() }}
<script>
document.querySelectorAll('[data-task-filter]').forEach(button => button.addEventListener('click', () => {
    const category = button.dataset.taskFilter;
    document.querySelectorAll('[data-task-filter]').forEach(item => item.classList.toggle('is-active', item === button));
    document.querySelectorAll('[data-task-category]').forEach(item => item.classList.toggle('d-none', category !== 'all' && item.dataset.taskCategory !== category));
}));
</script>
{% endblock %}