/* WeatherMate — dynamic animated background */

function WeatherBackground({ condition, isDay, animate, theme, intensity = 1 }) {
  const [g1, g2, g3] = theme.bg;

  // stable random particles
  const rain = React.useMemo(() => Array.from({ length: 70 }).map(() => ({
    left: Math.random() * 100,
    delay: Math.random() * 1.2,
    dur: 0.5 + Math.random() * 0.5,
    len: 14 + Math.random() * 22,
    op: 0.25 + Math.random() * 0.45,
  })), []);
  const snow = React.useMemo(() => Array.from({ length: 60 }).map(() => ({
    left: Math.random() * 100,
    delay: Math.random() * 6,
    dur: 5 + Math.random() * 6,
    size: 3 + Math.random() * 5,
    drift: (Math.random() * 2 - 1) * 40,
    op: 0.4 + Math.random() * 0.5,
  })), []);
  const stars = React.useMemo(() => Array.from({ length: 50 }).map(() => ({
    left: Math.random() * 100,
    top: Math.random() * 55,
    size: Math.random() < 0.8 ? 1.5 : 2.5,
    delay: Math.random() * 3,
    op: 0.4 + Math.random() * 0.6,
  })), []);

  const isWet = condition === "rain" || condition === "drizzle" || condition === "thunder";
  const showClouds = ["partly", "cloudy", "rain", "drizzle", "thunder", "snow"].includes(condition);
  const showStars = !isDay && (condition === "clear" || condition === "partly");

  return (
    <div className="wx-bg" style={{ background: `linear-gradient(165deg, ${g1} 0%, ${g2} 52%, ${g3} 100%)` }}>
      {/* celestial glow */}
      <div className="wx-glow" style={{
        background: `radial-gradient(circle at 78% 16%, ${theme.glow}66 0%, transparent 42%)`,
      }} />

      {/* stars */}
      {showStars && stars.map((s, i) => (
        <span key={i} className={animate ? "wx-star wx-twinkle" : "wx-star"} style={{
          left: s.left + "%", top: s.top + "%", width: s.size, height: s.size,
          opacity: s.op, animationDelay: s.delay + "s",
        }} />
      ))}

      {/* sun rays (clear day) */}
      {isDay && condition === "clear" && (
        <div className={animate ? "wx-rays wx-spin-slow" : "wx-rays"} style={{
          background: `conic-gradient(from 0deg at 78% 16%, transparent 0deg, ${theme.glow}22 18deg, transparent 36deg, ${theme.glow}1f 54deg, transparent 72deg, ${theme.glow}22 90deg, transparent 108deg)`,
        }} />
      )}

      {/* drifting clouds */}
      {showClouds && (
        <div className="wx-cloud-layer">
          {[
            { top: "8%", scale: 1.3, dur: 60, delay: 0, op: isDay ? 0.5 : 0.32 },
            { top: "20%", scale: 0.9, dur: 78, delay: -20, op: isDay ? 0.4 : 0.24 },
            { top: "4%", scale: 1.7, dur: 95, delay: -50, op: isDay ? 0.32 : 0.2 },
          ].map((c, i) => (
            <div key={i} className={animate ? "wx-drift" : ""} style={{
              top: c.top, transform: `scale(${c.scale})`, opacity: c.op,
              animationDuration: c.dur + "s", animationDelay: c.delay + "s",
            }}>
              <div className="wx-softcloud" />
            </div>
          ))}
        </div>
      )}

      {/* rain */}
      {isWet && animate && (
        <div className="wx-precip">
          {rain.slice(0, Math.round(70 * intensity)).map((r, i) => (
            <span key={i} className="wx-rain" style={{
              left: r.left + "%", height: r.len, opacity: r.op,
              animationDuration: r.dur + "s", animationDelay: r.delay + "s",
            }} />
          ))}
        </div>
      )}

      {/* snow */}
      {condition === "snow" && animate && (
        <div className="wx-precip">
          {snow.map((s, i) => (
            <span key={i} className="wx-snow" style={{
              left: s.left + "%", width: s.size, height: s.size, opacity: s.op,
              animationDuration: s.dur + "s", animationDelay: s.delay + "s",
              "--drift": s.drift + "px",
            }} />
          ))}
        </div>
      )}

      {/* fog banks */}
      {condition === "fog" && (
        <div className="wx-fogwrap">
          {[0, 1, 2].map(i => (
            <div key={i} className={animate ? "wx-fogband wx-fogdrift" : "wx-fogband"} style={{
              top: `${30 + i * 18}%`, animationDuration: `${22 + i * 8}s`,
              animationDirection: i % 2 ? "reverse" : "normal", opacity: 0.5 - i * 0.08,
            }} />
          ))}
        </div>
      )}

      {/* lightning */}
      {condition === "thunder" && animate && <div className="wx-lightning" />}

      {/* vignette for depth */}
      <div className="wx-vignette" />
    </div>
  );
}

window.WeatherBackground = WeatherBackground;