"use client";

import { motion, useReducedMotion } from "framer-motion";

const rainDrops = Array.from({ length: 32 }, (_, index) => ({
  left: `${(index * 29 + 7) % 101}%`,
  delay: (index % 16) * 0.08,
  duration: 0.82 + (index % 5) * 0.1,
  lengthClass: index % 3 === 0 ? "h-16" : index % 3 === 1 ? "h-12" : "h-9",
  opacity: index % 3 === 0 ? 0.58 : index % 3 === 1 ? 0.48 : 0.36,
}));

const mistDrops = Array.from({ length: 18 }, (_, index) => ({
  left: `${(index * 37 + 19) % 101}%`,
  delay: (index % 9) * 0.16,
  duration: 1.35 + (index % 4) * 0.12,
}));

const lightningBolts = [
  {
    className: "left-[18%] top-[4%] h-44 w-24",
    path: "M62 0 L42 39 L56 36 L35 88 L48 84 L28 142",
    delay: 0,
    opacity: 0.78,
  },
  {
    className: "left-[42%] top-[-4%] h-52 w-28",
    path: "M38 0 L61 47 L45 43 L72 101 L57 96 L82 164",
    delay: 0.34,
    opacity: 0.86,
  },
  {
    className: "right-[12%] top-[22%] h-48 w-24",
    path: "M70 0 L48 52 L63 49 L36 108 L52 103 L24 170",
    delay: 0.72,
    opacity: 0.68,
  },
  {
    className: "right-[34%] top-[44%] h-32 w-20",
    path: "M28 0 L44 33 L33 31 L52 75 L41 72 L60 116",
    delay: 1.08,
    opacity: 0.5,
  },
];

export function WeatherEffects({
  precipitation10m,
  thunderstorm = false,
}: {
  precipitation10m?: number | null;
  thunderstorm?: boolean;
}) {
  const reduceMotion = useReducedMotion();
  const isRaining = (precipitation10m ?? 0) > 0;

  return (
    <div aria-hidden="true" className="pointer-events-none absolute inset-0 z-[1] overflow-hidden">
      {isRaining && (
        <>
          {rainDrops.map((drop, index) => (
            <motion.span
              key={`rain-${index}`}
              initial={{ y: "-18vh", opacity: 0 }}
              animate={
                reduceMotion
                  ? { y: `${(index % 8) * 14}vh`, opacity: 0.28 }
                  : { y: ["-18vh", "118vh"], opacity: [0, drop.opacity, 0] }
              }
              transition={{ duration: drop.duration, delay: drop.delay, repeat: Infinity, ease: "linear" }}
              className={`absolute -top-12 w-0.5 rotate-[10deg] rounded-full bg-foreground/70 shadow-[0_0_8px_hsl(var(--foreground)/0.18)] ${drop.lengthClass}`}
              style={{ left: drop.left }}
            />
          ))}
          {mistDrops.map((drop, index) => (
            <motion.span
              key={`mist-${index}`}
              initial={{ y: "-10vh", opacity: 0 }}
              animate={
                reduceMotion
                  ? { y: `${(index % 6) * 18}vh`, opacity: 0.16 }
                  : { y: ["-10vh", "112vh"], opacity: [0, 0.26, 0] }
              }
              transition={{ duration: drop.duration, delay: drop.delay, repeat: Infinity, ease: "linear" }}
              className="absolute -top-8 h-7 w-px rotate-[10deg] rounded-full bg-accent/55"
              style={{ left: drop.left }}
            />
          ))}
        </>
      )}
      {thunderstorm && (
        <>
          {lightningBolts.map((bolt, index) => (
            <motion.svg
              key={`lightning-${index}`}
              viewBox="0 0 96 176"
              preserveAspectRatio="xMidYMid meet"
              animate={
                reduceMotion
                  ? { opacity: bolt.opacity * 0.22 }
                  : { opacity: [0, 0, bolt.opacity, bolt.opacity * 0.08, 0], scaleY: [0.98, 0.98, 1.02, 1, 0.99] }
              }
              transition={{ duration: 3.6, repeat: Infinity, repeatDelay: 2.4, delay: bolt.delay }}
              className={`absolute text-foreground dark:text-white ${bolt.className}`}
            >
              <path
                d={bolt.path}
                fill="none"
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="3"
                vectorEffect="non-scaling-stroke"
                opacity="0.06"
              />
              <path
                d={bolt.path}
                fill="none"
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="1.7"
                vectorEffect="non-scaling-stroke"
                opacity="0.22"
              />
              <path
                d={bolt.path}
                fill="none"
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="0.95"
                vectorEffect="non-scaling-stroke"
                opacity="0.86"
              />
            </motion.svg>
          ))}
        </>
      )}
    </div>
  );
}