'use client'

import Image from 'next/image'
import { useState, useEffect, useMemo } from 'react'
import { ScrollingBackground } from './ScrollingBackground'

interface LeftPanelProps {
  scrollBg: string
  images: string[]
}

// 基础文字内容
const baseTexts = [
  { title: 'AI Date', subtitle: "From 'Hi' to 'I Do', sparked by every chat." },
  { title: 'Crush', subtitle: "From 'Hi' to 'I Do', sparked by every chat." },
  { title: 'Chat', subtitle: "From 'Hi' to 'I Do', sparked by every chat." },
]

// 根据图片数量循环生成文字内容
const generateImageTexts = (count: number) => {
  return Array.from({ length: count }, (_, i) => baseTexts[i % baseTexts.length])
}

export function LeftPanel({ scrollBg, images }: LeftPanelProps) {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [isTransitioning, setIsTransitioning] = useState(false)

  // 根据图片数量动态生成文案（使用 useMemo 优化性能）
  const imageTexts = useMemo(() => generateImageTexts(images.length), [images.length])

  useEffect(() => {
    if (images.length <= 1) return

    const timer = setInterval(() => {
      setIsTransitioning(true)
      setTimeout(() => {
        setCurrentIndex((prevIndex) => (prevIndex === images.length - 1 ? 0 : prevIndex + 1))
        setIsTransitioning(false)
      }, 300)
    }, 3000) // 每3秒切换一次

    return () => clearInterval(timer)
  }, [images.length])

  const currentText = imageTexts[currentIndex] || imageTexts[0]

  return (
    <div className="relative h-full w-full overflow-hidden">
      {/* 滚动背景 */}
      <ScrollingBackground imageSrc={scrollBg} />

      {/* 内容层 */}
      <div className="relative z-10 flex h-full flex-col justify-end">
        {/* 底部遮罩层 - 铺满背景底部，高度500px */}
        <div
          className="absolute right-0 bottom-0 left-0 z-[5] h-[500px]"
          style={{
            background: 'linear-gradient(180deg, rgba(33, 26, 43, 0) 0%, #211A2B 100%)',
            boxShadow: '0px 4px 4px 0px #00000040',
          }}
        />

        {/* 文字内容 - 在图片上方 */}
        <div
          className={`absolute right-0 bottom-16 left-0 z-10 mb-6 px-4 text-center transition-opacity duration-700 lg:bottom-20 lg:mb-8 lg:px-8 ${
            isTransitioning ? 'opacity-0' : 'opacity-100'
          }`}
        >
          <div className="mx-auto flex items-center justify-center px-4 py-2 lg:px-6 lg:py-3">
            <h2 className="txt-headline-m lg:txt-headline-l relative flex items-center gap-2 text-white">
              {currentText.title}
              <Image
                src="/images/login/v1/icon-star-right.svg"
                alt="logo"
                width={38}
                height={36}
                className="absolute -top-[18px] -right-[38px]"
              />
            </h2>
          </div>
          <p className="txt-body-m lg:txt-body-l mx-auto max-w-[320px] lg:max-w-[380px]">
            {currentText.subtitle}
          </p>
        </div>

        {/* 角色图片 - 尽可能放大，紧贴底部 */}
        <div className="relative h-[80vh] w-full lg:h-[85vh]">
          {images.map((image, index) => (
            <div
              key={`${image}-${index}`}
              className={`absolute inset-0 transition-opacity duration-700 ${
                index === currentIndex && !isTransitioning ? 'opacity-100' : 'opacity-0'
              }`}
            >
              <Image
                src={image}
                alt={`Character ${index + 1}`}
                fill
                className="object-contain object-bottom"
                priority={index === 0}
              />
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
