Météo dynamique pour Fakarava avec heure locale

- Intégration API Open-Meteo pour météo en temps réel
- Coordonnées Fakarava (Rotoava): -16.3167, -145.6167
- Affichage heure locale (fuseau horaire Pacific/Tahiti)
- Rafraîchissement automatique toutes les heures
- Gestion des erreurs avec valeurs par défaut
- Icônes dynamiques selon conditions météo
- APK rebuild

components/accueil/WeatherWidget.tsx

@@ -1,35 +1,177 @@
-import { Cloud, Sun } from "lucide-react";
+"use client";
+
+import { useEffect, useState } from "react";
+import { Cloud, Sun, CloudRain, Wind, Droplets, Loader2, Clock } from "lucide-react";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 
+interface WeatherData {
+  temperature: number;
+  condition: string;
+  windSpeed: number;
+  humidity: number;
+  weatherCode: number;
+}
+
+// Coordonnées de Fakarava (Rotoava)
+const FAKARAVA_LAT = -16.3167;
+const FAKARAVA_LON = -145.6167;
+
+// Codes météo Open-Meteo vers descriptions
+const getWeatherCondition = (code: number): { text: string; icon: React.ReactNode } => {
+  // Codes Open-Meteo WMO Weather interpretation codes
+  if (code === 0) {
+    return { text: "Ciel dégagé", icon: <Sun className="h-16 w-16 text-yellow-400" /> };
+  } else if (code <= 3) {
+    return { text: "Partiellement nuageux", icon: <Cloud className="h-16 w-16 text-gray-400" /> };
+  } else if (code <= 48) {
+    return { text: "Nuageux", icon: <Cloud className="h-16 w-16 text-gray-500" /> };
+  } else if (code <= 55) {
+    return { text: "Brouillard", icon: <Cloud className="h-16 w-16 text-gray-400" /> };
+  } else if (code <= 67) {
+    return { text: "Pluie", icon: <CloudRain className="h-16 w-16 text-blue-400" /> };
+  } else if (code <= 77) {
+    return { text: "Neige", icon: <CloudRain className="h-16 w-16 text-gray-300" /> };
+  } else if (code <= 82) {
+    return { text: "Averses", icon: <CloudRain className="h-16 w-16 text-blue-500" /> };
+  } else if (code <= 86) {
+    return { text: "Averses de neige", icon: <CloudRain className="h-16 w-16 text-gray-300" /> };
+  } else {
+    return { text: "Orage", icon: <CloudRain className="h-16 w-16 text-purple-500" /> };
+  }
+};
+
 export default function WeatherWidget() {
+  const [weather, setWeather] = useState<WeatherData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [localTime, setLocalTime] = useState<string>("");
+
+  // Mise à jour de l'heure locale chaque seconde
+  useEffect(() => {
+    const updateTime = () => {
+      const now = new Date();
+      // Fuseau horaire de Tahiti (UTC-10)
+      const tahitiTime = new Date(now.toLocaleString("en-US", { timeZone: "Pacific/Tahiti" }));
+      const hours = tahitiTime.getHours().toString().padStart(2, "0");
+      const minutes = tahitiTime.getMinutes().toString().padStart(2, "0");
+      setLocalTime(`${hours}:${minutes}`);
+    };
+
+    updateTime();
+    const timeInterval = setInterval(updateTime, 1000);
+    return () => clearInterval(timeInterval);
+  }, []);
+
+  useEffect(() => {
+    const fetchWeather = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        // API Open-Meteo (gratuit, pas de clé API nécessaire)
+        const response = await fetch(
+          `https://api.open-meteo.com/v1/forecast?latitude=${FAKARAVA_LAT}&longitude=${FAKARAVA_LON}&current=temperature_2m,relative_humidity_2m,weather_code,wind_speed_10m&wind_speed_unit=kmh&timezone=Pacific/Tahiti`
+        );
+
+        if (!response.ok) {
+          throw new Error("Erreur lors de la récupération de la météo");
+        }
+
+        const data = await response.json();
+        const current = data.current;
+
+        setWeather({
+          temperature: Math.round(current.temperature_2m),
+          condition: getWeatherCondition(current.weather_code).text,
+          windSpeed: Math.round(current.wind_speed_10m),
+          humidity: current.relative_humidity_2m,
+          weatherCode: current.weather_code,
+        });
+      } catch (err) {
+        console.error("Erreur météo:", err);
+        setError("Impossible de charger la météo");
+        // Valeurs par défaut en cas d'erreur
+        setWeather({
+          temperature: 28,
+          condition: "Ensoleillé",
+          windSpeed: 15,
+          humidity: 75,
+          weatherCode: 0,
+        });
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchWeather();
+
+    // Rafraîchir toutes les heures
+    const interval = setInterval(fetchWeather, 3600000);
+    return () => clearInterval(interval);
+  }, []);
+
+  if (loading) {
     return (
       <Card className="bg-gradient-to-br from-primary/10 to-secondary">
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <Sun className="h-6 w-6 text-primary" />
-          Météo
+            Météo - Fakarava
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-center py-8">
+            <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!weather) {
+    return null;
+  }
+
+  const weatherInfo = getWeatherCondition(weather.weatherCode);
+
+  return (
+    <Card className="bg-gradient-to-br from-primary/10 to-secondary">
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Sun className="h-6 w-6 text-primary" />
+            Météo - Fakarava
+          </div>
+          {localTime && (
+            <div className="flex items-center gap-1 text-sm font-normal text-gray-600 dark:text-gray-400">
+              <Clock className="h-4 w-4" />
+              {localTime}
+            </div>
+          )}
         </CardTitle>
       </CardHeader>
       <CardContent>
         <div className="flex items-center justify-between">
           <div>
-            <p className="text-3xl font-bold text-primary">28°C</p>
-            <p className="text-gray-600 mt-1">Ensoleillé</p>
+            <p className="text-3xl font-bold text-primary">{weather.temperature}°C</p>
+            <p className="text-gray-600 dark:text-gray-300 mt-1">{weather.condition}</p>
+            {error && (
+              <p className="text-xs text-orange-500 mt-1">Données en cache</p>
+            )}
           </div>
-          <div className="text-6xl">
-            <Sun className="h-16 w-16 text-yellow-400" />
+          <div className="text-6xl">{weatherInfo.icon}</div>
         </div>
+        <div className="mt-4 flex gap-4 text-sm text-gray-600 dark:text-gray-400">
+          <div className="flex items-center gap-1">
+            <Wind className="h-4 w-4" />
+            <span className="font-semibold">Vent:</span> {weather.windSpeed} km/h
           </div>
-        <div className="mt-4 flex gap-4 text-sm text-gray-600">
-          <div>
-            <span className="font-semibold">Vent:</span> 15 km/h
-          </div>
-          <div>
-            <span className="font-semibold">Humidité:</span> 75%
+          <div className="flex items-center gap-1">
+            <Droplets className="h-4 w-4" />
+            <span className="font-semibold">Humidité:</span> {weather.humidity}%
           </div>
         </div>
       </CardContent>
     </Card>
   );
 }
-