// wx-icons.jsx — animated weather icons with optional color accents.
// Pass `color` prop to render the colored-pop variant (for the dashboard).
// Without it, icons are monochrome ink.

const INK = 'oklch(0.22 0.015 60)';
const INK2 = 'oklch(0.42 0.012 65)';

// Accent palette — all oklch, same lightness/chroma family for harmony
const C = {
  sun: 'oklch(0.72 0.16 75)',       // warm amber
  sunStroke: 'oklch(0.58 0.14 60)', // deeper amber for outlines
  cloud: 'oklch(0.85 0.01 250)',    // soft blue-grey fill
  cloudStroke: 'oklch(0.48 0.04 250)', // cloud outline
  rain: 'oklch(0.58 0.13 230)',     // rain blue
  snow: 'oklch(0.82 0.04 230)',     // snow pale blue
  moon: 'oklch(0.65 0.06 85)',      // warm moon
  fog: 'oklch(0.62 0.02 240)',      // fog grey-blue
};

function WxSun({ size = 44, color }) {
  const stroke = color ? C.sunStroke : INK;
  const fill = color ? C.sun : 'none';
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" style={{ display: 'block' }}>
      <g className="wx-sun-rays" style={{ transformOrigin: '20px 20px' }}>
        {[0,45,90,135,180,225,270,315].map(a => {
          const r1 = 11, r2 = 15;
          const x1 = 20 + Math.cos(a*Math.PI/180)*r1, y1 = 20 + Math.sin(a*Math.PI/180)*r1;
          const x2 = 20 + Math.cos(a*Math.PI/180)*r2, y2 = 20 + Math.sin(a*Math.PI/180)*r2;
          return <line key={a} x1={x1} y1={y1} x2={x2} y2={y2} stroke={stroke} strokeWidth="1.4" strokeLinecap="round"/>;
        })}
      </g>
      <circle cx="20" cy="20" r="7.5" fill={fill} stroke={stroke} strokeWidth="1.5"/>
    </svg>
  );
}
function WxClear(p) { return <WxSun {...p}/>; }

function WxPartlyCloudy({ size = 44, color }) {
  const sunStroke = color ? C.sunStroke : INK2;
  const sunFill = color ? C.sun : 'none';
  const cloudFill = color ? C.cloud : 'var(--paper)';
  const cloudStroke = color ? C.cloudStroke : INK;
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" style={{ display: 'block' }}>
      <g className="wx-sun-rays" style={{ transformOrigin: '14px 14px' }}>
        {[0,45,90,135,180,225,270,315].map(a => {
          const r1 = 8, r2 = 11;
          const x1 = 14 + Math.cos(a*Math.PI/180)*r1, y1 = 14 + Math.sin(a*Math.PI/180)*r1;
          const x2 = 14 + Math.cos(a*Math.PI/180)*r2, y2 = 14 + Math.sin(a*Math.PI/180)*r2;
          return <line key={a} x1={x1} y1={y1} x2={x2} y2={y2} stroke={sunStroke} strokeWidth="1.2" strokeLinecap="round" opacity="0.7"/>;
        })}
      </g>
      <circle cx="14" cy="14" r="5" fill={sunFill} stroke={sunStroke} strokeWidth="1.3"/>
      <g className="wx-cloud" style={{ transformOrigin: '25px 25px' }}>
        <path d="M 14 28 Q 14 22 19 22 Q 21 18 26 19 Q 32 19 32 25 Q 36 25 36 29 Q 36 32 32 32 L 16 32 Q 12 32 14 28 Z"
          fill={cloudFill} stroke={cloudStroke} strokeWidth="1.5" strokeLinejoin="round"/>
      </g>
    </svg>
  );
}

function WxCloudy({ size = 44, color }) {
  const fill = color ? C.cloud : 'none';
  const stroke = color ? C.cloudStroke : INK;
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" style={{ display: 'block' }}>
      <g className="wx-cloud" style={{ transformOrigin: '20px 20px' }}>
        <path d="M 8 26 Q 8 18 15 18 Q 17 12 24 13 Q 32 13 33 21 Q 37 21 37 26 Q 37 30 32 30 L 11 30 Q 6 30 8 26 Z"
          fill={fill} stroke={stroke} strokeWidth="1.5" strokeLinejoin="round"/>
      </g>
    </svg>
  );
}

function WxRain({ size = 44, color }) {
  const cloudFill = color ? C.cloud : 'var(--paper)';
  const cloudStroke = color ? C.cloudStroke : INK;
  const drop = color ? C.rain : INK2;
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" style={{ display: 'block' }}>
      <g className="wx-cloud" style={{ transformOrigin: '20px 16px' }}>
        <path d="M 8 22 Q 8 14 15 14 Q 17 8 24 9 Q 32 9 33 17 Q 37 17 37 22 Q 37 26 32 26 L 11 26 Q 6 26 8 22 Z"
          fill={cloudFill} stroke={cloudStroke} strokeWidth="1.5" strokeLinejoin="round"/>
      </g>
      {[[14, 0], [20, 0.3], [26, 0.6], [32, 0.15]].map(([x, delay]) => (
        <line key={x} x1={x} y1="28" x2={x-1} y2="34"
          className="wx-rain-drop"
          stroke={drop} strokeWidth="1.5" strokeLinecap="round"
          style={{ animationDelay: `${delay}s` }}/>
      ))}
    </svg>
  );
}

function WxSnow({ size = 44, color }) {
  const cloudFill = color ? C.cloud : 'var(--paper)';
  const cloudStroke = color ? C.cloudStroke : INK;
  const flake = color ? C.rain : INK2;
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" style={{ display: 'block' }}>
      <g className="wx-cloud" style={{ transformOrigin: '20px 16px' }}>
        <path d="M 8 22 Q 8 14 15 14 Q 17 8 24 9 Q 32 9 33 17 Q 37 17 37 22 Q 37 26 32 26 L 11 26 Q 6 26 8 22 Z"
          fill={cloudFill} stroke={cloudStroke} strokeWidth="1.5" strokeLinejoin="round"/>
      </g>
      {[[14, 0], [22, 0.9], [30, 0.4]].map(([x, delay]) => (
        <g key={x} className="wx-snow-flake" style={{ animationDelay: `${delay}s`, transformOrigin: `${x}px 30px` }}>
          <circle cx={x} cy="31" r="1.8" fill={flake}/>
        </g>
      ))}
    </svg>
  );
}

function WxFog({ size = 44, color }) {
  const stroke = color ? C.fog : INK;
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" style={{ display: 'block' }}>
      {[12, 18, 24, 30].map((y, i) => (
        <line key={y} x1="6" y1={y} x2="34" y2={y}
          stroke={stroke} strokeWidth="1.4" strokeLinecap="round"
          style={{ opacity: 0.5 + i * 0.12, animation: `dd-cloud-drift ${5+i}s ease-in-out infinite` }}/>
      ))}
    </svg>
  );
}

function WxNight({ size = 44, color }) {
  const stroke = color ? C.moon : INK;
  const fill = color ? 'oklch(0.92 0.04 85)' : 'none';
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" style={{ display: 'block' }}>
      <path d="M 28 10 A 12 12 0 1 0 30 30 A 10 10 0 0 1 28 10 Z"
        fill={fill} stroke={stroke} strokeWidth="1.5" strokeLinejoin="round"/>
    </svg>
  );
}

const WX_CODE_MAP = {
  0:  { Icon: WxClear, label: 'Clear' },
  1:  { Icon: WxClear, label: 'Mostly clear' },
  2:  { Icon: WxPartlyCloudy, label: 'Partly cloudy' },
  3:  { Icon: WxCloudy, label: 'Overcast' },
  45: { Icon: WxFog, label: 'Fog' },
  48: { Icon: WxFog, label: 'Fog' },
  51: { Icon: WxRain, label: 'Drizzle' },
  53: { Icon: WxRain, label: 'Drizzle' },
  55: { Icon: WxRain, label: 'Drizzle' },
  61: { Icon: WxRain, label: 'Light rain' },
  63: { Icon: WxRain, label: 'Rain' },
  65: { Icon: WxRain, label: 'Heavy rain' },
  71: { Icon: WxSnow, label: 'Light snow' },
  73: { Icon: WxSnow, label: 'Snow' },
  75: { Icon: WxSnow, label: 'Heavy snow' },
  77: { Icon: WxSnow, label: 'Snow grains' },
  80: { Icon: WxRain, label: 'Rain showers' },
  81: { Icon: WxRain, label: 'Rain showers' },
  82: { Icon: WxRain, label: 'Heavy showers' },
  85: { Icon: WxSnow, label: 'Snow showers' },
  86: { Icon: WxSnow, label: 'Snow showers' },
  95: { Icon: WxRain, label: 'Thunderstorm' },
  96: { Icon: WxRain, label: 'Thunderstorm' },
  99: { Icon: WxRain, label: 'Thunderstorm' },
};

function wxFor(code, isNight) {
  const entry = WX_CODE_MAP[code] || WX_CODE_MAP[0];
  if (isNight && (code === 0 || code === 1)) return { Icon: WxNight, label: 'Clear' };
  return entry;
}

Object.assign(window, { WxSun, WxClear, WxPartlyCloudy, WxCloudy, WxRain, WxSnow, WxFog, WxNight, wxFor, WX_CODE_MAP });