{% extends "layout.html.twig" %}
{% import "macros.twig" as lbl %}

{% block title %}Calendario · {{ attivita.nome }} · {{ app_name }}{% endblock %}

{% set can_write = current_user.ruolo in ['admin', 'editor'] %}

{% block content %}
    <p class="text-sm text-stone-500">
        <a href="{{ url('/elementi') }}">Elementi</a> /
        <a href="{{ url('/elementi/' ~ attivita.elemento_id) }}">{{ attivita.elemento_nome }}</a> /
        Calendario
    </p>

    <div class="mt-1 flex items-center justify-between gap-4">
        <h1>{{ attivita.nome }}</h1>
        {% if can_write %}
            <a class="btn-secondary" href="{{ url('/attivita/' ~ attivita.id ~ '/modifica') }}">Modifica attività</a>
        {% endif %}
    </div>

    {# Legenda + indicatore salvataggio #}
    <div class="mt-3 flex flex-wrap items-center gap-4 text-sm" x-data="weekCalendar()">
        <span class="inline-flex items-center gap-2">
            <span class="inline-block h-4 w-4 rounded border border-orto-600 bg-orto-500"></span> verde = periodo migliore
        </span>
        <span class="inline-flex items-center gap-2">
            <span class="inline-block h-4 w-4 rounded border border-amber-500 bg-amber-400"></span> giallo = periodo medio
        </span>
        <span class="inline-flex items-center gap-2">
            <span class="inline-block h-4 w-4 rounded border border-stone-200 bg-white"></span> nessun periodo
        </span>

        <span class="ml-auto" aria-live="polite">
            {% if can_write %}
                <span x-show="saving" class="text-stone-500">Salvataggio…</span>
                <span x-show="saved && !saving" x-cloak class="text-orto-600">✓ salvato</span>
                <span x-show="error" x-cloak class="text-red-600">Errore di salvataggio</span>
            {% else %}
                <span class="badge">sola lettura</span>
            {% endif %}
        </span>

        {# Griglia 52 settimane raggruppate per mese #}
        <div class="mt-2 grid w-full gap-3 sm:grid-cols-2 lg:grid-cols-3">
            {% for m in months %}
                <div class="card">
                    <h3 class="mb-2">{{ m.nome }}</h3>
                    <div class="flex flex-wrap gap-1.5">
                        {% for w in m.weeks %}
                            {% set stt = stati[w.numero] ?? '' %}
                            <button type="button"
                                {% if can_write %}@click="cycle({{ w.numero }})"{% else %}disabled{% endif %}
                                :class="{
                                    'bg-orto-500 text-white border-orto-600': stati[{{ w.numero }}] === 'verde',
                                    'bg-amber-400 text-stone-900 border-amber-500': stati[{{ w.numero }}] === 'giallo',
                                    'bg-white text-stone-400 border-stone-200': !stati[{{ w.numero }}]
                                }"
                                class="flex h-11 w-11 items-center justify-center rounded-md border text-sm font-medium select-none sm:h-9 sm:w-9 sm:text-xs
                                       {{ can_write ? 'cursor-pointer hover:opacity-80' : 'cursor-default' }}
                                       {% if stt == 'verde' %}bg-orto-500 text-white border-orto-600
                                       {%- elseif stt == 'giallo' %}bg-amber-400 text-stone-900 border-amber-500
                                       {%- else %}bg-white text-stone-400 border-stone-200{% endif %}"
                                title="{{ w.etichetta }}">{{ w.numero }}</button>
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    {# ── Risorse ───────────────────────────────────────────────── #}
    <div class="mt-8 flex items-center justify-between gap-4">
        <h2>Risorse</h2>
        {% if can_write %}
            <a class="btn-primary" href="{{ url('/attivita/' ~ attivita.id ~ '/risorse/nuova') }}">+ Risorsa</a>
        {% endif %}
    </div>
    {% if risorse is empty %}
        <p class="mt-2 text-sm text-stone-500">Nessuna risorsa (link, guida, video) collegata.</p>
    {% else %}
        <div class="card mt-2 overflow-x-auto">
            <table class="table table-cards">
                <thead><tr><th>Descrizione</th><th>Link</th>{% if can_write %}<th>Azioni</th>{% endif %}</tr></thead>
                <tbody>
                    {% for r in risorse %}
                        <tr>
                            <td data-label="Descrizione">{{ r.descrizione ?: '—' }}</td>
                            <td data-label="Link"><a href="{{ r.url }}" target="_blank" rel="noopener noreferrer">{{ r.url|length > 60 ? r.url|slice(0, 60) ~ '…' : r.url }} ↗</a></td>
                            {% if can_write %}
                                <td class="cell-actions">
                                    <div class="flex flex-wrap gap-2">
                                        <a class="btn-secondary" href="{{ url('/risorse/' ~ r.id ~ '/modifica') }}">Modifica</a>
                                        <form method="post" action="{{ url('/risorse/' ~ r.id ~ '/elimina') }}"
                                              onsubmit="return confirm('Eliminare questa risorsa?')">
                                            {{ csrf_field() }}
                                            <button type="submit" class="btn-danger">Elimina</button>
                                        </form>
                                    </div>
                                </td>
                            {% endif %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}

    {# ── Storico (diario annuale) ──────────────────────────────── #}
    <div class="mt-8 flex items-center justify-between gap-4">
        <h2>Storico</h2>
        {% if can_write %}
            <a class="btn-primary" href="{{ url('/attivita/' ~ attivita.id ~ '/storico/nuovo') }}">+ Voce di storico</a>
        {% endif %}
    </div>
    {% if storico is empty %}
        <p class="mt-2 text-sm text-stone-500">Nessuna voce di storico. Annota com'è andata, anno per anno.</p>
    {% else %}
        <div class="card mt-2 overflow-x-auto">
            <table class="table table-cards">
                <thead>
                    <tr>
                        <th>Data</th><th>Anno</th>{% if attivita.sezione_modello == 'animale' %}<th>{{ lbl.variante_label(attivita.sezione_modello) }}</th>{% endif %}
                        <th>Luogo</th><th>Origine</th><th>Esito</th>{% if can_write %}<th>Azioni</th>{% endif %}
                    </tr>
                </thead>
                <tbody>
                    {% for s in storico %}
                        <tr>
                            <td class="whitespace-nowrap" data-label="Data">{{ s.data ? s.data|date('d/m/Y') : '—' }}</td>
                            <td data-label="Anno">{{ s.anno }}</td>
                            {% if attivita.sezione_modello == 'animale' %}<td data-label="{{ lbl.variante_label(attivita.sezione_modello) }}">{{ s.variante_nome ?: '—' }}</td>{% endif %}
                            <td data-label="Luogo">{{ s.luogo_nome ?: '—' }}</td>
                            <td data-label="Origine">{{ s.origine ?: '—' }}</td>
                            <td class="text-stone-600" data-label="Esito">{{ s.esito|length > 100 ? s.esito|slice(0, 100) ~ '…' : s.esito }}</td>
                            {% if can_write %}
                                <td class="cell-actions">
                                    <div class="flex flex-wrap gap-2">
                                        <a class="btn-secondary" href="{{ url('/storico/' ~ s.id ~ '/modifica') }}">Modifica</a>
                                        <form method="post" action="{{ url('/storico/' ~ s.id ~ '/elimina') }}"
                                              onsubmit="return confirm('Eliminare questa voce di storico?')">
                                            {{ csrf_field() }}
                                            <button type="submit" class="btn-danger">Elimina</button>
                                        </form>
                                    </div>
                                </td>
                            {% endif %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
{% endblock %}

{% block scripts %}
<script>
    function weekCalendar() {
        return {
            stati: {{ stati_json|raw }},
            saving: false,
            saved: false,
            error: false,
            _timer: null,
            cycle(n) {
                const next = { '': 'verde', 'verde': 'giallo', 'giallo': '' }[this.stati[n] || ''];
                this.save(n, next);
            },
            save(n, stato) {
                // aggiornamento ottimistico
                if (stato === '') { delete this.stati[n]; } else { this.stati[n] = stato; }
                this.saving = true; this.saved = false; this.error = false;
                const body = new URLSearchParams({ settimana: n, stato: stato, _csrf: '{{ csrf_token() }}' });
                fetch('{{ save_url }}', { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest' }, body })
                    .then(r => { if (!r.ok) throw new Error(r.status); return r.json(); })
                    .then(() => {
                        this.saving = false; this.saved = true;
                        clearTimeout(this._timer);
                        this._timer = setTimeout(() => { this.saved = false; }, 1500);
                    })
                    .catch(() => { this.saving = false; this.error = true; });
            }
        };
    }
</script>
{% endblock %}