{% extends "base.html" %}
{% block title %}Rapports {{ year }}{% endblock %}
{% block content %}

<!-- En-tête -->
<div class="flex items-baseline justify-between mb-5">
  <p class="font-display text-2xl font-semibold" style="color:var(--ink);">Rapports</p>
  <form method="GET">
    <select name="year" onchange="this.form.submit()" class="field-input" style="width:auto; padding:0.3rem 0.6rem; font-size:0.8rem;">
      {% for y in range(2024, year + 2) %}
      <option value="{{ y }}" {% if y == year %}selected{% endif %}>{{ y }}</option>
      {% endfor %}
    </select>
  </form>
</div>

<!-- Kilométrage -->
<div class="card card-ink">
  <p class="card-label">Kilométrage {{ year }}</p>
  {% if total_km %}
    <div class="space-y-3 mt-1">
      {% for vehicle_id, km in total_km.items() %}
      <div class="flex items-baseline justify-between">
        <span class="text-xs" style="color:#8A8278;">{{ vehicles.get(vehicle_id, {}).get('name', vehicle_id) }}</span>
        <span class="font-data font-semibold" style="font-size:1.35rem; color:var(--ink);">
          {{ km }}<span class="font-normal text-xs ml-1" style="color:#9A9288;">km</span>
        </span>
      </div>
      {% endfor %}
      <div class="flex items-baseline justify-between pt-2" style="border-top:1px solid var(--parchment);">
        <span class="text-xs font-semibold" style="color:#8A8278; letter-spacing:0.06em;">CO₂ TOTAL</span>
        <span class="font-data font-semibold" style="font-size:1.35rem; color:var(--ink);">
          {{ total_co2_kg }}<span class="font-normal text-xs ml-1" style="color:#9A9288;">kg</span>
        </span>
      </div>
    </div>
  {% else %}
    <p class="mt-1 text-sm" style="color:#9A9288;">Aucun déplacement enregistré pour {{ year }}.</p>
  {% endif %}
</div>

<!-- Frais réels -->
<div class="card card-sage">
  <p class="card-label">Frais réels — barème {{ year }}</p>
  <p class="text-xs mb-3" style="color:#9A9288;">Déduction fiscale estimée · véhicules motorisés uniquement</p>
  {% if frais_reels %}
    <div class="space-y-3">
      {% for vehicle_id, montant in frais_reels.items() %}
      <div class="flex items-baseline justify-between">
        <span class="text-xs" style="color:#8A8278;">{{ vehicles.get(vehicle_id, {}).get('name', vehicle_id) }}</span>
        <span class="font-data font-bold" style="font-size:1.6rem; color:var(--sage);">
          {{ montant }}<span class="font-normal text-sm ml-1" style="color:#9A9288;">€</span>
        </span>
      </div>
      {% endfor %}
    </div>
  {% else %}
    <p class="text-sm" style="color:#9A9288;">Aucune donnée pour {{ year }}.</p>
  {% endif %}
</div>

<!-- Répartition par type de jour -->
<div class="card card-amber">
  <p class="card-label">Répartition {{ year }}</p>
  {% if day_type_counts %}
    <div class="space-y-2 mt-1">
      {% for day_type, count in day_type_counts.items() %}
      <div class="flex items-baseline justify-between">
        <span class="text-xs" style="color:#8A8278;">{{ day_type | day_type_fr }}</span>
        <span class="font-data font-semibold text-sm" style="color:var(--ink);">
          {{ count }}<span class="font-normal text-xs ml-1" style="color:#9A9288;">j</span>
        </span>
      </div>
      {% endfor %}
    </div>
  {% else %}
    <p class="text-sm" style="color:#9A9288;">Aucune entrée pour {{ year }}.</p>
  {% endif %}
</div>

<!-- Détail mensuel -->
<p class="font-display text-lg font-semibold mt-8 mb-3" style="color:var(--ink);">Détail mensuel</p>

{% for month_num in range(1, 13) %}
{% set m = monthly_data[month_num] %}
<div class="card card-ink mb-4">
  <div class="flex items-baseline justify-between mb-2">
    <p class="card-label">{{ m.month_name }}</p>
    <span class="text-xs" style="color:#9A9288;">{{ m.entry_count }} j</span>
  </div>

  {% if m.entry_count == 0 %}
    <p class="text-sm" style="color:#9A9288;">Aucune entrée</p>
  {% else %}
    {# --- Barre transport --- #}
    {% if m.km_total > 0 %}
      <p class="font-data font-semibold mb-1" style="font-size:1.2rem; color:var(--ink);">
        {{ m.km_total }}<span class="font-normal text-xs ml-1" style="color:#9A9288;">km</span>
      </p>
      <div class="flex rounded overflow-hidden mb-1" style="height:10px; background:#e5e2dc;">
        {% for vehicle_id, km in m.km_by_vehicle.items() %}
          {% set v_info = vehicles.get(vehicle_id, {}) %}
          {% if v_info.get('type') == 'velo' %}
            {% set color = '#4ade80' %}
          {% elif v_info.get('fuel') == 'electric' %}
            {% set color = '#818cf8' %}
          {% else %}
            {% set color = '#d4a574' %}
          {% endif %}
          {% set pct = (km / m.km_total * 100) | round(1) %}
          <div style="width:{{ pct }}%; background-color:{{ color }};"></div>
        {% endfor %}
      </div>
      <div class="flex flex-wrap gap-x-3 mb-3">
        {% for vehicle_id, km in m.km_by_vehicle.items() %}
          {% set v_info = vehicles.get(vehicle_id, {}) %}
          {% if v_info.get('type') == 'velo' %}
            {% set color = '#4ade80' %}
          {% elif v_info.get('fuel') == 'electric' %}
            {% set color = '#818cf8' %}
          {% else %}
            {% set color = '#d4a574' %}
          {% endif %}
          <span class="text-xs" style="color:#8A8278;">
            <span style="display:inline-block; width:8px; height:8px; border-radius:2px; background:{{ color }}; margin-right:3px;"></span>
            {{ vehicles.get(vehicle_id, {}).get('name', vehicle_id) }} ({{ km }} km)
          </span>
        {% endfor %}
      </div>
    {% else %}
      <p class="text-xs mb-3" style="color:#9A9288;">Aucun déplacement</p>
    {% endif %}

    {# --- Stats temporelles --- #}
    <div class="flex gap-6">
      <div>
        <p class="text-xs mb-0.5" style="color:#9A9288;">Médiane / jour</p>
        <p class="font-data font-semibold" style="color:var(--ink);">{{ m.median_daily_str }}</p>
      </div>
      <div>
        <p class="text-xs mb-0.5" style="color:#9A9288;">Médiane / semaine</p>
        <p class="font-data font-semibold" style="color:var(--ink);">{{ m.median_weekly_str }}</p>
      </div>
    </div>
  {% endif %}
</div>
{% endfor %}

{% endblock %}