"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";
import { useAuth } from "@/lib/stores/auth-store";

interface Sport {
  id: string;
  name: string;
}

export default function NewBoard() {
  const { user } = useAuth();
  const router = useRouter();
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [image, setImage] = useState("");
  const [sports, setSports] = useState<Sport[]>([]);
  const [selectedSports, setSelectedSports] = useState<string[]>([]);
  const [error, setError] = useState("");
  const [submitting, setSubmitting] = useState(false);

  useEffect(() => {
    if (user && user.role !== "SUPER_ADMIN") {
      router.push("/dashboard/admin/boards");
    }
  }, [user, router]);

  useEffect(() => {
    const token = localStorage.getItem("auth_token");
    fetch("/api/sports", {
      headers: { Authorization: `Bearer ${token}` },
    })
      .then((r) => r.json())
      .then((data) => { if (Array.isArray(data)) setSports(data); })
      .catch(() => setError("خطا در بارگذاری رشته‌ها"));
  }, []);

  const toggleSport = (id: string) => {
    setSelectedSports((prev) =>
      prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id]
    );
  };

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

    if (!name.trim()) { setError("نام هیئت را وارد کنید"); return; }

    setSubmitting(true);
    const token = localStorage.getItem("auth_token");
    try {
      const res = await fetch("/api/boards", {
        method: "POST",
        headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
        body: JSON.stringify({
          name: name.trim(),
          description: description.trim() || undefined,
          image: image || undefined,
          sportIds: selectedSports,
        }),
      });
      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.error || "خطا");
      }
      router.push("/dashboard/admin/boards");
      router.refresh();
    } catch (err) {
      setError(err instanceof Error ? err.message : "خطا");
    } finally {
      setSubmitting(false);
    }
  };

  const inputClass =
    "w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-900 focus:border-[#2563EB] focus:ring-1 focus:ring-[#2563EB]/20 outline-none transition-colors";

  return (
    <div className="max-w-2xl mx-auto">
      <button
        onClick={() => router.push("/dashboard/admin/boards")}
        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={inputClass}
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="مثال: هیئت فوتبال استان تهران"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">توضیحات</label>
            <textarea
              className={`${inputClass} min-h-[100px] resize-y`}
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="توضیحات هیئت..."
            />
          </div>

          <ImageUpload label="تصویر هیئت" value={image} onChange={setImage} />
        </div>

        <div className="border rounded-xl p-6 bg-white">
          <h2 className="font-semibold text-gray-900 mb-4">رشته‌های ورزشی</h2>
          {sports.length === 0 ? (
            <p className="text-sm text-gray-400">در حال بارگذاری...</p>
          ) : (
            <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
              {sports.map((sport) => (
                <label
                  key={sport.id}
                  className={`flex items-center gap-2 p-3 rounded-lg border cursor-pointer transition-colors ${
                    selectedSports.includes(sport.id)
                      ? "border-[#2563EB] bg-blue-50"
                      : "border-gray-200 hover:border-gray-300"
                  }`}
                >
                  <input
                    type="checkbox"
                    className="accent-[#2563EB]"
                    checked={selectedSports.includes(sport.id)}
                    onChange={() => toggleSport(sport.id)}
                  />
                  <span className="text-sm text-gray-700">{sport.name}</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
            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/boards")}>
            انصراف
          </Button>
        </div>
      </form>
    </div>
  );
}