"use client"

import { useState } from "react"
import type { SaflProductRangeData, SaflProductBannerData } from "@/lib/strapi/types"
import { SectionBadge } from "./shared"

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

function BannerSlider({ banners }: { banners: SaflProductBannerData[] }) {
  const [current, setCurrent] = useState(0)

  return (
    <div className="relative w-full h-[500px] lg:h-[665px] overflow-hidden rounded-[16px]">
      {banners.map((banner, i) => (
        <div
          key={i}
          className={`absolute inset-0 w-full h-full transition-opacity duration-700 ${i === current ? "opacity-100" : "opacity-0"
            }`}
        >
          {banner.mobileImage ? (
            <img
              src={banner.mobileImage}
              alt={banner.name}
              loading={i === 0 ? "eager" : "lazy"}
              className="w-full h-full object-cover lg:hidden"
            />
          ) : null}
          {banner.image ? (
            <img
              src={banner.image}
              alt={banner.name}
              loading={i === 0 ? "eager" : "lazy"}
              className={`w-full h-full object-cover ${banner.mobileImage ? "hidden lg:block" : ""}`}
            />
          ) : null}
        </div>
      ))}

      {banners.length > 1 && (
        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent pt-16 pb-5 lg:pb-8 px-4 z-10">
          <div className="flex justify-center gap-4 lg:gap-10 flex-wrap">
            {banners.map((banner, i) => (
              <button
                key={i}
                onClick={() => setCurrent(i)}
                className={`text-[14px] lg:text-[20px] leading-none uppercase whitespace-nowrap transition-colors ${i === current
                  ? "text-white underline underline-offset-4"
                  : "text-white/50 hover:text-white/70 font-bold"
                  }`}
              >
                {banner.name}
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}

export default function SaflProductRange({ data }: { data: SaflProductRangeData }) {
  const badgeLabel = textOrFallback(data.badge, "Our RANGE.")
  const watermarkText = textOrFallback(data.watermarkText, "Our Product Lineup")

  return (
    <section className="max-w-[1296px] mx-auto px-4 lg:px-0 pb-16">
      {/* Mobile header */}
      <div className="flex items-center justify-between lg:hidden mb-7">
        <SectionBadge label={badgeLabel} variant="gray" icon={data.badgeIcon} />
      </div>

      {/* Desktop header */}
      <div className="hidden lg:flex lg:flex-row lg:items-end lg:justify-between gap-6 mb-0">
        <div className="flex flex-col items-start pb-6 max-w-[954px]">
          <div className="mb-[0px] relative z-10">
            <SectionBadge label={badgeLabel} variant="gray" icon={data.badgeIcon} />
          </div>
          <p
            className="font-accent text-[150px] leading-[0.7] tracking-[-6.4px] text-[rgba(32,38,43,0.04)] text-right w-full select-none font-bold"
            aria-hidden="true"
          >
            {watermarkText}
          </p>
        </div>
      </div>

      {/* Product banner sliders */}
      <div className="flex flex-col gap-6">
        {data.categories.map((cat, i) =>
          cat.banners.length > 0 ? <BannerSlider key={i} banners={cat.banners} /> : null,
        )}
      </div>
    </section>
  )
}