"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { ImageUpload } from "@/components/shared/image-upload";
import { ArrowLeft, Loader2 } from "lucide-react";

export default function NewNews() {
  const router = useRouter();
  const [title, setTitle] = useState("");
  const [lead, setLead] = useState("");
  const [content, setContent] = useState("");
  const [image, setImage] = useState("");
  const [isPinned, setIsPinned] = useState(false);
  const [boardId, setBoardId] = useState("");
  const [sportId, setSportId] = useState("");
  const [boards, setBoards] = useState<{ id: string; name: string }[]>([]);
  const [sports, setSports] = useState<{ id: string; name: string }[]>([]);
  const [error, setError] = useState("");
  const [submitting, setSubmitting] = useState(false);

  useEffect(() => {
    const token = localStorage.getItem("auth_token");
    Promise.all([
      fetch("/api/admin/boards", { headers: { Authorization: `Bearer ${token}` } }).then(r => r.json()),
      fetch("/api/sports", { headers: { Authorization: `Bearer ${token}` } }).then(r => r.json()),
    ]).then(([b, s]) => {
      if (Array.isArray(b)) setBoards(b);
      if (Array.isArray(s)) setSports(s);
    }).catch(() => {});
  }, []);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");
    if (!title.trim()) { setError("عنوان را وارد کنید"); return; }

    setSubmitting(true);
    const token = localStorage.getItem("auth_token");
    try {
      const res = await fetch("/api/news", {
        method: "POST",
        headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
        body: JSON.stringify({
          title: title.trim(),
          lead: lead.trim() || undefined,
          content: content.trim() || undefined,
          image: image || undefined,
          isPinned,
          boardId: boardId || null,
          sportId: sportId || null,
        }),
      });
      if (!res.ok) throw new Error("خطا");
      router.push("/dashboard/admin/news");
      router.refresh();
    } catch {
      setError("خطا در ایجاد خبر");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="max-w-3xl mx-auto">
      <button
        onClick={() => router.push("/dashboard/admin/news")}
        className="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-900 mb-4 transition-colors"
      >
        <ArrowLeft className="h-4 w-4" />
        بازگشت
      </button>

      <h1 className="text-2xl font-bold text-gray-900 mb-6">خبر جدید</h1>

      <form onSubmit={handleSubmit} className="space-y-6">
        <div className="border rounded-xl p-6 bg-white space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">عنوان</label>
            <input
              className="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#2563EB]/20 focus:border-[#2563EB]"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              placeholder="عنوان خبر"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">لید</label>
            <textarea
              className="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#2563EB]/20 focus:border-[#2563EB] min-h-[80px]"
              value={lead}
              onChange={(e) => setLead(e.target.value)}
              placeholder="خلاصه خبر..."
            />
          </div>

          <ImageUpload label="تصویر خبر" value={image} onChange={setImage} />

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">محتوا</label>
            <textarea
              className="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#2563EB]/20 focus:border-[#2563EB] min-h-[200px]"
              value={content}
              onChange={(e) => setContent(e.target.value)}
              placeholder="متن خبر..."
            />
          </div>

          <div className="grid md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">هیئت ورزشی (اختیاری)</label>
              <select
                className="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#2563EB]/20 focus:border-[#2563EB]"
                value={boardId}
                onChange={(e) => setBoardId(e.target.value)}
              >
                <option value="">همه هیئت‌ها</option>
                {boards.map((b) => <option key={b.id} value={b.id}>{b.name}</option>)}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">رشته ورزشی (اختیاری)</label>
              <select
                className="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#2563EB]/20 focus:border-[#2563EB]"
                value={sportId}
                onChange={(e) => setSportId(e.target.value)}
              >
                <option value="">همه رشته‌ها</option>
                {sports.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
              </select>
            </div>
          </div>

          <label className="flex items-center gap-2 cursor-pointer">
            <input
              type="checkbox"
              className="w-4 h-4 rounded border-gray-300 text-[#2563EB] focus:ring-[#2563EB]/20"
              checked={isPinned}
              onChange={(e) => setIsPinned(e.target.checked)}
            />
            <span className="text-sm text-gray-700">خبر ویژه (پین شده)</span>
          </label>
        </div>

        {error && <div className="text-sm text-red-600 bg-red-50 p-3 rounded-lg">{error}</div>}

        <div className="flex gap-3">
          <Button type="submit" className="bg-[#2563EB] hover:bg-[#1D4ED8] text-white flex-1" disabled={submitting}>
            {submitting ? <Loader2 className="h-4 w-4 animate-spin" /> : "ایجاد خبر"}
          </Button>
          <Button variant="outline" className="flex-1" onClick={() => router.push("/dashboard/admin/news")}>
            انصراف
          </Button>
        </div>
      </form>
    </div>
  );
}