"use client";

import { useEffect, useState } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Button } from "@/components/ui/button";
import { Plus } from "lucide-react";
import { CourseForm } from "./CourseForm";
import { CourseList } from "./CourseList";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Course } from "@/types/types";
import { toast } from "react-hot-toast";
import useAxios from "@/hooks/useAxios";
import { useRouter } from "next/navigation";
import SubscriptionCard from "./SubscriptionCard";
import Cookies from "js-cookie";

// دیتای موقت برای نمایش
const mockCourses: Course[] = [
  {
    id: "1",
    name: "دوره جامع React",
    price: 1200000,
    category: "programming",
    discount: 20,
    caption: "آموزش کامل React از مقدماتی تا پیشرفته",
    duration: "15 ساعت",
    videoCount: 25,
    instructor: "علی رضایی",
    packageImage: "/courses/react.jpg",
    videos: [
      { title: "مقدمه", url: "video1.mp4", isFree: true },
      { title: "نصب و راه اندازی", url: "video2.mp4", isFree: false },
    ],
  },
];

export function CourseManager() {
  const [courses, setCourses] = useState<Course[]>([]);
  const [selectedCourse, setSelectedCourse] = useState<
    Course | undefined | string
  >();
  const [selectedCourse2, setSelectedCourse2] = useState<
    Course | undefined | string
  >();
  const [selectedCourseId, setSelectedCourseId] = useState<
    Course | undefined | string
  >();
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [isDialogOpen1, setIsDialogOpen1] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [activeTab, setActiveTab] = useState("list");

  // State های مربوط به صفحه‌بندی
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [totalCourses, setTotalCourses] = useState(0);
  const itemsPerPage = 6;

  const { request, loading, error } = useAxios();
  const router = useRouter();

  // تابع دریافت دوره‌ها با صفحه‌بندی
  const fetchCourses = async (page = 1) => {
    setIsLoading(true);
    try {
      const response = await request(
        "GET",
        `/academy/academy/get/course?page=${page}&limit=${itemsPerPage}`
      );

      console.log("پاسخ سرور:", response);

      // توجه: با توجه به ساختار دیتای شما
      if (response?.data?.courses) {
        setCourses(response.data.courses);
        setTotalPages(response.data.pagination?.totalPages || 1);
        setTotalCourses(response.data.pagination?.totalItems || 0);
        setCurrentPage(page);
      } else if (response?.courses) {
        // ساختار جایگزین
        setCourses(response.courses);
        setTotalPages(response.pagination?.totalPages || 1);
        setTotalCourses(response.pagination?.totalItems || 0);
        setCurrentPage(page);
      } else {
        console.error("ساختار پاسخ نامعتبر:", response);
        toast.error("خطا در ساختار داده دریافت شده");
      }
    } catch (err) {
      console.log("get error:", err);
      toast.error("خطا در دریافت اطلاعات");
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    fetchCourses(1);
  }, []);

  const handlePageChange = (page: number) => {
    if (page < 1 || page > totalPages) return;
    fetchCourses(page);
    // اسکرول به بالای صفحه
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const handleCreateCourse = async (data: any) => {
    setIsLoading(true);

    try {
      // اینجا درخواست به API بزن
      const newCourse = {
        ...data,
        id: Date.now().toString(),
        createdAt: new Date(),
      };

      const fileInput = document.getElementById(
        "fileInput"
      ) as HTMLInputElement;

      if (!data.cuorse_name) {
        toast.error("نام را پر کنید");
        setIsLoading(false);
        return;
      }
      if (!data.teacher_name) {
        toast.error("نام مدرس را پر کنید");
        setIsLoading(false);
        return;
      }
      if (!data.teacher_number) {
        toast.error("شماره مدرس را پر کنید");
        setIsLoading(false);
        return;
      }
      if (!data.price) {
        toast.error("قیمت را پر کنید");
        setIsLoading(false);
        return;
      }
      if (!data.category) {
        toast.error("یک کتگوری انتخواب کنید");
        setIsLoading(false);
        return;
      }
      if (!data.course_time) {
        toast.error("تایم اموزش را پر کنید");
        setIsLoading(false);
        return;
      }
      if (!data.caption) {
        toast.error("کپشن را پر کنید");
        setIsLoading(false);
        return;
      }

      if (!fileInput?.files?.[0]) {
        toast.error("لطفا رسانه را کامل کنید");
        setIsLoading(false);
        return;
      }

      const formData = new FormData();
      formData.append("course_image", fileInput.files[0]);
      formData.append("price", data.price);
      formData.append("cuorse_name", data.cuorse_name);
      formData.append("category", data.category);
      formData.append("offer", data.offer);
      formData.append("caption", data.caption);
      formData.append("course_time", data.course_time);
      formData.append("number_of_course_content", "0");
      formData.append("teacher_number", data.teacher_number);
      formData.append("teacher_name", data.teacher_name);

      try {
        await request("POST", "/academy/academy/creat/course", formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        });

        router.push("/settings/academy/Dashboard");
      } catch (err) {
        console.log("Upload error:", err);
        toast.error("خطا در ثبت اطلاعات");
      } finally {
        setIsLoading(false);
      }

      // console.log(newCourse);

      setCourses([...courses, newCourse]);
      setIsDialogOpen(false);
      setSelectedCourse(undefined);

      // باز کردن پاپ‌آپ سفارشی
      //   showCustomPopup();
    } catch (error) {
      toast.error("خطا در ایجاد پکیج");
    } finally {
      setIsLoading(false);
    }
  };
  const handleEditCourse = async (data: any) => {
    setIsLoading(true);

    const fileInput = document.getElementById("fileInput") as HTMLInputElement;

    try {
      const formData = new FormData();

      // ========== اضافه کردن فیلدهای متنی ==========
      formData.append("price", data.price);
      formData.append("cuorse_name", data.cuorse_name);
      formData.append("category", data.category);
      formData.append("offer", data.offer || "0");
      formData.append("courseId", data._id);
      formData.append("caption", data.caption || "");
      formData.append("course_time", data.course_time || "");
      formData.append(
        "number_of_course_content",
        data.number_of_course_content || "0"
      );
      formData.append("teacher_number", data.teacher_number || "");
      formData.append("teacher_name", data.teacher_name || "");

      // ========== اضافه کردن عکس (فقط در صورت وجود) ==========
      if (fileInput && fileInput.files && fileInput.files[0]) {
        formData.append("course_image", fileInput.files[0]);
      }
      // اگر عکس جدیدی انتخاب نشده، فیلد course_image رو ارسال نکن

      console.log("داده‌های ارسالی برای ویرایش:", {
        courseId: data._id,
        name: data.cuorse_name,
        price: data.price,
        hasNewImage: !!fileInput?.files?.[0],
      });

      const response = await request(
        "PATCH",
        "/academy/academy/update/course",
        formData,
        {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        }
      );

      console.log("پاسخ سرور:", response);

      // toast.success("پکیج با موفقیت ویرایش شد");
      setIsDialogOpen(false);
      setSelectedCourse(undefined);

      // رفرش کردن لیست دوره‌ها
      // await fetchCourses();
    } catch (err) {
      console.log("Upload error:", err);
      toast.error("خطا در ویرایش پکیج");
    } finally {
      setIsLoading(false);
    }
  };

  const handleDeleteCourse = async (_id: string) => {
    if (confirm("آیا از حذف این پکیج مطمئن هستید؟")) {
      setIsLoading(true);
      try {
        await request("DELETE", "/academy/academy/delete/course", {
          courseId: _id,
        });

        toast.success("پکیج با موفقیت حذف شد");

        // بعد از حذف، صفحه جاری را مجدداً fetch کن
        fetchCourses(currentPage);
      } catch (err) {
        console.log("Upload error:", err);
        toast.error("خطا در حذف اطلاعات");
      } finally {
        setIsLoading(false);
      }
    }
  };
  const handlePurchase = async (plan: {
    duration: string;
    label: string;
    price: number;
    discount?: number;
  }) => {
    let loadingToastId = null;

    try {
      // اعتبارسنجی
      if (!selectedCourseId) {
        toast.error("شناسه دوره یافت نشد");
        return;
      }

      if (!plan?.duration) {
        toast.error("نوع طرح اشتراک مشخص نیست");
        return;
      }

      const token = Cookies.get("token");
    
      if (!token) {
        toast.error("لطفاً ابتدا وارد حساب کاربری خود شوید");
        
      }

      // نمایش لودینگ
      loadingToastId = toast.loading("در حال اتصال به درگاه پرداخت...");

      console.log("ارسال درخواست پرداخت:", {
        courseId: selectedCourseId,
        planDuration: plan.duration,
        planLabel: plan.label,
        price: plan.price,
      });

      const response = await request(
        "POST",
        "/academy/academy/course/payment",
        {
          courseId: selectedCourseId,
          planDuration: plan.duration,
        }
      );

      // بستن لودینگ
      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("به درگاه پرداخت هدایت شدید");

        // بستن دیالوگ بعد از باز شدن درگاه (اختیاری)
        setTimeout(() => {
          setIsDialogOpen1?.(false);
        }, 1000);
      } 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 handleEdit = (course: Course) => {
    setSelectedCourse(course);
    setActiveTab("list");
    setIsDialogOpen(true);
  };
  const handleVideo = (course: Course) => {
    setSelectedCourse2(course);
    setSelectedCourse("videos");
    setActiveTab("list");
    setIsDialogOpen(true);
    setSelectedCourseId(course._id);
  };
  const handlePro = (courseId: string) => {
    setIsDialogOpen1(true);
    setSelectedCourseId(courseId);
  };
  const handleAddVideo = async (data: any) => {
    console.log("داده‌های دریافتی:", data);

    setIsLoading(true);

    try {
      //   // پردازش ویدیوها
      //   if (data.videos && data.videos.length > 0) {
      //     for (const video of data.videos) {
      //       const formData = new FormData();
      //       formData.append("courseId", selectedCourseId as string);
      //       formData.append("title", video.title);
      //       formData.append("isFree", video.isFree ? "true" : "false");
      //       formData.append("video", video.file);

      //       const response = await request("POST", "/academy/academy/course/add-video", formData, {
      //         headers: {
      //           "Content-Type": "multipart/form-data",
      //         },
      //       });

      //       console.log("ویدیو با موفقیت اضافه شد:", response);
      //       toast.success(`ویدیو "${video.title}" با موفقیت اضافه شد`);
      //     }
      //   }

      //   // پردازش عکس‌ها
      //   if (data.imageFields && data.imageFields.length > 0) {
      //     for (const image of data.imageFields) {
      //       const formData = new FormData();
      //       formData.append("courseId", selectedCourseId as string);
      //       formData.append("title", image.title);
      //       formData.append("image", image.file);

      //       const response = await request("POST", "/academy/academy/course/add-image", formData, {
      //         headers: {
      //           "Content-Type": "multipart/form-data",
      //         },
      //       });

      //       console.log("عکس با موفقیت اضافه شد:", response);
      //       toast.success(`عکس "${image.title}" با موفقیت اضافه شد`);
      //     }
      //   }

      setIsDialogOpen(false);
    } catch (error) {
      console.error("خطا در آپلود:", error);
      toast.error("خطا در آپلود فایل");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="container mx-auto p-6">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-3xl font-bold">مدیریت پکیج‌ها</h1>
        <Button
          onClick={() => {
            setSelectedCourse(undefined);
            setIsDialogOpen(true);
          }}
        >
          <Plus className="w-4 h-4 ml-2" />
          ایجاد پکیج جدید
        </Button>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="grid w-full grid-cols-1">
          <TabsTrigger value="list">لیست پکیج‌ها</TabsTrigger>
          {/* <TabsTrigger value="create">ایجاد پکیج جدید</TabsTrigger> */}
        </TabsList>

        <TabsContent value="list" className="mt-6">
          {courses.length === 0 ? (
            <div className="text-center py-12">
              <p className="text-muted-foreground">هیچ پکیجی یافت نشد</p>
              <Button
                variant="outline"
                className="mt-4"
                onClick={() => setIsDialogOpen(true)}
              >
                اولین پکیج را ایجاد کنید
              </Button>
            </div>
          ) : (
            <CourseList
              courses={courses}
              onEdit={handleEdit}
              onDelete={handleDeleteCourse}
              onVideo={handleVideo}
              onPro={handlePro}
              currentPage={currentPage}
              totalPages={totalPages}
              totalCourses={totalCourses}
              onPageChange={handlePageChange}
              isLoading={isLoading}
            />
          )}
        </TabsContent>

        {/* <TabsContent value="create" className="mt-6">
          <div className="max-w-4xl mx-auto">
            <CourseForm
              initialData={selectedCourse}
              onSubmit={selectedCourse ? handleEditCourse : handleCreateCourse}
              isLoading={isLoading}
            />
          </div>
        </TabsContent> */}
      </Tabs>

      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>
              {selectedCourse ? "ویرایش پکیج" : "ایجاد پکیج جدید"}
            </DialogTitle>
          </DialogHeader>
          <CourseForm
            initialData={selectedCourse}
            onSubmit={
              selectedCourse === "videos"
                ? handleAddVideo
                : selectedCourse
                ? handleEditCourse
                : handleCreateCourse
            }
            initialData2={selectedCourse2}
            isLoading={isLoading}
          />
        </DialogContent>
      </Dialog>
      <Dialog open={isDialogOpen1} onOpenChange={setIsDialogOpen1}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">

          <div>
            <SubscriptionCard
              benefits={["نمایش به صورت هایلایت در لیست پکیج ها"]}
              plans={[
                { duration: "1month", label: "یک ماهه", price: 99000 },
                {
                  duration: "3month",
                  label: "سه ماهه",
                  price: 270000,
                  discount: 10,
                },
                {
                  duration: "1year",
                  label: "یک ساله",
                  price: 990000,
                  discount: 20,
                },
              ]}
              currency="تومان"
              onPurchase={handlePurchase}
            />
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}
