import Image from "next/image"
import { resolveAssetUrl } from "@/lib/asset-url"
import type { AboutGalleryData, AboutGalleryImageData } from "@/lib/strapi/types"

const FALLBACK_IMAGES: AboutGalleryImageData[] = [
  { src: '/assets/about/gallery/(174).jpg', aspect: 'aspect-[4/3]' },
  { src: '/assets/about/gallery/(7).jpg', aspect: 'aspect-[4/3]' },
  { src: '/assets/about/gallery/cash purse was presented to Mother Teresa when she visited Chennai.jpeg', aspect: 'aspect-[3/2]' },
  { src: '/assets/about/gallery/DSC_0588.JPG', aspect: 'aspect-[4/3]' },
  { src: '/assets/about/gallery/DSC_0623.JPG', aspect: 'aspect-[4/3]' },
  { src: '/assets/about/gallery/MGM Muthu in  traditional Chevalier Robes .jpeg', aspect: 'aspect-[3/4]' },
  { src: '/assets/about/gallery/MGM Muthu Receiving the National Integration Award from the Former President R. Venkataraman.jpeg', aspect: 'aspect-[3/2]' },
  { src: '/assets/about/gallery/MGM Muthu sir With Suoerstar Sarathkumar.jpeg', aspect: 'aspect-[4/3]' },
  { src: '/assets/about/gallery/MGM Muthu sir with Superstar Rajinikanth .jpeg', aspect: 'aspect-[4/3]' },
  { src: '/assets/about/gallery/MGM Muthu with Former Indian Cricket Captain Kapil Dev, who visited the MGM Dizzee World.jpg', aspect: 'aspect-[4/3]' },
  { src: '/assets/about/gallery/MGM Muthu with outstanding actor Kamalhassan at my office..jpeg', aspect: 'aspect-square' },
  { src: '/assets/about/gallery/Roller coater opening .JPG', aspect: 'aspect-[3/4]' },
  { src: '/assets/about/gallery/Thiru R. Venkataraman at the Computer Car in MGM Dizzee World (1).jpeg', aspect: 'aspect-[4/3]' },
]

const FALLBACK_DESCRIPTION =
  'Our gallery reflects the evolution of our craft, the people behind it, and the passion that continues to shape our story.'

function GalleryImage({ src }: { src?: string }) {
  if (!src) return null

  const resolvedSrc = resolveAssetUrl(src)

  return (
    <Image
      src={resolvedSrc}
      alt=""
      fill
      sizes="(min-width: 800px) 360px, 260px"
      loading="lazy"
      className="object-cover object-[center_15%]"
    />
  )
}

function GalleryRow({ images }: { images: AboutGalleryImageData[] }) {
  return (
    <div className="flex gap-4 pr-4 shrink-0">
      {images.map((img, i) => (
        <div key={i} className={`relative h-[200px] lg:h-[280px] ${img.aspect || "aspect-[4/3]"} rounded-lg overflow-hidden shrink-0 shadow-sm bg-black/5`}>
          <GalleryImage src={img.src} />
        </div>
      ))}
    </div>
  )
}

export default function GallerySection({ data }: { data: AboutGalleryData }) {
  const badge = data.badge || 'Gallery'
  const badgeIcon = data.badgeIcon || '/assets/leaders/sparkle-icon.svg'
  const description = data.description || FALLBACK_DESCRIPTION
  const galleryImages = data.images.length > 0 ? data.images : FALLBACK_IMAGES

  const topRow = galleryImages.filter((_, i) => i % 2 === 0)
  const bottomRow = galleryImages.filter((_, i) => i % 2 !== 0)

  return (
    <section className="gallery-perf-section relative overflow-hidden">
      {/* Background Gradient */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{ background: 'linear-gradient(180deg, #2a3036 0%, #4a5565 60%, #c8d0da 85%, #ffffff 100%)',
        }}
      />

      {/* Content */}
      <div className="relative pt-[24px] pb-16 lg:pb-20">
        <div className="w-full px-[20px] lg:px-[72px]">
          {/* Header */}
          <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-[20px] lg:gap-6 mb-14">
            <div>
              <span className="inline-flex items-center gap-2 px-6 py-3 bg-[#ebebeb] rounded-full">
                {badgeIcon ? <img src={badgeIcon} alt="" loading="lazy" decoding="async" className="w-[17px] h-4" /> : null}
                <span className="font-heading text-black text-base uppercase leading-none">
                  {badge}
                </span>
              </span>
            </div>
            <div className="max-w-[461px] flex flex-col gap-[16px] lg:gap-0">
              <p className="font-sans font-medium text-base text-white/60 leading-[1.5]">
                {description}
              </p>
              <div className="lg:mt-6 border-b border-white/20" />
            </div>
          </div>
        </div>

        {/* Marquee Container */}
        <div className="flex flex-col gap-4 overflow-hidden">
          {/* Top Row */}
          <div
            className="gallery-motion-track flex"
            style={{ width: 'max-content',
              animation: 'gallery-scroll 48s linear infinite',
            }}
          >
            {[0, 1].map((i) => <GalleryRow key={`top-${i}`} images={topRow} />)}
          </div>

          {/* Bottom Row */}
          <div
            className="gallery-motion-track flex"
            style={{ width: 'max-content',
              animation: 'gallery-scroll 54s linear infinite',
            }}
          >
            {[0, 1].map((i) => <GalleryRow key={`bot-${i}`} images={bottomRow} />)}
          </div>
        </div>
      </div>
    </section>
  )
}