import { useState } from 'react';
import { View, Image, Swiper, SwiperItem } from '@tarojs/components';
import Taro from '@tarojs/taro';

type ProductCarouselProps = {
  images: string[];
  alt: string;
  variant?: 'home' | 'detail' | 'store';
  previewable?: boolean;
  /** cover=aspectFill 裁剪铺满；contain=aspectFit 缩放完整显示（门店门头固定区） */
  imageFit?: 'cover' | 'contain';
};

/** 商品/门店轮播（对齐 h5 ProductCarousel 三变体） */
export default function ProductCarousel({
  images,
  alt,
  variant = 'detail',
  previewable = false,
  imageFit = 'cover',
}: ProductCarouselProps) {
  const slides = images.length > 0 ? images : [''];
  const [activeIndex, setActiveIndex] = useState(0);
  const prefix =
    variant === 'store' ? 'store-detail-carousel' : variant === 'home' ? 'home-carousel' : 'detail-carousel';
  const isContain = imageFit === 'contain';
  const wrapClass = `${prefix}-wrap${isContain ? ` ${prefix}-wrap--contain` : ''}`;

  function previewAt(index: number) {
    const urls = slides.filter(Boolean);
    if (!urls.length) return;
    const current = slides[index] || urls[0];
    Taro.previewImage({ current, urls }).catch(() => undefined);
  }

  return (
    <View className={wrapClass}>
      <Swiper
        className={prefix}
        circular={slides.length > 1}
        onChange={(e) => setActiveIndex(e.detail.current)}
      >
        {slides.map((src, index) => (
          <SwiperItem key={`${src}-${index}`} className={`${prefix}-item`}>
            {src ? (
              <Image
                className={`${prefix}-image`}
                src={src}
                mode={isContain ? 'aspectFit' : 'aspectFill'}
                alt={alt}
                onClick={previewable ? () => previewAt(index) : undefined}
              />
            ) : (
              <View className={`${prefix}-placeholder`} />
            )}
          </SwiperItem>
        ))}
      </Swiper>
      {slides.length > 1 ? (
        <View className={`${prefix}-dots`}>
          {slides.map((_, index) => (
            <View
              key={index}
              className={`${prefix}-dot${index === activeIndex ? ` ${prefix}-dot--active` : ''}`}
            />
          ))}
        </View>
      ) : null}
    </View>
  );
}