import React, { useState, useRef, useCallback, useEffect } from "react";
import Modal from "../elements/Modal";
import Image from "next/image";
import VerificationBadge from "@/components/main/VerificationBadge";
import ProfileAvatar from "@/components/main/ProfileAvatar";
import RoundedInput from "@/components/elements/RoundedInput";
import useAxios from "@/hooks/useAxios";
import toast from "react-hot-toast";
import Rate from "rc-rate";
import "rc-rate/assets/index.css";
import "@/styles/rc-rate-custom.css";
import { useUser } from "@/hooks/useUser";
import { Course } from "@/types/types";
import { useRequireAuth } from "@/lib/auth/useRequireAuth";

export interface Comments {
  _id: string;
  comment: string;
  rate: number;
  createdAt: string;
  updatedAt: string;
  status: string;
  user_id: {
    _id: string;
    user_name: string;
    profile_image: string;
    is_verified: string;
  };
  course_id: string;
  likes: number;
  isEdited: boolean;
}

interface CommentsModalProps {
  isOpen: boolean;
  onClose: () => void;
  postData: Course;
  onCommentAdded?: () => void;
}

function CommentsModal({
  isOpen,
  onClose,
  postData,
  onCommentAdded,
}: CommentsModalProps) {
  const { _id, cuorse_name } = postData;

  const [newMessage, setNewMessage] = useState("");
  const [rating, setRating] = useState<number>(0);
  const [comments, setComments] = useState<Comments[]>([]);
  const [totalComments, setTotalComments] = useState(0);
  const [averageRate, setAverageRate] = useState(0);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [statusFilter, setStatusFilter] = useState<string>("accepted");
  const [sortBy, setSortBy] = useState<string>("createdAt");
  const [sortOrder, setSortOrder] = useState<string>("desc");
  const [usersCache, setUsersCache] = useState<Record<string, any>>({});

  const { request } = useAxios();
  const containerRef = useRef<HTMLDivElement>(null);
  const currentUser = useUser();
  const requireAuth = useRequireAuth();
  const [hasRatedCourse, setHasRatedCourse] = useState(false);

  // تابع دریافت اطلاعات کاربر با caching
  const fetchUserInfo = async (userId: string) => {
    if (usersCache[userId]) {
      return usersCache[userId];
    }

    try {
      const response = await request("GET", `/profile/${userId}`);
      if (response?.user) {
        const userData = response.user;
        setUsersCache((prev) => ({ ...prev, [userId]: userData }));
        return userData;
      }
    } catch (error) {
      console.error(`Error fetching user ${userId}:`, error);
    }
    return null;
  };

  // دریافت تعداد کل کامنت‌ها و آمار
  const fetchCommentsStats = async () => {
    if (!_id) return;
    
    try {
      const response = await request(
        "GET",
        `/academy/course/${_id}/comments/count`
      );
      if (response?.success) {
        setTotalComments(response.data.totalComments);
        setAverageRate(response.data.averageRate || 0);
      }
    } catch (error) {
      console.error("Error fetching stats:", error);
    }
  };

  // دریافت لیست کامنت‌ها
  const fetchComments = async (pageNum: number, append = false) => {
    if (loading || !_id) return;

    setLoading(true);
    try {
      const response = await request(
        "GET",
        `/academy/course/${_id}/comments?page=${pageNum}&limit=20&status=${statusFilter}&sortBy=${sortBy}&sortOrder=${sortOrder}`
      );

      if (response?.success) {
        let newComments = response.data.comments;
        const pagination = response.data.pagination;

        if (newComments && newComments.length > 0) {
          // بررسی اینکه آیا بک‌اند اطلاعات کاربر را populate کرده است
          if (newComments[0]?.user_id?.user_name) {
            // اطلاعات کاربر قبلاً داخل کامنت است
            setComments((prev) =>
              append ? [...prev, ...newComments] : newComments
            );
          } else {
            // اگر بک‌اند فقط user_id را برگردانده، اطلاعات کاربر را بگیریم
            const uniqueUserIds = [...new Set(newComments.map((c) => c.user_id))];
            
            // دریافت اطلاعات همه کاربران به صورت همزمان
            const usersData = await Promise.all(
              uniqueUserIds.map((id) => fetchUserInfo(id))
            );
            
            // ساخت mapping از userId به اطلاعات کاربر
            const userMap: Record<string, any> = {};
            uniqueUserIds.forEach((id, index) => {
              userMap[id] = usersData[index];
            });
            
            // ترکیب کامنت‌ها با اطلاعات کاربران
            const commentsWithUsers = newComments.map((comment) => ({
              ...comment,
              user_id: userMap[comment.user_id] || {
                _id: comment.user_id,
                user_name: "کاربر ناشناس",
                profile_image: null,
                is_verified: "unverified"
              },
            }));
            
            setComments((prev) =>
              append ? [...prev, ...commentsWithUsers] : commentsWithUsers
            );
          }
        } else {
          setComments(append ? [...prev] : []);
        }

        setHasMore(pagination?.hasNextPage || false);
        if (pagination?.totalItems) {
          setTotalComments(pagination.totalItems);
        }
      }
    } catch (error) {
      console.error("Error fetching comments:", error);
      toast.error("خطا در دریافت نظرات");
    } finally {
      setLoading(false);
    }
  };

  // لود اولیه و هنگام تغییر فیلترها
  useEffect(() => {
    if (isOpen && _id) {
      setPage(1);
      setComments([]);
      fetchComments(1, false);
      fetchCommentsStats();
    }
  }, [isOpen, _id, statusFilter, sortBy, sortOrder]);

  // اینفینیت اسکرول
  const observer = useRef<IntersectionObserver | null>(null);
  const lastCommentRef = useCallback(
    (node: HTMLDivElement) => {
      if (loading) return;
      if (observer.current) observer.current.disconnect();
      observer.current = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && hasMore) {
          setPage((prev) => prev + 1);
        }
      });
      if (node) observer.current.observe(node);
    },
    [loading, hasMore]
  );

  useEffect(() => {
    if (page > 1) {
      fetchComments(page, true);
    }
  }, [page]);

  useEffect(() => {
    if (!currentUser?._id) return;
    const alreadyRated = comments.some((item) => {
      const commentUserId =
        typeof item.user_id === "string" ? item.user_id : item.user_id?._id;
      return (
        String(commentUserId) === String(currentUser._id) &&
        Number(item.rate) > 0
      );
    });
    setHasRatedCourse(alreadyRated);
  }, [comments, currentUser?._id]);

  // ارسال کامنت جدید
  const sendMessageHandler = async () => {
    if (!requireAuth()) return;
    if (!newMessage.trim()) {
      toast.error("ثبت نظر الزامی است.");
      return;
    }
    if (newMessage.length > 500) {
      toast.error("کامنت نمی‌تواند بیش از 500 کاراکتر باشد.");
      return;
    }
    if (!hasRatedCourse && rating === 0) {
      toast.error("برای اولین نظر، ثبت امتیاز الزامی است.");
      return;
    }

    try {
      const payload: Record<string, unknown> = {
        course_id: _id,
        comment: newMessage,
      };
      if (!hasRatedCourse && rating > 0) {
        payload.rate = rating;
      }

      const response = await request("POST", "/academy/comment/create", payload);

      if (response?.success) {
        toast.success("نظر شما با موفقیت ثبت شد");
        setNewMessage("");
        setRating(0);
        if (!hasRatedCourse && rating > 0) {
          setHasRatedCourse(true);
        }

        // ریست کردن صفحه و دریافت مجدد کامنت‌ها
        setPage(1);
        setComments([]);
        await fetchComments(1, false);
        await fetchCommentsStats();

        if (onCommentAdded) {
          onCommentAdded();
        }
      }
    } catch (error: any) {
      console.error("Error sending comment:", error);
      toast.error(error?.response?.data?.message || "خطا در ثبت نظر");
    }
  };

  // تغییر وضعیت کامنت
  const handleStatusChange = async (commentId: string, newStatus: string) => {
    try {
      const response = await request(
        "PATCH",
        `/academy/comment/${commentId}/status`,
        {
          status: newStatus,
        }
      );

      if (response?.success) {
        toast.success(response.message);
        setPage(1);
        setComments([]);
        await fetchComments(1, false);
      }
    } catch (error: any) {
      console.error("Error changing status:", error);
      toast.error(error?.response?.data?.message || "خطا در تغییر وضعیت");
    }
  };

  // حذف کامنت
  const handleDeleteComment = async (commentId: string) => {
    if (!confirm("آیا از حذف این کامنت مطمئن هستید؟")) return;

    try {
      const response = await request(
        "DELETE",
        `/academy/comment/${commentId}/delete`
      );

      if (response?.success) {
        toast.success("کامنت با موفقیت حذف شد");
        setPage(1);
        setComments([]);
        await fetchComments(1, false);
        await fetchCommentsStats();
      }
    } catch (error: any) {
      console.error("Error deleting comment:", error);
      toast.error(error?.response?.data?.message || "خطا در حذف کامنت");
    }
  };

  // دریافت وضعیت نمایشی
  const getStatusBadge = (status: string) => {
    switch (status) {
      case "accepted":
        return (
          <span className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded">
            تایید شده
          </span>
        );
      case "pending":
        return (
          <span className="text-xs bg-yellow-100 text-yellow-700 px-2 py-1 rounded">
            در انتظار تایید
          </span>
        );
      case "rejected":
        return (
          <span className="text-xs bg-red-100 text-red-700 px-2 py-1 rounded">
            رد شده
          </span>
        );
      default:
        return null;
    }
  };

  // کامپوننت نمایش ستاره‌ها
  const renderStars = (rate: number) => {
    return (
      <div className="flex items-center gap-0.5">
        {[1, 2, 3, 4, 5].map((star) => (
          <svg
            key={star}
            className={`w-4 h-4 ${
              star <= rate ? "text-yellow-400 fill-yellow-400" : "text-gray-300"
            }`}
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
          >
            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
          </svg>
        ))}
      </div>
    );
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose} height="600px">
      <div className="flex flex-col h-full">
        {/* هدر مودال */}
        <div className="border-b pb-3 px-4 dark:border-gray-700">
          <h3 className="font-bold text-lg dark:text-white">{cuorse_name}</h3>
          <div className="flex gap-4 text-sm text-gray-500 dark:text-gray-400 mt-1">
            <span>📝 {totalComments} نظر</span>
            {averageRate > 0 && <span>⭐ {averageRate.toFixed(1)} / 5</span>}
          </div>
        </div>

        {/* بخش لیست کامنت‌ها */}
        <div
          ref={containerRef}
          className="flex-1 overflow-y-auto p-4 space-y-4 no-scrollbar"
        >
          {!loading && comments.length === 0 ? (
            <p className="text-center text-gray-500 py-10">
              هنوز نظری ثبت نشده است. اولین نفری باشید که نظر می‌دهید!
            </p>
          ) : (
            comments.map((item, index) => (
              <div
                key={item?._id || index}
                ref={index === comments.length - 1 ? lastCommentRef : null}
                className="border-b dark:border-gray-700 pb-4 mb-2"
              >
                <div className="flex gap-3">
                  {/* آواتار کاربر */}
                  <div className="shrink-0">
                    <ProfileAvatar
                      src={item?.user_id?.profile_image}
                      alt={item?.user_id?.user_name || "کاربر"}
                      size="chat"
                      rounded="full"
                      fallback="/images/default-avatar.png"
                    />
                  </div>
                  
                  <div className="flex-1">
                    {/* اطلاعات کاربر و امتیاز */}
                    <div className="flex items-center gap-2 flex-wrap mb-2">
                      <span className="font-semibold text-sm dark:text-white inline-flex items-center gap-1">
                        {item?.user_id?.user_name || "کاربر ناشناس"}
                        <VerificationBadge isVerified={item?.user_id?.is_verified} />
                      </span>

                      {item?.rate > 0 && (
                        <div className="mr-2">
                          {renderStars(item.rate)}
                        </div>
                      )}

                      {/* وضعیت کامنت (اختیاری) */}
                      {item.status && item.status !== "accepted" && (
                        <div className="mr-2">
                          {getStatusBadge(item.status)}
                        </div>
                      )}
                    </div>

                    {/* متن کامنت */}
                    <p className="text-sm mt-1 text-gray-700 dark:text-gray-300 leading-relaxed">
                      {item.comment}
                    </p>

                    {/* متادیتا */}
                    <div className="flex items-center gap-4 mt-2 text-xs text-gray-400">
                      <span>
                        {new Date(item.createdAt).toLocaleDateString("fa-IR")}
                      </span>
                      <span className="flex items-center gap-1">
                        ❤️ {item.likes || 0}
                      </span>
                      {item.isEdited && (
                        <span className="text-gray-400">(ویرایش شده)</span>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            ))
          )}

          {loading && (
            <div className="text-center py-4">
              <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 dark:border-white"></div>
              <p className="mt-2 text-sm text-gray-500">
                در حال بارگذاری نظرات...
              </p>
            </div>
          )}
        </div>

        {/* بخش ارسال نظر */}
        <div className="border-t dark:border-gray-700 pt-4 pb-2 px-4 bg-white dark:bg-black">
          <div className="flex flex-col items-center mb-20 gap-3 max-w-md mx-auto">
            {!hasRatedCourse && (
              <Rate
                value={rating}
                onChange={(value) => setRating(value)}
                count={5}
                style={{ fontSize: "28px" }}
              />
            )}
            <div className="flex items-center w-full gap-2">
              <button
                onClick={sendMessageHandler}
                className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
                disabled={!newMessage.trim() || (!hasRatedCourse && rating === 0)}
              >
                <Image
                  width={24}
                  height={24}
                  alt="send"
                  src="/images/icons/send-msg.svg"
                  className="dark:invert min-w-[24px] min-h-[24px] cursor-pointer"
                />
              </button>
              <RoundedInput
                value={newMessage}
                onChange={(e) => {
                  if (e.target.value.length <= 500)
                    setNewMessage(e.target.value);
                }}
                placeholder="نظر خود را بنویسید..."
                className="flex-1"
              />
            </div>
            <div className="flex justify-between w-full text-xs text-gray-400">
              <span>{newMessage.length}/500 کاراکتر</span>
              {rating > 0 && <span>امتیاز: {rating} از 5</span>}
            </div>
          </div>
        </div>
      </div>
    </Modal>
  );
}

export default CommentsModal;