---
import Embed from '../../../layouts/Embed.astro';
import VigilanceChip from '../../../components/VigilanceChip.astro';
import { getVigilanceSnapshot, alertsForDepartement, maxColorByDepartement } from '../../../lib/vigilance';
import { getDepartement, isDrom } from '../../../lib/departements';
import { COLORS } from '../../../lib/phenomena';

export const prerender = false;

const { code } = Astro.params;
const dept = code ? getDepartement(code.toUpperCase()) : undefined;
if (!dept) {
  return new Response('not found', { status: 404 });
}

let alerts = [] as Awaited<ReturnType<typeof alertsForDepartement>>;
let maxColor = 1;
let error: string | null = null;
if (!isDrom(dept.code)) {
  try {
    const snap = await getVigilanceSnapshot();
    alerts = alertsForDepartement(snap, dept.code, 'J').sort((a, b) => b.colorId - a.colorId);
    maxColor = maxColorByDepartement(snap, 'J').get(dept.code) ?? 1;
  } catch (e) {
    error = (e as Error).message;
  }
}

const color = COLORS[maxColor as 1 | 2 | 3 | 4];
const siteUrl = `https://info-canicule.nocleus.com/departement/${dept.code}`;
---

<Embed title={`Vigilance ${dept.name} — Info Canicule`}>
  <article class="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
    <header class="flex items-center justify-between gap-3 border-b border-slate-100 pb-2">
      <div>
        <h1 class="text-base font-semibold text-slate-900">{dept.name}</h1>
        <p class="text-xs text-slate-500">Vigilance Météo France · dept {dept.code}</p>
      </div>
      <div
        class="rounded px-2 py-1 text-xs font-semibold"
        style={`background:${color.hex}; color:${maxColor >= 3 ? '#fff' : '#1e293b'}`}
      >
        {color.name.toUpperCase()}
      </div>
    </header>

    {error && (
      <p class="mt-2 text-xs text-red-700">Données indisponibles.</p>
    )}

    {isDrom(dept.code) && (
      <p class="mt-2 text-xs text-amber-800">
        Vigilance Outre-mer non couverte par cette source.
        <a href="https://vigilance.meteofrance.fr/" rel="noopener" class="text-canicule-700">Source officielle ↗</a>
      </p>
    )}

    {!error && !isDrom(dept.code) && alerts.length === 0 && (
      <p class="mt-2 text-xs text-green-700">Aucune vigilance particulière aujourd'hui.</p>
    )}

    {alerts.length > 0 && (
      <ul class="mt-2 space-y-1">
        {alerts.map((a) => (
          <li>
            <VigilanceChip colorId={a.colorId} phenomenonId={a.phenomenonId} />
          </li>
        ))}
      </ul>
    )}

    <footer class="mt-3 border-t border-slate-100 pt-2 text-right text-xs">
      <a href={siteUrl} target="_top" rel="noopener" class="text-canicule-700">
        Détail sur info-canicule.nocleus.com →
      </a>
    </footer>
  </article>
</Embed>