"use client";

import React, { useCallback, useEffect, useRef, useState } from "react";
import Image from "next/image";
import { motion } from "framer-motion";
import { toast } from "react-hot-toast";
import {
  Lock,
  Play,
  CheckCircle,
  ShoppingCart,
  Clock,
  User,
  BookOpen,
  Percent,
  Tag,
  FileVideo,
  Star,
} from "lucide-react";
import { Course } from "@/types/types";
import useAxios from "@/hooks/useAxios";
import { Comments } from "@/components/academy/CommentsModal";
import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
import VerificationBadge from "@/components/main/VerificationBadge";
import ProfileAvatar from "@/components/main/ProfileAvatar";
import { usePathname } from "next/navigation";
import Cookies from "js-cookie";

// ==================== دیتای فیک ====================
const MOCK_COURSE = {
  _id: "course_123",
  cuorse_name: "در حال بارگذاری...",
  price: 0,
  category: "در حال بارگذاری...",
  offer: 0,
  caption: "در حال بارگذاری...",
  course_time: "در حال بارگذاری...",
  teacher_name: "در حال بارگذاری...",
  teacher_number: "در حال بارگذاری...",
  course_image: "در حال بارگذاری...",
  number_of_course_content: "0",
  averageRate: 0,
};

const MOCK_VIDEOS = [
  {
    _id: "video_1",
    file_name: "در حال بارگذاری...",
    course_video: "/videos/sample1.mp4",
    is_free: false,
    type: "video",
    duration: "در حال بارگذاری...",
  }

];

// کامپوننت نمایش ریتینگ
const RatingStars = ({ rate }: { rate: number }) => {
  return (
    <div className="flex items-center gap-1">
      {[...Array(5)].map((_, i) => (
        <Star
          key={i}
          className={`w-4 h-4 ${
            i < Math.floor(rate)
              ? "text-yellow-400 fill-yellow-400"
              : "text-gray-300"
          }`}
        />
      ))}
      <span className="text-sm text-gray-600 mr-2">({rate.toFixed(1)})</span>
    </div>
  );
};

interface CourseDetailProps {
  courseId?: string;
  initialIsPurchased?: boolean;
}

interface MediaFile {
  id: string;
  title: string;
  file: File | null;
  preview?: string;
  course_video: string;
  type: "image" | "video";
  isFree?: boolean;
  is_free?: boolean;
}

export default function CourseDetail({
  courseId,
  initialIsPurchased = false,
}: CourseDetailProps) {
  const [selectedVideo, setSelectedVideo] = useState(MOCK_VIDEOS[0]);
  const [isPurchased, setIsPurchased] = useState(initialIsPurchased);
  const [purchasing, setPurchasing] = useState(false);
  const [videos] = useState(MOCK_VIDEOS);
  const [course] = useState(MOCK_COURSE);

  const pathname = usePathname();
  const match = pathname.match(/\/academy\/([^\/]+)/);
  const id = match ? match[1] : null;

  const [courses, setCourses] = useState<Course[]>([]);
  const { request } = useAxios();

  const _id = courses[0]?._id;

  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 [videoFields, setVideoFields] = useState<MediaFile[]>([]);

  const [newScore, setNewScore] = useState<number>(0);
  const [rating, setRating] = useState<number>(0);

  const containerRef = useRef<HTMLDivElement>(null);


  useEffect(() => {
    const getAcademyCourses = async () => {
      

      try {
        const getAcademyCourses = (await request(
          "GET",
          `/academy/academy/course/content?courseId=${id}&page=1&limit=20`,
          {}
        )) as MediaFile;

        setVideoFields(getAcademyCourses.data.courses);
        setSelectedVideo(getAcademyCourses.data.courses[0])
      } catch (err) {
        console.log("get error:", err);
        toast.error("خطا در دریافت اطلاعات");
      } finally {
      }
    };

    getAcademyCourses();
  }, []);
  useEffect(() => {
    const getAcademyCourses = async () => {
      try {
        const getCoursespayment = await request(
          "GET",  // تغییر به GET
          `/academy/course/checkCoursePurchase/${id}`  // ارسال ID در مسیر
        );
  
        console.log(getCoursespayment);
        
        if (getCoursespayment?.success) {
          if (getCoursespayment.isPurchased) {
            console.log("دوره خریداری شده است");
            setIsPurchased(true)
          } else {
            console.log("دوره خریداری نشده است");
            setIsPurchased(false)
          }
        }
        
      } catch (err) {
        console.log("get error:", err);
        toast.error("خطا در دریافت اطلاعات");
      }
    };
  
    getAcademyCourses();
  }, [id]);

  // تابع دریافت اطلاعات کاربر با 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 || 0);
        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}`
      );

      let sum = 0;
      let count = 0;
      
      response.data.stats.rateDistribution.forEach(element => {
        sum += Number(element);
        count++;
      });
      
      const average = sum / count;
      const averagesum = sum *1;

      const roundedRating = Math.round(average * 10) / 10
      setRating(roundedRating);
      setNewScore(averagesum);

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

        if (newComments && newComments.length > 0) {
          // بررسی اینکه آیا اطلاعات کاربر در کامنت‌ها وجود دارد
          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((userId, index) => {
              userMap[userId] = usersData[index] || {
                _id: userId,
                user_name: "کاربر ناشناس",
                profile_image: null,
                is_verified: "unverified"
              };
            });
            
            // ترکیب کامنت‌ها با اطلاعات کاربران
            const commentsWithUsers = newComments.map((comment) => ({
              ...comment,
              user_id: userMap[comment.user_id],
            }));
            
            setComments((prev) =>
              append ? [...prev, ...commentsWithUsers] : commentsWithUsers
            );
          }
        } else {
          if (!append) setComments([]);
        }

        setHasMore(pagination?.hasNextPage || false);
        if (pagination?.totalItems) {
          setTotalComments(pagination.totalItems);
        }
        
        // به‌روزرسانی averageRate از اطلاعات بازگشتی
        if (response.data.stats?.averageRate) {
          setAverageRate(response.data.stats.averageRate);
        }
      }
    } catch (error) {
      console.error("Error fetching comments:", error);
      toast.error("خطا در دریافت نظرات");
    } finally {
      setLoading(false);
    }
  };

  // لود اولیه و هنگام تغییر فیلترها
  useEffect(() => {
    if (_id) {
      setPage(1);
      setComments([]);
      fetchComments(1, false);
      fetchCommentsStats();
    }
  }, [_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(() => {
    const getAcademyCourses = async () => {
      try {
        const response = await request(
          "GET",
          `/academy/academy/get/curses?page=1&limit=20&status=accept&_id=${id}`
        );

        if (response?.success && response?.data?.courses) {
          setCourses(response.data.courses);
        } else if (response?.data && Array.isArray(response.data)) {
          setCourses(response.data);
        } else if (Array.isArray(response)) {
          setCourses(response);
        } else {
          console.error("Unexpected response structure:", response);
          setCourses([]);
        }
      } catch (err) {
        console.log("get error:", err);
        toast.error("خطا در دریافت اطلاعات");
        setCourses([]);
      }
    };

    if (id) {
      getAcademyCourses();
    }
  }, [id, request]);

  // خرید دوره
  // const handlePurchase = async () => {
  //   setPurchasing(true);
  
  //   try {
  //     const response = await request(
  //       "POST",
  //       "/academy/academy/course/payment-web",
  //       {
  //         courseId: id, // یا _id که از courses[0]?._id می‌آید
  //       }
  //     );
  
  //     console.log("پاسخ کامل سرور:", response);
  
  //     // بررسی موفقیت آمیز بودن درخواست
  //     if (response?.success && response?.paymentUrl) {
  //       // هدایت کاربر به درگاه پرداخت زرین‌پال
  //       window.location.href = response.paymentUrl;
  //     } else {
  //       // نمایش خطا به کاربر
  //       toast.error(response?.message || "خطا در اتصال به درگاه پرداخت");
  //       setPurchasing(false);
  //     }
  //   } catch (error) {
  //     console.error("خطا در خرید:", error);
  //     toast.error("خطا در ارتباط با سرور");
  //     setPurchasing(false);
  //   }
  // };


  const handlePurchase = async (plan: {
    duration: string;
    label: string;
    price: number;
    discount?: number;
  }) => {
    let loadingToastId = null;
    
    try {

      
      const token = Cookies.get("token");
    
      if (!token) {
        toast.error("لطفاً ابتدا وارد حساب کاربری خود شوید");
        return
      }
  
      // نمایش لودینگ
      loadingToastId = toast.loading("در حال اتصال به درگاه پرداخت...");
      
      console.log("ارسال درخواست پرداخت:", {
        planDuration: plan.duration,
        planLabel: plan.label,
        price: plan.price
      });
      
      const response = await request(
        "POST",
        "/academy/academy/course/payment-web",
        {
          courseId: id, // یا _id که از courses[0]?._id می‌آید
        }
      );
      
      // بستن لودینگ
      toast.dismiss(loadingToastId);
      
      console.log("پاسخ کامل سرور:", response);
      
      // پردازش پاسخ (ساختارهای مختلف احتمالی)
      let authority = null;
      let paymentUrl = null;
      
      if (response?.data?.authority) {
        authority = response.data.authority;
        paymentUrl = `https://www.zarinpal.com/pg/StartPay/${authority}`;
      } else if (response?.authority) {
        authority = response.authority;
        paymentUrl = `https://www.zarinpal.com/pg/StartPay/${authority}`;
      } else if (response?.data?.paymentUrl) {
        paymentUrl = response.data.paymentUrl;
      } else if (response?.paymentUrl) {
        paymentUrl = response.paymentUrl;
      }
      
      if (paymentUrl) {
        console.log("هدایت به درگاه:", paymentUrl);
        
        // باز کردن درگاه پرداخت
        const newWindow = window.open(paymentUrl, "_blank");
        
        if (!newWindow) {
          toast.error("پاپ‌آپ مسدود شده است. لطفاً اجازه باز کردن پنجره جدید را بدهید.");
          return;
        }
        
        toast.success("به درگاه پرداخت هدایت شدید");
        
       
      
      } else {
        console.error("ساختار پاسخ نامعتبر:", response);
        toast.error(response?.data?.message || response?.message || "خطا در دریافت اطلاعات پرداخت");
      }
      
    } catch (err: any) {
      // بستن لودینگ در صورت خطا
      if (loadingToastId) {
        toast.dismiss(loadingToastId);
      }
      
      console.error("خطا در شروع پرداخت:", err);
      
      // استخراج پیام خطا
      let errorMessage = "خطا در شروع پرداخت";
      
      if (err?.response?.data?.message) {
        errorMessage = err.response.data.message;
      } else if (err?.response?.data?.error) {
        errorMessage = err.response.data.error;
      } else if (err?.message) {
        errorMessage = err.message;
      }
      
      // نمایش خطاهای خاص زرین‌پال
      if (errorMessage.includes("amount") || errorMessage.includes("مبلغ")) {
        errorMessage = "مبلغ پرداختی نامعتبر است";
      } else if (errorMessage.includes("merchant")) {
        errorMessage = "خطا در تنظیمات درگاه پرداخت";
      }
      
      toast.error(errorMessage);
    }
  };


  // پخش ویدیو
  const handlePlayVideo = (video: (typeof MOCK_VIDEOS)[0]) => {
    if (!video.is_free && !isPurchased) {
      toast.error("برای مشاهده این ویدیو باید دوره را خریداری کنید");
      return;
    }
    setSelectedVideo(video);
    toast.success(`در حال پخش: ${video.file_name}`);
  };

  // جلوگیری از دانلود ویدیو
  const preventDownload = (
    e:
      | React.MouseEvent<HTMLVideoElement>
      | React.KeyboardEvent<HTMLVideoElement>
  ) => {
    e.preventDefault();
    toast.error("دانلود این ویدیو امکان پذیر نیست");
  };

  const finalPrice = courses[0]?.offerNumber > 0 
    ? courses[0]?.price * (1 - courses[0]?.offerNumber / 100) 
    : course.price;

  const freeVideosCount = videos.filter((v) => v.is_free).length;
  const paidVideosCount = videos.filter((v) => !v.is_free).length;

  // کامپوننت نمایش ستاره‌های کوچک برای کامنت‌ها
  const renderSmallStars = (rate: number) => {
    return (
      <div className="flex items-center gap-0.5">
        {[1, 2, 3, 4, 5].map((star) => (
          <Star
            key={star}
            className={`w-3 h-3 ${
              star <= rate ? "text-yellow-400 fill-yellow-400" : "text-gray-300"
            }`}
          />
        ))}
      </div>
    );
  };

  // در صفحه موفقیت پرداخت
useEffect(() => {
  const params = new URLSearchParams(window.location.search);
  const paymentStatus = params.get('payment');
  
  if (paymentStatus === 'success') {
    toast.success("پرداخت با موفقیت انجام شد");
    setIsPurchased(true);
  }
}, []);

  return (
    <div className="min-h-screen bg-white dark:bg-neutral-950">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* سمت راست - پخش ویدیو و اطلاعات */}
          <div className="lg:col-span-2 space-y-6">
            {/* پلیر ویدیو */}
            <div className="bg-black rounded-xl overflow-hidden shadow-lg">
              <div className="relative">
                <video
                  key={selectedVideo?._id || ""}
                  className="w-full aspect-video"
                  controls
                  controlsList="nodownload noplaybackrate"
                  onContextMenu={preventDownload}
                  onKeyDown={preventDownload}
                  disablePictureInPicture
                >
                  <source src={"https://app.modstagram.ir" + selectedVideo?.course_video} type="video/mp4" />
                  مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند
                </video>

                {!selectedVideo?.is_free && !isPurchased && (
                  <div className="absolute inset-0 bg-black/80 flex flex-col items-center justify-center backdrop-blur-sm">
                    <Lock className="w-20 h-20 text-white mb-4" />
                    <p className="text-white text-xl font-bold mb-2">
                      این ویدیو رایگان نیست
                    </p>
                    <p className="text-gray-300 text-sm mb-6">
                      برای مشاهده تمام ویدیوها دوره را تهیه کنید
                    </p>
                    <button
                      onClick={handlePurchase}
                      className="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-lg flex items-center gap-2 font-bold transition-colors"
                    >
                      <ShoppingCart className="w-5 h-5" />
                      خرید دوره با {Math.round(finalPrice).toLocaleString()} تومان
                    </button>
                  </div>
                )}
              </div>

              <div className="p-4 bg-neutral-200 dark:bg-neutral-800 text-black dark:text-white">
                <h3 className="font-bold text-lg">{selectedVideo?.file_name || ""}</h3>
                <div className="flex items-center gap-4 mt-2 text-sm text-gray-400">
                  <span> {selectedVideo?.duration || ""}</span>
                  {selectedVideo?.is_free && (
                    <span className="text-green-500">✓ ویدیوی رایگان</span>
                  )}
                </div>
              </div>
            </div>

            {/* توضیحات دوره */}
            <div className="bg-neutral-200 dark:bg-neutral-800 text-black dark:text-white rounded-xl p-6 shadow-sm">
              <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
                <BookOpen className="w-5 h-5 text-[#FF107D]" />
                درباره دوره
              </h2>
              <div className="prose dark:prose-invert max-w-none">
                {courses[0]?.caption || course.caption}
              </div>
            </div>

            {/* نظرات */}
            <div className="bg-neutral-200 dark:bg-neutral-800 text-black dark:text-white rounded-xl p-6 shadow-sm">
              <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
                <Star className="w-5 h-5 text-yellow-500" />
                نظرات دانشجویان
                {totalComments > 0 && (
                  <span className="text-sm text-gray-500">({totalComments} نظر)</span>
                )}
              </h2>
              
              {/* نمایش میانگین ریتینگ */}
              <div className="mb-6 p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-gray-600 dark:text-gray-400">میانگین امتیاز</p>
                    <RatingStars rate={rating || course.averageRate} />
                  </div>
                  <div className="text-3xl font-bold text-yellow-600">
                    {(rating || course.averageRate).toFixed(1)}
                  </div>
                </div>
              </div>

              <div
                ref={containerRef}
                className="flex-1 overflow-y-auto p-4 space-y-4 max-h-[600px]"
              >
                {!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 border-gray-200 dark:border-gray-700 pb-4 mb-4"
                    >
                      <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">
                                {renderSmallStars(item.rate)}
                                <span className="text-xs text-yellow-600 mr-1">
                                  ({item.rate})
                                </span>
                              </div>
                            )}
                          </div>

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

                          {/* متادیتا */}
                          <div className="flex gap-3 mt-2 text-xs text-gray-400">
                            <span>
                              {item.createdAt
                                ? new Date(item.createdAt).toLocaleDateString("fa-IR")
                                : "تاریخ نامشخص"}
                            </span>
                            <span className="flex items-center gap-1">
                              ❤️ {item.likes || 0}
                            </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>
          </div>

          {/* سمت چپ - اطلاعات دوره و لیست ویدیوها */}
          <div className="space-y-6">
            {/* تصویر و اطلاعات اصلی */}
            <div className="bg-neutral-200 dark:bg-neutral-800 text-black dark:text-white rounded-xl overflow-hidden shadow-sm top-8">
              <div className="relative h-48 bg-gradient-to-r from-[#FF107D] to-[#FF107D50]">
                {courses[0]?.course_image && (
                  <Image
                    src={IMAGE_BASE_URL + courses[0]?.course_image}
                    alt={courses[0]?.cuorse_name || "course"}
                    fill
                    className="object-cover"
                    priority
                  />
                )}
              </div>

              <div className="p-6">
                <h1 className="text-2xl font-bold mb-3">
                  {courses[0]?.cuorse_name || course.cuorse_name}
                </h1>

                {/* نمایش امتیاز دوره */}
                <div className="mb-4">
                  <RatingStars rate={rating || course.averageRate} />
                </div>

                {/* قیمت */}
                <div className="mb-4">
                  {courses[0]?.offerNumber > 0 ? (
                    <div className="space-y-2">
                      <div className="flex items-center gap-3 flex-wrap">
                        <span className="text-3xl font-bold text-[#FF107D]">
                          {Math.round(
                            courses[0]?.price * (1 - courses[0]?.offerNumber / 100)
                          ).toLocaleString()} تومان
                        </span>
                        <span className="text-sm line-through text-gray-400">
                          {Math.round(courses[0]?.price).toLocaleString()} تومان
                        </span>
                        <span className="bg-red-500 text-white text-xs px-2 py-1 rounded-full flex items-center gap-1">
                          <Percent className="w-3 h-3" />
                          {courses[0]?.offerNumber}% تخفیف
                        </span>
                      </div>
                    </div>
                  ) : (
                    <span className="text-3xl font-bold text-[#FF107D]">
                      {Math.round(courses[0]?.price || course.price).toLocaleString()} تومان
                    </span>
                  )}
                </div>

                {/* دکمه خرید */}
                {isPurchased ? (
                  <div className="bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 p-3 rounded-lg flex items-center justify-center gap-2">
                    <CheckCircle className="w-5 h-5" />
                    <span className="font-medium">دوره خریداری شده است</span>
                  </div>
                ) : (
                  <button
                    onClick={handlePurchase}
                    disabled={purchasing}
                    className="w-full bg-[#FF107D] hover:bg-[#FF107D80] text-white py-3 rounded-lg font-bold flex items-center justify-center gap-2 transition-colors disabled:opacity-50"
                  >
                    <ShoppingCart className="w-5 h-5" />
                    {purchasing ? "در حال اتصال به درگاه..." : "خرید دوره"}
                  </button>
                )}

                {/* مشخصات دوره */}
                <div className="mt-6 space-y-3 border-t pt-4">
                  <div className="flex items-center gap-2 text-gray-600 dark:text-gray-300">
                    <User className="w-4 h-4 text-[#FF107D]" />
                    <span className="text-sm">مدرس: {courses[0]?.teacher_name || course.teacher_name}</span>
                  </div>
                  <div className="flex items-center gap-2 text-gray-600 dark:text-gray-300">
                    <Clock className="w-4 h-4 text-[#FF107D]" />
                    <span className="text-sm">
                      مدت زمان: {courses[0]?.course_time || course.course_time}
                    </span>
                  </div>
                  <div className="flex items-center gap-2 text-gray-600 dark:text-gray-300">
                    <FileVideo className="w-4 h-4 text-[#FF107D]" />
                    <span className="text-sm">
                      تعداد ویدیوها: {courses[0]?.number_of_course_content || course.number_of_course_content}
                    </span>
                  </div>
                  <div className="flex items-center gap-2 text-gray-600 dark:text-gray-300">
                    <Tag className="w-4 h-4 text-[#FF107D]" />
                    <span className="text-sm">
                      دسته بندی: {courses[0]?.category || course.category}
                    </span>
                  </div>
                </div>

              
              </div>
            </div>

            {/* لیست ویدیوها */}
            <div className="bg-neutral-200 dark:bg-neutral-800 text-black dark:text-white rounded-xl p-6 shadow-sm">
              <h3 className="font-bold text-lg mb-4 flex items-center gap-2">
                <Play className="w-5 h-5 text-[#FF107D]" />
                سرفصل‌های دوره
                <span className="text-sm text-gray-400 mr-2">
                  ({courses[0]?.number_of_course_content} ویدیو)
                </span>
              </h3>

              <div className="space-y-2 max-h-[500px]  no-scrollbar overflow-y-auto pr-2">
                {videoFields.map((video, index) => {
                  const isLocked = !video.is_free && !isPurchased;
                  const isActive = selectedVideo?._id === video._id;

                  return (
                    <motion.button
                      key={video._id}
                      onClick={() => handlePlayVideo(video)}
                      whileHover={{ scale: 1.01 }}
                      whileTap={{ scale: 0.99 }}
                      className={`w-full text-right p-3 rounded-lg flex items-center justify-between transition-all ${
                        isActive
                          ? "bg-[#FF107D20] border-r-4 border-[#FF107D]"
                          : "hover:bg-gray-100 dark:hover:bg-gray-700"
                      }`}
                    >
                      <div className="flex  items-center gap-3">
                        {isLocked ? (
                          <Lock className="w-5 h-5 text-gray-400" />
                        ) : (
                          <div
                            className={`w-8 h-8 rounded-full flex items-center justify-center ${
                              isActive
                                ? "bg-[#FF107D] text-white"
                                : "bg-gray-200 dark:bg-gray-700"
                            }`}
                          >
                            <Play
                              className={`w-4 h-4 ${
                                isActive ? "text-white" : "text-gray-500"
                              }`}
                            />
                          </div>
                        )}
                        <div className="text-right">
                          <p
                            className={`text-sm font-medium ${
                              isLocked
                                ? "text-gray-400"
                                : isActive
                                ? "text-[#FF107D]"
                                : ""
                            }`}
                          >
                            {index + 1}. {video.file_name}
                          </p>
                          <span className="text-xs text-gray-400">
                            {video.duration}
                          </span>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        {video.is_free && !isPurchased && (
                          <span className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded">
                            رایگان
                          </span>
                        )}
                        {isLocked && <Lock className="w-4 h-4 text-gray-400" />}
                      </div>
                    </motion.button>
                  );
                })}
              </div>

             
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}