'use client'

import { useState } from "react"
import { useRouter } from "next/navigation"

export default function AgentForm({
  categories,
  agent,
}: {
  categories: { id: number; name: string }[]
  agent?: {
    id?: number
    name: string
    slug: string
    description: string
    icon?: string
    categoryId?: number
    features?: string
    hotQuestions?: string
    quickQuestions?: string
    difyApiUrl?: string
    difyApiKey?: string
    status?: string
    isFeatured?: boolean
    featuredOrder?: number
  }
}) {
  const router = useRouter()
  const [formData, setFormData] = useState({
    name: agent?.name || "",
    slug: agent?.slug || "",
    description: agent?.description || "",
    icon: agent?.icon || "",
    categoryId: agent?.categoryId || "",
    features: agent?.features || "",
    hotQuestions: agent?.hotQuestions ? JSON.parse(agent.hotQuestions).join('\n') : '',
    quickQuestions: agent?.quickQuestions ? JSON.parse(agent.quickQuestions).join('\n') : '',
    difyApiUrl: agent?.difyApiUrl || "",
    difyApiKey: agent?.difyApiKey || "",
    status: agent?.status || "active",
    isFeatured: agent?.isFeatured ?? false,
    featuredOrder: agent?.featuredOrder ?? 0,
  })
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")
  const [success, setSuccess] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setError("")

    try {
      const url = agent?.id
        ? `/api/admin/agents/${agent.id}`
        : "/api/admin/agents"

      const method = agent?.id ? "PUT" : "POST"

      const body = {
        ...formData,
        isFeatured: formData.isFeatured,
        featuredOrder: formData.featuredOrder,
        hotQuestions: JSON.stringify(formData.hotQuestions.split('\n').filter(q => q.trim())),
        quickQuestions: JSON.stringify(formData.quickQuestions.split('\n').filter(q => q.trim())),
      }

      const res = await fetch(url, {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      })

      if (res.ok) {
        setSuccess(true)
        await new Promise(r => setTimeout(r, 1000))
        router.push("/admin/agents")
      } else {
        const data = await res.json().catch(() => ({}))
        setError(data.error || "保存失败")
      }
    } catch (err) {
      setError("保存失败，请稍后重试")
    } finally {
      setLoading(false)
    }
  }

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

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            名称
          </label>
          <input
            type="text"
            required
            value={formData.name}
            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
            placeholder="智能客服助手"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Slug
          </label>
          <input
            type="text"
            required
            value={formData.slug}
            onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
            placeholder="smart-customer-service"
          />
        </div>
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          描述
        </label>
        <textarea
          required
          rows={4}
          value={formData.description}
          onChange={(e) => setFormData({ ...formData, description: e.target.value })}
          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
          placeholder="描述智能体的功能和特点..."
        />
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            图标 (Emoji)
          </label>
          <input
            type="text"
            value={formData.icon}
            onChange={(e) => setFormData({ ...formData, icon: e.target.value })}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
            placeholder="🤖"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            分类
          </label>
          <select
            value={formData.categoryId}
            onChange={(e) => setFormData({ ...formData, categoryId: e.target.value })}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
          >
            <option value="">请选择分类</option>
            {categories.map((cat) => (
              <option key={cat.id} value={cat.id}>
                {cat.name}
              </option>
            ))}
          </select>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            状态
          </label>
          <select
            value={formData.status}
            onChange={(e) => setFormData({ ...formData, status: e.target.value })}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
          >
            <option value="active">运行中</option>
            <option value="maintenance">维护中</option>
            <option value="inactive">未激活</option>
          </select>
        </div>
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          功能特性 (逗号分隔)
        </label>
        <input
          type="text"
          value={formData.features}
          onChange={(e) => setFormData({ ...formData, features: e.target.value })}
          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
          placeholder="智能问答, 知识库查询, 工单提交"
        />
      </div>

      <div className="bg-orange-50 border border-orange-200 rounded-xl p-4">
        <h3 className="text-sm font-semibold text-orange-800 mb-3">热门智能体配置</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <label className="flex items-center gap-3 cursor-pointer">
            <input
              type="checkbox"
              checked={formData.isFeatured}
              onChange={(e) => setFormData({ ...formData, isFeatured: e.target.checked })}
              className="w-5 h-5 text-orange-600 border-gray-300 rounded focus:ring-orange-500"
            />
            <span className="text-sm font-medium text-gray-700">设为热门智能体（展示在首页热门区域）</span>
          </label>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              排序（数字越小越靠前）
            </label>
            <input
              type="number"
              min={0}
              value={formData.featuredOrder}
              onChange={(e) => setFormData({ ...formData, featuredOrder: parseInt(e.target.value) || 0 })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
              placeholder="0"
            />
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            热点问题（每行一个）
          </label>
          <textarea
            rows={5}
            value={formData.hotQuestions}
            onChange={(e) => setFormData({ ...formData, hotQuestions: e.target.value })}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
            placeholder="养老政策有哪些最新变化？&#10;如何申请养老服务补贴？&#10;老年人健康管理需要注意什么？&#10;养老机构如何选择？"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            快捷提问（每行一个）
          </label>
          <textarea
            rows={5}
            value={formData.quickQuestions}
            onChange={(e) => setFormData({ ...formData, quickQuestions: e.target.value })}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
            placeholder="养老政策咨询&#10;养老机构推荐&#10;养老服务申请"
          />
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Dify API 地址
          </label>
          <input
            type="text"
            value={formData.difyApiUrl}
            onChange={(e) => setFormData({ ...formData, difyApiUrl: e.target.value })}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
            placeholder="https://api.dify.ai/v1"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Dify API Key
          </label>
          <input
            type="password"
            value={formData.difyApiKey}
            onChange={(e) => setFormData({ ...formData, difyApiKey: e.target.value })}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
            placeholder="app-xxxxxxxxxxxx"
          />
        </div>
      </div>

      {success && (
        <div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg text-sm">
          保存成功
        </div>
      )}

      {error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
          {error}
        </div>
      )}

      <div className="flex gap-4">
        <button
          type="submit"
          disabled={loading || success}
          className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 disabled:bg-blue-400"
        >
          {loading ? "保存中..." : "保存"}
        </button>
        <button
          type="button"
          onClick={() => window.history.back()}
          className="border border-gray-300 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-50"
        >
          取消
        </button>
      </div>
    </form>
  )
}