import { View, Text, Image, Button } from '@tarojs/components'
import Taro, { useLoad, useShareAppMessage, useShareTimeline } from '@tarojs/taro'
import { useState } from 'react'
import { getServices } from '../../api'
import './index.scss'

export default function ServicesIndex() {
  const [services, setServices] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

  useLoad(() => {
    fetchServices()
  })

  const fetchServices = async () => {
    try {
      const res: any = await getServices()
      // Adapt API response if needed (res.data vs res)
      setServices(res.results || res)
    } catch (err) {
      console.error(err)
      Taro.showToast({ title: '加载失败', icon: 'none' })
    } finally {
      setLoading(false)
    }
  }

  useShareAppMessage(() => {
    return {
      title: 'AI 全栈解决方案',
      path: '/pages/services/index'
    }
  })

  useShareTimeline(() => {
    return {
      title: 'AI 全栈解决方案'
    }
  })

  const goDetail = (id: number) => {
    Taro.navigateTo({ url: `/pages/services/detail?id=${id}` })
  }

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

  return (
    <View className='page-container'>
      <View className='header'>
        <Text className='title'>AI 全栈<Text className='highlight'>解决方案</Text></Text>
        <Text className='subtitle'>从数据处理到模型部署，我们为您提供一站式 AI 基础设施服务。</Text>
        
        <View className='vc-promo-container'>
          <View className='vc-info-card' onClick={() => Taro.navigateTo({ url: '/pages/courses/index' })}>
            <View className='info-icon'>💡</View>
            <View className='info-content'>
              <Text className='info-title'>AI + VC 课程</Text>
              <Text className='info-desc'>深度解析 AI 如何赋能创投，掌握技术变现的核心逻辑</Text>
            </View>
          </View>

          <Button 
            className='nav-btn' 
            onClick={() => Taro.navigateTo({ url: '/pages/courses/index' })}
          >
            探索 VC 课程
            <Text className='arrow'>→</Text>
          </Button>
        </View>
      </View>

      <View className='service-grid'>
        {services.map((item) => (
          <View 
            key={item.id} 
            className='service-card'
            style={{ 
              border: `1px solid ${item.color}33`,
              boxShadow: `0 0 20px ${item.color}11`
            }}
            onClick={() => goDetail(item.id)}
          >
            <View className='hud-corner tl' style={{ borderColor: item.color }} />
            <View className='hud-corner br' style={{ borderColor: item.color }} />

            <View className='card-header'>
              <View className='icon-box' style={{ background: `${item.color}22` }}>
                {item.icon_url ? (
                   <Image src={item.icon_url} className='icon-img' mode='aspectFit' />
                ) : (
                   <View className='icon-placeholder' style={{ background: item.color }} />
                )}
              </View>
              <Text className='title'>{item.title}</Text>
            </View>

            <Text className='description'>{item.description}</Text>

            <View className='features'>
              {item.features && item.features.split('\n').map((feat: string, i: number) => (
                <View key={i} className='feature-item' style={{ color: item.color }}>
                  <View className='dot' style={{ background: item.color }} />
                  <Text>{feat}</Text>
                </View>
              ))}
            </View>

            <Button className='btn-more'>了解更多 {'>'}</Button>
          </View>
        ))}
      </View>

      <View className='process-section'>
        <Text className='section-title'>服务流程</Text>
        <View className='process-steps'>
           {[
            { title: '需求分析', desc: '深度沟通需求', id: 1 },
            { title: '数据准备', desc: '高效数据处理', id: 2 },
            { title: '模型训练', desc: '高性能算力', id: 3 },
            { title: '测试验证', desc: '多维精度测试', id: 4 },
            { title: '私有化部署', desc: '全栈落地部署', id: 5 }
          ].map((step) => (
            <View key={step.id} className='step-item'>
              <View className='step-icon'><Text>{step.id}</Text></View>
              <View className='step-content-wrapper'>
                <Text className='step-title'>{step.title}</Text>
                <Text className='step-desc'>{step.desc}</Text>
              </View>
            </View>
          ))}
        </View>
      </View>
    </View>
  )
}