import { useState } from 'react'
import { View, Text } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import { fetchDestination, type Destination } from '../../services/api'
import './index.scss'

export default function DestinationPage() {
  const [d, setD] = useState<Destination | null>(null)
  const [err, setErr] = useState('')

  useLoad((q) => {
    const slug = String(q.slug || '')
    if (!slug) { setErr('缺少城市'); return }
    fetchDestination(slug).then(setD).catch((e) => setErr(e.message || '加载失败'))
  })

  if (err) return <View className='detail'><Text className='err'>{err}</Text></View>
  if (!d) return <View className='detail'><Text>加载中…</Text></View>

  return (
    <View className='detail'>
      <Text className='name'>{d.name}</Text>
      <Text className='meta'>{d.country}</Text>
      <Text className='tag'>{d.tagline}</Text>
      <View className='grid'>
        <View className='cell'><Text className='k'>月生活费</Text><Text className='v'>¥{d.cost ?? '—'}</Text></View>
        <View className='cell'><Text className='k'>网速</Text><Text className='v'>{d.speed ?? '—'} Mbps</Text></View>
        <View className='cell'><Text className='k'>评分</Text><Text className='v'>{d.rating ?? '—'}</Text></View>
        <View className='cell'><Text className='k'>气候</Text><Text className='v'>{d.climate || '—'}</Text></View>
      </View>
    </View>
  )
}