import { Currency } from '@repo/ui/components/currency'
import { Button } from '@repo/ui/components/ui/button'
import { Separator } from '@repo/ui/components/ui/separator'
import {
  Table,
  TableBody,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow
} from '@repo/ui/components/ui/table'

import { useWizard } from '@/components/wizard'

import { applyDiscount } from './discount'

type ReviewProps = {
  state: any
}

export function Review({ state }: ReviewProps) {
  const wizard = useWizard()
  const { coupon, items } = state || { items: [], coupon: {} }
  const subtotal =
    items?.reduce(
      (acc, { course, quantity }) =>
        acc +
        (course?.unit_price || 0) *
          (Number.isFinite(quantity) && quantity > 0 ? quantity : 1),
      0
    ) || 0
  const discount = coupon
    ? applyDiscount(subtotal, coupon.amount, coupon.type) * -1
    : 0
  const total = subtotal > 0 ? subtotal + discount : 0

  return (
    <>
      <Table>
        <TableHeader>
          <TableRow className="pointer-events-none">
            <TableHead>Curso</TableHead>
            <TableHead>Quantidade</TableHead>
            <TableHead>Valor unit.</TableHead>
            <TableHead>Total</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {items?.map(({ course, quantity }, index) => {
            return (
              <TableRow key={index}>
                <TableCell>{course.name}</TableCell>
                <TableCell>{quantity}</TableCell>
                <TableCell>
                  <Currency>{course.unit_price}</Currency>
                </TableCell>
                <TableCell>
                  <Currency>{course.unit_price * quantity}</Currency>
                </TableCell>
              </TableRow>
            )
          })}
        </TableBody>
        <TableFooter>
          <TableRow className="pointer-events-none">
            <TableCell className="text-right" colSpan={3}>
              Subtotal
            </TableCell>
            <TableCell>
              <Currency>{subtotal}</Currency>
            </TableCell>
          </TableRow>
          <TableRow className="pointer-events-none">
            <TableCell className="text-right" colSpan={3}>
              Descontos
            </TableCell>
            <TableCell>
              <Currency>{discount}</Currency>
            </TableCell>
          </TableRow>
          <TableRow className="pointer-events-none">
            <TableCell className="text-right" colSpan={3}>
              Total
            </TableCell>
            <TableCell>
              <Currency>{total}</Currency>
            </TableCell>
          </TableRow>
        </TableFooter>
      </Table>

      <Separator />

      <div className="flex justify-between gap-4 *:cursor-pointer">
        <Button
          type="button"
          variant="link"
          className="text-black dark:text-white"
          onClick={() => wizard('payment')}
        >
          Voltar
        </Button>
        <Button type="submit">
          Pagar <Currency>{total}</Currency>
        </Button>
      </div>
    </>
  )
}