"use client";

import { motion } from "framer-motion";
import { Train } from "lucide-react";
import { useState, useEffect } from "react";

// Color variants for particles: green, red, white
const COLORS = [
  "bg-[#006A4E]", // Bangladesh Railway green
  "bg-[#F42A41]", // Signal red
  "bg-white", // White steam
];

// Pre-compute random values outside the component (module scope = pure)
const STEAM_PARTICLES = Array.from({ length: 15 }, () => ({
  colorClass: COLORS[Math.floor(Math.random() * COLORS.length)],
  size: 40 + Math.random() * 80,
  startX: Math.random() * 1200,
  targetX: Math.random() * 100,
  offsetX: Math.random() * 150 - 75,
  duration: 12 + Math.random() * 8,
  delay: Math.random() * 10,
}));

const DOT_PARTICLES = Array.from({ length: 25 }, (_, i) => ({
  colorClass: COLORS[i % COLORS.length],
  size: 3 + Math.random() * 8,
  positions: Array.from({ length: 6 }, () => ({
    x: Math.random() * 1200,
    y: Math.random() * 800,
  })),
  duration: 15 + Math.random() * 10,
  delay: Math.random() * 5,
}));

export function TrainVibes() {
  const [dimensions, setDimensions] = useState({ width: 1200, height: 800 });

  useEffect(() => {
    setDimensions({ width: window.innerWidth, height: window.innerHeight });
    const handleResize = () =>
      setDimensions({ width: window.innerWidth, height: window.innerHeight });
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return (
    <div className="fixed inset-0 pointer-events-none z-0 overflow-hidden">
      {/* Railway Track Pattern - Horizontal tracks */}
      <div className="absolute inset-0 opacity-5">
        {[...Array(8)].map((_, i) => (
          <div
            key={`track-h-${i}`}
            className="absolute w-full flex gap-2"
            style={{ top: `${(i + 1) * 12}%` }}
          >
            <div className="w-full h-1 bg-gradient-to-r from-transparent via-[#006A4E] to-transparent" />
            <div className="w-full h-1 bg-gradient-to-r from-transparent via-[#006A4E] to-transparent mt-2" />
          </div>
        ))}
      </div>

      {/* Railway Track Pattern - Vertical sleepers */}
      <div className="absolute inset-0 flex justify-around opacity-5">
        {[...Array(20)].map((_, i) => (
          <motion.div
            key={`sleeper-${i}`}
            initial={{ opacity: 0 }}
            animate={{ opacity: 0.3 }}
            transition={{ duration: 2, delay: i * 0.1 }}
            className="w-1 h-full bg-gradient-to-b from-transparent via-[#006A4E] to-transparent"
          />
        ))}
      </div>

      {/* Steam/Smoke Particles - Multi-colored */}
      {STEAM_PARTICLES.map((p, i) => (
        <motion.div
          key={`steam-${i}`}
          className={`absolute ${p.colorClass} rounded-full blur-2xl`}
          initial={{
            x: p.startX,
            y: dimensions.height + 100,
            scale: 0.3,
            opacity: 0,
          }}
          animate={{
            y: -150,
            scale: [0.3, 1.2, 0.8, 0.3],
            opacity: [0, 0.4, 0.3, 0],
            x: `calc(${p.targetX}vw + ${p.offsetX}px)`,
          }}
          transition={{
            duration: p.duration,
            repeat: Infinity,
            delay: p.delay,
            ease: "easeInOut",
          }}
          style={{
            width: p.size,
            height: p.size,
          }}
        />
      ))}

      {/* Signal Lights - Blinking red and green in corners */}
      {[
        { color: "bg-[#F42A41]", position: "top-8 right-8" },
        { color: "bg-[#006A4E]", position: "top-8 left-8" },
        { color: "bg-[#F42A41]", position: "bottom-8 left-8" },
        { color: "bg-[#006A4E]", position: "bottom-8 right-8" },
      ].map((signal, i) => (
        <motion.div
          key={`signal-${i}`}
          className={`absolute ${signal.position} ${signal.color} rounded-full blur-md`}
          animate={{
            opacity: [0.2, 0.8, 0.2],
            scale: [1, 1.2, 1],
          }}
          transition={{
            duration: 2 + i * 0.5,
            repeat: Infinity,
            ease: "easeInOut",
          }}
          style={{
            width: 20,
            height: 20,
          }}
        />
      ))}

      {/* Moving Train Silhouettes */}
      {[...Array(3)].map((_, i) => (
        <motion.div
          key={`train-${i}`}
          className="absolute opacity-10"
          initial={{
            x: -100,
            y: 100 + i * 200,
          }}
          animate={{
            x: dimensions.width + 100,
          }}
          transition={{
            duration: 20 + i * 5,
            repeat: Infinity,
            delay: i * 7,
            ease: "linear",
          }}
        >
          <Train
            size={60 + i * 20}
            className={i % 2 === 0 ? "text-[#006A4E]" : "text-[#F42A41]"}
          />
        </motion.div>
      ))}

      {/* Floating Colored Particles - Small dots */}
      {DOT_PARTICLES.map((p, i) => (
        <motion.div
          key={`dot-${i}`}
          className={`absolute ${p.colorClass} rounded-full`}
          initial={{
            x: p.positions[0].x,
            y: p.positions[0].y,
            opacity: 0,
          }}
          animate={{
            y: [p.positions[1].y, p.positions[2].y, p.positions[3].y],
            x: [p.positions[1].x, p.positions[2].x, p.positions[3].x],
            opacity: [0, 0.6, 0],
          }}
          transition={{
            duration: p.duration,
            repeat: Infinity,
            delay: p.delay,
            ease: "easeInOut",
          }}
          style={{
            width: p.size,
            height: p.size,
          }}
        />
      ))}
    </div>
  );
}
