import React, { useEffect, useState } from "react";
import Sidebar from "../../components/sidebar";
import Loading from "../../components/elements/loading";
import { BaseUrl, ImageBaseUrl } from "../../components/BaseUrl";
import axios from "axios";
import { useNavigate, useSearchParams } from "react-router-dom";
import Pagination from "../../components/Pagination";
import Filters from "../../components/Filters";
import { FaCheck, FaTimes, FaInfoCircle, FaMoon, FaSun } from "react-icons/fa";

// تابع کمکی برای تبدیل تاریخ شمسی به فرمت قابل مقایسه
const parsePersianDate = (dateStr) => {
  if (!dateStr) return null;
  const [year, month, day] = dateStr.split(" ")[0].split("-").map(Number);
  // تبدیل تاریخ شمسی به میلادی برای مقایسه (تقریبی)
  const gregorianYear = year - 621; // تقریبی: 1404 شمسی ≈ 2025 میلادی
  return new Date(gregorianYear, month - 1, day);
};

// تابع فرمت تاریخ شمسی برای نمایش
const formatPersianDate = (dateStr) => {
  if (!dateStr) return "-";
  return dateStr.split(" ")[0]; // فقط تاریخ (مثل 1404-07-04)
};

// کامپوننت اصلی صفحه کاربران
const Users = () => {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [allUsers, setAllUsers] = useState([]); // ذخیره همه کاربران
  const [filteredUsers, setFilteredUsers] = useState([]); // کاربران فیلترشده
  const [totalPages, setTotalPages] = useState(0);
  const [currentPage, setCurrentPage] = useState(1);
  const [error, setError] = useState(""); // حالت خطا
  const [filters, setFilters] = useState({
    startDate: "",
    endDate: "",
    status: "",
    province: "",
    city: "",
    photographyModel: "",
    blockStatus: "",
  });
  const [searchQuery, setSearchQuery] = useState("");
  const [darkMode, setDarkMode] = useState(false);

  // لیست‌های دینامیک برای فیلترها
  const [provinces, setProvinces] = useState([{ value: "", label: "همه استان‌ها" }]);
  const [cities, setCities] = useState({ "": [{ value: "", label: "همه شهرها" }] });
  const [photographyModels, setPhotographyModels] = useState([{ value: "", label: "همه مدل‌ها" }]);

  const itemsPerPage = 20;

  const blockStatusOptions = [
    { value: "", label: "همه وضعیت‌ها" },
    { value: "active", label: "فعال" },
    { value: "inactive", label: "غیرفعال" },
  ];

  const statusOptions = [
    { key: "", label: "همه وضعیت‌ها" },
    { key: "none", label: "بدون مدارک" },
    { key: "pending", label: "در انتظار تایید" },
    { key: "verified", label: "تایید شده" },
    { key: "rejected", label: "رد شده" },
  ];

  // تابع استخراج لیست‌های فیلتر از کاربران
  const extractFilterOptions = (users) => {
    // استخراج استان‌ها
    const provinceSet = new Map();
    users.forEach((user) => {
      if (user.province?.id && user.province?.name && !provinceSet.has(String(user.province.id))) {
        provinceSet.set(String(user.province.id), user.province.name);
      }
    });
    const provinceList = [
      { value: "", label: "همه استان‌ها" },
      ...Array.from(provinceSet, ([value, label]) => ({ value, label }))
        .sort((a, b) => a.label.localeCompare(b.label)), // مرتب‌سازی الفبایی
    ];
    setProvinces(provinceList);
    console.log("استان‌های استخراج‌شده:", provinceList);

    // استخراج شهرها بر اساس استان
    const cityMap = {};
    users.forEach((user) => {
      const provId = String(user.province?.id || "");
      if (!cityMap[provId]) cityMap[provId] = new Map();
      if (user.city?.id && user.city?.name && !cityMap[provId].has(String(user.city.id))) {
        cityMap[provId].set(String(user.city.id), user.city.name);
      }
    });
    const cityObj = { "": [{ value: "", label: "همه شهرها" }] };
    Object.keys(cityMap).forEach((provId) => {
      cityObj[provId] = [
        { value: "", label: "همه شهرها" },
        ...Array.from(cityMap[provId], ([value, label]) => ({ value, label }))
          .sort((a, b) => a.label.localeCompare(b.label)), // مرتب‌سازی الفبایی
      ];
    });
    setCities(cityObj);
    console.log("شهرهای استخراج‌شده:", cityObj);

    // استخراج مدل‌های عکاسی
    const modelSet = new Set();
    users.forEach((user) => {
      if (user.sub_expertise) {
        user.sub_expertise.forEach((model) => modelSet.add(model));
      }
    });
    const modelList = [
      { value: "", label: "همه مدل‌ها" },
      ...Array.from(modelSet, (value) => ({ value, label: value }))
        .sort((a, b) => a.label.localeCompare(b.label)), // مرتب‌سازی الفبایی
    ];
    setPhotographyModels(modelList);
    console.log("مدل‌های عکاسی استخراج‌شده:", modelList);
  };

  // تابع تغییر وضعیت کاربر (فعال/غیرفعال)
  const toggleUserStatus = async (userId, currentStatus) => {
    try {
      await axios.post(
        `${BaseUrl}/users/update-status`,
        { userId, block_status: !currentStatus },
        {
          headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
        }
      );
      // به‌روزرسانی حالت محلی
      setAllUsers((prev) =>
        prev.map((u) => (u._id === userId ? { ...u, block_status: !currentStatus } : u))
      );
    } catch (err) {
      console.error("خطا در تغییر وضعیت کاربر:", err);
      setError("خطا در تغییر وضعیت کاربر. لطفاً دوباره تلاش کنید.");
    }
  };

  // تابع تایید یا رد تصویر پروفایل
  const handleApproveProfileImage = async (userId, approve) => {
    try {
      await axios.put(
        `${BaseUrl}/users/update?userId=${userId}`,
        {
          approveProfileImage: approve,
          ...(approve === false && { profile_image: "" }),
        },
        {
          headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
        }
      );
      // به‌روزرسانی حالت محلی
      setAllUsers((prev) =>
        prev.map((u) => (u._id === userId ? { ...u, profile_image: approve ? u.profile_image : "" } : u))
      );
    } catch (err) {
      console.error("خطا در تایید/رد تصویر پروفایل:", err);
      setError("خطا در تایید/رد تصویر پروفایل. لطفاً دوباره تلاش کنید.");
    }
  };

  // تابع دریافت کاربران از API
  const fetchUsers = () => {
    setLoading(true);
    setError("");
    const url = `${BaseUrl}/users?limit=1000`; // دریافت تعداد زیادی کاربر
    console.log("درخواست API:", url);

    axios
      .get(url, {
        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
      })
      .then((res) => {
        if (res?.data?.users) {
          console.log("داده‌های کاربران:", res.data.users);
          setAllUsers(res.data.users);
          extractFilterOptions(res.data.users); // استخراج گزینه‌های فیلتر
        } else {
          setAllUsers([]);
          setError("داده‌ای از سرور دریافت نشد.");
        }
        setLoading(false);
      })
      .catch((err) => {
        console.error("خطا در دریافت کاربران:", err);
        setError("خطا در دریافت لیست کاربران. لطفاً دوباره تلاش کنید.");
        setLoading(false);
      });
  };

  // تابع اعمال فیلترهای محلی
  const applyFilters = () => {
    let result = [...allUsers];

    // فیلتر جستجو
    if (searchQuery) {
      const query = searchQuery.toLowerCase();
      result = result.filter(
        (user) =>
          user.first_name?.toLowerCase().includes(query) ||
          user.last_name?.toLowerCase().includes(query) ||
          user.user_name?.toLowerCase().includes(query) ||
          user.mobile?.toLowerCase().includes(query)
      );
    }

    // فیلتر وضعیت مدارک
    if (filters.status) {
      result = result.filter((user) => user.is_verified === filters.status);
    }


    if (statusParam === "pending") {
      result = result.filter((user) => user.is_verified === "pending");
    }

    // فیلتر استان
    if (filters.province) {
    result = result.filter((user) => String(user.province?.id) === filters.province);
  }
  if (filters.city) {
    result = result.filter((user) => String(user.city?.id) === filters.city);
  }
  if (filters.photographyModel) {
    result = result.filter((user) => user.sub_expertise?.includes(filters.photographyModel));
  }
  if (filters.blockStatus) {
    const isActive = filters.blockStatus === "active";
    result = result.filter((user) => user.block_status === !isActive);
  }

    // فیلتر تاریخ
    if (filters.startDate) {
      const start = parsePersianDate(filters.startDate);
      result = result.filter((user) => {
        const userDate = parsePersianDate(user.createdAt);
        return userDate && start && userDate >= start;
      });
    }
    if (filters.endDate) {
      const end = parsePersianDate(filters.endDate);
      result = result.filter((user) => {
        const userDate = parsePersianDate(user.createdAt);
        return userDate && end && userDate <= end;
      });
    }

    // لاگ برای دیباگ
    console.log("کاربران فیلترشده:", result);

    // به‌روزرسانی صفحه‌بندی و کاربران نمایش‌داده‌شده
    setTotalPages(Math.ceil(result.length / itemsPerPage));
    const startIndex = (currentPage - 1) * itemsPerPage;
    setFilteredUsers(result.slice(startIndex, startIndex + itemsPerPage));
  };

  // بارگذاری کاربران هنگام بارگذاری صفحه
  useEffect(() => {
    fetchUsers();
  }, []);

  // اعمال فیلترها هنگام تغییر
  useEffect(() => {
    applyFilters();
  }, [allUsers, filters, searchQuery, currentPage]);

  // مدیریت تغییر صفحه
  const handlePageChange = (page) => setCurrentPage(page);

  // تغییر حالت تاریک/روشن
  const toggleDarkMode = () => {
    setDarkMode(!darkMode);
  };

  const [searchParams] = useSearchParams();
const statusParam = searchParams.get("status"); // مثلا "pending"

  return (
    <div className={`${darkMode ? "dark" : ""}`}>
      <div className="flex min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300">
        {/* سایدبار پاسخ‌گو */}
        <div className="w-64  transition-all duration-300">
          <Sidebar />
        </div>
        <div className="flex-1 p-6">
        

          {/* نمایش پیام خطا */}
          {error && (
            <div className="mb-4 p-4 bg-red-100 dark:bg-red-900/50 text-red-600 dark:text-red-300 rounded-lg">
              {error}
            </div>
          )}

          {/* جستجو و فیلترها */}
          <div className="p-6 mb-6 bg-white/80 dark:bg-gray-800/80 backdrop-blur-md rounded-xl shadow-lg">
            <input
              type="text"
              placeholder="جستجو بر اساس نام، نام خانوادگی، نام کاربری یا موبایل..."
              className="w-full p-3 mb-4 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-teal-500 dark:bg-gray-700 dark:text-white transition-all duration-200"
              value={searchQuery}
              onChange={(e) => {
                setSearchQuery(e.target.value);
                setCurrentPage(1);
              }}
            />
            <Filters
              statusOptions={statusOptions}
              provinceOptions={provinces}
              cityOptions={cities[filters.province || ""]}
              photographyModelOptions={photographyModels}
              blockStatusOptions={blockStatusOptions}
              onFilterChange={(newFilters) => {
                setFilters((prev) => ({
                  ...prev,
                  ...newFilters,
                  city: newFilters.province !== prev.province ? "" : newFilters.city, // ریست شهر هنگام تغییر استان
                }));
                setCurrentPage(1);
              }}
            />
          </div>

          {/* جدول کاربران */}
          <div className="bg-white/80 dark:bg-gray-800/80 backdrop-blur-md rounded-xl shadow-lg overflow-hidden">
            <div className="hidden md:grid md:grid-cols-[20%_15%_15%_15%_15%_20%] items-center h-14 px-6 bg-gray-50/80 dark:bg-gray-700/80 border-b dark:border-gray-600 sticky top-0 z-10">
              <p className="font-semibold text-sm">نام و نام خانوادگی</p>
              <p className="font-semibold text-sm">نام کاربری</p>
              <p className="font-semibold text-sm">موبایل</p>
              <p className="font-semibold text-sm">تاریخ ثبت نام</p>
              <p className="font-semibold text-sm">وضعیت</p>
              <p className="font-semibold text-sm">عملیات</p>
            </div>

            <div className="max-h-[calc(100vh-300px)] overflow-y-auto">
              {loading ? (
                <div className="flex items-center justify-center h-32">
                  <Loading className="w-12 h-12 text-teal-500 animate-spin" />
                </div>
              ) : filteredUsers.length === 0 ? (
                <div className="flex items-center justify-center h-32 text-gray-500 dark:text-gray-400">
                  هیچ کاربری یافت نشد
                </div>
              ) : (
                filteredUsers.map((user, index) => (
                  <div
                    key={user._id}
                    className={`p-4 md:grid md:grid-cols-[20%_15%_15%_15%_15%_20%] items-center hover:bg-gray-100/80 dark:hover:bg-gray-700/80 transition-all duration-200 ${
                      index % 2 === 0
                        ? "bg-white/80 dark:bg-gray-800/80"
                        : "bg-gray-50/80 dark:bg-gray-700/80"
                    }`}
                  >
                    <div className="flex items-center gap-3">
                      <img
                        className="w-12 h-12 rounded-full object-cover border-2 border-teal-500/20"
                        src={
                          user?.profile_image
                            ? ImageBaseUrl + user.profile_image
                            : "/default-avatar.png"
                        }
                        alt={`${user.first_name} ${user.last_name}`}
                        onError={(e) => (e.target.src = "/default-avatar.png")}
                      />
                      <p className="md:block hidden">{user?.first_name} {user?.last_name}</p>
                      <p className="md:hidden font-semibold">
                        {user?.first_name} {user?.last_name}
                      </p>
                    </div>
                    <p className="text-sm">{user?.user_name || "-"}</p>
                    <p className="text-sm">{user?.mobile || "-"}</p>
                    <p className="text-sm">{formatPersianDate(user?.createdAt)}</p>
                    <div className="flex items-center gap-2">
                      <span
                        className={`px-2 py-1 rounded-full text-xs ${
                          user.block_status
                            ? "bg-red-100 text-red-600 dark:bg-red-900/50 dark:text-red-300"
                            : "bg-green-100 text-green-600 dark:bg-green-900/50 dark:text-green-300"
                        }`}
                      >
                        {user?.block_status ? "غیرفعال" : "فعال"}
                      </span>
                      <button
                        onClick={() => toggleUserStatus(user._id, user.block_status)}
                        className={`flex items-center gap-1 px-3 py-1 rounded-lg text-sm transition-all duration-200 ${
                          user.block_status
                            ? "bg-red-500 hover:bg-red-600 text-white"
                            : "bg-green-500 hover:bg-green-600 text-white"
                        }`}
                        aria-label={`تغییر وضعیت کاربر ${user.user_name}`}
                      >
                        {user.block_status ? <FaCheck /> : <FaTimes />}
                        {user.block_status ? "فعال کردن" : "غیرفعال کردن"}
                      </button>
                    </div>
                    <div className="flex items-center gap-2 flex-wrap">
                      <button
                        onClick={() => handleApproveProfileImage(user._id, true)}
                        className="flex items-center gap-1 bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded-lg text-sm transition-all duration-200"
                        aria-label={`تایید تصویر پروفایل ${user.user_name}`}
                      >
                        <FaCheck /> تایید
                      </button>
                      <button
                        onClick={() => handleApproveProfileImage(user._id, false)}
                        className="flex items-center gap-1 bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded-lg text-sm transition-all duration-200"
                        aria-label={`رد تصویر پروفایل ${user.user_name}`}
                      >
                        <FaTimes /> رد
                      </button>
                      <button
                        onClick={() => navigate(`${user._id}`)}
                        className="flex items-center gap-1 bg-teal-500 hover:bg-teal-600 text-white px-3 py-1 rounded-lg text-sm transition-all duration-200"
                        aria-label={`مشاهده جزئیات کاربر ${user.user_name}`}
                      >
                        <FaInfoCircle /> جزئیات
                      </button>
                    </div>
                  </div>
                ))
              )}
            </div>
          </div>

          <Pagination
            totalPages={totalPages}
            currentPage={currentPage}
            onPageChange={handlePageChange}
          />
        </div>
      </div>
    </div>
  );
};

export default Users;