"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 w-full h-full overflow-hidden">
      {/* 滚动背景 */}
      <ScrollingBackground imageSrc={scrollBg} />

      {/* 内容层 */}
      <div className="relative z-10 flex flex-col justify-end h-full">
        {/* 文字内容 - 在图片上方 */}
        <div 
          className={`text-center px-4 lg:px-8 mb-6 lg:mb-8 transition-opacity duration-700 absolute left-0 right-0 bottom-16 lg:bottom-20 z-10 ${
            isTransitioning ? "opacity-0" : "opacity-100"
          }`}
        >
          <div className="flex items-center justify-center px-4 lg:px-6 py-2 lg:py-3 mx-auto">
            <h2 className="txt-headline-m lg:txt-headline-l text-white flex items-center gap-2 relative">
              {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 max-w-[320px] lg:max-w-[380px] mx-auto">
            {currentText.subtitle}
          </p>
        </div>

        {/* 角色图片 - 尽可能放大，紧贴底部 */}
        <div className="relative w-full h-[80vh] 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>
  );
}

