'use client'

import { getCourses } from '@/api/courses'
import { About } from '@/components/about'
import { BannerCategory } from '@/components/banner-category'
import { Card } from '@/components/card'
import { Differences } from '@/components/differences'
import { NavLinkCategory } from '@/components/nav-link-category'
import { PaginationComponent } from '@/components/pagination-component'
import SearchFilter from '@/components/search-filter'
import { SignUp } from '@/components/sign-up'
import { SkeletonSerachParams } from '@/components/skeleton-serach-params'
import { formatDate } from '@/utils/formatDate'
import { useQuery } from '@tanstack/react-query'
import { Calendar, Clock4, User } from 'lucide-react'
import { usePathname, useSearchParams } from 'next/navigation'
import { Suspense } from 'react'

export default function Students() {
  const path = usePathname()
  const searchParams = useSearchParams()
  const category = searchParams.get('area')
  console.log("🚀 ~ Students ~ category:", category)

  const {
    data: courses,
    isLoading: coursesLoading,
    isError: coursesIsError,
  } = useQuery({
    queryKey: ['courses'],
    queryFn: getCourses,
  })

  const filterCoursesAudience = courses?.data.filter((item) => 
    path.toLowerCase().includes(item?.audience?.name.toLowerCase() as string)
  )
  console.log("🚀 ~ Students ~ filterCoursesAudience:", filterCoursesAudience)

  const filterCoursesAudiencesAndArea = filterCoursesAudience?.filter((area) => category?.includes(area?.area?.name.toLowerCase() as string))
  console.log("🚀 ~ Students ~ filterCoursesAudiencesAndArea:", filterCoursesAudiencesAndArea)
  
  
  return (
    <main>
      <Suspense fallback={<SkeletonSerachParams />}>
        <BannerCategory />
        <NavLinkCategory />
      </Suspense>
      <SearchFilter />
      <div className="grid rounded-none grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 grid-rows-3 lg:grid-rows-2 gap-4 md:gap-6 p-6">
        {!category && filterCoursesAudience && filterCoursesAudience.map(course => (
          <div className="flex justify-center" key={course.id}>
          <Card.Root link={`/curso/${course.id}`}>
            <Card.Image image={course.mobileBanner as string} width={273} height={365}>
              <Card.Title title={course.name} />
            </Card.Image>
            <Card.Content description={`${course.workload} hrs / ${course.category?.name}`}>
              <Card.Icon icon={Clock4} />
            </Card.Content>
            <Card.Content description={course.audience?.name as string}>
              <Card.Icon icon={User} />
            </Card.Content>
            <Card.Content description={formatDate(course.startDate) as string}>
              <Card.Icon icon={Calendar} />
            </Card.Content>
          </Card.Root>
        </div>
        ))}

        {category && filterCoursesAudiencesAndArea && filterCoursesAudiencesAndArea.map((course) => (
            <div className="flex justify-center" key={course.id}>
              <Card.Root link={`/curso/${course.id}`}>
                <Card.Image image={course.mobileBanner as string} width={273} height={365}>
                  <Card.Title title={course.name} />
                </Card.Image>
                <Card.Content description={`${course.workload} hrs / ${course.category?.name}`}>
                  <Card.Icon icon={Clock4} />
                </Card.Content>
                <Card.Content description={course.audience?.name as string}>
                  <Card.Icon icon={User} />
                </Card.Content>
                <Card.Content description={formatDate(course.startDate) as string}>
                  <Card.Icon icon={Calendar} />
                </Card.Content>
              </Card.Root>
            </div>
          ))
        }

        {category && filterCoursesAudiencesAndArea?.length === 0 && (
          <p>Não há cursos para a área {category} com audiência {path}</p>
        )}

        {!category && filterCoursesAudience?.length === 0 && (
          <p>Não há cursos para a audiência {path}</p>
        )}


      </div>
      <div className="my-6">
        <PaginationComponent pageIndex={0} totalCount={105} perPage={10} />
      </div>
      <Differences />
      <SignUp />
      <About.Root>
        <About.Globo>
          <p className="hidden md:block text-center">
            Nós, na <b>Indústria Criativa</b>, oferecemos serviços educacionais
            e assessoria profissional a instituições públicas e privadas. Nossa
            meta é conectar pessoas, empresas e instituições por meio do
            conhecimento técnico-científico aplicado aos negócios.
          </p>
        </About.Globo>
        <About.Companies />
      </About.Root>
    </main>
  )
}
