import React, { useState, useRef, useEffect } from 'react'
import { View, Text, Input, ScrollView, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { Loading } from '@nutui/nutui-react-taro'
import StadiumDetail, { StadiumDetailRef } from './StadiumDetail'
import { CommonPopup, CustomPopup } from '../../../../components'
import { getLocation } from '@/utils/locationUtils'
import PublishService from '@/services/publishService'
import images from '@/config/images'
import './SelectStadium.scss'

export interface Stadium {
  id?: string
  name: string
  address?: string
  distance_km?: number | null | undefined
  longitude?: number
  latitude?: number
}

interface SelectStadiumProps {
  visible: boolean
  onClose: () => void
  onConfirm: (stadium: Stadium | null) => void
}


const SelectStadium: React.FC<SelectStadiumProps> = ({
  visible,
  onClose,
  onConfirm
}) => {
  const [searchValue, setSearchValue] = useState('')
  const [selectedStadium, setSelectedStadium] = useState<Stadium | null>(null)
  const [showDetail, setShowDetail] = useState(false)
  const stadiumDetailRef = useRef<StadiumDetailRef>(null)
  const [stadiumList, setStadiumList] = useState<Stadium[]>([])
  const [loading, setLoading] = useState(false)
  // const [keyboardVisible, setKeyboardVisible] = useState(false);
  const initData = async () => {
    setLoading(true)
    try {
      const location = await getLocation()
      if (location.latitude && location.longitude) {
        const res = await PublishService.getStadiumList({
          seachOption: {
            latitude: location.latitude,
            longitude: location.longitude
          }
        })
        if (res.code === 0 && res.data) {
          setStadiumList(res.data.rows || [])
        }
      }
    } catch (error) {
      console.error('获取场馆列表失败:', error)
    } finally {
      setLoading(false)
    }
  }
  

  useEffect(() => {
    if (visible) {
      initData()
    }
  }, [visible])

  if (!visible) return null

  // 过滤场馆列表
  const filteredStadiums = stadiumList.filter(stadium =>
    stadium.name.toLowerCase().includes(searchValue.toLowerCase())
  )

  // 处理场馆选择
  const handleStadiumSelect = (stadium: Stadium) => {
    setSelectedStadium(stadium)
    setShowDetail(true)
  }

  const calculateDistance = (stadium: Stadium) => {
    const distance_km = stadium.distance_km
    if (!distance_km) return ''
    if (distance_km && distance_km > 1) {
      return distance_km.toFixed(1) + 'km'
    }
    return (distance_km * 1000).toFixed(0) + 'm'
  }


  // 处理搜索框输入
  const handleSearchInput = (e: any) => {
    setSearchValue(e.detail.value)
  }

  // 处理地图选择位置
  const handleMapLocation = () => {
    Taro.chooseLocation({
      success: (res) => {
        setSelectedStadium({
          name: res.name,
          address: res.address,
          longitude: res.longitude,
          latitude: res.latitude
        })
        setShowDetail(true)
      },
      fail: (err: { errMsg: string }) => {
        console.error('选择位置失败:', err)
        const { errMsg } = err || {};
        if (!errMsg.includes('fail cancel')) {
          Taro.showToast({
            title: errMsg,
            icon: "none",
          });
        }
      }
    })
  }

  // 处理确认
  const handleConfirm = () => {
    if (stadiumDetailRef.current) {
      const formData = stadiumDetailRef.current.getFormData()
      console.log('获取球馆表单数据:', formData)
      const { description, ...rest } = formData
      const { description: descriptionInfo} = description;
      if (descriptionInfo.length > 200 ) {
        Taro.showToast({
          title: `场地信息补充最多可输入200个字`,
          icon: "none",
        });
        return;
      };
      onConfirm({ ...rest, ...description })
      setSelectedStadium(null)
      setSearchValue('')
    }
  }





  // 处理取消
  const handleCancel = () => {
    onClose()
    setShowDetail(false)
    setSelectedStadium(null)
    setSearchValue('')
  }

  const handleDetailCancel = () => {
    setShowDetail(false)
    setSelectedStadium(null)
    setSearchValue('')
  }

  const handleItemLocation = (stadium: Stadium) => {
    if (stadium.latitude && stadium.longitude) {
      Taro.openLocation({
        latitude: stadium.latitude * 1,
        longitude: stadium.longitude * 1,
        name: stadium.name,
        address: stadium.address,
        success: (res) => {
          console.log(res, 'resres')
        }
      })
    }
  }

  const markSearchText = (text: string) => {
    if (!searchValue) return text
    return text.replace(
      new RegExp(searchValue, 'gi'),
      `<span class="highlight-text">${searchValue}</span>`
    )
  }
  // const handleAnyInput = (value) => {
  //   setKeyboardVisible(value)
  // }

  
 

  // 如果显示详情页面
  if (showDetail && selectedStadium) {
    return (
      <CustomPopup
        visible={visible}
        onClose={handleCancel}
        cancelText="返回"
        confirmText="确认"
        onCancel={handleDetailCancel}
        onConfirm={handleConfirm}
      >
        {/* 内容区域 */}
          <StadiumDetail
            ref={stadiumDetailRef}
            stadium={selectedStadium}
          />
      </CustomPopup>
    )
  }

  // 显示球馆列表
  return (
      <CommonPopup
        visible={visible}
        hideFooter
        onClose={handleCancel}
        cancelText="返回"
        confirmText="完成"
        className="select-stadium-popup"
        position="bottom"
        round
      >
       
      <View className='select-stadium'>
        {/* 搜索框 */}
        <View className='search-section'>
          <View className='search-wrapper'>
            <View className='search-bar'>
              <Image src={images.ICON_SEARCH} className='search-icon' />
              <Input
                className='search-input'
                placeholder='搜索'
                placeholderClass='search-placeholder'
                value={searchValue}
                onInput={handleSearchInput}
              />
              {searchValue && (
                <View className='clear-btn' onClick={() => setSearchValue('')}>
                  <Image src={images.ICON_REMOVE} className='clear-icon' />
                </View>
              )}
            </View>
            {
              !searchValue && (
                <View className='map-btn' onClick={handleMapLocation}>
                  <Image src={images.ICON_MAP} className='map-icon' />
                  <Text className='map-text'>地图</Text>
                </View>
              )
            }
          </View>
        </View>

        {/* 热门球场标题 */}
        <View className='hot-section'>
          <View className='hot-header'>
            <Text className='hot-title'>热门球场</Text>
            <View className='hot-stadium-line'></View>
            <View className='booking-section'>
              <Text className='booking-title'>预定球场</Text>
              <Text className='booking-status'>敬请期待</Text>
            </View>
          </View>
        </View>
         {
          loading ? (
            <View className='stadium-item-loading'>
              <Loading type="circular" className='loading-icon'>加载中</Loading>
            </View>
          ) : (
            <ScrollView className='stadium-list'    refresherBackground="#FAFAFA"
              scrollWithAnimation
              enhanced
              showScrollbar={false}  
              scrollY>
              {filteredStadiums.map((stadium) => (
                <View
                  key={stadium.id}
                  className={`stadium-item ${selectedStadium?.id === stadium.id ? 'selected' : ''}`}
                  onClick={() => handleStadiumSelect(stadium)}
                >
                  <View className='stadium-item-left'>
                    <Image src={images.ICON_STADIUM} className='stadium-icon' />
                  </View>
                  <View className='stadium-item-right'>
                    <View className='stadium-name' dangerouslySetInnerHTML={{ __html: markSearchText(stadium.name) }}></View>
                    <View className='stadium-address'>
                      <Text 
                        className='stadium-distance'
                        onClick={(e) => { 
                          e.stopPropagation() 
                          handleItemLocation(stadium) 
                        }}
                      >
                        {calculateDistance(stadium)} · 
                      </Text>
                      <Text 
                        className='stadium-address-text'
                        onClick={(e) => { 
                          e.stopPropagation() 
                          handleItemLocation(stadium) 
                        }}
                      >
                        {stadium.address}
                      </Text>
                      <Image src={images.ICON_ARRORW_SMALL} className='stadium-map-icon' />
                  </View>
                  </View>
                  
                </View>
              ))}
            {searchValue && (
              <View className='stadium-item map-search-item' onClick={handleMapLocation}>
                <View className='stadium-item-left'>
                  <Image src={images.ICON_MAP_SEARCH} className='stadium-icon' />
                </View>
                <View className='stadium-item-right'>
                  <View className='stadium-name'>没有找到球场？去地图定位</View>
                  <View className='stadium-address'>
                    <Text className='map-search-text'>腾讯地图</Text>
                    <Image src={images.ICON_ARRORW_SMALL} className='stadium-map-icon' />
                  </View>
                </View>
              </View>
            )}
            </ScrollView>
          )
         }
        {/* 场馆列表 */}
        
      </View>
    </CommonPopup>
  )
}

export default SelectStadium