'use client';

import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import Image from 'next/image';
import Link from 'next/link';
import { ChevronRight, ChevronLeft, Zap } from 'lucide-react';
import styles from './HomeHeroSlider.module.css';

const slides = [
  {
    title: 'KPRO V4.0',
    subtitle: 'UNLEASHED PERFORMANCE',
    desc: 'The ultimate tuning interface for Honda K-Series engines. Surgical precision meets raw performance.',
    img: '/ecu_kpro.png',
    link: '/products/kpro'
  },
  {
    title: 'CAN FLASH',
    subtitle: 'HIGH-SPEED TUNING',
    desc: 'The definitive OBDII tuning interface for modern platforms. Advanced encryption and extreme flashing speed.',
    img: '/engine_bay.png',
    link: '/products/canflash'
  },
  {
    title: 'S300 CORE',
    subtitle: 'LEGACY REDEFINED',
    desc: 'Professional grade engine management for OBD1 Honda ECUs. Real-time data logging and track-ready metrics.',
    img: '/s300_board.png',
    link: '/products/s300'
  }
];

export default function HomeHeroSlider() {
  const [current, setCurrent] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrent((prev) => (prev + 1) % slides.length);
    }, 6000);
    return () => clearInterval(timer);
  }, []);

  const next = () => setCurrent((prev) => (prev + 1) % slides.length);
  const prev = () => setCurrent((prev) => (prev - 1 + slides.length) % slides.length);

  return (
    <div className={styles.wrapper}>
      <AnimatePresence mode="wait">
        <motion.div 
            key={current}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 1.2 }}
            className={styles.slide}
        >
          <div className={styles.bgWrapper}>
            <div className={styles.maskContainer}>
               <Image src={slides[current].img} alt={slides[current].title} fill className={styles.bgImg} priority />
            </div>
            <div className={styles.gridOverlay}></div>
            <motion.div 
               className={styles.scanLine}
               animate={{ top: ['-10%', '110%'] }}
               transition={{ duration: 10, repeat: Infinity, ease: 'linear' }}
            />
          </div>
          <div className={styles.overlay}></div>
          
          <div className={styles.container}>
            <div className={styles.hudBrackets}>
               <div className={`${styles.corner} ${styles.topL}`}></div>
               <div className={`${styles.corner} ${styles.topR}`}></div>
               <div className={`${styles.corner} ${styles.botL}`}></div>
               <div className={`${styles.corner} ${styles.botR}`}></div>
               
               <motion.div 
                   initial={{ opacity: 0, scale: 0.9, x: -30 }}
                   animate={{ opacity: 1, scale: 1, x: 0 }}
                   transition={{ duration: 1, delay: 0.2 }}
                   className={styles.content}
               >
                 <div className={styles.badgeLine}>
                    <span className={styles.subtitle}>{slides[current].subtitle}</span>
                    <div className={styles.statusIndicator}>
                       <div className={styles.pulseDot}></div>
                       <span>CALIBRATED // 100%</span>
                    </div>
                 </div>
                 
                 <h1 className={styles.title}>
                    {slides[current].title.split(' ').map((word, i) => (
                       <span key={i} className={i % 2 !== 0 ? styles.outline : ''}>{word} </span>
                    ))}
                 </h1>
                 
                 <p className={styles.desc}>{slides[current].desc}</p>
                 
                 <div className={styles.ctaWrapper}>
                    <Link href={slides[current].link} className={styles.ctaBtn}>
                      EXPLORE SYSTEM <Zap size={16} />
                    </Link>
                    <div className={styles.ctaDecorator}>SYS_ADDR: 0xFD42 // DATA_CH: 01</div>
                 </div>
               </motion.div>
            </div>

            {/* FLOATING METRICS */}
            <motion.div 
              className={styles.floatingMetric}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 1 }}
            >
               <div className={styles.metricVal}>100HZ</div>
               <div className={styles.metricLab}>DATA_RATE</div>
            </motion.div>

            <motion.div 
              className={`${styles.floatingMetric} ${styles.m2}`}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 1.2 }}
            >
               <div className={styles.metricVal}>AES-256</div>
               <div className={styles.metricLab}>SEC_ACTIVE</div>
            </motion.div>
          </div>

          <div className={styles.sideCoordinates}>
             <div>LAT: 52.2297° N</div>
             <div>LON: 21.0122° E</div>
             <div className={styles.verTag}>V4.0 // STABLE</div>
          </div>
        </motion.div>
      </AnimatePresence>

      <div className={styles.nav}>
        <button onClick={prev} className={styles.navBtn}><ChevronLeft size={32} /></button>
        <button onClick={next} className={styles.navBtn}><ChevronRight size={32} /></button>
      </div>

      <div className={styles.dots}>
        {slides.map((_, i) => (
          <div 
            key={i} 
            className={`${styles.dot} ${i === current ? styles.activeDot : ''}`}
            onClick={() => setCurrent(i)}
          />
        ))}
      </div>
    </div>
  );
}
