"use client"

import { useState, useRef, useCallback } from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import type { HospitalityRestaurantsData } from "@/lib/strapi/types"
import FallbackImage from "./FallbackImage"

export default function HospitalityRestaurants({ data }: { data: HospitalityRestaurantsData }) {
  const restaurants = data.restaurants
  const [cardPage, setCardPage] = useState(0)
  const scrollRef = useRef<HTMLDivElement>(null)

  const totalPages = Math.max(1, restaurants.length)

  const scroll = useCallback(
    (direction: "left" | "right") => {
      if (!scrollRef.current) return
      const cardWidth =
        scrollRef.current.querySelector<HTMLElement>("[data-restaurant-card]")?.offsetWidth || 311
      scrollRef.current.scrollBy({
        left: direction === "right" ? cardWidth + 24 : -(cardWidth + 24),
        behavior: "smooth",
      })
      setCardPage((prev) =>
        direction === "right" ? Math.min(prev + 1, totalPages - 1) : Math.max(prev - 1, 0),
      )
    },
    [totalPages],
  )

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

  return (
    <section
      className="relative overflow-hidden"
      style={{ background: "linear-gradient(43deg, #FFF -32.84%, #EBEBEB 89.64%)" }}
    >
      <div className="flex flex-col gap-10 md:gap-0 px-5 md:px-[72px] py-10 md:pt-[68px] md:pb-[60px]">
        <div className="flex items-center justify-between md:mb-[35px]">
          <div className="inline-flex items-center gap-2 px-6 py-3 bg-white rounded-[66px]">
            <FallbackImage
              src={data.badgeIcon}
              alt=""
              loading="lazy"
              className="w-[17px] h-4"
            />
            <span className="font-heading text-[#2a3036] text-[16px] leading-none uppercase whitespace-nowrap">
              {data.badge}
            </span>
          </div>
        </div>

        <div
          ref={scrollRef}
          className="flex gap-4 md:gap-6 overflow-x-auto scrollbar-hide -mx-5 md:-mx-[72px] px-5 md:px-[72px] pb-6 w-[calc(100%+40px)] md:w-[calc(100%+144px)]"
        >
          {restaurants.map((restaurant, index) => (
            <div
              key={`${restaurant.name}-${index}`}
              data-restaurant-card
              className="flex-shrink-0 w-[274px] md:w-[311px] rounded-[16px] overflow-hidden flex flex-col border border-[rgba(229,231,235,0.5)] md:border-0"
            >
              <div className="relative h-[182px] md:h-[266px] overflow-hidden">
                {restaurant.image && (
                <FallbackImage
                  src={restaurant.image}
                  fallbackSrc="/assets/hospitality/HERO SECTION/MGM Beach resort-Chennai-Indiajpeg.jpeg"
                  alt={restaurant.name}
                  className="absolute inset-0 w-full h-full object-cover"
                  loading="lazy"
                />
                )}
                <div className="absolute inset-0 bg-gradient-to-b from-black/20 to-transparent md:hidden" />
                <div className="absolute top-3 left-3 flex items-center gap-1 bg-white/90 rounded-[16px] px-2 py-1">
                  <FallbackImage
                    src="/assets/hospitality/location-pin.svg"
                    fallbackSrc="/assets/hospitality/location-pin.svg"
                    alt=""
                    loading="lazy"
                    className="w-[13px] h-4"
                  />
                  <span className="font-funnel text-[12px] leading-[16px] text-[#2a3036]/80">
                    {restaurant.location}
                  </span>
                </div>
              </div>

              <div className="bg-white px-4 py-5 md:p-4 flex flex-col gap-2 flex-1">
                <h3 className="font-serif text-[#101828] text-[24px] md:text-[32px] leading-[1.04] tracking-[-0.72px] md:tracking-[-0.96px]">
                  {restaurant.name}
                </h3>
                <p className="font-funnel text-[#2a3036] text-[12px] leading-[19.5px]">
                  {restaurant.description}
                </p>
              </div>
            </div>
          ))}
          <div className="flex-shrink-0 w-5 md:w-[72px]" aria-hidden="true" />
        </div>

        <div className="flex items-center justify-end md:justify-between">
          <p className="hidden md:block font-sans text-[16px] leading-[1.04] text-[#101828]/80">
            {" Showing "}
            <span className="font-semibold text-[#101828]">
              {String(restaurants.length).padStart(2, "0")}{" "}
            </span>
            Restaurants &amp; Bars
          </p>

          <div className="flex gap-[13px] md:gap-2">
            <button
              onClick={() => scroll("left")}
              disabled={cardPage === 0}
              className={`w-[44px] h-[44px] md:w-[60px] md:h-[58px] rounded-[66px] border-2 border-[#d20010] flex items-center justify-center transition-opacity ${
                cardPage === 0 ? "opacity-30 cursor-not-allowed" : "opacity-50 hover:opacity-100"
              }`}
              aria-label="Previous"
            >
              <ChevronLeft size={24} className="text-[#d20010]" />
            </button>
            <button
              onClick={() => scroll("right")}
              disabled={cardPage >= totalPages - 1}
              className={`w-[44px] h-[44px] md:w-[60px] md:h-[58px] rounded-[66px] border-2 border-[#d20010] flex items-center justify-center transition-opacity ${
                cardPage >= totalPages - 1 ? "opacity-30 cursor-not-allowed" : "hover:opacity-80"
              }`}
              aria-label="Next"
            >
              <ChevronRight size={24} className="text-[#d20010]" />
            </button>
          </div>
        </div>
      </div>
    </section>
  )
}