"use client";

import { useState, useRef, useEffect } from "react";
import { useForm, useFieldArray } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import { motion } from "framer-motion";
import { toast } from "react-hot-toast";
import { ImageIcon } from "lucide-react";
import { Image } from "lucide-react";

import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Textarea } from "../ui/Textarea";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Trash2, Video, Plus, Upload, FileVideo, Play } from "lucide-react";
import useAxios from "@/hooks/useAxios";
import { BASE_URL, IMAGE_BASE_URL, buildStorageUrl } from "../main/BaseUrl";

// ==========================================
// تغییر: حذف IAdvertisingCategory و استفاده از نوع جدید
// ==========================================
// نوع داده برای دسته‌بندی آکادمی
interface IAcademyCategory {
  _id: string;
  title: string;
  slug: string;
  description?: string;
  icon?: string;
  color?: string;
  parent?: string | null;
  level: number;
  order: number;
  course_count: number;
  status: string;
  is_featured: boolean;
}

// اسکیما برای یک ویدیو
const videoSchema = z.object({
  title: z.string().min(1, "عنوان ویدیو الزامی است"),
  file: z.any(),
  url: z.string().optional(),
  isFree: z.boolean().default(false),
});

// اسکیما برای کل پکیج
const courseSchema = z.object({
  cuorse_name: z.string().min(1, "نام پکیج الزامی است"),
  price: z.number().min(0, "قیمت باید بیشتر از 0 باشد"),
  category: z.string().min(1, "دسته بندی الزامی است"),
  offer: z.number().min(0).max(100).default(0),
  caption: z.string().min(1, "کپشن الزامی است"),
  course_time: z.string().min(1, "تایم آموزش الزامی است"),
  teacher_name: z.string().min(1, "نام مدرس الزامی است"),
  teacher_number: z.string().min(1, "شماره مدرس الزامی است"),
  packageImage: z.string().min(1, "عکس پکیج الزامی است"),
  videos: z.array(videoSchema),
});

type CourseFormValues = z.infer<typeof courseSchema>;

interface CourseFormProps {
  initialData?: any;
  initialData2?: any;
  onSubmit: (data: CourseFormValues) => void;
  isLoading?: boolean;
}

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

export function CourseForm({
  initialData,
  initialData2,
  onSubmit,
  isLoading,
}: CourseFormProps) {
  const [previewImage, setPreviewImage] = useState<string>("");

  const [previewProfile, setPreviewProfile] = useState<string>("");
  const [avatar, setAvatar] = useState<string | null>(null);
  // State برای عکس پکیج
  const [packageImageFile, setPackageImageFile] = useState<File | null>(null);
  const [packageImagePreview, setPackageImagePreview] = useState<string>("");

  // State برای عکس‌ها
  const [imageFields, setImageFields] = useState<MediaFile[]>([]);
  const [imageTitle, setImageTitle] = useState("");
  const [imageFile, setImageFile] = useState<File | null>(null);
  const [imagePreview, setImagePreview] = useState("");
  const [imagePreviewUrls, setImagePreviewUrls] = useState<{
    [key: number]: string;
  }>({});

  // State برای ویدیوها (مثل قبل)
  const [videoFields, setVideoFields] = useState<MediaFile[]>([]);
  const [videoTitle, setVideoTitle] = useState("");
  const [videoFile, setVideoFile] = useState<File | null>(null);
  const [videoPreview, setVideoPreview] = useState("");
  const [isFreeVideo, setIsFreeVideo] = useState(false);
  const [videoPreviewUrls, setVideoPreviewUrls] = useState<{
    [key: number]: string;
  }>({});

  // ==========================================
  // تغییر: استفاده از دسته‌بندی آکادمی به جای تبلیغات
  // ==========================================
  const [academyCategories, setAcademyCategories] = useState<
    IAcademyCategory[]
  >([]);
  const [categoriesLoading, setCategoriesLoading] = useState(false);

  const [uploadProgress, setUploadProgress] = useState(0);
  const [isUploading, setIsUploading] = useState(false);
  const { request, loading, error } = useAxios();

  // ==========================================
  // دریافت دسته‌بندی‌های آکادمی از API جدید
  // ==========================================
  useEffect(() => {
    const fetchAcademyCategories = async () => {
      setCategoriesLoading(true);
      try {
        const response = await request<{ data: { docs: IAcademyCategory[] } }>(
          "GET",
          "/academy/categories?status=active&limit=100"
        );
        // بررسی ساختار پاسخ
        if (response?.data?.docs) {
          setAcademyCategories(response.data.docs);
        } else if (response?.data && Array.isArray(response.data)) {
          setAcademyCategories(response.data);
        } else if (Array.isArray(response)) {
          setAcademyCategories(response);
        } else {
          setAcademyCategories([]);
        }
        console.log("دسته‌بندی‌های آکادمی:", response);
      } catch (err) {
        console.log("خطا در دریافت دسته‌بندی‌های آکادمی:", err);
        toast.error("خطا در دریافت دسته‌بندی‌ها");
      } finally {
        setCategoriesLoading(false);
      }
    };

    fetchAcademyCategories();
  }, []);

  useEffect(() => {
    const getAcademyCourses = async () => {
      console.log(initialData2._id);

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

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

    getAcademyCourses();
  }, []);

  // تابع اضافه کردن عکس
  const handleAddImage = () => {
    if (!imageTitle.trim()) {
      toast.error("عنوان عکس را وارد کنید");
      return;
    }
    if (!imageFile) {
      toast.error("لطفاً فایل عکس را انتخاب کنید");
      return;
    }

    const previewUrl = URL.createObjectURL(imageFile);
    const newIndex = imageFields.length;

    setImageFields([
      ...imageFields,
      {
        id: Date.now().toString(),
        title: imageTitle,
        file: imageFile,
        course_video: previewUrl,
        type: "image",
      },
    ]);

    setImagePreviewUrls((prev) => ({ ...prev, [newIndex]: previewUrl }));

    // Reset form
    setImageTitle("");
    setImageFile(null);
    setImagePreview("");
    const fileInput = document.getElementById(
      "imageFileInput"
    ) as HTMLInputElement;
    if (fileInput) fileInput.value = "";

    toast.success("عکس با موفقیت اضافه شد");
  };

  // تابع حذف عکس
  const handleRemoveImage = (index: number) => {
    if (imagePreviewUrls[index]) {
      URL.revokeObjectURL(imagePreviewUrls[index]);
    }
    setImageFields(imageFields.filter((_, i) => i !== index));
    toast.success("عکس حذف شد");
  };

  const form = useForm<CourseFormValues>({
    // resolver: zodResolver(courseSchema),
    defaultValues: initialData || {
      name: "",
      price: 0,
      category: "",
      discount: 0,
      caption: "",
      duration: "",
      instructor: "",
      packageImage: "",
      videos: [],
    },
  });

  const {
    // fields: videoFields,
    append: appendVideo,
    remove: removeVideo,
  } = useFieldArray({
    control: form.control,
    name: "videos",
  });

  // تابع برای انتخاب فایل ویدیو
  const handleVideoFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      // چک کردن نوع فایل
      if (!file.type.startsWith("video/")) {
        toast.error("لطفاً یک فایل ویدیویی معتبر انتخاب کنید");
        return;
      }

      // چک کردن حجم فایل (حداکثر 500 مگابایت)
      if (file.size > 1024 * 1024 * 1024) {
        toast.error("حجم فایل ویدیو نباید بیشتر از 1000 مگابایت باشد");
        return;
      }

      setVideoFile(file);
      const previewUrl = URL.createObjectURL(file);
      setVideoPreview(previewUrl);
    }
  };

  const fileToBase64 = (file: File): Promise<string> => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result as string);
      reader.onerror = (error) => reject(error);
    });
  };

  // اضافه کردن state های جدید
  const [uploadChunks, setUploadChunks] = useState([]);
  const [currentChunk, setCurrentChunk] = useState(0);
  const [totalChunks, setTotalChunks] = useState(0);

  // تابع تبدیل فایل به تکه‌های کوچک
  const splitFileIntoChunks = (file, chunkSize = 10 * 1024 * 1024) => {
    const chunks = [];
    let start = 0;

    while (start < file.size) {
      const end = Math.min(start + chunkSize, file.size);
      const chunk = file.slice(start, end);
      chunks.push({
        data: chunk,
        index: chunks.length,
        start: start,
        end: end,
      });
      start = end;
    }

    return chunks;
  };

  // تابع تبدیل تکه به Base64 (برای هر تکه جداگانه)
  const chunkToBase64 = (chunk) => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result);
      reader.onerror = (error) => reject(error);
      reader.readAsDataURL(chunk);
    });
  };

  // تابع اصلی آپلود با روش تکه‌تکه
  // اضافه کردن تابع برای بررسی تکه‌های آپلود شده قبلی
  const checkUploadedChunks = async (courseId, fileName) => {
    try {
      const response = await request(
        "GET",
        `/academy/academy/course/upload-status?courseId=${courseId}&originalFileName=${fileName}`,
        {},
        { timeout: 10000 }
      );
      return response;
    } catch (error) {
      console.log("Error checking uploaded chunks:", error);
      return { uploadedChunks: [], totalChunks: 0 };
    }
  };

  // تابع اصلی آپلود با قابلیت Resume
  const uploadVideoInChunks = async (file, courseId, isFree, fileName) => {
    const CHUNK_SIZE = 10 * 1024 * 1024; // 10 مگابایت
    const chunks = splitFileIntoChunks(file, CHUNK_SIZE);
    const totalChunksCount = chunks.length;

    setTotalChunks(totalChunksCount);
    setCurrentChunk(0);

    // بررسی تکه‌های قبلی آپلود شده
    const uploadStatus = await checkUploadedChunks(courseId, file.name);
    const uploadedChunksSet = new Set(uploadStatus.uploadedChunks || []);

    let startFromChunk = 0;
    if (uploadedChunksSet.size > 0) {
      // پیدا کردن اولین تکه که آپلود نشده
      for (let i = 0; i < totalChunksCount; i++) {
        if (!uploadedChunksSet.has(i)) {
          startFromChunk = i;
          break;
        }
      }

      if (startFromChunk > 0) {
        toast.success(`ادامه آپلود از تکه ${startFromChunk + 1}...`);
      }
    }

    for (let i = startFromChunk; i < chunks.length; i++) {
      const chunk = chunks[i];

      // تبدیل تکه فعلی به Base64
      const base64Chunk = await chunkToBase64(chunk.data);

      // ارسال تکه به سرور با قابلیت retry
      let retryCount = 0;
      let success = false;

      while (retryCount < 3 && !success) {
        try {
          const response = await request(
            "POST",
            "/academy/academy/course/creat/video-chunk",
            {
              courseId: courseId,
              is_free: isFree,
              file_name: fileName,
              chunk: base64Chunk,
              chunkIndex: i,
              totalChunks: totalChunksCount,
              originalFileName: file.name,
              fileSize: file.size,
              mime_type: file.type,
            },
            {
              timeout: 180000,
              maxContentLength: Infinity,
              maxBodyLength: Infinity,
            }
          );

          if (response?.error) {
            throw new Error(response.message);
          }

          success = true;
          console.log(`✅ Chunk ${i + 1}/${totalChunksCount} uploaded`);
        } catch (err) {
          retryCount++;
          console.log(`❌ Chunk ${i + 1} failed, retry ${retryCount}/3`);

          if (retryCount === 3) {
            throw new Error(
              `Chunk ${i + 1} failed after 3 attempts: ${err.message}`
            );
          }

          //等待 2 秒后再重试
          await new Promise((resolve) => setTimeout(resolve, 2000));
        }
      }

      // به روز رسانی پیشرفت
      const progress = Math.round(((i + 1) / totalChunksCount) * 100);
      setUploadProgress(progress);
      setCurrentChunk(i + 1);
    }

    // بعد از اتمام همه تکه‌ها، درخواست نهایی برای ترکیب
    const finalResponse = await request(
      "POST",
      "/academy/academy/course/creat/video-chunk/merge",
      {
        courseId: courseId,
        originalFileName: file.name,
        totalChunks: totalChunksCount,
      },
      {
        timeout: 60000,
      }
    );

    return finalResponse;
  };

  // تابع handleAddVideo جدید (جایگزین تابع قبلی)
  const handleAddVideo = async () => {
    if (!videoTitle.trim()) {
      toast.error("عنوان ویدیو را وارد کنید");
      return;
    }
    if (!videoFile) {
      toast.error("لطفاً فایل ویدیو را انتخاب کنید");
      return;
    }

    if (!initialData2?._id) {
      toast.error("شناسه دوره یافت نشد");
      return;
    }

    // بررسی حجم فایل
    if (videoFile.size > 1024 * 1024 * 1024) {
      toast.error("حجم فایل نباید بیشتر از 1 گیگابایت باشد");
      return;
    }

    const previewUrl = URL.createObjectURL(videoFile);
    setIsUploading(true);
    setUploadProgress(0);

    try {
      const loadingToast = toast.loading("در حال آپلود تکه‌های ویدیو...");

      // آپلود با روش تکه‌تکه
      const response = await uploadVideoInChunks(
        videoFile,
        initialData2._id,
        isFreeVideo,
        videoTitle
      );

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

      if (response?.success) {
        toast.success(
          "ویدعو با موفقیت اپلود شد و پس از پردازش ویدعو نمایش داده میشود"
        );

        setVideoFields([
          ...videoFields,
          {
            id: Date.now().toString(),
            title: videoTitle,
            file: videoFile,
            course_video: previewUrl,
            type: "video",
            is_free: isFreeVideo,
            _id: response.data?._id,
          },
        ]);

        // پاک کردن فرم
        setVideoTitle("");
        setVideoFile(null);
        setVideoPreview("");
        setIsFreeVideo(false);
        setUploadProgress(0);
        setCurrentChunk(0);
        setTotalChunks(0);

        const fileInput = document.getElementById(
          "videoFileInput"
        ) as HTMLInputElement;
        if (fileInput) fileInput.value = "";
      } else {
        toast.error(response?.message || "خطا در آپلود ویدیو");
      }
    } catch (err: any) {
      console.error("Upload error:", err);
      toast.error(err?.response?.data?.message || "خطا در آپلود ویدیو");
    } finally {
      setIsUploading(false);
    }
  };

  const fileToBase64WithProgress = (file, onProgress) => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();

      reader.onprogress = (event) => {
        if (event.lengthComputable && onProgress) {
          const percentComplete = Math.round((event.loaded / event.total) * 50); // 50% برای تبدیل
          onProgress(percentComplete);
        }
      };

      reader.onload = () => resolve(reader.result);
      reader.onerror = (error) => reject(error);
      reader.readAsDataURL(file);
    });
  };

  const handleRemoveVideo = async (index: number, field) => {
    console.log(field.courseId);
    const deleteCourseContent = await request(
      "DELETE",
      `/academy/academy/course/content/video`,
      {
        courseContentId: field._id,
        courseId: field.courseId,
      }
    );
    setVideoFields(videoFields.filter((_, i) => i !== index));
    toast.success("ویدیو حذف شد");
  };

  const selectImage = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files && event.target.files[0]) {
      const file = event.target.files[0];
      const previewUrl = URL.createObjectURL(file);
      if (file) {
        const url = URL.createObjectURL(file);
        setPreviewImage(url);
        form.setValue("packageImage", url);
      }
      setPreviewProfile(previewUrl);
      setAvatar(previewUrl);
    }
  };

  // تابع برای ارسال فرم (در CourseForm)
  const onSubmitForm = (data: CourseFormValues) => {
    // ارسال همه داده‌ها به پدر
    const formDataToSend = {
      ...data,
      videos: videoFields.map((video) => ({
        title: video.title,
        file: video.file,
        isFree: video.isFree || false,
      })),
      imageFields: imageFields.map((image) => ({
        title: image.title,
        file: image.file,
      })),
    };

    onSubmit(formDataToSend);
  };

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmitForm)} className="space-y-6">
        <Tabs defaultValue="basic" className="w-full">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger
              className={`${initialData === "videos" ? "hidden" : ""}`}
              value="basic"
            >
              اطلاعات پایه
            </TabsTrigger>
            <TabsTrigger
              className={`${initialData === "videos" ? "" : "hidden"}`}
              value="videos"
            >
              ویدیوها ({videoFields.length})
            </TabsTrigger>
            {/* <TabsTrigger
              className={`${initialData === "videos" ? "hidden" : ""}`}
              value="media"
            >
              رسانه
            </TabsTrigger> */}
          </TabsList>

          {/* تب اطلاعات پایه */}
          <TabsContent dir="rtl" value="basic" className="space-y-4 mt-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <FormField
                control={form.control}
                name="cuorse_name"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>نام پکیج</FormLabel>
                    <FormControl>
                      <Input
                        placeholder="مثال: دوره پیشرفته React"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="teacher_name"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>نام مدرس</FormLabel>
                    <FormControl>
                      <Input placeholder="نام مدرس دوره" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="teacher_number"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>شماره مدرس</FormLabel>
                    <FormControl>
                      <Input placeholder="شماره مدرس دوره" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="price"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>قیمت (تومان)</FormLabel>
                    <FormControl>
                      <Input
                        type="number"
                        placeholder="مثال: 500000"
                        onChange={(e) => field.onChange(Number(e.target.value))}
                        value={field.value || ""}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="offer"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>درصد تخفیف</FormLabel>
                    <FormControl>
                      <Input
                        type="number"
                        placeholder="مثال: 20"
                        onChange={(e) => field.onChange(Number(e.target.value))}
                        value={field.value || ""}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="category"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>دسته بندی آکادمی</FormLabel>
                    <Select
                      onValueChange={(selectedId) => {
                        // پیدا کردن دسته‌بندی انتخاب شده
                        const selectedCategory = academyCategories.find(
                          (cat) => cat._id === selectedId
                        );
                        // ذخیره کردن title (اسم دسته‌بندی) به جای _id
                        field.onChange(selectedCategory?.title || selectedId);
                      }}
                      defaultValue={field.value}
                    >
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="انتخاب دسته بندی" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {categoriesLoading ? (
                          <SelectItem value="loading" disabled>
                            در حال بارگذاری...
                          </SelectItem>
                        ) : academyCategories.length === 0 ? (
                          <SelectItem value="empty" disabled>
                            هیچ دسته‌بندی موجود نیست
                          </SelectItem>
                        ) : (
                          academyCategories.map((category) => (
                            <SelectItem
                              dir="rtl"
                              key={category._id}
                              value={category._id}
                            >
                              <div className="flex items-center gap-2">
                                {category.icon && (
                                  <span className="text-lg">
                                    {category.icon}
                                  </span>
                                )}
                                <span style={{ color: category.color }}>
                                  {category.title}
                                </span>
                                {category.course_count > 0 && (
                                  <span className="text-xs text-gray-400">
                                    ({category.course_count})
                                  </span>
                                )}
                              </div>
                            </SelectItem>
                          ))
                        )}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="course_time"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>تایم آموزش</FormLabel>
                    <FormControl>
                      <Input placeholder="مثال: 10 ساعت" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <FormField
              control={form.control}
              name="caption"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>کپشن</FormLabel>
                  <FormControl>
                    <Textarea
                      placeholder="توضیحات کامل دوره..."
                      className="min-h-[120px]"
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormItem>
              <FormLabel>عکس پکیج</FormLabel>
              <FormControl>
                <Input
                  id="fileInput"
                  type="file"
                  accept="image/*"
                  onChange={selectImage}
                />
              </FormControl>
              {previewImage && (
                <motion.img
                  src={previewProfile}
                  alt="Preview"
                  className="w-48 h-48 object-cover rounded-lg mt-2 border"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                />
              )}
              <FormMessage />
            </FormItem>
          </TabsContent>

          {/* تب ویدیوها */}
          <TabsContent dir="rtl" value="videos" className="space-y-4 mt-4">
            {/* بخش آپلود ویدیو */}
            <Card className="border-2 border-dashed mt-6">
              <CardContent className="pt-6">
                <div className="flex items-center gap-2 mb-4">
                  <Video className="w-5 h-5 text-primary" />
                  <h3 className="text-lg font-semibold">افزودن ویدیو جدید</h3>
                  <span className="text-xs text-muted-foreground">
                    (اختیاری)
                  </span>
                </div>

                <div className="space-y-4">
                  <div>
                    <label className="text-sm font-medium mb-2 block">
                      عنوان ویدیو
                    </label>
                    <Input
                      placeholder="مثال: جلسه اول - معرفی دوره"
                      value={videoTitle}
                      onChange={(e) => setVideoTitle(e.target.value)}
                    />
                  </div>

                  <div>
                    <label className="text-sm font-medium mb-2 block">
                      فایل ویدیو
                    </label>
                    <div className="flex items-center gap-2">
                      <Input
                        id="videoFileInput"
                        type="file"
                        accept="video/*"
                        onChange={handleVideoFileSelect}
                        className="flex-1"
                      />
                      {videoFile && (
                        <span className="text-xs text-green-600">
                          {videoFile.name}
                        </span>
                      )}
                    </div>
                    {videoPreview && (
                      <div className="mt-3">
                        <video
                          src={videoPreview}
                          controls
                          className="w-full max-h-48 rounded-lg border"
                          controlsList="nodownload"
                        />
                      </div>
                    )}
                  </div>

                  <div className="flex items-center gap-2">
                    <Checkbox
                      id="isFree"
                      checked={isFreeVideo}
                      onCheckedChange={(checked) =>
                        setIsFreeVideo(checked as boolean)
                      }
                    />
                    <label htmlFor="isFree" className="text-sm cursor-pointer">
                      این ویدیو به صورت رایگان نمایش داده شود
                    </label>
                  </div>

                  <Button
                    type="button"
                    onClick={handleAddVideo}
                    className="w-full"
                    variant="outline"
                    disabled={!videoTitle.trim() || !videoFile || isUploading}
                  >
                    <Plus className="w-4 h-4 ml-2" />
                    {isUploading ? "در حال آپلود..." : "ثبت ویدیو"}
                  </Button>

                  {isUploading && (
                    <div className="mt-4 space-y-2">
                      <div className="flex justify-between text-sm">
                        <span className="text-gray-600">در حال آپلود...</span>
                        <span className="text-gray-600 font-medium">
                          {uploadProgress}%
                        </span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-2.5 overflow-hidden">
                        <motion.div
                          className="bg-gradient-to-r from-pink-500 to-purple-500 h-2.5 rounded-full"
                          initial={{ width: 0 }}
                          animate={{ width: `${uploadProgress}%` }}
                          transition={{ duration: 0.3 }}
                        />
                      </div>
                      <p className="text-xs text-gray-400 text-center">
                        لطفاً منتظر بمانید، برای ویدیوهای بزرگ ممکن است چند
                        دقیقه طول بکشد...
                      </p>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>

            {/* لیست ویدیوهای اضافه شده */}
            {videoFields.length > 0 && (
              <div className="space-y-3 mt-6">
                <h3 className="font-semibold flex items-center gap-2">
                  <Video className="w-4 h-4" />
                  ویدیوهای اضافه شده ({videoFields.length})
                </h3>

                {videoFields.map((field, index) => (
                  <div
                    key={field.id}
                    className="border rounded-lg overflow-hidden bg-muted/30"
                  >
                    <div className="p-3">
                      <div className="flex items-start justify-between">
                        <div className="flex-1">
                          <div className="flex items-center gap-2 mb-2">
                            <Play className="w-4 h-4 text-primary" />
                            <span className="font-medium">{field.title}</span>
                            {field.is_free && (
                              <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded">
                                رایگان
                              </span>
                            )}
                          </div>
                        </div>
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          onClick={() => handleRemoveVideo(index, field)}
                          className="text-red-500 hover:text-red-700"
                        >
                          <Trash2 className="w-4 h-4" />
                        </Button>
                      </div>

                      <div className="mt-2">
                        <video
                          src={"https://app.modstagram.ir" + field.course_video}
                          controls
                          className="w-full max-h-64 rounded-lg"
                          controlsList="nodownload"
                        >
                          مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند
                        </video>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}

            {/* اخطار برای زمانی که چیزی اضافه نشده */}
            {videoFields.length === 0 && (
              <div className="text-center py-8 text-muted-foreground border-2 border-dashed rounded-lg mt-6">
                <FileVideo className="w-12 h-12 mx-auto mb-3 opacity-50" />
                <p>هیچ ویدیویی اضافه نشده است</p>
                <p className="text-sm">
                  از فرم بالا برای افزودن ویدیو استفاده کنید
                </p>
              </div>
            )}
          </TabsContent>

          {/* تب رسانه */}
          {/* <TabsContent dir="rtl" value="media" className="space-y-4 mt-4">
            <FormItem>
              <FormLabel>عکس پکیج</FormLabel>
              <FormControl>
                <Input
                  id="fileInput"
                  type="file"
                  accept="image/*"
                  onChange={selectImage}
                />
              </FormControl>
              {previewImage && (
                <motion.img
                  src={previewProfile}
                  alt="Preview"
                  className="w-48 h-48 object-cover rounded-lg mt-2 border"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                />
              )}
              <FormMessage />
            </FormItem>
          </TabsContent> */}
        </Tabs>

        <div className="flex justify-end gap-3 pt-4 border-t">
          <Button type="submit" disabled={isLoading}>
            {isLoading
              ? "در حال ثبت..."
              : initialData
              ? "ویرایش پکیج"
              : "ایجاد پکیج"}
          </Button>
        </div>
      </form>
    </Form>
  );
}
