import { View, Text, Button } from '@tarojs/components'
import Taro, { useLoad } from '@tarojs/taro'
import { useState } from 'react'
import { getARServiceDetail } from '../../api'
import './detail.scss'

export default function ARDetail() {
  const [detail, setDetail] = useState<any>(null)
  const [loading, setLoading] = useState(true)

  useLoad((options) => {
    if (options.id) fetchDetail(options.id)
  })

  const fetchDetail = async (id: string) => {
    try {
      const res: any = await getARServiceDetail(Number(id))
      setDetail(res)
    } catch (err) {
      console.error(err)
      Taro.showToast({ title: '加载失败', icon: 'none' })
    } finally {
      setLoading(false)
    }
  }

  const handleLaunch = () => {
    Taro.showModal({
      title: '提示',
      content: '请使用摄像头扫描空间以启动 AR 体验 (演示模式)',
      showCancel: false
    })
  }

  if (loading) return <View className='page-container'><Text style={{color:'#fff'}}>Loading...</Text></View>
  if (!detail) return <View className='page-container'><Text style={{color:'#fff'}}>Not Found</Text></View>

  return (
    <View className='page-container'>
      <Text className='title'>{detail.title}</Text>
      <Text className='desc'>{detail.description}</Text>

      <View className='ar-placeholder'>
        <Text className='icon'>📷</Text>
        <Text className='text'>AR 场景加载区域</Text>
      </View>

      <Button className='btn-launch' onClick={handleLaunch}>进入沉浸模式</Button>
    </View>
  )
}