import {useMemo, useState} from 'react'
import Taro from '@tarojs/taro'
import {Input, Text, View} from '@tarojs/components'
import {Search} from '@nutui/icons-react-taro'
import './find.scss'

type SiteItem = {
  id: string
  cityName: string
  address: string
  phone: string
  contact: string
  distanceMeter: number
}

const MOCK_SITES: SiteItem[] = [
  {
    id: '1',
    cityName: '北京朝阳区网点',
    address: '地安门西大街（南门）',
    phone: '15878179339',
    contact: '刘先生',
    distanceMeter: 100
  },
  {
    id: '2',
    cityName: '兰州某某区网点',
    address: '地安门西大街（南门）',
    phone: '15878179339',
    contact: '黄先生',
    distanceMeter: 150
  },
  {
    id: '3',
    cityName: '合肥市某某区网点',
    address: '地安门西大街（南门）',
    phone: '15878179339',
    contact: '黄先生',
    distanceMeter: 250
  },
  {
    id: '4',
    cityName: '南宁市某某区网点',
    address: '广西壮族自治区南宁市良庆区五象新区五象大道403号富雅国际金融中心G1栋高层6006',
    phone: '15878179339',
    contact: '柳先生',
    distanceMeter: 1250
  }
]

const Find = () => {
  const [keyword, setKeyword] = useState<string>('')

  const filtered = useMemo(() => {
    const key = keyword.trim()
    if (!key) return MOCK_SITES
    return MOCK_SITES.filter((it) => it.cityName.includes(key))
  }, [keyword])

  const onNavigate = (item: SiteItem) => {
    Taro.showToast({title: `导航至：${item.cityName}（示例）`, icon: 'none'})
  }

  const onSearch = () => {
    Taro.showToast({title: '查询（示例）', icon: 'none'})
  }

  return (
    <View className='sitePage'>
      <View className='searchArea'>
        <View className='searchBox'>
          <Input
            className='searchInput'
            value={keyword}
            placeholder='请输入城市名称查询'
            placeholderClass='searchPlaceholder'
            confirmType='search'
            onInput={(e) => setKeyword(e.detail.value)}
            onConfirm={onSearch}
          />
          <View className='searchIconWrap' onClick={onSearch}>
            <Search size={18} color='#b51616' />
          </View>
        </View>
      </View>

      <View className='siteList'>
        {filtered.map((item) => (
          <View key={item.id} className='siteCard'>
            <View className='siteCardInner'>
              <View className='siteInfo'>
                <View className='siteRow siteRowTop'>
                  <Text className='siteLabel'>城市名称：</Text>
                  <Text className='siteValue siteValueStrong'>{item.cityName}</Text>
                </View>
                <View className='siteDivider' />
                <View className='siteRow'>
                  <Text className='siteLabel'>网点地址：</Text>
                  <Text className='siteValue'>{item.address}</Text>
                </View>
                <View className='siteRow'>
                  <Text className='siteLabel'>联系电话：</Text>
                  <Text className='siteValue'>{item.phone}</Text>
                </View>
                <View className='siteRow'>
                  <Text className='siteLabel'>联系人：</Text>
                  <Text className='siteValue'>{item.contact}</Text>
                </View>
              </View>

              <View className='siteSide' onClick={() => onNavigate(item)}>
                <View className='navArrow' />
                <Text className='distanceText'>距离{item.distanceMeter}米</Text>
              </View>
            </View>
          </View>
        ))}

        {filtered.length === 0 && (
          <View className='emptyWrap'>
            <Text className='emptyText'>暂无网点</Text>
          </View>
        )}
      </View>

      <View className='bottomSafe' />
    </View>
  )
}
export default Find