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

const ProjectCreate: React.FC = () => {
  const [formData, setFormData] = useState({
    name: '',
    type: 'basic' as 'basic' | 'pro' | 'enterprise',
    description: '',
  })
  const [loading, setLoading] = useState(false)

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

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

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

  // 获取类型说明
  const getTypeDesc = (type: string) => {
    const descs: Record<string, string> = {
      basic: '免费版本，包含基础功能，适合个人开发者',
      pro: '专业版本，功能完整，适合中小企业',
      enterprise: '企业版本，全功能支持，适合大型企业',
    }
    return descs[type] || ''
  }

  return (
    <View className="project-create-page">
      <ScrollView scrollY className="project-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={formData.type} onChange={(e) => updateField('type', e)}>
              <View className="type-options">
                <View className="type-option">
                  <Radio value="basic">
                    <View className="type-option__content">
                      <Text className="type-option__title">基础版</Text>
                      <Text className="type-option__desc">{getTypeDesc('basic')}</Text>
                    </View>
                  </Radio>
                </View>
                <View className="type-option">
                  <Radio value="pro">
                    <View className="type-option__content">
                      <Text className="type-option__title">专业版</Text>
                      <Text className="type-option__desc">{getTypeDesc('pro')}</Text>
                    </View>
                  </Radio>
                </View>
                <View className="type-option">
                  <Radio value="enterprise">
                    <View className="type-option__content">
                      <Text className="type-option__title">企业版</Text>
                      <Text className="type-option__desc">{getTypeDesc('enterprise')}</Text>
                    </View>
                  </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 ProjectCreate
