'use client'

import { useState } from 'react'
import { useAvatars } from '@/hooks/useAvatars'

interface AvatarFormProps {
  onSuccess: () => void
  onCancel: () => void
  initialName?: string
  initialDescription?: string
  avatarId?: string
}

export function AvatarForm({
  onSuccess,
  onCancel,
  initialName = '',
  initialDescription = '',
  avatarId,
}: AvatarFormProps) {
  const { createAvatar, updateAvatar } = useAvatars()
  const [name, setName] = useState(initialName)
  const [description, setDescription] = useState(initialDescription)
  const [submitting, setSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

    if (!name.trim()) {
      setError('请输入形象名称')
      return
    }

    try {
      setSubmitting(true)
      setError(null)

      if (avatarId) {
        await updateAvatar(avatarId, name.trim(), description.trim() || undefined)
      } else {
        await createAvatar(name.trim(), description.trim() || undefined)
      }

      onSuccess()
    } catch (err) {
      setError(err instanceof Error ? err.message : '操作失败')
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      {error && (
        <div className="rounded-lg bg-red-50 p-3 text-sm text-red-700">
          {error}
        </div>
      )}

      <div>
        <label
          htmlFor="name"
          className="block text-sm font-medium text-slate-700"
        >
          形象名称 *
        </label>
        <input
          id="name"
          type="text"
          value={name}
          onChange={e => setName(e.target.value)}
          placeholder="例如：可爱小龙虾"
          className="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"
          disabled={submitting}
        />
      </div>

      <div>
        <label
          htmlFor="description"
          className="block text-sm font-medium text-slate-700"
        >
          描述（可选）
        </label>
        <textarea
          id="description"
          value={description}
          onChange={e => setDescription(e.target.value)}
          placeholder="简单描述这个形象..."
          rows={3}
          className="mt-1 w-full resize-none rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"
          disabled={submitting}
        />
      </div>

      <div className="flex gap-2">
        <button
          type="submit"
          disabled={submitting}
          className="flex-1 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
        >
          {submitting ? '保存中...' : avatarId ? '更新' : '创建'}
        </button>
        <button
          type="button"
          onClick={onCancel}
          disabled={submitting}
          className="rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-50"
        >
          取消
        </button>
      </div>
    </form>
  )
}
