import React, { useState } from 'react'
import { View, Text, ScrollView, Input, Textarea } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { Button, Radio, RadioGroup, Picker } from '@nutui/nutui-react-taro'
import { createApp } from '@/api/developer'
import { APP_TYPE_NAME } from '@/types/developer'
import './create.scss'

const AppCreate: React.FC = () => {
  const [formData, setFormData] = useState({
    name: '',
    type: 20 as number, // 微信小程序
    description: '',
  })
  const [loading, setLoading] = useState(false)

  const appTypes = [
    { value: 10, label: '网站' },
    { value: 20, label: '微信小程序' },
    { value: 30, label: '抖音小程序' },
    { value: 40, label: '百度小程序' },
    { value: 50, label: '支付宝小程序' },
    { value: 60, label: 'Android APP' },
    { value: 70, label: 'iOS APP' },
    { value: 100, label: '插件' },
  ]

  // 更新表单数据
  const updateField = (field: string, value: any) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

  // 提交表单
  const handleSubmit = async () => {
    if (!formData.name.trim()) {
      Taro.showToast({ title: '请输入应用名称', icon: 'none' })
      return
    }

    try {
      setLoading(true)
      await createApp(formData)
      Taro.showToast({ title: '创建成功', icon: 'success' })
      setTimeout(() => {
        Taro.navigateBack()
      }, 1500)
    } catch (error) {
      console.error('创建失败', error)
      Taro.showToast({ title: '创建失败', icon: 'none' })
    } finally {
      setLoading(false)
    }
  }

  return (
    <View className="app-create-page">
      <ScrollView scrollY className="app-create-page__scroll">
        <View className="form">
          {/* 应用名称 */}
          <View className="form__group">
            <View className="form__label">
              <Text className="form__labelText">应用名称 *</Text>
            </View>
            <Input
              className="form__input"
              placeholder="请输入应用名称"
              value={formData.name}
              onInput={(e) => updateField('name', e.detail.value)}
              maxlength={50}
            />
          </View>

          {/* 应用类型 */}
          <View className="form__group">
            <View className="form__label">
              <Text className="form__labelText">应用类型 *</Text>
            </View>
            <RadioGroup value={String(formData.type)} onChange={(v) => updateField('type', Number(v))}>
              <View className="type-grid">
                {appTypes.map((type) => (
                  <View key={type.value} className="type-item">
                    <Radio value={String(type.value)}>
                      <Text className="type-item__text">{type.label}</Text>
                    </Radio>
                  </View>
                ))}
              </View>
            </RadioGroup>
          </View>

          {/* 应用描述 */}
          <View className="form__group">
            <View className="form__label">
              <Text className="form__labelText">应用描述</Text>
            </View>
            <Textarea
              className="form__textarea"
              placeholder="请输入应用描述（选填）"
              value={formData.description}
              onInput={(e) => updateField('description', e.detail.value)}
              maxlength={200}
              autoHeight
            />
          </View>
        </View>
      </ScrollView>

      {/* 底部按钮 */}
      <View className="form__footer">
        <Button type="primary" block loading={loading} onClick={handleSubmit}>
          创建应用
        </Button>
      </View>
    </View>
  )
}

export default AppCreate
