'use client'

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

export default function NewsForm({
  news,
}: {
  news?: {
    id?: number
    title: string
    content: string
    type?: string
    published?: boolean
  }
}) {
  const router = useRouter()
  const [formData, setFormData] = useState({
    title: news?.title || "",
    content: news?.content || "",
    type: news?.type || "news",
    published: news?.published || false,
  })
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")

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

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

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

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

      if (res.ok) {
        router.push("/admin/news")
      } else {
        setError("保存失败")
      }
    } 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>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          标题
        </label>
        <input
          type="text"
          required
          value={formData.title}
          onChange={(e) => setFormData({ ...formData, title: 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>
        <textarea
          required
          rows={6}
          value={formData.content}
          onChange={(e) => setFormData({ ...formData, content: 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-2 gap-6">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            类型
          </label>
          <select
            value={formData.type}
            onChange={(e) => setFormData({ ...formData, type: 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="news">新闻</option>
            <option value="industry">行业洞察</option>
            <option value="cooperation">合作动态</option>
          </select>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            状态
          </label>
          <select
            value={formData.published ? "true" : "false"}
            onChange={(e) => setFormData({ ...formData, published: e.target.value === "true" })}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
          >
            <option value="true">立即发布</option>
            <option value="false">存为草稿</option>
          </select>
        </div>
      </div>

      <div className="flex gap-4">
        <button
          type="submit"
          disabled={loading}
          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>
  )
}