"use client"

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

export default function EntertainmentRestaurants({ data }: { data: EntertainmentRestaurantsData }) {
  const scrollRef = useRef<HTMLDivElement>(null)
  const [atStart, setAtStart] = useState(true)
  const [atEnd, setAtEnd] = useState(false)
  const restaurants = data.restaurants

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

  const handleScroll = 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
    handleScroll()
    el.addEventListener("scroll", handleScroll, { passive: true })
    return () => el.removeEventListener("scroll", handleScroll)
  }, [handleScroll])

  if (restaurants.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] pt-10 md:pt-[60px]">
        <div className="flex items-center justify-between mb-5 md:mb-[40px]">
          <SectionBadge label={data.badge} />
        </div>
      </div>

      <div className="pl-5 md:pl-8 lg:pl-[calc((100vw-1440px)/2+72px)] pr-5 md:pr-8" style={{ minWidth: 0 }}>
        <div ref={scrollRef} className="flex gap-4 md:gap-6 overflow-x-auto scrollbar-hide">
          {restaurants.map((restaurant, i) => (
            <div
              key={i}
              data-restaurant-card
              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={restaurant.image} alt={restaurant.name} 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 className="relative z-10 inline-flex items-center bg-white/90 border border-white px-2 py-1 rounded-2xl">
                  <span className="font-sans text-[#20262b] text-[12px] leading-[16px]">{restaurant.location}</span>
                </div>
              </div>
              <div className="px-4 py-5 md:p-4">
                <div className="flex flex-col gap-2 md:gap-1">
                  <h3 className="font-heading md:hidden text-[#102443] text-[20px] leading-normal font-bold">{restaurant.name}</h3>
                  <h3 className="font-accent hidden md:block text-[#20262b] text-[32px] leading-[1.04] tracking-[-0.96px] font-bold">{restaurant.name}</h3>
                  <p className="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">
                    {restaurant.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="hidden md:flex max-w-[1440px] mx-auto items-center justify-between mt-6">
          <p className="font-sans text-[rgba(42,48,54,0.6)] text-[16px] leading-[1.04]">
            Showing <span className="text-[#20262b] font-semibold">{String(restaurants.length).padStart(2, "0")} </span>
            Restaurants &amp; Bars
          </p>
          <div className="flex gap-2">
            <ArrowButton direction="left" disabled={atStart} onClick={() => scrollRestaurants("left")} />
            <ArrowButton direction="right" disabled={atEnd} onClick={() => scrollRestaurants("right")} />
          </div>
        </div>

        <div className="md:hidden flex items-center justify-end mt-5">
          <div className="flex gap-[13px]">
            <ArrowButton direction="left" size="small" disabled={atStart} onClick={() => scrollRestaurants("left")} />
            <ArrowButton direction="right" size="small" disabled={atEnd} onClick={() => scrollRestaurants("right")} />
          </div>
        </div>
      </div>
    </section>
  )
}