'use client'

import Image from 'next/image'

import { getCourseId } from '@/api/courses'
import { BannerCategory } from '@/components/banner-category'
import { CarouselComponent } from '@/components/corousel-component'
import { CourseDetails } from '@/components/course-details'
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { useQuery } from '@tanstack/react-query'
import { useParams } from 'next/navigation'
import imageCapa from '../../../../public/images/banner.png'

export default function CoursePage() {
  const params = useParams<{ courseId: string }>()

  const { data: course, isLoading } = useQuery({
    queryKey: ['course', params.courseId],
    queryFn: () => getCourseId(params.courseId),
    enabled: !!params.courseId,
  })

  if (isLoading) {
    return <p>Carregando...</p>
  }

  return (
    <>
      <BannerCategory data={course?.data.area.name} />
      <div className="flex flex-col md:flex-row px-6 pt-20 gap-6">
        <div className="flex flex-col gap-7">
          <h1 className="block md:hidden text-green-400 text-3xl font-thin">
            {course?.data.name}
          </h1>
          <Image
            src={course?.data.mobileBanner || imageCapa}
            width={500}
            height={500}
            className="min-w-[348px] h-[464px] object-cover rounded-lg"
            alt="Imagem de capa do curso"
          />
          <Button variant="secondary" className="uppercase hidden md:block">
            Quero este curso
          </Button>
        </div>
        <div className="flex flex-col gap-6">
          <h1 className="hidden md:block text-green-400 text-4xl font-extrabold">
            {course?.data.name}
          </h1>
          <div className="flex flex-col-reverse lg:flex-row gap-6 w-full">
            <div className="flex flex-col lg:w-1/2">
              <h3 className="font-bold">O que você vai aprender</h3>
              <p>{course?.data.description}</p>
              <h3 className="font-bold mt-6">Com quem você vai aprender</h3>
              {course?.data.professors &&
                course?.data.professors.length > 0 && (
                  <p>{course?.data.professors.join(', ')}</p>
                )}
            </div>
            <div className="lg:w-1/2">
              <CourseDetails data={course?.data} />
            </div>
          </div>
          <Button variant="secondary" className="uppercase block md:hidden">
            Quero este curso
          </Button>
          <span className="font-bold mt-4 block md:hidden">Saiba mais:</span>
          {course?.data.modules
            .sort((a, b) => a.module.name.localeCompare(b.module.name))
            .map((module) => (
              <Accordion
                type="single"
                collapsible
                className="w-full"
                key={module.module.id}
              >
                <AccordionItem value={module.module.id}>
                  <AccordionTrigger>{module.module.name}</AccordionTrigger>
                  <AccordionContent>
                    {module.module.description}
                  </AccordionContent>
                </AccordionItem>
              </Accordion>
            ))}
        </div>
      </div>
      <div className="my-10 px-6">
        <Separator orientation="horizontal" />
      </div>
      <div>
        <h2 className="text-center text-green-400 font-thin text-2xl">
          Cursos relacionados
        </h2>
        <div className="px-14 mt-10 mb-20">
          <CarouselComponent />
        </div>
      </div>
    </>
  )
}
