info-canicule/src/pages/index.astro

---
import Base from '../layouts/Base.astro';
import FranceMap from '../components/FranceMap.astro';
import DepartementGrid from '../components/DepartementGrid.astro';
import VigilanceLegend from '../components/VigilanceLegend.astro';
import VigilanceChip from '../components/VigilanceChip.astro';
import { getVigilanceSnapshot, maxColorByDepartement, activeAlerts } from '../lib/vigilance';
import { getDepartement } from '../lib/departements';
import type { VigilanceAlert } from '../lib/vigilance';

export const prerender = false;

let snapshot;
let error: string | null = null;
try {
  snapshot = await getVigilanceSnapshot();
} catch (e) {
  error = (e as Error).message;
}

const colorsByDept = snapshot ? maxColorByDepartement(snapshot, 'J') : new Map();
const alertsToday = snapshot ? activeAlerts(snapshot, 2) : [];

// Group all today's alerts (any level) by department, for tooltip + active alerts list.
const alertsByDept = new Map<string, VigilanceAlert[]>();
if (snapshot) {
  for (const a of snapshot.alerts) {
    if (a.echeance !== 'J') continue;
    if (a.colorId < 2) continue;
    const list = alertsByDept.get(a.departement) ?? [];
    list.push(a);
    alertsByDept.set(a.departement, list);
  }
}

// Tri des départements actifs par code (2A/2B inséré après 19).
function deptSortKey(code: string): string {
  if (code === '2A') return '19.1';
  if (code === '2B') return '19.2';
  return code;
}
const activeDeptCodes = [...alertsByDept.keys()].sort((a, b) =>
  deptSortKey(a).localeCompare(deptSortKey(b), 'en', { numeric: true }),
);

const canicule = alertsToday.filter((a) => a.phenomenonId === 6).length;
const orages = alertsToday.filter((a) => a.phenomenonId === 3).length;
const orange = alertsToday.filter((a) => a.colorId >= 3).length;
const productDate = snapshot?.productDatetime
  ? new Date(snapshot.productDatetime).toLocaleString('fr-FR', {
      dateStyle: 'long',
      timeStyle: 'short',
      timeZone: 'Europe/Paris',
    })
  : 'inconnu';
---

<Base>
  <section class="bg-gradient-to-b from-canicule-50 to-white">
    <div class="container-tight py-10">
      <h1 class="text-3xl font-bold text-slate-900 sm:text-4xl">
        Vigilance Météo France en temps réel
      </h1>
      <p class="mt-2 max-w-2xl text-slate-600">
        Carte des alertes Vigilance par département, conseils officiels et numéros d'urgence.
        Bulletin Météo France du <strong>{productDate}</strong> (heure de Paris).
      </p>
    </div>
  </section>

  <section class="container-tight py-8">
    {
      error && (
        <div class="rounded border border-red-200 bg-red-50 p-4 text-red-800">
          <strong>Données indisponibles.</strong> Réessayer dans quelques minutes. Détail technique :
          {error}
        </div>
      )
    }

    {
      !error && (
        <div class="grid gap-4 sm:grid-cols-3">
          <div class="rounded-lg border border-slate-200 bg-white p-4">
            <div class="text-2xl font-bold text-canicule-700">{canicule}</div>
            <div class="text-sm text-slate-600">départements en vigilance canicule</div>
          </div>
          <div class="rounded-lg border border-slate-200 bg-white p-4">
            <div class="text-2xl font-bold text-orange-700">{orange}</div>
            <div class="text-sm text-slate-600">en niveau orange ou rouge (tous phénomènes)</div>
          </div>
          <div class="rounded-lg border border-slate-200 bg-white p-4">
            <div class="text-2xl font-bold text-yellow-700">{orages}</div>
            <div class="text-sm text-slate-600">en vigilance orages</div>
          </div>
        </div>
      )
    }
  </section>

  {
    !error && (
      <>
        <section class="container-tight pb-2">
          <div class="mb-2 flex flex-wrap items-center justify-between gap-3">
            <h2 class="text-xl font-semibold text-slate-900">Niveau par département (aujourd'hui)</h2>
            <VigilanceLegend />
          </div>
          <p class="text-sm text-slate-500">
            Survolez un département pour voir le détail des alertes, cliquez pour la page complète.
          </p>
        </section>
        <div class="mx-auto w-full max-w-[1400px] px-4 pb-4 sm:px-6">
          <FranceMap colorsByDept={colorsByDept} alertsByDept={alertsByDept} />
        </div>
        <section class="container-tight pb-8">
          <details class="rounded border border-slate-200 bg-white p-4">
            <summary class="cursor-pointer font-medium text-slate-700">
              Vue par région (liste)
            </summary>
            <div class="mt-4">
              <DepartementGrid colorsByDept={colorsByDept} />
            </div>
          </details>
          <p class="mt-4 text-center text-xs text-slate-500">
            Source officielle :
            <a href="https://vigilance.meteofrance.fr/" rel="noopener" class="text-canicule-700 font-medium">
              vigilance.meteofrance.fr
            </a>
            — toujours s'y référer en cas d'urgence.
          </p>
          <p class="mt-2 text-center text-xs text-slate-500">
            <strong>Outre-mer non couvert</strong> par cette source open data :
            <a href="/departement/971" class="text-canicule-700">Guadeloupe</a> ·
            <a href="/departement/972" class="text-canicule-700">Martinique</a> ·
            <a href="/departement/973" class="text-canicule-700">Guyane</a> ·
            <a href="/departement/974" class="text-canicule-700">La Réunion</a> ·
            <a href="/departement/976" class="text-canicule-700">Mayotte</a> →
            <a href="https://vigilance.meteofrance.fr/" rel="noopener" class="text-canicule-700">vigilance.meteofrance.fr</a>
          </p>
        </section>
      </>
    )
  }

  {
    !error && activeDeptCodes.length > 0 && (
      <section class="border-t border-slate-200 bg-white">
        <div class="container-tight py-8">
          <h2 class="mb-4 text-xl font-semibold text-slate-900">
            Départements en alerte ({activeDeptCodes.length})
          </h2>
          <p class="mb-4 text-sm text-slate-500">
            Triés par numéro de département. Un département peut cumuler plusieurs phénomènes (ex: canicule + orages).
          </p>
          <ul class="space-y-2">
            {activeDeptCodes.map((code) => {
              const dept = getDepartement(code);
              if (!dept) return null;
              const alerts = (alertsByDept.get(code) ?? []).slice().sort((a, b) => b.colorId - a.colorId);
              return (
                <li class="rounded border border-slate-200 px-3 py-2">
                  <div class="flex flex-wrap items-center justify-between gap-3">
                    <a href={`/departement/${code}`} class="font-medium no-underline">
                      <span class="font-mono text-slate-500">{code}</span> · {dept.name}
                    </a>
                    <div class="flex flex-wrap gap-1.5">
                      {alerts.map((a) => (
                        <VigilanceChip colorId={a.colorId} phenomenonId={a.phenomenonId} />
                      ))}
                    </div>
                  </div>
                </li>
              );
            })}
          </ul>
        </div>
      </section>
    )
  }
</Base>