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

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

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

  const typeMap: Record<string, string> = {
    software: '软件课程',
    hardware: '硬件课程',
    incubation: '产品商业孵化'
  }

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

  const handleLaunch = () => {
    if (!detail) return
    Taro.navigateTo({
      url: `/pages/order/checkout?id=${detail.id}&type=course`
    })
  }

  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'>
      <ScrollView scrollY className='scroll-content'>
        {/* 封面图 */}
        {detail.cover_image_url && (
            <Image src={detail.cover_image_url} className='cover-image' mode='aspectFill' />
        )}

        <View className='content-wrapper'>
            {/* 标题区 */}
            <View className='header-section'>
                <Text className='title'>{detail.title}</Text>
                <View className='tags-row'>
                    <Text className='tag'>{typeMap[detail.course_type] || 'VB课程'}</Text>
                    {detail.tag && <Text className='tag highlight'>{detail.tag}</Text>}
                </View>
                <Text className='price'>¥{detail.price}</Text>
            </View>

            {/* 讲师信息 */}
            <View className='section instructor-section'>
                <Text className='section-title'>讲师介绍</Text>
                <View className='instructor-row'>
                    {detail.instructor_avatar_url ? (
                        <Image src={detail.instructor_avatar_url} className='avatar' mode='aspectFill' />
                    ) : (
                        <View className='avatar-placeholder'>
                            <Text>讲师</Text>
                        </View>
                    )}
                    <View className='instructor-info'>
                        <Text className='name'>{detail.instructor} <Text className='title-tag'>{detail.instructor_title}</Text></Text>
                        <Text className='desc'>{detail.instructor_desc}</Text>
                    </View>
                </View>
            </View>

            {/* 课程信息 */}
            <View className='section info-grid'>
                <View className='grid-item'>
                    <Text className='label'>时长</Text>
                    <Text className='value'>{detail.duration}</Text>
                </View>
                <View className='grid-item'>
                    <Text className='label'>课时</Text>
                    <Text className='value'>{detail.lesson_count}节</Text>
                </View>
                <View className='grid-item'>
                    <Text className='label'>难度</Text>
                    <Text className='value'>中级</Text>
                </View>
            </View>

            {/* 课程简介 */}
            <View className='section'>
                <Text className='section-title'>课程简介</Text>
                <Text className='desc-text'>{detail.description}</Text>
            </View>

            {/* 详情长图 */}
            <View className='section detail-images'>
                <Text className='section-title'>课程详情</Text>
                {detail.display_detail_image || detail.detail_image_url ? (
                    <Image 
                        src={detail.detail_image_url || detail.display_detail_image} 
                        className='detail-long-image' 
                        mode='widthFix' 
                    />
                ) : (
                    <View className='placeholder-box'>
                        <Text>暂无详情长图</Text>
                    </View>
                )}
            </View>
        </View>
      </ScrollView>

      {/* 底部栏 */}
      <View className='bottom-bar'>
        <View className='price-container'>
            <Text className='label'>总价:</Text>
            <Text className='amount'>¥{detail.price}</Text>
        </View>
        <Button className='btn-buy' onClick={handleLaunch}>立即报名</Button>
      </View>
    </View>
  )
}
