import Taro, {useShareAppMessage, useShareTimeline} from '@tarojs/taro'
import {Image, Swiper, SwiperItem, Text, View} from '@tarojs/components'
import iconShop from '@/assets/tabbar/shop.png'
import iconFind from '@/assets/tabbar/find.png'
import iconKefu from '@/assets/tabbar/kefu.png'
import './index.scss'

function Home() {
  useShareTimeline(() => {
    return {
      title: '易赊宝',
      path: `/pages/index/index`
    }
  })

  useShareAppMessage(() => {
    return {
      title: '易赊宝',
      path: `/pages/index/index`,
      success: function () {
        console.log('分享成功');
      },
      fail: function () {
        console.log('分享失败');
      }
    }
  })

  const onAction = (type: 'progress' | 'guide' | 'kefu') => {
    const textMap = {
      progress: '查询进度',
      guide: '业务指南',
      kefu: '在线客服'
    } as const

    Taro.showToast({title: `${textMap[type]}（示例）`, icon: 'none'})
  }

  const onDemand = () => {
    Taro.showToast({title: '发需求（示例）', icon: 'none'})
  }

  return (
    <View className='home'>
      <View className='welcomeCard'>
        <Text className='welcomeText'>欢迎来到易赊宝小程序~</Text>
      </View>

      <View className='bannerCard'>
        <Swiper
          className='bannerSwiper'
          circular
          autoplay
          interval={3500}
          duration={400}
          indicatorDots
          indicatorColor='rgba(255,255,255,0.55)'
          indicatorActiveColor='#ffffff'
        >
          <SwiperItem>
            <View className='bannerSlide bannerSlide1'>
              <View className='bannerLogo'>
                <Text className='bannerLogoText'>易赊宝</Text>
              </View>
              <Text className='bannerSlogan'>咨询加速回款，助力经济循环</Text>
            </View>
          </SwiperItem>
          <SwiperItem>
            <View className='bannerSlide bannerSlide2'>
              <View className='bannerLogo'>
                <Text className='bannerLogoText'>易赊宝</Text>
              </View>
              <Text className='bannerSlogan'>专业回款咨询服务，团队全国覆盖</Text>
            </View>
          </SwiperItem>
        </Swiper>
      </View>

      <View className='actionCard'>
        <View className='actionRow'>
          <View className='actionItem' onClick={() => onAction('progress')}>
            <View className='actionIcon'>
              <Image className='actionIconImg' src={iconShop} mode='aspectFit' />
            </View>
            <Text className='actionLabel'>查询进度</Text>
          </View>

          <View className='actionItem' onClick={() => onAction('guide')}>
            <View className='actionIcon'>
              <Image className='actionIconImg' src={iconFind} mode='aspectFit' />
            </View>
            <Text className='actionLabel'>业务指南</Text>
          </View>

          <View className='actionItem' onClick={() => onAction('kefu')}>
            <View className='actionIcon'>
              <Image className='actionIconImg' src={iconKefu} mode='aspectFit' />
            </View>
            <Text className='actionLabel'>在线客服</Text>
          </View>
        </View>
      </View>

      <View className='sectionCard'>
        <View className='sectionHeader'>
          <View className='sectionAccent' />
          <Text className='sectionTitle'>简介</Text>
          <Text className='sectionMore'>更多</Text>
        </View>

        <View className='introBox'>
          <Text className='introText'>
            易赊宝是提供专业回款咨询服务的小程序！我们重视企业需求，加速回款咨询服务能力助力企业资金流动畅通循环，服务团队全国覆盖。
          </Text>
        </View>

        <View className='ctaWrap'>
          <View className='ctaBtn' onClick={onDemand}>
            <Text className='ctaBtnText'>发需求</Text>
          </View>
          <Text className='ctaHint'>提出您的述求，免费获取解决方案</Text>
        </View>
      </View>

      <View className='sectionCard'>
        <View className='sectionHeader'>
          <View className='sectionAccent' />
          <Text className='sectionTitle'>常见问题解答</Text>
          <Text className='sectionMore'>更多&gt;&gt;</Text>
        </View>

        <View className='faqList'>
          {[
            {title: '常见问题一', date: '2025-11-12'},
            {title: '常见问题二', date: '2025-11-12'},
            {title: '常见问题三', date: '2025-11-12'},
            {title: '常见问题四', date: '2025-11-12'},
            {title: '常见问题五', date: '2025-11-12'}
          ].map((item, idx, arr) => (
            <View
              key={`${item.title}-${idx}`}
              className={`faqItem ${idx === arr.length - 1 ? 'faqItemLast' : ''}`}
            >
              <Text className='faqTitle'>{item.title}</Text>
              <Text className='faqDate'>{item.date}</Text>
            </View>
          ))}
        </View>
      </View>

      <View className='bottomSpacer' />
    </View>
  )
}

export default Home
