/* WeatherMate — animated weather icon set */

function WeatherIcon({ condition, isDay = true, size = 120, animate = true, style }) {
  const cls = animate ? "wx-anim" : "";
  const wrap = (children) => (
    <svg viewBox="0 0 120 120" width={size} height={size} fill="none"
         style={{ overflow: "visible", display: "block", ...style }} className={cls}>
      {children}
    </svg>
  );

  // palette
  const sunC = "#FFD45E", sunRay = "#FFC53D";
  const moonC = "#E9DEFF";
  const cloudHi = "#FFFFFF", cloudLo = "#E4E9F2";
  const cloudDk = "#C9D2E0";

  function Sun({ cx = 60, cy = 56, r = 24, small }) {
    const rays = [];
    for (let i = 0; i < 12; i++) {
      const a = (i / 12) * Math.PI * 2;
      const r1 = r + 8, r2 = r + 16;
      rays.push(
        <line key={i}
          x1={cx + Math.cos(a) * r1} y1={cy + Math.sin(a) * r1}
          x2={cx + Math.cos(a) * r2} y2={cy + Math.sin(a) * r2}
          stroke={sunRay} strokeWidth={small ? 3 : 4} strokeLinecap="round" />
      );
    }
    return (
      <g>
        <g className={animate ? "wx-spin" : ""} style={{ transformOrigin: `${cx}px ${cy}px` }}>{rays}</g>
        <circle cx={cx} cy={cy} r={r} fill={sunC} />
        <circle cx={cx} cy={cy} r={r} fill="url(#sunGlow)" />
      </g>
    );
  }

  function Moon({ cx = 60, cy = 54, r = 26 }) {
    return (
      <g>
        <circle cx={cx} cy={cy} r={r} fill={moonC} />
        <circle cx={cx + r * 0.55} cy={cy - r * 0.35} r={r * 0.92} fill="url(#moonCut)" />
        <circle cx={cx - 8} cy={cy + 8} r={3} fill="#D2C4F0" opacity="0.7" />
        <circle cx={cx - 14} cy={cy - 4} r={2} fill="#D2C4F0" opacity="0.5" />
        <circle cx={cx - 2} cy={cy + 16} r={2.2} fill="#D2C4F0" opacity="0.5" />
      </g>
    );
  }

  function Cloud({ x = 0, y = 0, scale = 1, hi = cloudHi, lo = cloudLo }) {
    return (
      <g transform={`translate(${x},${y}) scale(${scale})`}>
        <ellipse cx="44" cy="74" rx="34" ry="22" fill={lo} />
        <ellipse cx="74" cy="70" rx="26" ry="20" fill={lo} />
        <circle cx="48" cy="58" r="22" fill={hi} />
        <circle cx="74" cy="62" r="18" fill={hi} />
        <ellipse cx="58" cy="72" rx="34" ry="18" fill={hi} />
      </g>
    );
  }

  function Drops({ n = 3, color = "#7FB2E8" }) {
    const xs = [42, 60, 78];
    return (
      <g>
        {Array.from({ length: n }).map((_, i) => (
          <line key={i} x1={xs[i]} y1="92" x2={xs[i] - 4} y2="104"
            stroke={color} strokeWidth="4" strokeLinecap="round"
            className={animate ? "wx-drop" : ""} style={{ animationDelay: `${i * 0.25}s` }} />
        ))}
      </g>
    );
  }

  function Flakes() {
    const xs = [42, 60, 78];
    return (
      <g>
        {xs.map((x, i) => (
          <circle key={i} cx={x} cy="96" r="4" fill="#FFFFFF"
            className={animate ? "wx-flake" : ""} style={{ animationDelay: `${i * 0.4}s` }} />
        ))}
      </g>
    );
  }

  function Bolt() {
    return (
      <path d="M62 78 L50 100 L60 100 L52 118 L74 94 L63 94 L70 78 Z"
        fill="#FFD45E" stroke="#FFB020" strokeWidth="1.5" strokeLinejoin="round"
        className={animate ? "wx-flash" : ""} />
    );
  }

  const defs = (
    <defs>
      <radialGradient id="sunGlow" cx="0.5" cy="0.4" r="0.6">
        <stop offset="0%" stopColor="#FFF3C4" stopOpacity="0.9" />
        <stop offset="60%" stopColor="#FFD45E" stopOpacity="0" />
      </radialGradient>
      <radialGradient id="moonCut" cx="0.5" cy="0.5" r="0.5">
        <stop offset="100%" stopColor="#000" stopOpacity="0" />
      </radialGradient>
      <mask id="moonMask">
        <rect width="120" height="120" fill="#fff" />
      </mask>
    </defs>
  );

  switch (condition) {
    case "clear":
      return wrap(<>{defs}{isDay ? <Sun /> : <Moon />}</>);
    case "partly":
      return wrap(<>{defs}
        <g transform="translate(-6,-10) scale(0.7)">{isDay ? <Sun cx={64} cy={48} r={20} small /> : <Moon cx={64} cy={46} r={20} />}</g>
        <g className={animate ? "wx-float" : ""}><Cloud x={6} y={6} scale={0.92} /></g>
      </>);
    case "cloudy":
      return wrap(<>{defs}
        <g className={animate ? "wx-float-slow" : ""} style={{ opacity: 0.85 }}><Cloud x={-8} y={-6} scale={0.7} hi={cloudDk} lo="#B7C1D2" /></g>
        <g className={animate ? "wx-float" : ""}><Cloud x={8} y={4} /></g>
      </>);
    case "fog":
      return wrap(<>{defs}
        <g style={{ opacity: 0.9 }}><Cloud x={6} y={-6} scale={0.92} hi="#E9EDF3" lo="#CDD5E0" /></g>
        {[0, 1, 2, 3].map(i => (
          <line key={i} x1={20 + (i % 2) * 6} y1={92 + i * 8} x2={100 - (i % 2) * 6} y2={92 + i * 8}
            stroke="#EAEFF6" strokeWidth="5" strokeLinecap="round" opacity={0.8 - i * 0.12}
            className={animate ? "wx-fog" : ""} style={{ animationDelay: `${i * 0.3}s` }} />
        ))}
      </>);
    case "drizzle":
      return wrap(<>{defs}<g className={animate ? "wx-float" : ""}><Cloud x={6} y={0} /></g><Drops n={3} color="#9CC4ED" /></>);
    case "rain":
      return wrap(<>{defs}<g className={animate ? "wx-float" : ""}><Cloud x={6} y={0} hi={cloudHi} lo="#D4DCE8" /></g><Drops n={3} /></>);
    case "snow":
      return wrap(<>{defs}<g className={animate ? "wx-float" : ""}><Cloud x={6} y={0} hi={cloudHi} lo="#DCE4F0" /></g><Flakes /></>);
    case "thunder":
      return wrap(<>{defs}<g className={animate ? "wx-float" : ""}><Cloud x={6} y={-4} hi="#E9EDF5" lo="#B9C5D6" /></g><Bolt /></>);
    default:
      return wrap(<>{defs}<Cloud x={6} y={0} /></>);
  }
}

window.WeatherIcon = WeatherIcon;