import { View, Text, Image, ScrollView } from '@tarojs/components'
import Taro, { useLoad, useShareAppMessage, useShareTimeline } from '@tarojs/taro'
import { useState } from 'react'
import { getCompetitions } from '../../api'
import './index.scss'

export default function CompetitionList() {
  const [competitions, setCompetitions] = useState<any[]>([])
  const [loading, setLoading] = useState(false)
  const [debugMsg, setDebugMsg] = useState('')

  useLoad(() => {
    fetchCompetitions()
  })

  /**
   * 配置并监听分享给朋友的功能
   */
  useShareAppMessage(() => {
    return {
      title: '赛事中心',
      path: '/pages/competition/index'
    }
  })

  /**
   * 配置并监听分享到朋友圈的功能
   */
  useShareTimeline(() => {
    return {
      title: '赛事中心',
      query: ''
    }
  })

  const fetchCompetitions = async () => {
    setLoading(true)
    setDebugMsg('开始加载...')
    try {
      console.log('Fetching competitions...')
      const res = await getCompetitions()
      console.log('Competitions res:', res)
      setDebugMsg(`请求成功: 数量 ${res?.results?.length}`)
      
      if (res && res.results) {
        setCompetitions(res.results)
      } else {
        setDebugMsg(`数据格式异常: ${JSON.stringify(res)}`)
      }
    } catch (e) {
      console.error('Fetch failed:', e)
      setDebugMsg(`请求失败: ${e.errMsg || JSON.stringify(e)}`)
      Taro.showToast({ title: '加载失败', icon: 'none' })
    } finally {
      setLoading(false)
    }
  }

  const goDetail = (id) => {
    Taro.navigateTo({ url: `/pages/competition/detail?id=${id}` })
  }

  const getStatusText = (status) => {
    const map = {
      'published': '即将开始',
      'registration': '报名中',
      'submission': '作品提交中',
      'judging': '评审中',
      'ended': '已结束',
      'draft': '草稿'
    }
    return map[status] || status
  }

  return (
    <View className='competition-page'>
      <ScrollView scrollY className='comp-list'>
        {competitions.map(item => (
          <View key={item.id} className='comp-card' onClick={() => goDetail(item.id)}>
            <Image 
              className='cover' 
              mode='aspectFill' 
              src={item.display_cover_image || 'https://via.placeholder.com/400x200'} 
            />
            <View className='info'>
              <View className='header'>
                <Text className='title'>{item.title}</Text>
                <Text className={`status ${item.status}`}>{getStatusText(item.status)}</Text>
              </View>
              <Text className='desc'>{item.description}</Text>
              <View className='footer'>
                <Text className='time'>
                  {item.start_time?.split('T')[0]} ~ {item.end_time?.split('T')[0]}
                </Text>
              </View>
            </View>
          </View>
        ))}
        {!loading && competitions.length === 0 && (
          <View className='empty'>
            <Text>暂无比赛</Text>
            <View style={{ marginTop: 20, color: '#666', fontSize: 12, wordBreak: 'break-all', padding: 20 }}>
              调试信息: {debugMsg}
            </View>
          </View>
        )}
      </ScrollView>
    </View>
  )
}