'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 { 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')

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

  const filterCoursesAudience = courses?.data.filter((item) =>
    path.toLowerCase().includes(item?.audience?.name.toLowerCase() as string),
  )

  const filterCoursesAudiencesAndArea = filterCoursesAudience?.filter((area) =>
    category?.includes(area?.area?.name.toLowerCase() as string),
  )

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

  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 <b>{category}</b> com audiência{' '}
            <b>{path.replace('/', '')}</b>
          </p>
        )}

        {!category && filterCoursesAudience?.length === 0 && (
          <p>
            Não há cursos para a audiência <b>{path.replace('/', '')}</b>
          </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>
  )
}
