// داخل Expertise.jsx
import React, { useEffect, useState } from "react";
import axios from "axios";
import { AppBaseUrl, BaseUrl } from "../../components/BaseUrl";
import Sidebar from "../../components/sidebar";

function Expertise() {
  const [expertises, setExpertises] = useState([]);
  const [categories, setCategories] = useState([]); // دسته‌بندی تبلیغات
  const [academyCategories, setAcademyCategories] = useState([]); // دسته‌بندی آکادمی
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [formData, setFormData] = useState({
    expertise: "",
    subExpertise: "",
    categoryTitle: "",
    academyCategoryTitle: "",
    academyCategoryDescription: "",
    academyCategoryIcon: "",
    academyCategoryColor: "#3B82F6",
    academyCategoryParent: "",
  });

  // ==========================================
  // گرفتن تخصص‌ها
  // ==========================================
  useEffect(() => {
    setLoading(true);
    axios
      .get(`${BaseUrl}/expertise`)
      .then((res) => {
        setExpertises(res.data.expertises);
        setLoading(false);
      })
      .catch(() => {
        setError("خطا در دریافت اطلاعات تخصص‌ها");
        setLoading(false);
      });
  }, []);

  // ==========================================
  // گرفتن دسته‌بندی تبلیغات
  // ==========================================
  useEffect(() => {
    axios
      .get(`${BaseUrl}/advertising/advertising-categories`)
      .then((res) => {
        setCategories(res.data?.docs || []);
        console.log(res.data.docs);
      })
      .catch(() => setError("خطا در دریافت دسته‌بندی بیلبورد"));
  }, []);

  // ==========================================
  // گرفتن دسته‌بندی آکادمی
  // ==========================================
  useEffect(() => {
    fetchAcademyCategories();
  }, []);

  const fetchAcademyCategories = async () => {
    try {
      const response = await axios.get(`${AppBaseUrl}/academy/categories`, {
        headers: {
          Authorization: `Bearer ${localStorage.getItem("token")}`,
        },
      });
      setAcademyCategories(response.data.data.docs || response.data.data || []);
    } catch (err) {
      console.error("خطا در دریافت دسته‌بندی آکادمی:", err);
      setError("خطا در دریافت دسته‌بندی آکادمی");
    }
  };

  // ==========================================
  // تغییر اینپوت‌ها
  // ==========================================
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  // ==========================================
  // افزودن تخصص
  // ==========================================
  const handleSubmitExpertise = (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    axios
      .post(`${BaseUrl}/expertise/create`, { expertise: formData.expertise })
      .then(() => {
        setExpertises([
          ...expertises,
          { expertise: formData.expertise, sub_expertise: [] },
        ]);
        setFormData({ ...formData, expertise: "" });
        alert("تخصص با موفقیت اضافه شد");
        setLoading(false);
      })
      .catch(() => {
        setError("خطا در ذخیره تخصص");
        setLoading(false);
      });
  };

  // ==========================================
  // افزودن زیر تخصص
  // ==========================================
  const handleSubmitSubExpertise = (e, expertiseId) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    axios
      .post(`${BaseUrl}/expertise/create/sub?id=${expertiseId}`, {
        name: formData.subExpertise,
      })
      .then(() => {
        const updated = expertises.map((exp) =>
          exp._id === expertiseId
            ? {
                ...exp,
                sub_expertise: [
                  ...exp.sub_expertise,
                  { name: formData.subExpertise },
                ],
              }
            : exp
        );
        setExpertises(updated);
        setFormData({ ...formData, subExpertise: "" });
        alert("زیرتخصص با موفقیت اضافه شد");
        setLoading(false);
      })
      .catch(() => {
        setError("خطا در ذخیره زیرتخصص");
        setLoading(false);
      });
  };

  // ==========================================
  // افزودن دسته‌بندی تبلیغات
  // ==========================================
  const handleSubmitCategory = (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    axios
      .post(`${BaseUrl}/advertising/advertising-categories`, {
        title: formData.categoryTitle,
      })
      .then((res) => {
        setCategories([...categories, res.data.data]);
        setFormData({ ...formData, categoryTitle: "" });
        alert("دسته‌بندی با موفقیت اضافه شد");
        setLoading(false);
      })
      .catch(() => {
        setError("خطا در ذخیره دسته‌بندی");
        setLoading(false);
      });
  };

  // ==========================================
  // حذف دسته‌بندی تبلیغات
  // ==========================================
  const handleDeleteCategory = (id) => {
    if (!window.confirm("آیا مطمئن هستید که می‌خواهید حذف کنید؟")) return;

    axios
      .delete(`${BaseUrl}/advertising/advertising-categories/${id}`)
      .then(() => {
        setCategories(categories.filter((cat) => cat._id !== id));
        alert("دسته‌بندی حذف شد");
      })
      .catch(() => setError("خطا در حذف دسته‌بندی"));
  };

  // ==========================================
  // افزودن دسته‌بندی آکادمی
  // ==========================================
  const handleSubmitAcademyCategory = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    const token = localStorage.getItem("token");

    try {
      const response = await axios.post(
        `${AppBaseUrl}/academy/categories`,
        {
          title: formData.academyCategoryTitle,
          description: formData.academyCategoryDescription,
          icon: formData.academyCategoryIcon,
          color: formData.academyCategoryColor,
          parent: formData.academyCategoryParent || null,
          order: academyCategories.length,
        },
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        }
      );

      if (response.data.success) {
        await fetchAcademyCategories(); // رفرش لیست
        setFormData({
          ...formData,
          academyCategoryTitle: "",
          academyCategoryDescription: "",
          academyCategoryIcon: "",
          academyCategoryColor: "#3B82F6",
          academyCategoryParent: "",
        });
        alert("دسته‌بندی آکادمی با موفقیت اضافه شد");
      }
    } catch (err) {
      console.error("خطا در افزودن دسته‌بندی آکادمی:", err);
      setError(err.response?.data?.message || "خطا در ذخیره دسته‌بندی آکادمی");
    } finally {
      setLoading(false);
    }
  };

  // ==========================================
  // حذف دسته‌بندی آکادمی (سافت دیلیت)
  // ==========================================
  const handleDeleteAcademyCategory = async (id) => {
    if (!window.confirm("آیا مطمئن هستید که می‌خواهید این دسته‌بندی را حذف کنید؟")) return;

    const token = localStorage.getItem("token");

    try {
      await axios.delete(`${AppBaseUrl}/academy/categories/${id}`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      await fetchAcademyCategories(); // رفرش لیست
      alert("دسته‌بندی آکادمی با موفقیت حذف شد");
    } catch (err) {
      console.error("خطا در حذف دسته‌بندی آکادمی:", err);
      setError(err.response?.data?.message || "خطا در حذف دسته‌بندی آکادمی");
    }
  };

  // ==========================================
  // تغییر وضعیت دسته‌بندی آکادمی (فعال/غیرفعال)
  // ==========================================
  const handleToggleAcademyCategoryStatus = async (id, currentStatus) => {
    const newStatus = currentStatus === "active" ? "inactive" : "active";
    const token = localStorage.getItem("token");

    try {
      await axios.patch(
        `${AppBaseUrl}/academy/categories/${id}/status`,
        { status: newStatus },
        { headers: { Authorization: `Bearer ${token}` } }
      );
      await fetchAcademyCategories(); // رفرش لیست
      alert(`وضعیت با موفقیت به ${newStatus === "active" ? "فعال" : "غیرفعال"} تغییر کرد`);
    } catch (err) {
      console.error("خطا در تغییر وضعیت:", err);
      setError("خطا در تغییر وضعیت دسته‌بندی");
    }
  };

  // ==========================================
  // ویرایش دسته‌بندی آکادمی
  // ==========================================
  const handleEditAcademyCategory = async (id, newTitle) => {
    const newName = prompt("عنوان جدید را وارد کنید:", newTitle);
    if (!newName || newName === newTitle) return;

    const token = localStorage.getItem("token");

    try {
      await axios.put(
        `${AppBaseUrl}/academy/categories/${id}`,
        { title: newName },
        { headers: { Authorization: `Bearer ${token}` } }
      );
      await fetchAcademyCategories(); // رفرش لیست
      alert("دسته‌بندی با موفقیت ویرایش شد");
    } catch (err) {
      console.error("خطا در ویرایش:", err);
      setError("خطا در ویرایش دسته‌بندی");
    }
  };

  return (
    <div className="min-h-screen mx-auto flex flex-col bg-gray-900">
      <div className="flex flex-1 h-full w-full">
        <div className="w-64">
          <Sidebar />
        </div>
        <div className="w-full h-full p-12 mb-11 mx-auto text-white relative rounded-xl shadow-lg overflow-y-auto">
          <h1 className="text-2xl font-bold mb-6">
            مدیریت تخصص‌ها و دسته‌بندی‌ها
          </h1>

          {/* خطا */}
          {error && <p className="text-red-500 mb-4">{error}</p>}

          {/* ========================================== */}
          {/* بخش مدیریت تخصص‌ها */}
          {/* ========================================== */}
          <section className="mb-10">
            <h2 className="text-xl font-semibold mb-4">مدیریت تخصص‌ها</h2>
            <form
              onSubmit={handleSubmitExpertise}
              className="mb-4 flex items-center space-x-4 rtl:space-x-reverse"
            >
              <input
                type="text"
                name="expertise"
                value={formData.expertise}
                onChange={handleChange}
                placeholder="نام تخصص"
                required
                className="p-2 w-1/3 bg-gray-800 text-white border border-gray-600 rounded-md"
              />
              <button
                type="submit"
                disabled={loading}
                className="p-2 bg-green-600 text-white rounded-md"
              >
                {loading ? "در حال بارگذاری..." : "افزودن تخصص"}
              </button>
            </form>

            {expertises.map((exp) => (
              <div
                key={exp._id}
                className="mb-6 p-4 bg-gray-800 rounded-md shadow-md"
              >
                <h3 className="text-xl font-semibold">{exp.expertise}</h3>
                <form
                  onSubmit={(e) => handleSubmitSubExpertise(e, exp._id)}
                  className="mt-4 flex items-center space-x-4 rtl:space-x-reverse"
                >
                  <input
                    type="text"
                    name="subExpertise"
                    value={formData.subExpertise}
                    onChange={handleChange}
                    placeholder="نام زیرتخصص"
                    required
                    className="p-2 w-1/3 bg-gray-800 text-white border border-gray-600 rounded-md"
                  />
                  <button
                    type="submit"
                    disabled={loading}
                    className="p-2 bg-blue-600 text-white rounded-md"
                  >
                    {loading ? "..." : "افزودن زیرتخصص"}
                  </button>
                </form>
                {exp.sub_expertise?.length > 0 && (
                  <ul className="mt-4 list-disc pr-5">
                    {exp.sub_expertise.map((sub, i) => (
                      <li key={i} className="text-sm text-gray-300">
                        {sub.name}
                      </li>
                    ))}
                  </ul>
                )}
              </div>
            ))}
          </section>

          {/* ========================================== */}
          {/* بخش مدیریت دسته‌بندی تبلیغات (بیلبورد) */}
          {/* ========================================== */}
          <section className="mb-10">
            <h2 className="text-xl font-semibold mb-4">
              مدیریت دسته‌بندی بیلبورد
            </h2>
            <form
              onSubmit={handleSubmitCategory}
              className="mb-4 flex items-center space-x-4 rtl:space-x-reverse"
            >
              <input
                type="text"
                name="categoryTitle"
                value={formData.categoryTitle}
                onChange={handleChange}
                placeholder="عنوان دسته‌بندی بیلبورد"
                required
                className="p-2 w-1/3 bg-gray-800 text-white border border-gray-600 rounded-md"
              />
              <button
                type="submit"
                disabled={loading}
                className="p-2 bg-green-600 text-white rounded-md"
              >
                {loading ? "..." : "افزودن دسته‌بندی"}
              </button>
            </form>

            {Array.isArray(categories) && categories.length > 0 ? (
              categories.map((cat) => (
                <div
                  key={cat._id}
                  className="flex items-center justify-between p-3 bg-gray-800 rounded-md mb-2"
                >
                  <span>{cat.title}</span>
                  <button
                    onClick={() => handleDeleteCategory(cat._id)}
                    className="p-1 bg-red-600 text-white rounded-md"
                  >
                    حذف
                  </button>
                </div>
              ))
            ) : (
              <p className="text-gray-400">هیچ دسته‌بندی‌ای وجود ندارد</p>
            )}
          </section>

          {/* ========================================== */}
          {/* بخش مدیریت دسته‌بندی آکادمی (جدید) */}
          {/* ========================================== */}
          <section className="mb-10">
            <h2 className="text-xl font-semibold mb-4 text-purple-400">
              🏷️ مدیریت دسته‌بندی آکادمی
            </h2>

            {/* فرم افزودن دسته‌بندی آکادمی */}
            <form
              onSubmit={handleSubmitAcademyCategory}
              className="mb-6 p-4 bg-gray-800 rounded-lg"
            >
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm mb-1">عنوان دسته‌بندی *</label>
                  <input
                    type="text"
                    name="academyCategoryTitle"
                    value={formData.academyCategoryTitle}
                    onChange={handleChange}
                    placeholder="مثال: برنامه‌نویسی، طراحی، بازار..."
                    required
                    className="p-2 w-full bg-gray-700 text-white border border-gray-600 rounded-md"
                  />
                </div>

                <div>
                  <label className="block text-sm mb-1">توضیحات (اختیاری)</label>
                  <input
                    type="text"
                    name="academyCategoryDescription"
                    value={formData.academyCategoryDescription}
                    onChange={handleChange}
                    placeholder="توضیحات کوتاه"
                    className="p-2 w-full bg-gray-700 text-white border border-gray-600 rounded-md"
                  />
                </div>

                <div>
                  <label className="block text-sm mb-1">آیکون (اختیاری)</label>
                  <input
                    type="text"
                    name="academyCategoryIcon"
                    value={formData.academyCategoryIcon}
                    onChange={handleChange}
                    placeholder="مثال: 🎓, 💻, 🎨"
                    className="p-2 w-full bg-gray-700 text-white border border-gray-600 rounded-md"
                  />
                </div>

                <div>
                  <label className="block text-sm mb-1">رنگ (اختیاری)</label>
                  <input
                    type="color"
                    name="academyCategoryColor"
                    value={formData.academyCategoryColor}
                    onChange={handleChange}
                    className="p-1 w-full h-10 bg-gray-700 border border-gray-600 rounded-md"
                  />
                </div>

                <div>
                  <label className="block text-sm mb-1">دسته‌بندی والد (اختیاری)</label>
                  <select
                    name="academyCategoryParent"
                    value={formData.academyCategoryParent}
                    onChange={handleChange}
                    className="p-2 w-full bg-gray-700 text-white border border-gray-600 rounded-md"
                  >
                    <option value="">بدون والد (دسته اصلی)</option>
                    {academyCategories
                      .filter((cat) => cat.status !== "deleted")
                      .map((cat) => (
                        <option key={cat._id} value={cat._id}>
                          {cat.icon} {cat.title}
                        </option>
                      ))}
                  </select>
                </div>
              </div>

              <button
                type="submit"
                disabled={loading}
                className="mt-4 p-2 bg-purple-600 text-white rounded-md w-full md:w-auto"
              >
                {loading ? "در حال افزودن..." : "➕ افزودن دسته‌بندی آکادمی"}
              </button>
            </form>

            {/* لیست دسته‌بندی‌های آکادمی */}
            <h3 className="text-lg font-semibold mb-3">لیست دسته‌بندی‌ها</h3>

            {academyCategories.length > 0 ? (
              <div className="space-y-2">
                {academyCategories.map((cat) => (
                  <div
                    key={cat._id}
                    className={`flex items-center justify-between p-3 rounded-md ${
                      cat.status === "inactive"
                        ? "bg-gray-800 opacity-50"
                        : "bg-gray-800"
                    }`}
                  >
                    <div className="flex items-center gap-3">
                      <span className="text-2xl">{cat.icon || "🏷️"}</span>
                      <span style={{ color: cat.color }} className="font-medium">
                        {cat.title}
                      </span>
                      {cat.parent && (
                        <span className="text-xs text-gray-400">
                          ← والد: {cat.parent.title}
                        </span>
                      )}
                      {cat.course_count > 0 && (
                        <span className="text-xs bg-blue-600 px-2 py-0.5 rounded-full">
                          {cat.course_count} دوره
                        </span>
                      )}
                      {cat.status === "inactive" && (
                        <span className="text-xs bg-red-600 px-2 py-0.5 rounded-full">
                          غیرفعال
                        </span>
                      )}
                    </div>
                    <div className="flex gap-2">
                      <button
                        onClick={() => handleEditAcademyCategory(cat._id, cat.title)}
                        className="p-1 bg-yellow-600 text-white rounded-md text-sm px-3"
                      >
                        ✏️ ویرایش
                      </button>
                      <button
                        onClick={() => handleToggleAcademyCategoryStatus(cat._id, cat.status)}
                        className={`p-1 rounded-md text-sm px-3 ${
                          cat.status === "active"
                            ? "bg-orange-600"
                            : "bg-green-600"
                        } text-white`}
                      >
                        {cat.status === "active" ? "🔒 غیرفعال" : "🔓 فعال"}
                      </button>
                      <button
                        onClick={() => handleDeleteAcademyCategory(cat._id)}
                        className="p-1 bg-red-600 text-white rounded-md text-sm px-3"
                      >
                        🗑️ حذف
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <p className="text-gray-400">هیچ دسته‌بندی آکادمی وجود ندارد</p>
            )}
          </section>
        </div>
      </div>
    </div>
  );
}

export default Expertise;