'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { useLanguage } from '@/context/LanguageContext';

export default function Hero() {
  const [currentSlide, setCurrentSlide] = useState(0);
  const [showVideo, setShowVideo] = useState(false);
  const { t } = useLanguage();

  const slides = [
    {
      image: '/images/hero/Hero-1.jpeg',
      cta2Key: 'hero.slide1.cta2',
      cta2Link: 'https://www.youtube.com/watch?v=-x0QO81DwMw',
      isExternal: true,
    },
    {
      titleKey: 'hero.slide2.title',
      subtitleKey: 'hero.slide2.subtitle',
      cta1Key: 'hero.slide2.cta1',
      cta1Link: '/promo',
      cta2Key: 'hero.slide2.cta2',
      cta2Link: '/contact',
      bgColor: 'from-gold/90 to-espresso/70',
    },
  ];

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % slides.length);
    }, 12000); // 12 detik
    return () => clearInterval(timer);
  }, [slides.length]);

  useEffect(() => {
    if (showVideo) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'unset';
    }
    return () => {
      document.body.style.overflow = 'unset';
    };
  }, [showVideo]);

  const goToSlide = (index: number) => setCurrentSlide(index);
  const prevSlide = () => setCurrentSlide((prev) => (prev === 0 ? slides.length - 1 : prev - 1));
  const nextSlide = () => setCurrentSlide((prev) => (prev + 1) % slides.length);

  return (
    <>
      <section className="relative w-full min-h-[500px] md:min-h-screen overflow-hidden bg-ivory">
        {slides.map((slide, index) => (
          <div
            key={index}
            className={`absolute inset-0 transition-all duration-700 ease-in-out ${
              index === currentSlide ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-full'
            }`}
          >
            {/* Slide 1: Full image with only Lihat Video button */}
            {slide.image ? (
              <div className="relative w-full h-full min-h-[500px] md:min-h-screen">
                <Image
                  src={slide.image}
                  alt="Carla Skin Clinic Hero"
                  fill
                  sizes="100vw"
                  className="object-cover object-center"
                  priority={index === 0}
                />
                <div className="absolute inset-0 bg-black/20"></div>
                <div className="absolute bottom-4 md:bottom-12 left-2 md:left-8 z-10">
                  <button
                    onClick={() => setShowVideo(true)}
                    className="inline-flex items-center gap-2 md:gap-3 px-5 md:px-8 py-3 md:py-4 bg-gold text-white text-xs md:text-sm uppercase tracking-widest font-semibold rounded hover:bg-gold-dark hover:text-white transition duration-300 cursor-pointer"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4 md:w-6 md:h-6" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                    {t(slide.cta2Key)}
                  </button>
                </div>
              </div>
            ) : (
              <>
                <div className={`absolute inset-0 bg-gradient-to-r ${slide.bgColor} opacity-90`}></div>
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="container-custom text-center text-white">
                    <div className="max-w-3xl mx-auto animate-fade-in">
                      <h1 className="font-cormorant text-5xl md:text-7xl font-bold mb-6 leading-tight">
                        {t(slide.titleKey!)}
                      </h1>
                      <p className="text-base md:text-lg mb-10 text-ivory/90 max-w-2xl mx-auto leading-relaxed">
                        {t(slide.subtitleKey!)}
                      </p>
                      <div className="flex flex-col sm:flex-row gap-4 justify-center">
                        <Link
                          href={slide.cta1Link!}
                          className="px-8 py-3 bg-gold text-white text-xs uppercase tracking-widest font-semibold rounded hover:bg-gold-dark hover:text-white transition duration-300"
                        >
                          {t(slide.cta1Key!)}
                        </Link>
                        <Link
                          href={slide.cta2Link!}
                          className="px-8 py-3 border border-white text-white text-xs uppercase tracking-widest font-semibold rounded hover:bg-white hover:text-espresso transition duration-300"
                        >
                          {t(slide.cta2Key!)}
                        </Link>
                      </div>
                    </div>
                  </div>
                </div>
              </>
            )}
          </div>
        ))}

        <button onClick={prevSlide} className="absolute left-4 md:left-8 top-1/2 -translate-y-1/2 z-20 w-10 h-10 md:w-12 md:h-12 bg-white/10 backdrop-blur-sm rounded-full flex items-center justify-center text-white hover:bg-white/30 transition-all duration-300">
          <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round"><path d="M15 6l-6 6 6 6"></path></svg>
        </button>
        <button onClick={nextSlide} className="absolute right-4 md:right-8 top-1/2 -translate-y-1/2 z-20 w-10 h-10 md:w-12 md:h-12 bg-white/10 backdrop-blur-sm rounded-full flex items-center justify-center text-white hover:bg-white/30 transition-all duration-300">
          <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round"><path d="M9 6l6 6 -6 6"></path></svg>
        </button>

        <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-20 flex gap-3">
          {slides.map((_, index) => (
            <button
              key={index}
              onClick={() => goToSlide(index)}
              className={`w-2.5 h-2.5 rounded-full transition-all duration-300 ${
                index === currentSlide ? 'bg-gold w-8' : 'bg-white/50 hover:bg-white/80'
              }`}
            />
          ))}
        </div>
      </section>

      {/* Video Modal */}
      {showVideo && (
        <div
          className="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm"
          onClick={() => setShowVideo(false)}
        >
          <div
            className="relative w-full max-w-4xl mx-4 aspect-video rounded-lg overflow-hidden shadow-2xl"
            onClick={(e) => e.stopPropagation()}
          >
            <iframe
              src="https://www.youtube.com/embed/ms8_7sVre0g?autoplay=1&mute=0&rel=0"
              title="Carla Skin Clinic Video"
              className="w-full h-full"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowFullScreen
            />
            <button
              onClick={() => setShowVideo(false)}
              className="absolute -top-10 right-0 text-white hover:text-gold transition text-2xl"
            >
              ✕
            </button>
          </div>
        </div>
      )}
    </>
  );
}
