/* global React */
// Weather symbol icons — minimal stroked SVGs in current color.
// Maps Yr `symbolCode` → icon component.

const stroke = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };

const Sun = ({ size = 36 }) => (
  <svg viewBox="0 0 48 48" width={size} height={size}>
    <circle cx="24" cy="24" r="8" {...stroke} />
    {[0, 45, 90, 135, 180, 225, 270, 315].map((a) => {
      const r = (a * Math.PI) / 180;
      const x1 = 24 + Math.cos(r) * 13;
      const y1 = 24 + Math.sin(r) * 13;
      const x2 = 24 + Math.cos(r) * 18;
      const y2 = 24 + Math.sin(r) * 18;
      return <line key={a} x1={x1} y1={y1} x2={x2} y2={y2} {...stroke} />;
    })}
  </svg>
);

const Moon = ({ size = 36 }) => (
  <svg viewBox="0 0 48 48" width={size} height={size}>
    <path d="M30 10 a14 14 0 1 0 8 26 a11 11 0 0 1 -8 -26 z" {...stroke} />
  </svg>
);

const Cloud = ({ size = 36, sun = false, moon = false }) => (
  <svg viewBox="0 0 48 48" width={size} height={size}>
    {sun && <g><circle cx="34" cy="14" r="4.5" {...stroke} />
      {[0, 60, 120, 180, 240, 300].map((a) => {
        const r = (a * Math.PI) / 180;
        return <line key={a} x1={34 + Math.cos(r) * 7.5} y1={14 + Math.sin(r) * 7.5} x2={34 + Math.cos(r) * 10.5} y2={14 + Math.sin(r) * 10.5} {...stroke} />;
      })}
    </g>}
    {moon && <path d="M36 8 a7 7 0 1 0 4 13 a5.5 5.5 0 0 1 -4 -13 z" {...stroke} />}
    <path d="M14 32 a7 7 0 0 1 6 -11 a8 8 0 0 1 15 2 a6 6 0 0 1 1 12 H15 a5 5 0 0 1 -1 -3 z" {...stroke} />
  </svg>
);

const Rain = ({ size = 36, heavy = false, light = false }) => (
  <svg viewBox="0 0 48 48" width={size} height={size}>
    <path d="M14 24 a7 7 0 0 1 6 -11 a8 8 0 0 1 15 2 a6 6 0 0 1 1 12 H15 a5 5 0 0 1 -1 -3 z" {...stroke} />
    {(heavy ? [12, 18, 24, 30, 36] : light ? [18, 30] : [16, 24, 32]).map((x, i) => (
      <line key={i} x1={x} y1={32} x2={x - 2} y2={42} {...stroke} />
    ))}
  </svg>
);

const Snow = ({ size = 36 }) => (
  <svg viewBox="0 0 48 48" width={size} height={size}>
    <path d="M14 24 a7 7 0 0 1 6 -11 a8 8 0 0 1 15 2 a6 6 0 0 1 1 12 H15 a5 5 0 0 1 -1 -3 z" {...stroke} />
    {[16, 24, 32].map((x, i) => (
      <g key={i} transform={`translate(${x} 36)`}>
        <line x1="-2.5" y1="0" x2="2.5" y2="0" {...stroke} />
        <line x1="0" y1="-2.5" x2="0" y2="2.5" {...stroke} />
        <line x1="-1.8" y1="-1.8" x2="1.8" y2="1.8" {...stroke} />
      </g>
    ))}
  </svg>
);

const Fog = ({ size = 36 }) => (
  <svg viewBox="0 0 48 48" width={size} height={size}>
    {[16, 22, 28, 34].map((y, i) => (
      <line key={i} x1={8 + (i % 2) * 3} y1={y} x2={40 - (i % 2) * 3} y2={y} {...stroke} />
    ))}
  </svg>
);

const Thunder = ({ size = 36 }) => (
  <svg viewBox="0 0 48 48" width={size} height={size}>
    <path d="M14 22 a7 7 0 0 1 6 -11 a8 8 0 0 1 15 2 a6 6 0 0 1 1 12 H15 a5 5 0 0 1 -1 -3 z" {...stroke} />
    <path d="M24 28 L20 38 H26 L22 46" {...stroke} />
  </svg>
);

function WeatherIcon({ code, size = 36 }) {
  const c = (code || '').toLowerCase();
  if (!c) return <Cloud size={size} />;
  if (c.includes('thunder')) return <Thunder size={size} />;
  if (c.includes('snow') || c.includes('sleet')) return <Snow size={size} />;
  if (c.includes('heavyrain')) return <Rain size={size} heavy />;
  if (c.includes('lightrain')) return <Rain size={size} light />;
  if (c.includes('rain')) return <Rain size={size} />;
  if (c.includes('fog')) return <Fog size={size} />;
  if (c.includes('clearsky_night')) return <Moon size={size} />;
  if (c.includes('clearsky')) return <Sun size={size} />;
  if (c.includes('fair_night')) return <Cloud size={size} moon />;
  if (c.includes('fair')) return <Cloud size={size} sun />;
  if (c.includes('partlycloudy_night')) return <Cloud size={size} moon />;
  if (c.includes('partlycloudy')) return <Cloud size={size} sun />;
  return <Cloud size={size} />;
}

const ChevLeft = ({ size = 14 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="15 18 9 12 15 6" />
  </svg>
);
const ChevRight = ({ size = 14 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="9 18 15 12 9 6" />
  </svg>
);

window.WeatherIcon = WeatherIcon;
window.ChevLeft = ChevLeft;
window.ChevRight = ChevRight;