"use client";

import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Plus, Edit, X, Loader2, Trash2 } from "lucide-react";

interface Sport {
  id: string;
  name: string;
  description?: string;
  isActive: boolean;
  _count: { courses: number; coachSports: number };
  boards?: Array<{ board: { id: string; name: string } }>;
}

export default function AdminSports() {
  const [sports, setSports] = useState<Sport[]>([]);
  const [showModal, setShowModal] = useState(false);
  const [editTarget, setEditTarget] = useState<Sport | null>(null);
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const token = typeof window !== "undefined" ? localStorage.getItem("auth_token") : null;

  const load = () => {
    fetch("/api/sports?all=true", {
      headers: { Authorization: `Bearer ${token}` },
    })
      .then((r) => r.json())
      .then(setSports)
      .catch(() => {});
  };

  useEffect(load, []);

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

    setLoading(true);
    try {
      const res = await fetch("/api/sports", {
        method: "POST",
        headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
        body: JSON.stringify({ name: name.trim(), description: description.trim() || undefined }),
      });
      if (!res.ok) {
        const data = await res.json();
        setError(data.error || "خطا");
      } else {
        setShowModal(false);
        setName("");
        setDescription("");
        load();
      }
    } catch {
      setError("خطا در ارتباط با سرور");
    } finally {
      setLoading(false);
    }
  };

  const handleEdit = (sport: Sport) => {
    setEditTarget({ ...sport });
    setName(sport.name);
    setDescription(sport.description || "");
  };

  const handleSaveEdit = async () => {
    if (!editTarget) return;
    setError("");
    if (!name.trim()) { setError("نام رشته را وارد کنید"); return; }
    setLoading(true);
    try {
      const res = await fetch(`/api/sports/${editTarget.id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
        body: JSON.stringify({ name: name.trim(), description: description.trim() || undefined }),
      });
      if (!res.ok) { const d = await res.json(); setError(d.error || "خطا"); return; }
      setEditTarget(null);
      setName("");
      setDescription("");
      load();
    } catch {
      setError("خطا در ارتباط با سرور");
    } finally {
      setLoading(false);
    }
  };

  const handleDelete = async (id: string) => {
    if (!confirm("آیا از حذف این رشته ورزشی اطمینان دارید؟")) return;
    await fetch(`/api/sports/${id}`, { method: "DELETE", headers: { Authorization: `Bearer ${token}` } });
    load();
  };

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold text-gray-900">رشته‌های ورزشی</h1>
        <Button className="bg-[#2563EB] hover:bg-[#1D4ED8]" onClick={() => setShowModal(true)}>
          <Plus className="h-4 w-4 ml-1" />
          رشته جدید
        </Button>
      </div>

      <div className="grid gap-4">
        {sports.map((s) => (
          <div key={s.id} className="rounded-xl border bg-white p-5 flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center text-[#2563EB] font-bold">
                {s.name.charAt(0)}
              </div>
              <div>
                <div className="font-medium text-gray-900">{s.name}</div>
                <div className="text-xs text-gray-500">
                  {s._count.courses} دوره | {s._count.coachSports} مربی
                  {s.boards && s.boards.length > 0 && (
                    <> | {s.boards.map((b) => b.board.name).join("، ")}</>
                  )}
                </div>
              </div>
            </div>
            <div className="flex items-center gap-1">
              <Button variant="ghost" size="icon-xs" onClick={() => handleEdit(s)}>
                <Edit className="h-3.5 w-3.5" />
              </Button>
              <Button variant="ghost" size="icon-xs" onClick={() => handleDelete(s.id)}>
                <Trash2 className="h-3.5 w-3.5 text-red-500" />
              </Button>
            </div>
          </div>
        ))}
      </div>

      {/* Create Modal */}
      {showModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
          <div className="bg-white rounded-xl p-6 w-full max-w-sm mx-4 shadow-xl">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-lg font-semibold text-gray-900">رشته جدید</h2>
              <button onClick={() => { setShowModal(false); setError(""); setName(""); setDescription(""); }}>
                <X className="h-5 w-5 text-gray-400 hover:text-gray-600" />
              </button>
            </div>
            <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] mb-3"
              placeholder="نام رشته"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
            <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] mb-3 min-h-[80px]"
              placeholder="توضیحات (اختیاری)"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
            />
            {error && <p className="text-sm text-red-600 mb-3">{error}</p>}
            <div className="flex gap-3">
              <Button
                className="bg-[#2563EB] hover:bg-[#1D4ED8] text-white flex-1"
                onClick={handleCreate}
                disabled={loading}
              >
                {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : "ایجاد"}
              </Button>
              <Button variant="outline" className="flex-1" onClick={() => { setShowModal(false); setError(""); setName(""); setDescription(""); }}>
                انصراف
              </Button>
            </div>
          </div>
        </div>
      )}

      {/* Edit Modal */}
      {editTarget && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
          <div className="bg-white rounded-xl p-6 w-full max-w-sm mx-4 shadow-xl">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-lg font-semibold text-gray-900">ویرایش رشته</h2>
              <button onClick={() => { setEditTarget(null); setError(""); setName(""); setDescription(""); }}>
                <X className="h-5 w-5 text-gray-400 hover:text-gray-600" />
              </button>
            </div>
            <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] mb-3"
              placeholder="نام رشته"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
            <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] mb-3 min-h-[80px]"
              placeholder="توضیحات (اختیاری)"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
            />
            {error && <p className="text-sm text-red-600 mb-3">{error}</p>}
            <div className="flex gap-3">
              <Button className="bg-[#2563EB] hover:bg-[#1D4ED8] text-white flex-1" onClick={handleSaveEdit} disabled={loading}>
                {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : "ذخیره"}
              </Button>
              <Button variant="outline" className="flex-1" onClick={() => { setEditTarget(null); setError(""); setName(""); setDescription(""); }}>
                انصراف
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}