// Discreet 7-day weather strip (Open-Meteo, no key) — Gambsheim / Strasbourg area
const { useState, useEffect } = React;
const LAT = 48.7314, LON = 7.8703; // Gambsheim, Alsace

const IconSun = () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><circle cx="12" cy="12" r="4.2"/><path d="M12 2.5v2.5M12 19v2.5M4.4 4.4l1.8 1.8M17.8 17.8l1.8 1.8M2.5 12H5M19 12h2.5M4.4 19.6l1.8-1.8M17.8 6.2l1.8-1.8"/></svg>;
const IconPartly = () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="9" cy="9" r="3.4"/><path d="M9 2.8v1.6M9 13v1.6M2.8 9h1.6M13 9h.6M4.4 4.4l1.2 1.2M12.4 4.4l-1.2 1.2"/><path d="M11 20h6.5a3.5 3.5 0 000-7 5 5 0 00-9.4-1.6"/></svg>;
const IconCloud = () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6.5 18h11a3.8 3.8 0 000-7.6 5.6 5.6 0 00-10.8-1.7A4.2 4.2 0 006.5 18z"/></svg>;
const IconCloudy = () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5.5 15.5h12.2a3.3 3.3 0 000-6.6 4.9 4.9 0 00-9.4-1.5 3.7 3.7 0 00-2.8 8.1z"/><path d="M4 19h13"/></svg>;
const IconFog = () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><path d="M4 9h11M4 12.5h16M4 16h11"/></svg>;
const IconDrizzle = () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6.5 13h11a3.8 3.8 0 000-7.6 5.6 5.6 0 00-10.8-1.7A4.2 4.2 0 006.5 13z"/><path d="M9 17v2M13 17v2M17 17v2"/></svg>;
const IconRain = () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6.5 12.5h11a3.8 3.8 0 000-7.6 5.6 5.6 0 00-10.8-1.7A4.2 4.2 0 006.5 12.5z"/><path d="M8 16.5l-1.3 3M12.5 16.5l-1.3 3M17 16.5l-1.3 3"/></svg>;
const IconSnow = () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6.5 12h11a3.8 3.8 0 000-7.6 5.6 5.6 0 00-10.8-1.7A4.2 4.2 0 006.5 12z"/><path d="M9 16v5M7 18.5l4-2.5-4-2.5M11 18.5l-4-2.5 4-2.5M14.5 16v5M12.5 18.5l4-2.5-4-2.5M16.5 18.5l-4-2.5 4-2.5" transform="translate(0,-1)"/></svg>;
const IconStorm = () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6.5 11.5h11a3.8 3.8 0 000-7.6 5.6 5.6 0 00-10.8-1.7A4.2 4.2 0 006.5 11.5z"/><path d="M12.5 13l-2.5 4h3l-2 4"/></svg>;

const WMO_ICON = {
  0: IconSun, 1: IconPartly, 2: IconPartly, 3: IconCloudy,
  45: IconFog, 48: IconFog,
  51: IconDrizzle, 53: IconDrizzle, 55: IconDrizzle,
  61: IconRain, 63: IconRain, 65: IconRain,
  71: IconSnow, 73: IconSnow, 75: IconSnow,
  80: IconDrizzle, 81: IconRain, 82: IconStorm,
  95: IconStorm, 96: IconStorm, 99: IconStorm,
};
const iconFor = (code) => WMO_ICON[code] || IconCloud;

function WeatherStrip() {
  const [days, setDays] = useState(null);

  useEffect(() => {
    const cacheKey = 'weather-cache-gambsheim';
    try {
      const cached = JSON.parse(localStorage.getItem(cacheKey) || 'null');
      if (cached && Date.now() - cached.at < 3 * 3600 * 1000) { setDays(cached.days); return; }
    } catch {}
    const url = `https://api.open-meteo.com/v1/forecast?latitude=${LAT}&longitude=${LON}&daily=weather_code,temperature_2m_max,temperature_2m_min&timezone=Europe%2FParis&forecast_days=7`;
    fetch(url).then(r => r.json()).then(j => {
      const d = j.daily;
      const out = d.time.map((date, i) => ({
        date, code: d.weather_code[i],
        tmax: Math.round(d.temperature_2m_max[i]),
        tmin: Math.round(d.temperature_2m_min[i]),
      }));
      setDays(out);
      try { localStorage.setItem(cacheKey, JSON.stringify({ at: Date.now(), days: out })); } catch {}
    }).catch(e => console.warn('[weather] fetch failed', e.message));
  }, []);

  if (!days) return null;

  const dayLabel = (iso, i) => {
    if (i === 0) return "Auj.";
    const d = new Date(iso + 'T00:00:00');
    return d.toLocaleDateString('fr-FR', { weekday: 'short' }).replace('.', '');
  };

  return (
    <div className="weather-strip" title="Gambsheim / Strasbourg">
      {days.map((d, i) => {
        const Icon = iconFor(d.code);
        return (
          <div key={d.date} className="ws-day">
            <span className="ws-lbl">{dayLabel(d.date, i)}</span>
            <span className="ws-icon"><Icon /></span>
            <span className="ws-temp"><span className="ws-max">{d.tmax}°</span><span className="ws-min">{d.tmin}°</span></span>
          </div>
        );
      })}
    </div>
  );
}

window.WeatherStrip = WeatherStrip;