import React, { useState } from 'react'
import { View, Text, Input, ScrollView } from '@tarojs/components'
import { Popup } from '@nutui/nutui-react-taro'
import Taro from '@tarojs/taro'
import StadiumDetail from './StadiumDetail'
import './SelectStadium.scss'

export interface Stadium {
  id: string
  name: string
  address?: string
}

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

const stadiumList: Stadium[] = [
  { id: '1', name: '静安网球馆', address: '静安区' },
  { id: '2', name: '芦湾体育馆', address: '芦湾区' },
  { id: '3', name: '静安网球馆', address: '静安区' },
  { id: '4', name: '徐汇游泳中心', address: '徐汇区' },
  { id: '5', name: '汇龙新城小区', address: '新城区' },
  { id: '6', name: '翠湖御苑小区', address: '翠湖区' },
  { id: '7', name: '仁恒河滨花园网球场', address: '浦东新区' },
  { id: '8', name: 'Our Tennis 东江球场', address: '浦东新区' },
  { id: '9', name: '上海琦梦网球俱乐部', address: '浦东新区' }
]

const SelectStadium: React.FC<SelectStadiumProps> = ({
  visible,
  onClose,
  onConfirm
}) => {
  const [searchValue, setSearchValue] = useState('')
  const [selectedStadium, setSelectedStadium] = useState<Stadium | null>(null)
  const [showDetail, setShowDetail] = useState(false)

  if (!visible) return null

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

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

  // 处理返回球馆列表
  const handleBackToList = () => {
    setShowDetail(false)
    setSelectedStadium(null)
  }

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

  // 处理地图选择位置
  const handleMapLocation = () => {
    Taro.chooseLocation({
      success: (res) => {
        console.log('选择位置成功:', res)
        // 可以根据位置信息搜索附近的场馆
        // 这里可以调用相关API获取附近场馆信息
        Taro.showToast({
          title: '位置选择成功',
          icon: 'success'
        })
      },
      fail: (err) => {
        console.error('选择位置失败:', err)
        Taro.showToast({
          title: '位置选择失败',
          icon: 'error'
        })
      }
    })
  }

  // 处理确认
  const handleConfirm = (stadium: Stadium, venueType: string, groundMaterial: string, additionalInfo: string) => {
    // 这里可以处理球馆详情的信息
    console.log('球馆详情:', { stadium, venueType, groundMaterial, additionalInfo })
    onConfirm(stadium)
    setShowDetail(false)
    setSelectedStadium(null)
    setSearchValue('')
  }

  // 处理球馆列表确认
  const handleListConfirm = () => {
    if (selectedStadium) {
      onConfirm(selectedStadium)
      setSelectedStadium(null)
      setSearchValue('')
    }
  }

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

  // 如果显示详情页面
  if (showDetail && selectedStadium) {
    return (
      <Popup
        visible={visible}
        position="bottom"
        round
        closeable={false}
        onClose={handleCancel}
        className="select-stadium-popup"
      >
        <StadiumDetail
          stadium={selectedStadium}
          onBack={handleBackToList}
          onConfirm={handleConfirm}
        />
      </Popup>
    )
  }

  // 显示球馆列表
  return (
    <Popup
      visible={visible}
      position="bottom"
      round
      closeable={false}
      onClose={handleCancel}
      className="select-stadium-popup"
    >
      <View className='select-stadium'>
        {/* 搜索框 */}
        <View className='search-section'>
          <View className='search-wrapper'>
            <View className='search-icon'>🔍</View>
            <Input
              className='search-input'
              placeholder='搜索'
              value={searchValue}
              onInput={handleSearchInput}
            />
            <View className='map-btn' onClick={handleMapLocation}>
              <Text className='map-icon'>📍</Text>
            </View>
          </View>
        </View>

        {/* 热门球场标题 */}
        <View className='hot-section'>
          <View className='hot-header'>
            <Text className='hot-title'>热门球场</Text>
            <View className='booking-section'>
              <Text className='booking-title'>预定球场</Text>
              <Text className='booking-status'>敬请期待</Text>
            </View>
          </View>
        </View>

        {/* 场馆列表 */}
        <ScrollView className='stadium-list' scrollY>
          {filteredStadiums.map((stadium) => (
            <View
              key={stadium.id}
              className={`stadium-item ${selectedStadium?.id === stadium.id ? 'selected' : ''}`}
              onClick={() => handleStadiumSelect(stadium)}
            >
              <Text className='stadium-name'>{stadium.name}</Text>
            </View>
          ))}
        </ScrollView>

        {/* 底部按钮 */}
        <View className='bottom-actions'>
          <View className='action-buttons'>
            <View className='cancel-btn' onClick={handleCancel}>
              <Text className='cancel-text'>取消</Text>
            </View>
            <View className='confirm-btn' onClick={handleListConfirm}>
              <Text className='confirm-text'>完成</Text>
            </View>
          </View>
        </View>
      </View>
    </Popup>
  )
}

export default SelectStadium