"use client";

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

interface NewsItem {
  id: string;
  title: string;
  slug: string;
  lead: string | null;
  content: string | null;
  image: string | null;
  isPinned: boolean;
  isActive: boolean;
  boardId: string | null;
  sportId: string | null;
}

export default function EditNews() {
  const { slug } = useParams<{ slug: string }>();
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [title, setTitle] = useState("");
  const [lead, setLead] = useState("");
  const [content, setContent] = useState("");
  const [image, setImage] = useState("");
  const [isPinned, setIsPinned] = useState(false);
  const [isActive, setIsActive] = useState(true);
  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 [saving, setSaving] = useState(false);

  useEffect(() => {
    (async () => {
      const token = localStorage.getItem("auth_token");
      const [newsRes, boardsRes, sportsRes] = await Promise.all([
        fetch(`/api/news/${slug}`),
        fetch("/api/admin/boards", { headers: { Authorization: `Bearer ${token}` } }),
        fetch("/api/sports", { headers: { Authorization: `Bearer ${token}` } }),
      ]);
      if (newsRes.ok) {
        const item: NewsItem = await newsRes.json();
        setTitle(item.title);
        setLead(item.lead || "");
        setContent(item.content || "");
        setImage(item.image || "");
        setIsPinned(item.isPinned);
        setIsActive(item.isActive);
        setBoardId(item.boardId || "");
        setSportId(item.sportId || "");
      }
      if (boardsRes.ok) { const data = await boardsRes.json(); if (Array.isArray(data)) setBoards(data); }
      if (sportsRes.ok) { const data = await sportsRes.json(); if (Array.isArray(data)) setSports(data); }
      setLoading(false);
    })();
  }, [slug]);

  const handleSave = async () => {
    setError("");
    if (!title.trim()) { setError("عنوان را وارد کنید"); return; }

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

  if (loading) {
    return <div className="flex items-center justify-center h-64"><Loader2 className="h-6 w-6 animate-spin text-gray-400" /></div>;
  }

  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>

      <div 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)}
            />
          </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)}
            />
          </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>

          <div className="flex items-center gap-6">
            <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>
            <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={isActive}
                onChange={(e) => setIsActive(e.target.checked)}
              />
              <span className="text-sm text-gray-700">منتشر شده</span>
            </label>
          </div>
        </div>

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

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