'use client'

import { useEffect, useState } from 'react'
import { ChevronLeft, ChevronRight } from 'lucide-react'
import { ImagePlaceholder } from '@/components/shared/ImagePlaceholder'

interface HomeHeroSlide {
  id: string
  title: string
  imageUrl?: string
}

export function HomeHeroCarousel({ slides }: { slides: HomeHeroSlide[] }) {
  const heroSlides = slides.filter((slide) => slide.imageUrl)
  const [activeIndex, setActiveIndex] = useState(0)

  useEffect(() => {
    if (heroSlides.length <= 1) return
    const timer = window.setInterval(() => {
      setActiveIndex((current) => (current + 1) % heroSlides.length)
    }, 4200)
    return () => window.clearInterval(timer)
  }, [heroSlides.length])

  useEffect(() => {
    if (activeIndex >= heroSlides.length) setActiveIndex(0)
  }, [activeIndex, heroSlides.length])

  function move(step: number) {
    if (heroSlides.length <= 1) return
    setActiveIndex((current) => (current + step + heroSlides.length) % heroSlides.length)
  }

  return (
    <div className="relative h-[calc(100svh-71px)] w-full overflow-hidden md:h-[calc(100svh-107px)]">
      {heroSlides.length ? (
        <div
          className="absolute inset-0 flex transition-transform duration-700 ease-out"
          style={{ transform: `translateX(-${activeIndex * 100}%)` }}
        >
          {heroSlides.map((slide) => (
            <div key={slide.id} className="relative min-w-full">
              <div
                className="absolute inset-0 bg-cover bg-center"
                style={{ backgroundImage: `url(${slide.imageUrl})` }}
                role="img"
                aria-label={slide.title || '首页轮播图'}
              />
            </div>
          ))}
        </div>
      ) : (
        <ImagePlaceholder label="暂无首页图片" className="absolute inset-0 h-full w-full border-0" />
      )}

      <div className="pointer-events-none absolute inset-0 bg-white/10 backdrop-blur-[1px]" />
      <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(180deg,rgba(255,255,255,0.18)_0%,rgba(255,255,255,0.02)_42%,rgba(255,255,255,0.14)_100%)]" />

      {heroSlides.length > 1 && (
        <>
          <button
            type="button"
            onClick={() => move(-1)}
            className="absolute left-4 top-1/2 z-10 grid h-11 w-11 -translate-y-1/2 place-items-center rounded-full border border-white/70 bg-white/60 text-ink shadow-[0_14px_34px_rgba(15,23,42,0.16)] backdrop-blur-xl hover:bg-white/80 hover:text-brand md:left-8"
            aria-label="上一张首页主视觉"
          >
            <ChevronLeft className="h-5 w-5" />
          </button>
          <button
            type="button"
            onClick={() => move(1)}
            className="absolute right-4 top-1/2 z-10 grid h-11 w-11 -translate-y-1/2 place-items-center rounded-full border border-white/70 bg-white/60 text-ink shadow-[0_14px_34px_rgba(15,23,42,0.16)] backdrop-blur-xl hover:bg-white/80 hover:text-brand md:right-8"
            aria-label="下一张首页主视觉"
          >
            <ChevronRight className="h-5 w-5" />
          </button>
        </>
      )}
    </div>
  )
}
