import { useEffect, useState } from 'react'
import { View, Text, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { Swiper } from '@nutui/nutui-react-taro'
import { ArrowRight } from '@nutui/icons-react-taro'
import { getBrochurePayload } from '@/pages/brochure/shared'
import './CatalogShowcase.scss'

function CatalogShowcase() {
  const [images, setImages] = useState<string[]>([])
  const [current, setCurrent] = useState(0)

  useEffect(() => {
    getBrochurePayload()
      .then(({ images: nextImages }) => {
        setImages(nextImages)
      })
      .catch(() => undefined)
  }, [])

  const handlePreviewCurrent = () => {
    if (!images.length) {
      Taro.showToast({
        title: '画册加载中',
        icon: 'none'
      })
      return
    }

    Taro.previewImage({
      current: images[current] || images[0],
      urls: images
    })
  }

  return (
    <>
      {/* 旧版品牌画册卡片保留，按需求先注释，不直接删除
      <View className="catalog-card" onClick={handleViewCatalog}>
        <View className="catalog-card__deco catalog-card__deco--1" />
        <View className="catalog-card__deco catalog-card__deco--2" />

        <View className="catalog-card__content">
          <View className="catalog-card__left">
            <Text className="text-xs  text-gray-400 tracking-widest">BRAND CATALOG</Text>
            <Text className="text-2xl font-bold text-white mb-1">品牌画册</Text>
            <Text className="text-xs text-gray-300 leading-relaxed" style={{ width: '90%' }}>
              了解南南佐顿门窗的完整产品线与定制方案
            </Text>
            <View className="catalog-card__cta">
              <Text className="text-base font-semibold text-white px-4">点击查看画册</Text>
              <ArrowRight size={16} color="#ffffff" />
            </View>
          </View>

          <View className="catalog-card__right">
            <View className="catalog-card__book">
              <View className="catalog-card__book-spine" />
              <View className="catalog-card__book-pages">
                <View className="catalog-card__book-page" />
                <View className="catalog-card__book-page" />
                <View className="catalog-card__book-page" />
              </View>
              <Text className="text-lg font-bold text-gray-300 px-1">2026</Text>
            </View>
          </View>
        </View>
      </View>
      */}

      <View className="catalog-swiper">
        <View className="catalog-swiper__header">
          <View className="catalog-swiper__title-wrap">
            <Text className="catalog-swiper__eyebrow">BRAND CATALOG</Text>
            <Text className="catalog-swiper__title">品牌画册</Text>
          </View>
          {/*<View className="catalog-swiper__cta">*/}
          {/*  <Text className="catalog-swiper__cta-text">点击预览当前图片</Text>*/}
          {/*  <ArrowRight size={14} color="#ffffff" />*/}
          {/*</View>*/}
        </View>

        <View className="catalog-swiper__body" onClick={handlePreviewCurrent}>
          {images.length ? (
            <Swiper
              defaultValue={0}
              indicator
              autoPlay={3000}
              height="180px"
              onChange={(event) => setCurrent(event.detail.current)}
            >
              {images.map((item, index) => (
                <Swiper.Item key={`${item}-${index}`}>
                  <View className="catalog-swiper__slide">
                    <Image
                      className="catalog-swiper__image"
                      src={item}
                      mode="aspectFill"
                      lazyLoad
                    />
                  </View>
                </Swiper.Item>
              ))}
            </Swiper>
          ) : (
            <View className="catalog-swiper__placeholder">
              <Text className="catalog-swiper__placeholder-text">画册加载中...</Text>
            </View>
          )}
        </View>
      </View>
    </>
  )
}

export default CatalogShowcase
