"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 Sport {
  id: string;
  name: string;
}

interface BoardSport {
  id: string;
  sport: { id: string; name: string };
}

interface Board {
  id: string;
  name: string;
  description?: string;
  image?: string;
  isActive: boolean;
  sports: BoardSport[];
}

export default function EditBoard() {
  const { id } = useParams<{ id: string }>();
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [image, setImage] = useState("");
  const [isActive, setIsActive] = useState(true);
  const [sports, setSports] = useState<Sport[]>([]);
  const [selectedSports, setSelectedSports] = useState<string[]>([]);
  const [error, setError] = useState("");
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    (async () => {
      const token = localStorage.getItem("auth_token");
      try {
        const [boardRes, sportsRes] = await Promise.all([
          fetch(`/api/boards/${id}`, {
            headers: { Authorization: `Bearer ${token}` },
          }),
          fetch("/api/sports", { headers: { Authorization: `Bearer ${token}` } }),
        ]);

        if (boardRes.ok) {
          const board: Board = await boardRes.json();
          setName(board.name);
          setDescription(board.description || "");
          setImage(board.image || "");
          setIsActive(board.isActive);
          setSelectedSports(board.sports.map((bs) => bs.sport.id));
        }

        if (sportsRes.ok) {
          const data = await sportsRes.json();
          if (Array.isArray(data)) setSports(data);
        }
      } catch {
        setError("خطا در بارگذاری اطلاعات");
      } finally {
        setLoading(false);
      }
    })();
  }, [id]);

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

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

    setSaving(true);
    const token = localStorage.getItem("auth_token");
    try {
      const res = await fetch(`/api/boards/${id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
        body: JSON.stringify({
          name: name.trim(),
          description: description.trim() || undefined,
          image: image || undefined,
          isActive,
          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 {
      setSaving(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";

  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-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>

      <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={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>

        <div className="border rounded-xl p-6 bg-white flex items-center justify-between">
          <span className="text-sm font-medium text-gray-700">وضعیت هیئت</span>
          <label className="relative inline-flex items-center cursor-pointer">
            <input
              type="checkbox"
              className="sr-only peer"
              checked={isActive}
              onChange={(e) => setIsActive(e.target.checked)}
            />
            <div className="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-[#2563EB]" />
          </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
            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/boards")}>
            انصراف
          </Button>
        </div>
      </div>
    </div>
  );
}