"use client"

import { useState, useRef, useCallback, useEffect } from "react"
import Image from "next/image"
import type { EntertainmentEventsData } from "@/lib/strapi/types"
import { SectionBadge, ArrowButton, CtaButton } from "./shared"

export default function EntertainmentEvents({ data }: { data: EntertainmentEventsData }) {
  const scrollRef = useRef<HTMLDivElement>(null)
  const [activePage, setActivePage] = useState(0)
  const [atStart, setAtStart] = useState(true)
  const [atEnd, setAtEnd] = useState(false)
  const events = data.events
  const totalPages = Math.max(1, Math.ceil(events.length / 4))

  const scrollEvents = (direction: "left" | "right") => {
    if (!scrollRef.current) return
    const amount = 335
    scrollRef.current.scrollBy({ left: direction === "left" ? -amount : amount, behavior: "smooth" })
  }

  const handleEventsScroll = useCallback(() => {
    if (!scrollRef.current) return
    const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current
    setAtStart(scrollLeft < 2)
    setAtEnd(scrollLeft + clientWidth >= scrollWidth - 2)
  }, [])

  useEffect(() => {
    const el = scrollRef.current
    if (!el) return
    handleEventsScroll()
    el.addEventListener("scroll", handleEventsScroll, { passive: true })
    return () => el.removeEventListener("scroll", handleEventsScroll)
  }, [handleEventsScroll])

  if (events.length === 0) return null

  return (
    <section
      className="relative w-full overflow-hidden"
      style={{ background: "radial-gradient(ellipse at 65% 50%, rgba(193,239,255,1) 0%, rgba(154,228,255,1) 50%, rgba(115,218,255,1) 100%)" }}
    >
      <div
        className="absolute inset-0 opacity-10 pointer-events-none"
        style={{ backgroundImage: "url('/assets/entertainment/events-bg.png')", backgroundSize: "cover", backgroundPosition: "center" }}
      />

      <div className="relative max-w-[1440px] mx-auto px-5 md:px-8 lg:px-[72px] pt-10 md:pt-[60px]">
        <div className="flex items-center justify-between mb-5 md:mb-[105px]">
          <SectionBadge label={data.badge} />
          <div className="hidden md:block">
            <CtaButton label={data.ctaLabel} href={data.ctaHref} />
          </div>
        </div>
      </div>

      <div className="relative pl-5 md:pl-8 lg:pl-[calc((100vw-1440px)/2+72px)]" style={{ minWidth: 0 }}>
        <div ref={scrollRef} className="flex gap-4 md:gap-6 overflow-x-auto scrollbar-hide">
          {events.map((event, i) => (
            <div
              key={i}
              className="contain-paint flex-shrink-0 w-[274px] md:w-[311px] rounded-2xl overflow-hidden group cursor-pointer border border-[rgba(229,231,235,0.5)] md:border-0"
              style={{ background: "radial-gradient(ellipse at 42% 84%, rgba(255,232,233,0) 0%, rgba(255,232,233,1) 100%), linear-gradient(90deg, #fff 0%, #fff 100%)" }}
            >
              <div className="relative h-[182px] md:h-[266px] overflow-hidden p-4 md:p-3">
                <Image src={event.image} alt={event.title} fill sizes="(min-width: 800px) 311px, 274px" loading="lazy" className="object-cover transition-transform duration-500 group-hover:scale-105" />
                <div className="absolute inset-0 bg-gradient-to-b from-black/20 to-transparent" />
              </div>
              <div className="px-4 py-5 md:p-4">
                <div className="flex flex-col gap-2 md:gap-1">
                  <span className="font-sans text-[#4a5565] text-[14px] leading-[20px]">{event.date}</span>
                  <h3 className="font-heading md:hidden text-[#102443] text-[20px] leading-normal font-bold">{event.title}</h3>
                  <h3 className="font-accent hidden md:block text-[#20262b] text-[32px] leading-[1.04] tracking-[-0.96px] font-bold">{event.title}</h3>
                  <p className="font-sans text-[rgba(16,36,67,0.4)] md:text-[rgba(32,38,43,0.8)] text-[14px] leading-[20px] md:leading-[1.5] font-normal md:font-medium">
                    {event.description}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="relative max-w-[1440px] mx-auto px-5 md:px-8 lg:px-[72px] pb-8 md:pb-[60px]">
        <div className="md:hidden flex items-center justify-end mt-5">
          <div className="flex gap-[13px]">
            <ArrowButton direction="left" size="small" disabled={activePage === 0} onClick={() => { setActivePage(Math.max(0, activePage - 1)); scrollEvents("left") }} />
            <ArrowButton direction="right" size="small" disabled={activePage >= totalPages - 1} onClick={() => { setActivePage(Math.min(totalPages - 1, activePage + 1)); scrollEvents("right") }} />
          </div>
        </div>

        <div className="md:hidden flex justify-center mt-5">
          <CtaButton label={data.ctaLabel} href={data.ctaHref} />
        </div>

        <div className="hidden md:flex justify-end mt-6">
          <div className="flex gap-2">
            <ArrowButton direction="left" disabled={atStart} onClick={() => scrollEvents("left")} />
            <ArrowButton direction="right" disabled={atEnd} onClick={() => scrollEvents("right")} />
          </div>
        </div>
      </div>
    </section>
  )
}