'use client';

import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

const BACKDROPS = [
  'https://image.tmdb.org/t/p/w1280/uhUO7vQQKvCTfQWubOt5MAKokbL.jpg', // Dune: Part Two
  'https://image.tmdb.org/t/p/w1280/fm6KqXpk3M2HVveHwCrBSSBaO0V.jpg', // Oppenheimer
  'https://image.tmdb.org/t/p/w1280/by8z9Fe8y7p4jo2YlW2SZDnptyT.jpg', // Deadpool & Wolverine
  'https://image.tmdb.org/t/p/w1280/7RyHsO4yDXtBv1zUU3mTpHeQ0d5.jpg', // Avengers: Endgame
  'https://image.tmdb.org/t/p/w1280/rAiYTfPXvn1Mh42h2qL925t5Y5P.jpg', // Interstellar
  'https://image.tmdb.org/t/p/w1280/8ZTVqvKDQ8emSGUHjsS4yH8sHnL.jpg', // Inception
  'https://image.tmdb.org/t/p/w1280/dq18nVxDKyELT5FxGZgZF3aqWLG.jpg', // The Dark Knight
  'https://image.tmdb.org/t/p/w1280/vL5LRggpGe0M2K3514v8g0zP4xG.jpg', // Avatar (2009)
];

export default function LoginBackgroundCollage() {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentIndex((prev) => (prev + 1) % BACKDROPS.length);
    }, 8000); // Change backdrop image every 8 seconds

    return () => clearInterval(timer);
  }, []);

  return (
    <div className="absolute inset-0 z-0 overflow-hidden select-none pointer-events-none bg-dark">
      {/* Slideshow image with crossfade */}
      <AnimatePresence mode="popLayout">
        <motion.img
          key={currentIndex}
          src={BACKDROPS[currentIndex]}
          alt="background backdrop"
          initial={{ opacity: 0, scale: 1.05 }}
          animate={{ opacity: 0.55, scale: 1 }}
          exit={{ opacity: 0, scale: 0.98 }}
          transition={{ duration: 1.8, ease: 'easeInOut' }}
          className="absolute inset-0 w-full h-full object-cover"
        />
      </AnimatePresence>

      {/* Cinematic Overlays (Blur, dark gradient, radial dark overlay) */}
      <div className="absolute inset-0 bg-gradient-to-b from-black/75 via-black/25 to-black/80 backdrop-blur-[1px] z-10" />
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_30%,rgba(10,10,10,0.70)_100%)] z-10" />
    </div>
  );
}
