'use client';

import { useRef, useState } from 'react';
import Image from 'next/image';
import { motion } from 'framer-motion';
import { ChevronLeft, ChevronRight } from 'lucide-react';

const POSTERS = [
  {
    id: 1,
    src: '/images/home/event-promo/poster-1.png',
    alt: 'Giveaway Anniversary 47th',
  },
  {
    id: 2,
    src: '/images/home/event-promo/poster-2.png',
    alt: 'Diskon Spesial Anniversary 47th',
  },
  {
    id: 3,
    src: '/images/home/event-promo/poster-3.png',
    alt: 'Giveaway Kapten Yodi',
  },
];

export function EventPromoSection() {
  const scrollRef = useRef<HTMLDivElement>(null);
  const [canScrollLeft, setCanScrollLeft] = useState(false);
  const [canScrollRight, setCanScrollRight] = useState(true);

  const checkScroll = () => {
    const el = scrollRef.current;
    if (!el) return;
    setCanScrollLeft(el.scrollLeft > 0);
    setCanScrollRight(
      Math.ceil(el.scrollLeft) < el.scrollWidth - el.clientWidth - 10
    );
  };

  const scroll = (direction: 'left' | 'right') => {
    const el = scrollRef.current;
    if (!el) return;
    const cardWidth = el.clientWidth > 768 ? 384 : 296; // card width + gap approx
    el.scrollBy({
      left: direction === 'left' ? -cardWidth : cardWidth,
      behavior: 'smooth',
    });
  };

  return (
    <section className="w-full relative z-20 bg-[#1C1D1F] py-20 md:py-32">
      {/* Decorative Wavy Top */}
      <div className="absolute top-0 left-0 w-full z-0 overflow-hidden leading-none">
        <svg
          viewBox="0 0 1440 90"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="w-full h-auto min-w-[1440px] text-[#FFFDF5]"
          preserveAspectRatio="none"
        >
          <path
            d="M0,0 V45 Q30,70 60,45 T120,45 T180,45 T240,45 T300,45 T360,45 T420,45 T480,45 T540,45 T600,45 T660,45 T720,45 T780,45 T840,45 T900,45 T960,45 T1020,45 T1080,45 T1140,45 T1200,45 T1260,45 T1320,45 T1380,45 T1440,45 V0 H0 Z"
            fill="currentColor"
          />
        </svg>
      </div>

      <div className="container mx-auto px-4 relative z-10 mt-8">
        <div className="relative w-fit mx-auto text-[32px] sm:text-[44px] md:text-[56px] lg:text-[60px] xl:text-[60px] font-title">
          {/* Back solid text */}
          <span
            className="absolute top-[3px] left-[3px] text-[#FADB2B] leading-[1.1] whitespace-nowrap"
            aria-hidden="true"
          >
            EVENT & PROMO
          </span>
          {/* Front hollow text */}
          <span
            className="relative leading-[1.1] block whitespace-nowrap"
            style={{
              WebkitTextStroke: '2px #FFFFFF',
              color: 'transparent',
            }}
          >
            EVENT & PROMO
          </span>
        </div>

        <div className="relative max-w-[1140px] mx-auto mt-12 md:mt-16 group">
          {/* Navigation Arrows */}
          <motion.button
            initial={{ opacity: 0 }}
            animate={{ opacity: canScrollLeft ? 1 : 0 }}
            whileHover={{ scale: 1.1 }}
            whileTap={{ scale: 0.9 }}
            onClick={() => scroll('left')}
            disabled={!canScrollLeft}
            className="absolute -left-4 md:-left-6 top-1/2 -translate-y-1/2 z-20 w-10 h-10 md:w-12 md:h-12 flex items-center justify-center rounded-full bg-white shadow-xl text-[#1C1D1F] hover:bg-[#FFD738] transition-colors disabled:pointer-events-none md:opacity-0 md:group-hover:opacity-100"
            aria-label="Scroll left"
          >
            <ChevronLeft className="w-6 h-6" />
          </motion.button>

          <motion.button
            initial={{ opacity: 0 }}
            animate={{ opacity: canScrollRight ? 1 : 0 }}
            whileHover={{ scale: 1.1 }}
            whileTap={{ scale: 0.9 }}
            onClick={() => scroll('right')}
            disabled={!canScrollRight}
            className="absolute -right-4 md:-right-6 top-1/2 -translate-y-1/2 z-20 w-10 h-10 md:w-12 md:h-12 flex items-center justify-center rounded-full bg-white shadow-xl text-[#1C1D1F] hover:bg-[#FFD738] transition-colors disabled:pointer-events-none md:opacity-0 md:group-hover:opacity-100"
            aria-label="Scroll right"
          >
            <ChevronRight className="w-6 h-6" />
          </motion.button>

          {/* Scrollable Cards */}
          <div
            ref={scrollRef}
            onScroll={checkScroll}
            className="flex gap-4 md:gap-6 lg:gap-8 overflow-x-auto scrollbar-hide snap-x snap-mandatory pb-8 pt-4 px-4 md:px-8"
            style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
          >
            {POSTERS.map((poster, idx) => (
              <motion.div
                key={poster.id}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: '-50px' }}
                transition={{ delay: idx * 0.15, duration: 0.6 }}
                className="snap-center shrink-0 w-[280px] md:w-[320px] lg:w-[340px] relative rounded-[24px] md:rounded-[32px] overflow-hidden drop-shadow-[0_20px_20px_rgba(0,0,0,0.5)] border-2 border-white/10"
                style={{ aspectRatio: '4/5' }}
              >
                <Image
                  src={poster.src}
                  alt={poster.alt}
                  fill
                  sizes="(max-width: 768px) 280px, (max-width: 1024px) 320px, 340px"
                  className="object-cover hover:scale-105 transition-transform duration-500 cursor-pointer"
                />
              </motion.div>
            ))}
          </div>
        </div>
      </div>

      {/* Decorative Elements */}
      {/* Compass Left */}
      <div className="absolute top-1/2 -translate-y-1/2 -left-16 md:-left-24 w-32 h-64 md:w-48 md:h-96 opacity-90 z-0">
        <Image
          src="/images/home/event-promo/compass-left.avif"
          alt="Compass Left"
          fill
          className="object-contain object-left"
        />
      </div>
      {/* Compass Right */}
      <div className="absolute top-1/2 -translate-y-1/2 right-0 w-32 h-64 md:w-48 md:h-96 opacity-90 z-0">
        <Image
          src="/images/home/event-promo/compass-right.avif"
          alt="Compass Right"
          fill
          className="object-contain object-right"
        />
      </div>

      <StarIcon className="absolute top-24 left-[10%] w-6 h-6 md:w-8 md:h-8 text-[#FFD738] opacity-80 animate-pulse" />
      <StarIcon className="absolute bottom-20 left-[15%] w-4 h-4 md:w-6 md:h-6 text-[#FFD738] opacity-60" />
      <StarIcon className="absolute top-32 right-[15%] w-5 h-5 md:w-6 md:h-6 text-white opacity-80" />
      <StarIcon className="absolute bottom-32 right-[10%] w-6 h-6 md:w-8 md:h-8 text-[#FFD738] opacity-90" />

      {/* Decorative Wavy Bottom */}
      <div className="absolute top-full left-0 w-full z-0 overflow-hidden leading-none">
        <svg
          viewBox="0 0 1440 90"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="w-full h-auto min-w-[1440px] text-[#1C1D1F]"
          preserveAspectRatio="none"
        >
          <path
            d="M0,0 V45 Q30,70 60,45 T120,45 T180,45 T240,45 T300,45 T360,45 T420,45 T480,45 T540,45 T600,45 T660,45 T720,45 T780,45 T840,45 T900,45 T960,45 T1020,45 T1080,45 T1140,45 T1200,45 T1260,45 T1320,45 T1380,45 T1440,45 V0 H0 Z"
            fill="currentColor"
          />
        </svg>
      </div>
    </section>
  );
}

function StarIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 0L14.59 9.41L24 12L14.59 14.59L12 24L9.41 14.59L0 12L9.41 9.41L12 0Z" />
    </svg>
  );
}