import React, { useState, useCallback, forwardRef, useImperativeHandle, useEffect } from 'react'
import Taro from '@tarojs/taro'
import { View, Text, Image, ScrollView } from '@tarojs/components'
import images from '@/config/images'
import TextareaTag from '@/components/TextareaTag'
// import CoverImageUpload, { type CoverImage } from '@/components/ImageUpload'
import UploadCover, { type CoverImageValue } from '@/components/UploadCover'
import { useKeyboardHeight } from '@/store/keyboardStore'
import { useDictionaryActions } from '@/store/dictionaryStore'
import { normalize_address } from '@/utils/locationUtils'

import './StadiumDetail.scss'

export interface Stadium {
  id?: string
  venue_id?: string
  name: string
  address?: string
  longitude?: number
  latitude?: number
  distance_km?: number | null
  court_type?: string
  court_surface?: string
  description?: string
  description_tag?: string[]
  venue_image_list?: CoverImageValue[]
}

interface StadiumDetailProps {
  stadium: Stadium
  onAnyInput?: (value: boolean) => void
}

// 定义暴露给父组件的方法接口
export interface StadiumDetailRef {
  getFormData: () => any
  setFormData: (data: any) => void
}


// 公共的标题组件
const SectionTitle: React.FC<{ title: string,prop: string }> = ({ title, prop }) => {
  if (prop === 'venue_image_list') {
    return (
      <View className='section-title'>
        <Text>{title}</Text>
        <View className='heart-wrapper'>
          <Image src={images.ICON_HEART_CIRCLE} className='heart-icon' />
          <View className='icon-bg'></View>
          <Text className='heart-text'>添加截图，平台会优先推荐</Text>
        </View>
      </View>
    )
  }
  return (
    <Text className='section-title'>{title}</Text>
  )
}

// 公共的容器组件
const SectionContainer: React.FC<{ title: string; children: React.ReactNode, prop: string, type?: string }> = ({ title, children, prop, type }) => (
  <View className={`venue-type-section ${type === 'image' ? 'image-wrap' : ''}`}>
    <SectionTitle title={title} prop={prop}/>
    <View className='option-buttons'>
      {children}
    </View>
  </View>
)

const StadiumDetail = forwardRef<StadiumDetailRef, StadiumDetailProps>(({
  stadium,
  onAnyInput
}, ref) => {
  const [openPicker, setOpenPicker] = useState(false);  //为了解决上传图片时按钮样式问题
  const [scrollTop, setScrollTop] = useState(0);
  const { getDictionaryValue } = useDictionaryActions()
  const court_type = getDictionaryValue('court_type') || []
  const court_surface = getDictionaryValue('court_surface') || []
  const supplementary_information = getDictionaryValue('supplementary_information') || []

  // 使用全局键盘状态
  const { keyboardHeight, isKeyboardVisible, addListener, initializeKeyboardListener } = useKeyboardHeight()

  const  stadiumInfo = [
    {
      label: '场地类型',
      options: court_type,
      prop: 'court_type',
      type: 'tags'
    },
    {
      label: '地面材质',
      options: court_surface,
      prop: 'court_surface',
      type: 'tags'
    },
    {
      label: '场地信息补充',
      options: supplementary_information,
      prop: 'description',
      type: 'textareaTag'
    },
    {
      label: '场地预定截图',
      options: ['有其他场地信息可备注'],
      prop: 'venue_image_list',
      type: 'image'
    }
  ]
  const [formData, setFormData] = useState({
    name: stadium.name,
    address: stadium.address,
    latitude: stadium.latitude,
    longitude: stadium.longitude,
    istance: stadium.distance_km,
    court_type: court_type[0] || '',
    court_surface: court_surface[0] || '',
    additionalInfo: '',
    venue_image_list: [] as CoverImageValue[],
    description:{
      description: '',
      description_tag: []
    },
    venue_id: stadium.id
  })

  // 暴露方法给父组件
  useImperativeHandle(ref, () => ({
    getFormData: () => formData,
    setFormData: (data: any) => setFormData(data)
  }), [formData, stadium])

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


  const handleMapLocation = () => {
    Taro.chooseLocation({
      success: (res) => {
        console.log(res,'resres');
        setFormData({
          ...formData,
          name: res.name,
          address: normalize_address(res.address || ''),
          latitude: res.latitude,
          longitude: res.longitude,
          istance: null
        })
      },
      fail: (err: { errMsg: string }) => {
        console.warn('选择位置失败:', err)
        const { errMsg } = err || {};
        if (!errMsg.includes('fail cancel')) {
          Taro.showToast({
            title: errMsg,
            icon: "none",
          });
        }
      }
    })
  }

  const updateFormData = useCallback((prop: string, value: any) => {
    setFormData(prev => ({ ...prev, [prop]: value }))
  }, [])

  const getSelectedByLabel = useCallback((label: string) => {
    if (label === '场地类型') return formData.court_type
    if (label === '地面材质') return formData.court_surface
    return ''
  }, [formData.court_type, formData.court_surface])



  // 使用全局键盘状态监听
  useEffect(() => {
    // 初始化全局键盘监听器
    initializeKeyboardListener()
    
    // 添加本地监听器
    const removeListener = addListener((height, visible) => {
      console.log('AiImportPopup 收到键盘变化:', height, visible)
    })

    return () => {
      removeListener()
    }
  }, [initializeKeyboardListener, addListener])

   const changeTextarea = (value: boolean) => {
    if (value) {
      // 先滚动到底部
      setScrollTop(140);
      // 使用 setTimeout 确保滚动后再更新 openPicker 
    }
   }

   const changePicker = (value:boolean) => {
    setOpenPicker(value);
   }

  console.log(stadium,'stadiumstadium');
  
  // 计算滚动区域的最大高度
  const scrollMaxHeight = isKeyboardVisible 
    ? `calc(100vh - ${keyboardHeight+40}px)` 
    : '60vh'
  
  return (
    <View className='stadium-detail'>
      <ScrollView 
        className='stadium-detail-scroll'  
        refresherBackground="#FAFAFA"  
        scrollY={!openPicker}
        scrollTop={scrollTop}
        style={{ maxHeight: scrollMaxHeight }}
      >
        {/* 已选球场 */}
      <View
        className={`stadium-item`}
        onClick={() => handleMapLocation()}
      >
        <View className='stadium-item-left'>
          <Image src={images.ICON_STADIUM} className='stadium-icon' />
        </View>
        <View className='stadium-item-right'>
          <View className='stadium-name'>{formData.name}</View>
          <View className='stadium-address'>
            <Text>{calculateDistance(formData.istance || null) + ' · '}</Text>
            <Text>{formData.address}</Text>
            <Image src={images.ICON_ARRORW_SMALL} className='stadium-map-icon' />
          </View>
        </View>
      </View>

      {stadiumInfo.map((item) => {
        if (item.type === 'tags') {
          const selected = getSelectedByLabel(item.label)
          return (
            <SectionContainer key={item.label} title={item.label} prop={item.prop}>
              {item.options.map((opt) => (
                <View
                  key={opt}
                  className={`option-btn ${selected === opt ? 'selected' : ''}`}
                  onClick={() => updateFormData(item.prop, opt)}
                >
                  <Text className='option-text'>{opt}</Text>
                </View>
              ))}
            </SectionContainer>
          )
        }

        if (item.type === 'textareaTag') {
          return (
            <SectionContainer key={item.label} title={item.label} prop={item.prop}>
              <View className='textarea-tag-container'>
                <TextareaTag
                  value={formData[item.prop]}
                  onChange={(value) => {
                    updateFormData(item.prop, value)
                  }}
                  // onBlur={() => {
                  // }}
                  onFocus={() => {
                    changeTextarea(true)
                  }}
                  placeholder='有其他场地信息可备注'
                  options={(item.options || []).map((o) => ({ label: o, value: o }))}
                />
              </View>
            </SectionContainer>
          )
        }

        if (item.type === 'image') {
          return (
            <SectionContainer key={item.label} title={item.label} prop={item.prop} type={item.type}>
              <UploadCover
                value={formData[item.prop]}
                changePicker={changePicker}
                uploadText="添加截图"
                onChange={(value) => {
                  if (value instanceof Function) {
                    const newValue = value(formData[item.prop])
                    updateFormData(item.prop, newValue)
                  } else {
                    updateFormData(item.prop, value)
                  }
                }}
                maxCount={9}
                source={['album', 'history']}
                align='left'
                tag="screenshot"
              />
            </SectionContainer>
          )
        }

        return null
      })}
    </ScrollView>
    </View>
  )
})

export default StadiumDetail