import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { CourseData } from "@/helpers/apiSchema/course.schema"
import { AuthContext } from "@/helpers/context/AuthProvider";
import { fetchHeader } from "@/helpers/fetch.helper";
import { useToast } from "@/hooks/use-toast";
import { APP_BASE_URL } from "@/utils/constants";
import { Loader } from "lucide-react";
import Image from "next/image";
import { useContext, useState } from "react";


interface CourseDetailHeroSectionProps {
  courseData: Record<string,any>;
  mutate : () => void
}


const CourseDetailHeroSection: React.FC<CourseDetailHeroSectionProps> = ({ courseData , mutate }) => {

    console.log(courseData)

    const { user } = useContext(AuthContext)
    const { toast } = useToast();

    const [loading , setLoading] = useState<boolean>(false) 


    const handleEnrollNow = async () : Promise<void> => {
        setLoading(true)
        const formData = new FormData();
        formData.append('course_uuid' , courseData.id)
        try{
            const res = await fetch(APP_BASE_URL + '' , {
                headers : fetchHeader() ,
                method : 'POST' , 
                body : formData
            })
            const data = await res.json();
            if(res.status == 200){
                toast({
                    title : 'Successfully enrolled !',
                    description : data?.message , 
                    variant : 'success'
                })
                mutate()
            }else{
                toast({
                    title : 'Successfully enrolled !',
                    description : data?.message , 
                    variant : 'destructive'
                })
            }
        }catch(error : any){
            toast({
                title : 'Successfully enrolled !',
                description : 'something went wrong , please try again' , 
                variant : 'destructive'
            })
        }finally{
            setLoading(false)
        }

    }

  return(
    <div className="bg-purple-700 text-white">
      <div className="container mx-auto px-4 py-12">
          <div className="grid md:grid-cols-2 gap-8 items-center">
              <div className="space-y-4">
                  <h1 className="text-3xl font-bold">{courseData?.courseName}</h1>
                  <p className="text-blue-100">{courseData?.courseDescription}</p>


                  <div className="flex items-center space-x-4">
                      <Avatar className="h-12 w-12">
                          <AvatarImage src={courseData?.instructor?.avatar} className='aspect-1/1'/>
                          <AvatarFallback>SJ</AvatarFallback>
                      </Avatar>
                      <div>
                          <div className="font-semibold">{courseData?.instructor?.firstName}</div>
                          <div className="text-sm text-blue-100">{courseData?.instructor?.title}</div>
                          <div>Published at {courseData?.creationDate}</div>
                      </div>
                  </div>
              </div>
              {/* course image */}
              <Card className="bg-white">
                  <CardContent className="p-6 space-y-4">
                    <div className="relative max-h-124">
                      <img
                          src={ courseData?.coverImage ? (APP_BASE_URL + courseData?.coverImage) :  "https://placehold.co/600x400"}
                          alt="Course Preview"
                          className="w-full rounded-lg h-auto aspect-1/1 max-h-96 object-cover"
                        
                      />
                    </div>
                    {
                        courseData?.selfEnrollment?.isEnrolled && 
                        <Button className="w-full text-lg h-12 bg-purple-700" onClick={handleEnrollNow}>
                            {
                                loading ? 
                                <>
                                    <Loader />
                                    Enrolling ..
                                </> : 'Enroll Now'
                            }
                        </Button>
                    }
                  </CardContent>
              </Card>
          </div>
      </div>
  </div>
  )
}

export default CourseDetailHeroSection