import Fuse from 'fuse.js'
import { AwardIcon, BanIcon, LaptopIcon } from 'lucide-react'
import { useMemo } from 'react'

import { cn } from '@repo/ui/lib/utils'
import { Currency } from '@repo/ui/components/currency'
import {
  Card,
  CardFooter,
  CardHeader,
  CardTitle
} from '@repo/ui/components/ui/card'
import {
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle
} from '@repo/ui/components/ui/empty'

import type { Course, CustomPricing } from './data'
import placeholder from '@/assets/placeholder.webp'

export function Grid({
  search,
  hits = [],
  customPricing = []
}: {
  search: string
  hits: Course[]
  customPricing: CustomPricing[]
}) {
  const fuse = useMemo(() => {
    return new Fuse(hits, {
      keys: ['name'],
      threshold: 0.3,
      includeMatches: true
    })
  }, [hits])

  const hits_ = useMemo(() => {
    if (!search) {
      return hits
    }

    return fuse.search(search).map(({ item }) => item)
  }, [search, fuse, hits])

  const customPricingMap = new Map(
    customPricing.map((x) => {
      const [, courseId] = x.sk.split('#')
      return [courseId, x.unit_price]
    })
  )

  if (hits_.length === 0) {
    return (
      <Empty className="border border-dashed">
        <EmptyHeader>
          <EmptyMedia variant="icon">
            <BanIcon />
          </EmptyMedia>
          <EmptyTitle>Nada encontrado</EmptyTitle>
          <EmptyDescription>
            Nenhum resultado para <mark>{search}</mark>.
          </EmptyDescription>
        </EmptyHeader>
      </Empty>
    )
  }

  return (
    <div className="grid lg:grid-cols-3 xl:grid-cols-4 gap-5">
      {hits_.map((props: Course, idx) => {
        return (
          <Course
            key={idx}
            custom_pricing={customPricingMap.get(props.id)}
            {...props}
          />
        )
      })}
    </div>
  )
}

function Course({
  name,
  access_period,
  cert,
  metadata__unit_price,
  custom_pricing
}: Course & { custom_pricing?: number }) {
  return (
    <Card className="overflow-hidden relative h-96">
      <CardHeader className="z-1 relative">
        <CardTitle className="text-xl/6">{name}</CardTitle>
      </CardHeader>

      <CardFooter className="text-gray-300 text-sm absolute z-1 bottom-6 w-full flex gap-1.5">
        <ul className="flex gap-2.5">
          <li className="flex gap-0.5 items-center">
            <LaptopIcon className="size-4" />
            <span>{access_period}d</span>
          </li>

          {cert?.exp_interval && (
            <li className="flex gap-0.5 items-center">
              <AwardIcon className="size-4" />
              <span>{cert.exp_interval}d</span>
            </li>
          )}

          {metadata__unit_price && (
            <>
              <li className="flex gap-1.5">
                <span
                  className={cn({
                    'line-through text-muted-foreground': custom_pricing,
                    'font-bold': !custom_pricing
                  })}
                >
                  <Currency>{metadata__unit_price}</Currency>
                </span>

                {custom_pricing && (
                  <span className="font-bold">
                    <Currency>{custom_pricing}</Currency>
                  </span>
                )}
              </li>
            </>
          )}
        </ul>
      </CardFooter>

      <img
        src={placeholder}
        alt={name}
        className="absolute bottom-0 dark:opacity-75"
      />
    </Card>
  )
}

const currency = new Intl.NumberFormat('pt-BR', {
  style: 'currency',
  currency: 'BRL'
})