import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react'
import { View, Text, Image, Map, ScrollView } from '@tarojs/components'
import {  Avatar, Popover, ImagePreview } from '@nutui/nutui-react-taro'
import Taro, { useRouter, useShareAppMessage, useShareTimeline, useDidShow } from '@tarojs/taro'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
// 导入API服务
import { CommonPopup, withAuth } from '@/components'
import DetailService, { MATCH_STATUS} from '@/services/detailService'
import { getCurrentLocation, calculateDistance } from '@/utils/locationUtils'
import {
  useUserInfo,
  useUserActions,
} from '@/store/userStore'
import img from '@/config/images'
// import { getTextColorOnImage } from '../../utils'
import './index.scss'

dayjs.locale('zh-cn')

// 将·作为连接符插入到标签文本之间
function insertDotInTags(tags: string[]) {
  return tags.join('-·-').split('-')
}

function GameTags(props) {
  const { detail } = props
  const tags = [{
    name: '🕙 急招',
    icon: '',
  }, {
    name: '🔥 本周热门',
    icon: '',
  }, {
    name: '🎉 新活动',
    icon: '',
  }, {
    name: '官方组织',
    icon: '',
  }]
  return (
    <View className='detail-page-content-avatar-tags'>
      <View className='detail-page-content-avatar-tags-avatar'>
        {/* network image mock */}
        <Image className='detail-page-content-avatar-tags-avatar-image' src="https://img.yzcdn.cn/vant/cat.jpeg" />
      </View>
      <View className='detail-page-content-avatar-tags-tags'>
        {tags.map((tag, index) => (
          <View key={index} className='detail-page-content-avatar-tags-tags-tag'>
            {tag.icon && <Image src={tag.icon} />}
            <Text>{tag.name}</Text>
          </View>
        ))}
      </View>
    </View>
  )
}

type CourselItemType = {
  url: string
  width: number
  height: number
}
function Coursel(props) {
  const { detail } = props
  const [list, setList] = useState<CourselItemType[]>([])
  const [listWidth, setListWidth] = useState(0)
  const { image_list } = detail

  async function getImagesMsg (imageList) {
    const latest_list: CourselItemType[] = []
    const sys_info = await Taro.getSystemInfo()
    console.log(sys_info, 'info')
    const max_width = sys_info.screenWidth - 30
    const max_height = 240
    const current_aspect_ratio = max_width / max_height
    let container_width = 0
    for (const imageUrl of imageList) {
      const { width, height } = await Taro.getImageInfo({ src: imageUrl })
      if (width && height) {
        const aspect_ratio = width / height
        const latest_w_h = { width, height }
        if (aspect_ratio < current_aspect_ratio) {
          latest_w_h.width = max_height * aspect_ratio
          latest_w_h.height = max_height
        } else {
          latest_w_h.width = max_width
          latest_w_h.height = max_width / aspect_ratio
        }
        container_width += latest_w_h.width + 12
        latest_list.push({
          url: imageUrl,
          width: latest_w_h.width,
          height: latest_w_h.height,
        })
      }
    }
    setList(latest_list)
    setListWidth(container_width)
  }

  useEffect(() => { getImagesMsg(image_list || []) }, [image_list])

  return (
    <View className="detail-swiper-container">
      <View className="detail-swiper-scroll-container" style={{ width: listWidth + 'px' }}>
        {
          list.map((item, index) => {
            return (
              <View className='detail-swiper-item' key={index}>
                <Image
                  src={item.url}
                  mode="aspectFill"
                  className='detail-swiper-item-image'
                  style={{ width: item.width + 'px', height: item.height + 'px' }}
                />
              </View>
            )
          })
        }
      </View>
    </View>
  )
}

// 分享弹窗
const SharePopup = forwardRef(({ id, from }: { id: string, from: string }, ref) => {
  const [visible, setVisible] = useState(false)

  useImperativeHandle(ref, () => ({
    show: () => {
      setVisible(true)
    }
  }))

  // function handleShareToWechat() {
  //   useShareAppMessage(() => {
  //     return {
  //       title: '分享',
  //       path: `/pages/detail/index?id=${id}&from=share`,
  //     }
  //   })
  // }

  // function handleShareToWechatMoments() {
  //   useShareTimeline(() => {
  //     return {
  //       title: '分享',
  //       path: `/pages/detail/index?id=${id}&from=share`,
  //     }
  //   })
  // }

  // function handleSaveToLocal() {
  //   Taro.saveImageToPhotosAlbum({
  //     filePath: images[0],
  //     success: () => {
  //       Taro.showToast({ title: '保存成功', icon: 'success' })
  //     },
  //     fail: () => {
  //       Taro.showToast({ title: '保存失败', icon: 'none' })
  //     },
  //   })
  // }

  return (
    <CommonPopup
      title="分享"
      visible={visible}
      onClose={() => { setVisible(false) }}
      hideFooter
      style={{ minHeight: '100px' }}
    >
      <View catchMove className='share-popup-content'>
        分享卡片
      </View>
    </CommonPopup>
  )
})

// 底部操作栏
function StickyButton(props) {
  const { handleShare, handleJoinGame, detail } = props
  const userInfo = useUserInfo()
  const { id } = userInfo
  const { publisher_id, match_status, price } = detail || {}

  const role = Number(publisher_id) === id ? 'ownner' : 'visitor'
  return (
    <View className="sticky-bottom-bar">
      <View className="sticky-bottom-bar-share-and-comment">
        <View className='sticky-bottom-bar-share' onClick={handleShare}>
          <Image className='sticky-bottom-bar-share-icon' src={img.ICON_DETAIL_SHARE} />
          <Text className='sticky-bottom-bar-share-text'>分享</Text>
        </View>
        <View className='sticky-bottom-bar-share-and-comment-separator' />
        <View className='sticky-bottom-bar-comment' onClick={() => { Taro.showToast({ title: 'To be continued', icon: 'none' }) }}>
          <Image className='sticky-bottom-bar-comment-icon' src={img.ICON_DETAIL_COMMENT_DARK} />
          <Text className='sticky-bottom-bar-comment-text'>32</Text>
        </View>
      </View>
      <View className="sticky-bottom-bar-join-game" onClick={handleJoinGame}>
        <Text>🎾</Text>
        <Text>立即加入</Text>
        <View className='game-price'>
          <Text>¥ {price}</Text>
        </View>
      </View>
    </View>
  )
}

// 球局信息
function GameInfo(props) {
  const { detail, currentLocation } = props
  const { latitude, longitude, location, location_name, start_time, end_time } = detail || {}

  const openMap = () => {
    Taro.openLocation({
      latitude,   // 纬度（必填）
      longitude, // 经度（必填）
      name: location_name,   // 位置名（可选）
      address: location, // 地址详情（可选）
      scale: 15,            // 地图缩放级别（1-28）
    })
  }

  const [c_latitude, c_longitude] = currentLocation
  const distance = calculateDistance(c_latitude, c_longitude, latitude, longitude) / 1000

  const startTime = dayjs(start_time)
  const endTime = dayjs(end_time)
  const game_length = endTime.diff(startTime, 'minutes') / 60

  const startMonth = startTime.format('M')
  const startDay = startTime.format('D')
  const theDayOfWeek = startTime.format('dddd')
  const startDate = `${startMonth}月${startDay}日 ${theDayOfWeek}`
  const gameRange = `${startTime.format('HH:mm')} - ${endTime.format('HH:mm')}`


  return (
    <View className='detail-page-content-game-info'>
      {/* Date and Weather */}
      <View className='detail-page-content-game-info-date-weather'>
        {/* Calendar and Date time */}
        <View className='detail-page-content-game-info-date-weather-calendar-date'>
          {/* Calendar */}
          <View className='detail-page-content-game-info-date-weather-calendar-date-calendar'>
            <View className="month">{startMonth}月</View>
            <View className="day">{startDay}</View>
          </View>
          {/* Date time */}
          <View className='detail-page-content-game-info-date-weather-calendar-date-date'>
            <View className="date">{startDate}</View>
            <View className="venue-time">{gameRange} （{game_length}小时）</View>
          </View>
        </View>
        {/* Weather */}
        <View className='detail-page-content-game-info-date-weather-weather'>
          {/* Weather icon */}
          <View className='detail-page-content-game-info-date-weather-weather-icon'>
            <Image className="weather-icon" src={img.ICON_WEATHER_SUN} />
          </View>
          {/* Weather text and temperature */}
          <View className='detail-page-content-game-info-date-weather-weather-text-temperature'>
            <Text>28℃ - 32℃</Text>
          </View>
        </View>
      </View>
      {/* Place */}
      <View className='detail-page-content-game-info-place'>
        {/* venue location message */}
        <View className='location-message'>
          {/* location icon */}
          <View className='location-message-icon'>
            <Image className='location-message-icon-image' src={img.ICON_DETAIL_MAP} />
          </View>
          {/* location message */}
          <View className='location-message-text'>
            {/* venue name and distance */}
            <View className='location-message-text-name-distance' onClick={openMap}>
              <Text>{location_name || '-'}</Text>
              <Text>·</Text>
              <Text>{distance.toFixed(1)}km</Text>
              <Image className='location-message-text-name-distance-arrow' src={img.ICON_DETAIL_ARROW_RIGHT} />
            </View>
            {/* venue address */}
            <View className='location-message-text-address'>
              <Text>{location || '-'}</Text>
            </View>
          </View>
        </View>
        {/* venue map */}
        <View className='location-map'>
          {longitude && latitude && (
            <Map
              className='location-map-map'
              longitude={latitude}
              latitude={longitude}
              markers={[{ id: 1, latitude: longitude, longitude: latitude, iconPath: require('@/static/detail/icon-stark.svg'), width: 16, height: 16 }]}
              includePoints={[{ latitude: longitude, longitude: latitude }, { latitude: currentLocation[0], longitude: currentLocation[1] }]}
              includePadding={{ left: 50, right: 50, top: 50, bottom: 50 }}
              onError={() => {}}
              // hide business msg
              showLocation
              theme='dark'
            />
          )}
        </View>
      </View>
    </View>
  )
}

// 场馆信息
function VenueInfo(props) {
  const { detail } = props
  const [visible, setVisible] = useState(false)
  const { venue_description, venue_description_tag = [], venue_image_list = [] } = detail

  function showScreenShot() {
    setVisible(true)
  }
  function onClose() {
    setVisible(false)
  }

  function previewImage(current_url) {
    Taro.previewImage({
      current: current_url,
      urls: venue_image_list.map(c => c.url),
    })
  }
  return (
    <View className='detail-page-content-venue'>
      {/* venue detail title and venue ordered status */}
      <View className='venue-detail-title'>
        <Text>场馆详情</Text>
        {venue_image_list?.length > 0 ?
          <>
            <Text>·</Text>
            <View className="venue-reserve-status" onClick={showScreenShot}>
              <Text>已订场</Text>
              <Image className="venue-reserve-screenshot" src={img.ICON_DETAIL_ARROW_RIGHT} />
            </View>
          </>
          :
          ''
        }
      </View>
      {/* venue detail content */}
      <View className='venue-detail-content'>
        {/* venue detail tags */}
        <View className='venue-detail-content-tags'>
          {insertDotInTags(venue_description_tag).map((tag, index) => (
            <View key={index} className='venue-detail-content-tags-tag'>
              <Text>{tag}</Text>
            </View>
          ))}
        </View>
        {/* venue remarks */}
        <View className='venue-detail-content-remarks'>
          <Text>{venue_description}</Text>
        </View>
      </View>
      <CommonPopup
        visible={visible}
        onClose={onClose}
        round
        hideFooter
        position='bottom'
        zIndex={1001}
      >
        <View className="venue-screenshot-title">预定截图</View>
        <ScrollView
          scrollY
          className="venue-screenshot-scroll-view"
        >
          <View className="venue-screenshot-image-list">
            {venue_image_list.map(item => {
              return (
                <View className="venue-screenshot-image-item" onClick={previewImage.bind(null, item.url)}>
                  <Image className="venue-screenshot-image-item-image" src={item.url} />
                </View>
              )
            })}
          </View>
        </ScrollView>
      </CommonPopup>
    </View>
  )
}

function genNTRPRequirementText(min, max) {
  if (min && max) {
    return `${min} - ${max} 之间`
  } else if (max) {
    return `${max} 以上`
  }
  return '没有要求'
}
// 玩法要求
function GamePlayAndRequirement(props) {
  const { detail: { skill_level_min, skill_level_max, play_type, game_type } } = props

  const requirements = [
    {
      title: 'NTRP水平要求',
      desc: genNTRPRequirementText(skill_level_min, skill_level_max),
    },
    {
      title: '活动玩法',
      desc: play_type || '-',
    },
    {
      title: '人员构成',
      desc: game_type || '-',
    }
  ]
  return (
    <View className='detail-page-content-gameplay-requirements'>
      {/* title */}
      <View className="gameplay-requirements-title">
        <Text>玩法要求</Text>
      </View>
      {/* requirements */}
      <View className='gameplay-requirements'>
        {requirements.map((item, index) => (
          <View key={index} className='gameplay-requirements-item'>
            <Text className='gameplay-requirements-item-title'>{item.title}</Text>
            <Text className='gameplay-requirements-item-desc'>{item.desc}</Text>
          </View>
        ))}
      </View>
    </View>
  )
}

// 参与者
function Participants(props) {
  const { detail = {} } = props
  const participants = detail.participants || []
  const organizer_id = Number(detail.publisher_id)
  return (
    <View className='detail-page-content-participants'>
      <View className='participants-title'>
        <Text>参与者</Text>
        <Text>·</Text>
        <Text>剩余空位 3</Text>
      </View>
      <View className='participants-list'>
        {/* application */}
        <View className='participants-list-application' onClick={() => { Taro.showToast({ title: 'To be continued', icon: 'none' }) }}>
          <Image className='participants-list-application-icon' src={img.ICON_DETAIL_APPLICATION_ADD} />
          <Text className='participants-list-application-text'>申请加入</Text>
        </View>
        {/* participants list */}
        <ScrollView className='participants-list-scroll' scrollX>
          <View className='participants-list-scroll-content' style={{ width: `${participants.length * 103 + (participants.length - 1) * 8}px` }}>
            {participants.map((participant) => {
              const { user: { avatar_url, nickname, level, id: participant_user_id } } = participant
              const role = participant_user_id === organizer_id ? '组织者' : '参与者'
              return (
                <View key={participant.id} className='participants-list-item'>
                  <Avatar className='participants-list-item-avatar' src={avatar_url} />
                  <Text className='participants-list-item-name'>{nickname || '未知'}</Text>
                  <Text className='participants-list-item-level'>{level || '未知'}</Text>
                  <Text className='participants-list-item-role'>{role}</Text>
                </View>
              )
            })}
          </View>
        </ScrollView>
      </View>
    </View>
  )
}

function SupplementalNotes(props) {
  const { detail: { description, description_tag = [] } } = props
  return (
    <View className='detail-page-content-supplemental-notes'>
      <View className='supplemental-notes-title'>
        <Text>补充说明</Text>
      </View>
      <View className='supplemental-notes-content'>
        {/* supplemental notes tags */}
        <View className='supplemental-notes-content-tags'>
          {insertDotInTags(description_tag).map((tag, index) => (
            <View key={index} className='supplemental-notes-content-tags-tag'>
              <Text>{tag}</Text>
            </View>
          ))}
        </View>
        {/* supplemental notes content */}
        <View className='supplemental-notes-content-text'>
          <Text>{description}</Text>
        </View>
      </View>
    </View>
  )
}

function OrganizerInfo(props) {
  const recommendGames = [
    {
      title: '黄浦日场对拉',
      time: '2025-08-25 9:00',
      timeLength: '2小时',
      venue: '上海体育场',
      veuneType: '室外',
      distance: '1.2km',
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      applications: 10,
      checkedApplications: 3,
      levelRequirements: 'NTRP 3.5',
      playType: '双打',
    },
    {
      title: '黄浦夜场对拉',
      time: '2025-08-25 19:00',
      timeLength: '2小时',
      venue: '上海体育场',
      veuneType: '室外',
      distance: '1.2km',
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      applications: 10,
      checkedApplications: 3,
      levelRequirements: 'NTRP 3.5',
      playType: '双打',
    },
    {
      title: '黄浦全天对拉',
      time: '2025-08-25 9:00',
      timeLength: '12小时',
      venue: '上海体育场',
      veuneType: '室外',
      distance: '1.2km',
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      applications: 10,
      checkedApplications: 3,
      levelRequirements: 'NTRP 3.5',
      playType: '双打',
    },
  ]
  return (
    <View className='detail-page-content-organizer-recommend-games'>
      {/* orgnizer title */}
      <View className='organizer-title'>
        <Text>组织者</Text>
      </View>
      {/* organizer avatar and name */}
      <View className='organizer-avatar-name'>
        <Avatar className='organizer-avatar-name-avatar' src="https://img.yzcdn.cn/vant/cat.jpeg" />
        <View className='organizer-avatar-name-message'>
          <Text className='organizer-avatar-name-message-name'>Light</Text>
          <View className='organizer-avatar-name-message-stats'>
            <Text>已组织 8 次</Text>
            <View className='organizer-avatar-name-message-stats-separator' />
            <Text>NTRP 3.5</Text>
          </View>
        </View>
        <View className="organizer-actions">
          <View className="organizer-actions-follow">
            <Image className='organizer-actions-follow-icon' src={img.ICON_DETAIL_APPLICATION_ADD} />
            <Text className='organizer-actions-follow-text'>关注</Text>
          </View>
          <View className="organizer-actions-comment">
            <Image className='organizer-actions-comment-icon' src={img.ICON_DETAIL_COMMENT} />
          </View>
        </View>
      </View>
      {/* recommend games by organizer */}
      <View className='organizer-recommend-games'>
        <View className='organizer-recommend-games-title'>
          <Text>TA的更多活动</Text>
          <Image className='organizer-recommend-games-title-arrow' src={img.ICON_DETAIL_ARROW_RIGHT} />
        </View>
        <ScrollView className='recommend-games-list' scrollX>
          <View className='recommend-games-list-content'>
            {recommendGames.map((game, index) => (
              <View key={index} className='recommend-games-list-item'>
                {/* game title */}
                <View className='recommend-games-list-item-title'>
                  <Text>{game.title}</Text>
                  <Image className='recommend-games-list-item-title-arrow' src={img.ICON_DETAIL_ARROW_RIGHT} />
                </View>
                {/* game time and range */}
                <View className='recommend-games-list-item-time-range'>
                  <Text>{game.time}</Text>
                  <Text>{game.timeLength}</Text>
                </View>
                {/* game location、vunue、distance */}
                <View className='recommend-games-list-item-location-venue-distance'>
                  <Text>{game.venue}</Text>
                  <Text>·</Text>
                  <Text>{game.veuneType}</Text>
                  <Text>·</Text>
                  <Text>{game.distance}</Text>
                </View>
                {/* organizer avatar、applications、level requirements、play type */}
                <View className='recommend-games-list-item-addon'>
                  <Avatar className='recommend-games-list-item-addon-avatar' src={game.avatar} />
                  <View className='recommend-games-list-item-addon-message'>
                    <View className='recommend-games-list-item-addon-message-applications'>
                      <Text>报名人数 {game.checkedApplications}/{game.applications}</Text>
                    </View>
                    <View className='recommend-games-list-item-addon-message-level-requirements'>
                      <Text>{game.levelRequirements}</Text>
                    </View>
                    <View className='recommend-games-list-item-addon-message-play-type'>
                      <Text>{game.playType}</Text>
                    </View>
                  </View>
                </View>
              </View>
            ))}
          </View>
        </ScrollView>
      </View>
    </View>
  )
}

function Index() {
  const [detail, setDetail] = useState<any>({})
  const { params } = useRouter()
  const [currentLocation, setCurrentLocation] = useState<[number, number]>([0, 0])
  const { id, from } = params
  const { fetchUserInfo, updateUserInfo } = useUserActions()

  const sharePopupRef = useRef<any>(null)

  useDidShow(async () => {
    await updateLocation()
    await fetchUserInfo()
    await fetchDetail()
  })

  const updateLocation = async () => {
    try {
      const location = await getCurrentLocation()
      setCurrentLocation([location.latitude, location.longitude])
      await updateUserInfo({ latitude: location.latitude, longitude: location.longitude })
    } catch (error) {
      console.error('用户位置更新失败', error)
    }
  }

  const fetchDetail = async () => {
    const res = await DetailService.getDetail(Number(id))
    if (res.code === 0) {
      setDetail(res.data)
    }
  }

  function handleShare() {
    sharePopupRef.current.show()
  }

  const handleJoinGame = () => {
    Taro.navigateTo({
      url: `/pages/orderCheck/index?gameId=${id}`,
    })
  }

  function handleBack() {
    const pages = Taro.getCurrentPages()
    if (pages.length <= 1) {
      Taro.redirectTo({
      url: '/pages/list/index',
    })
    } else {
      Taro.navigateBack()
    }
  }


  console.log('detail', detail)
  const backgroundImage = detail?.image_list?.[0] ? { backgroundImage: `url(${detail?.image_list?.[0]})` } : {}

  return (
    <View className='detail-page'>
      {/* custom navbar */}
      <view className="custom-navbar">
        <View className='detail-navigator'>
          <View className='detail-navigator-back' onClick={handleBack}>
            <Image className='detail-navigator-back-icon' src={img.ICON_ARROW_LEFT} />
          </View>
          <View className='detail-navigator-icon'>
            <Image className='detail-navigator-logo-icon' src={img.ICON_LOGO_GO} />
          </View>
        </View>
      </view>
      <View className='detail-page-bg' style={backgroundImage} />
      {/* swiper */}
      <Coursel detail={detail} />
      {/* content */}
      <View className='detail-page-content'>
        {/* avatar and tags */}
        <GameTags detail={detail} />
        {/* title */}
        <View className='detail-page-content-title'>
          <Text className='detail-page-content-title-text'>{detail.title}</Text>
        </View>
        {/* Date and Place and weather */}
        <GameInfo detail={detail} currentLocation={currentLocation} />
        {/* detail */}
        <VenueInfo detail={detail} />
        {/* gameplay requirements */}
        <GamePlayAndRequirement detail={detail} />
        {/* participants */}
        <Participants detail={detail} />
        {/* supplemental notes */}
        <SupplementalNotes detail={detail} />
        {/* organizer and recommend games by organizer */}
        <OrganizerInfo detail={detail} />
        {/* sticky bottom action bar */}
        <StickyButton handleShare={handleShare} handleJoinGame={handleJoinGame} detail={detail} />
        {/* share popup */}
        <SharePopup ref={sharePopupRef} id={id as string} from={from as string} />
      </View>
    </View>
  )
}

export default withAuth(Index)