import { View, Text, Image } from '@tarojs/components'
import { Cell, CellGroup, Avatar, Tag } from '@nutui/nutui-react-taro'
import { useAppContext } from '@/hooks/useAppContext'
import './order.scss'

export default function Order() {
  const { theme, toggleTheme } = useAppContext()

  const techStack = [
    { name: 'Taro', version: '4.0.8', color: 'primary' },
    { name: 'React', version: '18.3.1', color: 'success' },
    { name: 'TypeScript', version: '5.7.2', color: 'warning' },
    { name: 'NutUI', version: '2.7.4', color: 'danger' },
    { name: 'TailwindCSS', version: '3.4.17', color: 'primary' }
  ]

  return (
    <View className='home-page p-4'>
      <View className='flex-center mb-6'>
        <Avatar
          size='large'
          src='https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/7362/5fc1f425E224AFA46/a13f0a3e12a比6b4.png'
        />
      </View>

      <CellGroup className='mb-4' title='项目信息'>
        <Cell title='项目名称' description='WebSopy Inc.' />
        <Cell title='当前主题' description={theme === 'light' ? '浅色模式 🌞' : '深色模式 🌙'} />
        <Cell
          title='切换主题'
          extra={
            <Tag type={theme === 'light' ? 'primary' : 'dark'}>
              点击切换
            </Tag>
          }
          onClick={toggleTheme}
        />
      </CellGroup>

      <CellGroup className='mb-4' title='技术栈'>
        {techStack.map((tech, index) => (
          <Cell
            key={index}
            title={tech.name}
            description={`v${tech.version}`}
            extra={
              <Tag type={tech.color as any}>{tech.name}</Tag>
            }
          />
        ))}
      </CellGroup>

      <View className='mt-4 p-4 bg-gray-50 rounded-lg'>
        <Text className='text-sm text-gray-500'>
          📦 已集成工具库：
        </Text>
        <View className='mt-2 flex flex-wrap gap-2'>
          <Tag type='primary' className='m-1'>Day.js</Tag>
          <Tag type='success' className='m-1'>Crypto-js</Tag>
          <Tag type='warning' className='m-1'>React Router</Tag>
        </View>
      </View>
    </View>
  )
}