"use client"

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

export function RailwayTrack() {
  const containerRef = useRef(null);
  const [trackHeight, setTrackHeight] = useState(2000);

  useEffect(() => {
    // Calculate the actual height of the homepage
    const calculateHeight = () => {
      // Get the main content container (body or main element)
      const mainContent = document.body;
      if (mainContent) {
        const height = mainContent.scrollHeight;
        setTrackHeight(height);
      }
    };

    // Calculate on mount
    calculateHeight();

    // Recalculate on window resize
    window.addEventListener('resize', calculateHeight);
    
    // Also recalculate after a short delay to ensure all content is loaded
    const timer = setTimeout(calculateHeight, 1000);

    return () => {
      window.removeEventListener('resize', calculateHeight);
      clearTimeout(timer);
    };
  }, []);

  // Generate railway sleepers (cross-ties) along the path
  // Matching train size - sleepers every 30px for better visual density
  const sleeperCount = Math.floor(trackHeight / 30);
  const sleepers = Array.from({ length: sleeperCount }, (_, i) => i);

  return (
    <div ref={containerRef} className="fixed top-0 left-[68px] pointer-events-none z-[5] w-[24px] h-full overflow-hidden">
      {/* Railway sleepers (cross-ties) - Dark orange */}
      {sleepers.map((i) => {
        const yPosition = i * 30;
        return (
          <motion.div
            key={`sleeper-${i}`}
            className="absolute w-full h-[3px] bg-amber-600"
            initial={{ opacity: 0 }}
            animate={{ opacity: 0.3 }}
            transition={{ delay: i * 0.005, duration: 0.3 }}
            style={{ top: `${yPosition}px` }}
          />
        );
      })}

      {/* Main railway tracks (dual rails) - Black/Zinc-950 */}
      <motion.div
        className="absolute left-0 top-0 w-[3px] bg-zinc-950"
        initial={{ height: 0, opacity: 0 }}
        animate={{ height: '100%', opacity: 0.6 }}
        transition={{ duration: 2, ease: "easeInOut" }}
      />
      <motion.div
        className="absolute right-0 top-0 w-[3px] bg-zinc-950"
        initial={{ height: 0, opacity: 0 }}
        animate={{ height: '100%', opacity: 0.6 }}
        transition={{ duration: 2, ease: "easeInOut" }}
      />

      {/* Subtle metallic shine on tracks */}
      <motion.div
        className="absolute left-0 top-0 w-[1px] bg-zinc-600"
        initial={{ height: 0 }}
        animate={{ height: '100%', opacity: 0.4 }}
        transition={{ duration: 2, ease: "easeInOut" }}
      />
      <motion.div
        className="absolute right-0 top-0 w-[1px] bg-zinc-600"
        initial={{ height: 0 }}
        animate={{ height: '100%', opacity: 0.4 }}
        transition={{ duration: 2, ease: "easeInOut" }}
      />
    </div>
  );
}
