"use client"

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

type Card = { name: string; location: string; description: string; image: string; url: string }

const countryFallbackImages: Record<string, string> = {
  india: "/assets/flags/india-map.png",
  portugal: "/assets/flags/Portugal.svg",
  spain: "/assets/hospitality/map-spain.png",
  france: "/assets/hospitality/map-france.png",
  cuba: "/assets/hospitality/map-cuba.png",
  england: "/assets/flags/England.webp",
  jamaica: "/assets/flags/Jamaica.png",
  kenya: "/assets/flags/Kenya.svg",
  scotland: "/assets/flags/scotland.png",
  tanzania: "/assets/flags/Tanzania.png",
}

const cardFallbackImages: Array<[RegExp, string]> = [
  [/beach resort|muttukadu/i, "/assets/indiahotelimage/MGM Beach Resorts-Chennai-India.webp"],
  [/mark whitefield/i, "/assets/indiahotelimage/MGM Mark Whitefield-Bangalore-India.webp"],
  [/vailankanni/i, "/assets/indiahotelimage/MGM Vailankanni-Velankanni-India.webp"],
  [/whispering winds/i, "/assets/indiahotelimage/MGM Wispering winds-Yelagiri-India.webp"],
  [/whispering meadows/i, "/assets/indiahotelimage/MGM whispering meadows-Yelagiri-India.webp"],
  [/whispering nest/i, "/assets/indiahotelimage/MGM Wispering Nest-Yelagiri-India.webp"],
  [/clube praia da oura/i, "/assets/Portugal/Muthu Clube Praia Da Oura-Albufeira-Portugal.webp"],
  [/oura praia/i, "/assets/Portugal/Muthu Oura Praia Hotel-Albufeira-Portugal.webp"],
  [/balaia sol|balai sol/i, "/assets/Portugal/Muthu Balai Sol-Albufeira-Portugal.webp"],
  [/oura view beach club/i, "/assets/Portugal/Grand Muthu Oura View Beach Club-Albufeira-Portugal.webp"],
  [/forte do vale/i, "/assets/Portugal/Grand Muthu Forte do Vale-Albufeira-Portugal.webp"],
  [/forte da oura/i, "/assets/Portugal/Grand Muthu Forte Da Oura-Albufeira-Portugal.webp"],
  [/raga madeira/i, "/assets/Portugal/Muthu Raga Madeira-Madeira-Portugal.webp"],
  [/runaway bay/i, "/assets/jamaica/Grand Muthu Runaway Bay Club Caribbean-Salem-Jamaica.webp"],
  [/gran muthu habana/i, "/assets/Cuba/Gran Muthu Habana-Havana-Cuba.webp"],
  [/ensenada/i, "/assets/Cuba/Gran Muthu Ensenada-Holguin-Cuba.webp"],
  [/almirante/i, "/assets/Cuba/Gran Muthu Almirante Beach Hotel-Holguin-Cuba.webp"],
  [/colonial/i, "/assets/Cuba/Muthu Colonial Hotel-Cayo Coco-Cuba.webp"],
  [/ambassadeur/i, "/assets/france/Muthu Ambassadeur-Lourdes-France.webp"],
]

const genericCardFallback = "/assets/hospitality/HERO SECTION/MGM Beach resort-Chennai-Indiajpeg.jpeg"

function normalizeKey(value: string) {
  return value.trim().toLowerCase()
}

function cardFallbackImage(item: Card) {
  const text = `${item.name} ${item.location}`
  return cardFallbackImages.find(([pattern]) => pattern.test(text))?.[1] || genericCardFallback
}

function textOrFallback(value: unknown, fallback: string) {
  return typeof value === "string" && value.trim() !== "" ? value : fallback
}

function PresenceCarousel({ items, noun, country }: { items: Card[]; noun: string; country: string }) {
  const [cardPage, setCardPage] = useState(0)
  const scrollRef = useRef<HTMLDivElement>(null)
  const totalPages = Math.max(1, Math.ceil(items.length / 2))

  const scroll = useCallback(
    (direction: "left" | "right") => {
      if (!scrollRef.current) return
      const cardWidth = scrollRef.current.querySelector<HTMLElement>("[data-resort-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],
  )

  useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollLeft = 0
    const id = window.setTimeout(() => setCardPage(0), 0)
    return () => window.clearTimeout(id)
  }, [country, items])

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

  return (
    <div className="flex flex-col gap-4 md:gap-6">
      <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-2 w-[calc(100%+40px)] md:w-[calc(100%+144px)]"
      >
        {items.map((item, index) => {
          const cardClass =
            "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"
          const cardContent = (
            <>
              <div className="relative h-[182px] md:h-[266px] overflow-hidden">
                <FallbackImage
                  src={item.image || undefined}
                  fallbackSrc={cardFallbackImage(item)}
                  alt={item.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 md:top-3 left-3 md: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">
                    {item.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]">
                  {item.name}
                </h3>
                <p className="font-funnel text-[#2a3036] text-[12px] leading-[19.5px]">
                  {item.description}
                </p>
              </div>
            </>
          )

          return item.url ? (
            <a
              key={`${item.name}-${index}`}
              href={item.url}
              target="_blank"
              rel="noopener noreferrer"
              data-resort-card
              className={`${cardClass} cursor-pointer hover:shadow-lg transition-shadow`}
            >
              {cardContent}
            </a>
          ) : (
            <div key={`${item.name}-${index}`} data-resort-card className={cardClass}>
              {cardContent}
            </div>
          )
        })}
        <div className="flex-shrink-0 w-5 md:w-[72px]" aria-hidden="true" />
      </div>

      <div className="flex items-center justify-between">
        <p className="font-sans text-[15px] md:text-[16px] leading-[1.04] text-[#101828]/80">
          <span className="font-semibold text-[#101828]">
            {String(items.length).padStart(2, "0")}{" "}
          </span>
          {noun} in {country}
        </p>

        <div className="hidden">
          {Array.from({ length: totalPages }).map((_, i) => (
            <div
              key={i}
              className={`h-[5px] w-[44px] rounded-[6px] ${
                i === cardPage ? "bg-[#c5c5c5]" : "bg-[rgba(228,228,228,0.5)]"
              }`}
            />
          ))}
        </div>

        <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>
  )
}

export default function HospitalityGlobalPresence({ data }: { data: HospitalityGlobalPresenceData }) {
  const [activeCountry, setActiveCountry] = useState(data.countries[0]?.name ?? "")
  const { scrollRef: tabsScrollRef, handlers: tabsDragHandlers } = useDragScroll()
  const badgeLabel = textOrFallback(data.badge, "Our Global Presence")
  const ctaLabel = textOrFallback(data.ctaLabel, "Inquire here")

  const active = data.countries.find((c) => c.name === activeCountry)
  const resorts: Card[] = (active?.resorts ?? []).map((r) => ({
    name: r.name, location: r.location, description: r.description, image: r.image, url: r.url,
  }))
  const restaurants: Card[] = (active?.restaurants ?? []).map((r) => ({
    name: r.name, location: r.location, description: r.description, image: r.image, url: "",
  }))

  return (
    <section
      className="relative overflow-hidden"
      style={{
        borderRadius: "40px 40px 0 0",
        background: "linear-gradient(43deg, #FFF -32.84%, #EBEBEB 89.64%)",
      }}
    >
      <div className="flex flex-col gap-10 md:gap-8 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 || undefined} alt="" loading="lazy" className="w-[17px] h-4" />
            <span className="font-heading text-[#2a3036] text-[16px] leading-none uppercase whitespace-nowrap">
              {badgeLabel}
            </span>
          </div>

          <a href={data.ctaHref || "#global-presence"} className="hidden md:flex items-center bg-[#d20010] rounded-[66px] pl-[2px] py-[2px] group hover:bg-[#b8000e] transition-colors">
            <span className="flex items-center justify-center bg-white px-6 py-3 rounded-[44px]">
              <span className="font-medium text-[16px] leading-[22px] text-[#20262b] tracking-[0.32px] uppercase whitespace-nowrap">
                {ctaLabel}
              </span>
            </span>
            <span className="flex items-center justify-center w-6 h-6 mx-2">
              <svg width="8" height="14" viewBox="0 0 7.5 13.5" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M0.75 0.75C0.75 0.75 6.75 5.169 6.75 6.75C6.75 8.331 0.75 12.75 0.75 12.75"
                  stroke="#FAFAFA"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </span>
          </a>
        </div>

        <div
          ref={tabsScrollRef}
          {...tabsDragHandlers}
          className="flex items-end overflow-x-auto scrollbar-hide md:mb-[24px] select-none"
          style={{ cursor: "grab" }}
        >
          {data.countries.map((country) => {
            const isActive = activeCountry === country.name
            return (
              <button
                key={country.name}
                onClick={() => setActiveCountry(country.name)}
                className={`flex flex-col items-center gap-1 md:gap-2 pt-[6px] md:pt-3 pb-3 md:pb-6 transition-all duration-300 ${
                  isActive ? "border-b border-[rgba(16,36,67,0.4)]" : "opacity-50"
                }`}
                style={{
                  flex: "1 0 100px",
                  minWidth: "100px",
                  background: isActive
                    ? "linear-gradient(to bottom, rgba(240,240,240,0.2) 0%, rgba(255,255,255,0.2) 100%)"
                    : "transparent",
                }}
              >
                <div className={`w-full h-[100px] md:h-[166px] flex items-center justify-center ${!isActive ? "opacity-50" : ""}`}>
                  <FallbackImage
                    src={country.image || undefined}
                    fallbackSrc={countryFallbackImages[normalizeKey(country.name)]}
                    alt={country.name}
                    loading="lazy"
                    className="max-w-full max-h-full object-contain"
                  />
                </div>
                <span
                  className={`text-[12px] md:text-[20px] text-center tracking-[-0.26px] md:tracking-[-0.53px] uppercase whitespace-nowrap ${
                    isActive ? "font-medium text-[#2a3036]" : "font-normal text-[#757575]"
                  }`}
                  style={{ fontFeatureSettings: "'dlig' 1" }}
                >
                  {country.name}
                </span>
              </button>
            )
          })}
        </div>

        <PresenceCarousel items={resorts} noun="Resorts" country={activeCountry} />
        <PresenceCarousel items={restaurants} noun="Restaurants" country={activeCountry} />
      </div>
    </section>
  )
}