"use client"

import { useState, useRef, useCallback, useEffect } from "react"
import type { EntertainmentStatsData } from "@/lib/strapi/types"
import { SectionBadge, ArrowButton } from "./shared"

export default function EntertainmentStats({ data }: { data: EntertainmentStatsData }) {
  const [activePage, setActivePage] = useState(0)
  const [atStart, setAtStart] = useState(true)
  const [atEnd, setAtEnd] = useState(false)
  const scrollRef = useRef<HTMLDivElement>(null)
  const stats = data.stats

  const scroll = useCallback((direction: "left" | "right") => {
    if (!scrollRef.current) return
    const cardWidth = scrollRef.current.querySelector<HTMLElement>("[data-stat-card]")?.offsetWidth || 416
    const gap = 24
    scrollRef.current.scrollBy({ left: direction === "right" ? cardWidth + gap : -(cardWidth + gap), behavior: "smooth" })
  }, [])

  const handleScroll = useCallback(() => {
    if (!scrollRef.current) return
    const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current
    setAtStart(scrollLeft < 2)
    setAtEnd(scrollLeft + clientWidth >= scrollWidth - 2)
    const cardWidth = scrollRef.current.querySelector<HTMLElement>("[data-stat-card]")?.offsetWidth || 277
    const page = Math.round(scrollLeft / (cardWidth + 16))
    setActivePage(Math.min(page, Math.max(0, stats.length - 1)))
  }, [stats.length])

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

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

  return (
    <section className="relative w-full overflow-hidden">
      <div className="max-w-[1440px] mx-auto px-5 md:px-8 lg:px-[72px] py-10 md:py-20 !pb-0">
        <div className="flex flex-col lg:flex-row items-start justify-between gap-4 md:gap-6 mb-8 md:mb-14">
          <SectionBadge label={data.badge} variant="gray" />
          <div className="flex flex-col gap-4 md:gap-6 max-w-[417px] w-full">
            <p className="font-sans text-[rgba(42,48,54,0.6)] text-[14px] md:text-[16px] leading-[1.5] font-medium">
              {data.description}
            </p>
            <div className="w-full h-px bg-[#e5e7eb]" />
          </div>
        </div>
      </div>

      <div
        ref={scrollRef}
        className="flex gap-4 lg:gap-6 overflow-x-auto scrollbar-hide px-5 md:px-8 lg:pl-[max(20px,calc((100vw-1440px)/2+72px))] lg:pr-0"
      >
        {stats.map((stat, index) => (
          <div
            key={index}
            data-stat-card
            className="flex-shrink-0 w-[277px] lg:w-[416px] h-[224px] lg:h-[299px] rounded-2xl border-0 lg:border lg:border-[rgba(229,231,235,0.5)] overflow-hidden relative flex flex-col justify-end"
            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%)" }}
          >
            {stat.vector ? (
              <img
                src={stat.vector}
                alt=""
                loading="lazy"
                className="absolute right-0 top-0 w-[100px] lg:w-[100px]  h-[100px] pointer-events-none opacity-100"
                aria-hidden="true"
              />
            ) : null}
            <div className="relative z-10 flex flex-col gap-2 px-4 lg:px-6 pb-4 lg:pb-6 pt-4 lg:pt-6">
              {stat.number ? (
                <span className="font-accent text-[#20262b] text-[64px] lg:text-[96px] leading-none font-bold">
                  {stat.number}
                </span>
              ) : null}
              <span className="font-accent text-[#20262b] text-[24px] lg:text-[32px] leading-tight lg:leading-none font-bold">
                {stat.suffix}
              </span>
              <p className="font-sans text-[#4a5565] lg:text-[rgba(32,38,43,0.8)] text-[14px] lg:text-[16px] leading-[24px] lg:leading-[18px] font-normal lg:font-medium">
                {stat.description}
              </p>
            </div>
          </div>
        ))}
      </div>

      <div className="max-w-[1440px] mx-auto px-5 md:px-8 lg:px-[72px] pb-10 md:pb-20">
        <div className="flex items-center justify-end mt-6">
          <div className="flex gap-2 lg:gap-[13px]">
            <ArrowButton direction="left" disabled={atStart} onClick={() => scroll("left")} />
            <ArrowButton direction="right" disabled={atEnd} onClick={() => scroll("right")} />
          </div>
        </div>
      </div>
    </section>
  )
}