import { useEffect } from 'react'
import { Dialog, Form, Input, Switch, Select } from 'tdesign-react'
import type { Provider } from '@/types'
import type { SubmitContext } from 'tdesign-react/es/form/type'

interface ProviderFormValues {
  id: string
  name: string
  apiKey: string
  baseUrl: string
  protocol: 'openai' | 'anthropic'
  enabled: boolean
}

interface ProviderFormProps {
  open: boolean
  provider?: Provider
  onSave: (values: ProviderFormValues) => Promise<void> | void
  onCancel: () => void
  loading: boolean
}

export function ProviderForm({ open, provider, onSave, onCancel, loading }: ProviderFormProps) {
  const [form] = Form.useForm()
  const isEdit = !!provider

  useEffect(() => {
    if (open && form) {
      if (provider) {
        form.setFieldsValue({
          id: provider.id,
          name: provider.name,
          apiKey: provider.apiKey,
          baseUrl: provider.baseUrl,
          protocol: provider.protocol,
          enabled: provider.enabled,
        })
      } else {
        form.reset()
        form.setFieldsValue({ enabled: true, protocol: 'openai' })
      }
    }
  }, [open, provider])

  const handleSubmit = (context: SubmitContext) => {
    if (context.validateResult === true && form) {
      const values = form.getFieldsValue(true) as ProviderFormValues
      onSave(values)
    }
  }

  return (
    <Dialog
      header={isEdit ? '编辑供应商' : '添加供应商'}
      visible={open}
      placement='center'
      width='520px'
      closeOnOverlayClick={false}
      closeOnEscKeydown={false}
      lazy={false}
      onConfirm={() => {
        form?.submit()
        return false
      }}
      onClose={onCancel}
      confirmLoading={loading}
      confirmBtn='保存'
      cancelBtn='取消'
    >
      <Form form={form} layout='vertical' onSubmit={handleSubmit}>
        <Form.FormItem label='ID' name='id' rules={[{ required: true, message: '请输入供应商 ID' }]}>
          <Input disabled={isEdit} placeholder='例如: openai' />
        </Form.FormItem>

        <Form.FormItem label='名称' name='name' rules={[{ required: true, message: '请输入名称' }]}>
          <Input placeholder='例如: OpenAI' />
        </Form.FormItem>

        <Form.FormItem label='API Key' name='apiKey' rules={[{ required: true, message: '请输入 API Key' }]}>
          <Input placeholder='sk-...' />
        </Form.FormItem>

        <Form.FormItem
          label='Base URL'
          name='baseUrl'
          rules={[
            { required: true, message: '请输入 Base URL' },
            { url: true, message: '请输入有效的 URL' },
          ]}
        >
          <Input placeholder='例如: https://api.openai.com/v1' />
        </Form.FormItem>

        <Form.FormItem label='协议' name='protocol' rules={[{ required: true, message: '请选择协议' }]}>
          <Select>
            <Select.Option value='openai'>OpenAI</Select.Option>
            <Select.Option value='anthropic'>Anthropic</Select.Option>
          </Select>
        </Form.FormItem>

        <Form.FormItem label='启用' name='enabled'>
          <Switch />
        </Form.FormItem>
      </Form>
    </Dialog>
  )
}