import CourseCatDateChap from '@/components/CourseCDC';
import AssignTeachers from '@/components/AssignTeachers';
import { Button } from '../ui/button';
import { useNavigate } from 'react-router-dom';
import { Edit, Trash2Icon } from 'lucide-react';
import { useDeleteCourseMutation } from '@/app/backend/endpoints/courses';
import { toast } from 'sonner';
// import { number } from 'yup';

export default function CourseCard({
  course,
  navi = true,
  schoolId,
  isSnai3iCourse = false,
  isAdmin = false,
  nbTeachers = 5,
}: {
  course: CEMarketCourseI | Snai3iCourseI;
  navi?: boolean;
  schoolId?: number;
  isSnai3iCourse?: boolean;
  isAdmin?: boolean;
  nbTeachers?: number;
}) {
  const navigate = useNavigate();
  const [deleteCourse] = useDeleteCourseMutation();
  const handleDeleteCourse = () => {
    deleteCourse({ course_id: course.course_id! })
      .unwrap()
      .then(() => {
        toast.success('Course deleted successfully');
      })
      .catch(() => {
        toast.error('Error deleting course');
      });
  };
  const courseDate = new Date(course?.createdAt ?? '').toLocaleDateString(
    'en-US',
    {
      year: 'numeric',
      month: 'numeric',
      day: 'numeric',
    }
  );
  if (!course) return null;

  return (
    <div
      className={`flex flex-col max-w-[372px] p-4 border-2 rounded-3xl cursor-pointer gap-1 
    `}
    >
      <div
        onClick={() => {
          if (navi) {
            window.open('https://platform.snai3i.org/student/login', '_blank');
          }
        }}
      >
        <img
          draggable={false}
          src={course.thumbnail}
          alt="course thumbnail"
          className={`rounded-[12px] w-full lg:max-w-[340px] aspect-video hover:opacity-85 transition-opacity duration-300 ${
            navi ? 'cursor-pointer ' : ''
          }`}
        />
      </div>
      <CourseCatDateChap
        isDashboard
        className="mt-3 pb-2"
        categories={
          (course as CEMarketCourseI)?.tags
            ? (course as CEMarketCourseI).tags!
            : isAdmin
            ? [course.status ?? '']
            : ['Snai3i Course']
        }
        uploadedDate={courseDate}
        chaptersLength={course.chaptersCount ?? 0}
      />
      <h3
        className="text-lg font-semibold hover:text-amber/80 font-inter"
        onClick={() => {
          if (navi) {
            window.open('https://platform.snai3i.org/login', '_blank');
          }
        }}
      >
        {course.title}
      </h3>
      {!isSnai3iCourse && (
        <div className="text-amber-500 font-sm mb-2">
          By {(course as CEMarketCourseI).inst_designer_firstName}{' '}
          {(course as CEMarketCourseI).inst_designer_lastName}
        </div>
      )}
      <div
        className={`w-full ${
          isSnai3iCourse && isAdmin && 'flex flex-row-reverse gap-x-3'
        }`}
      >
        {isSnai3iCourse && isAdmin && (
          <Button
            onClick={handleDeleteCourse}
            variant="destructive"
            className="w-fit flex flex-row gap-2 rounded-xl mt-2"
          >
            <Trash2Icon size={21} />
          </Button>
        )}
        {schoolId ? (
          <AssignTeachers
            schoolId={schoolId}
            courseId={course.course_id!}
            maxNbTeachers={nbTeachers}
            blue={false}
          />
        ) : isAdmin ? (
          <Button
            onClick={() => {
              navigate(`/dashboard/snai3i-courses/edit/${course.course_id}`);
            }}
            variant="outline"
            className="w-fit flex flex-row gap-2 rounded-xl mt-2"
          >
            <Edit size={21} />
          </Button>
        ) : (
          <Button
            onClick={() => {
              if (navi) {
                window.open('https://platform.snai3i.org/login', '_blank');
              }
              if (isSnai3iCourse) {
                navigate(
                  `/dashboard/snai3i-courses/enroll/${course.course_id}`
                );
              }
            }}
            className={`w-full flex flex-row gap-2 hover:bg-amber-600 rounded-xl ${
              isSnai3iCourse && 'mt-2'
            }`}
          >
            {isSnai3iCourse ? 'Enroll' : 'Enroll in LMS'}
          </Button>
        )}

        {isSnai3iCourse && isAdmin && (
          <Button
            onClick={() => {
              navigate(`/dashboard/snai3i-courses/enroll/${course.course_id}`);
            }}
            className="w-full flex flex-row gap-2 hover:bg-amber-600 rounded-xl mt-2"
          >
            Enroll
          </Button>
        )}
      </div>
    </div>
  );
}

// export default motion(CourseCard);