import React, { useEffect, useState } from 'react'
import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { ImageRectangle, ArrowRight } from '@nutui/icons-react-taro'
import { configWebsiteField } from '@/api/cms/cmsWebsiteField'
import type { Config } from '@/api/cms/cmsWebsiteField/model'
import './BrochureEntry.scss'

const BROCHURE_TITLE = '品牌画册'
const DEFAULT_BROCHURE_URL = 'https://book.yunzhan365.com/mdfy/tjcs/mobile/index.html'

const BrochureEntry: React.FC = () => {
  const [config, setConfig] = useState<Config>()

  useEffect(() => {
    configWebsiteField({})
      .then((data) => setConfig(data))
      .catch(() => undefined)
  }, [])

  const handleClick = () => {
    const url = config?.domain || DEFAULT_BROCHURE_URL

    Taro.setClipboardData({
      data: url,
      success: () => {
        Taro.showModal({
          title: '链接已复制',
          content: '请前往浏览器，粘贴链接即可查看完整画册。',
          showCancel: false,
          confirmText: '知道了'
        })
      },
      fail: () => {
        Taro.showToast({
          title: '复制失败，请稍后重试',
          icon: 'none'
        })
      }
    })
  }

  return (
    <View className="brochure-entry px-4" onClick={handleClick}>
      <View className="brochure-entry__card">
        <View className="brochure-entry__icon">
          <ImageRectangle size={22} color="#ffffff" />
        </View>

        <View className="brochure-entry__content flex flex-col">
          <Text className="text-lg font-semibold text-white">{BROCHURE_TITLE}</Text>
          <Text className="text-xs text-white">
            快速了解企业介绍、案例展示与门窗服务流程
          </Text>
        </View>

        <View className="brochure-entry__action">
          <Text className="text-sm font-semibold text-white">查看画册</Text>
          <ArrowRight size={14} color="#ffffff" />
        </View>
      </View>
    </View>
  )
}

export default BrochureEntry
