import type { Route } from './+types/route'

import { formatCEP } from '@brazilian-utils/brazilian-utils'
import { zodResolver } from '@hookform/resolvers/zod'
import { useRequest } from 'ahooks'
import {
  AlertCircleIcon,
  ArrowLeftRightIcon,
  HelpCircleIcon
} from 'lucide-react'
import { useEffect } from 'react'
import { useForm } from 'react-hook-form'
import { Link } from 'react-router'
import { z } from 'zod'

import { Currency } from '@repo/ui/components/currency'
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator
} from '@repo/ui/components/ui/breadcrumb'
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle
} from '@repo/ui/components/ui/card'
import {
  Item,
  ItemContent,
  ItemGroup,
  ItemTitle
} from '@repo/ui/components/ui/item'
import {
  Table,
  TableBody,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow
} from '@repo/ui/components/ui/table'
import { request as req } from '@repo/util/request'

import { Abbr } from '@repo/ui/components/abbr'
import { Badge } from '@repo/ui/components/ui/badge'
import { Button } from '@repo/ui/components/ui/button'
import { Kbd } from '@repo/ui/components/ui/kbd'
import { cn } from '@repo/ui/lib/utils'
import {
  labels,
  statuses,
  type Order as Order_
} from '@repo/ui/routes/orders/data'

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger
} from '@repo/ui/components/ui/dialog'
import { Separator } from '@repo/ui/components/ui/separator'
import { Spinner } from '@repo/ui/components/ui/spinner'
import {
  CreditCard,
  creditCardSchema,
  type CreditCard as CreditCardProps
} from '../_.$orgid.enrollments.buy/payment'
import type { Address } from '../_.$orgid.enrollments.buy/review'
import { useWizardStore } from '../_.$orgid.enrollments.buy/store'

export function meta() {
  return [
    {
      title: 'Detalhes do pagamento'
    }
  ]
}

const PaymentMethodComponent = {
  PIX: PixPaymentMethod,
  BANK_SLIP: BankSlipPaymentMethod,
  CREDIT_CARD: CreditCardPaymentMethod
}

type Item = {
  id: string
  name: string
  unit_price: number
  quantity: number
}

type User = {
  id: string
  name: string
}

type Invoice = {
  invoice_id: string
  secure_url: string
}

type Order = Order_ & {
  items: Item[]
  interest_amount: number
  due_date: string
  created_at: string
  subtotal: number
  discount: number
  address: Address
  credit_card?: CreditCardProps
  coupon?: string
  installments?: number
  created_by?: User
  invoice: Invoice
}

export async function loader({ context, request, params }: Route.LoaderArgs) {
  const order = (await req({
    url: `/orders/${params.id}`,
    context,
    request
  }).then((r) => r.json())) as Order

  return { order }
}

export default function Route({ loaderData: { order } }: Route.ComponentProps) {
  const { reset } = useWizardStore()
  const {
    coupon,
    address,
    total,
    payment_method,
    interest_amount,
    discount,
    invoice,
    subtotal,
    items = []
  } = order

  const Component =
    (PaymentMethodComponent as Record<string, React.ComponentType<any>>)[
      payment_method
    ] ?? UnknownPaymentMethod

  useEffect(() => {
    reset()
  }, [])

  return (
    <div className="space-y-2.5">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink asChild>
              <Link to="../payments">Pagamentos</Link>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>Detalhes do pagamento</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>

      <Card className="lg:max-w-4xl mx-auto">
        <CardHeader className="gap-0">
          <CardTitle className="text-2xl">Detalhes do pagamento</CardTitle>
        </CardHeader>

        <CardContent className="space-y-4">
          <ItemGroup className="grid lg:grid-cols-2 gap-4">
            <Item variant="outline">
              <ItemContent>
                <ItemTitle>Endereço de cobrança</ItemTitle>
                <ul className="text-muted-foreground text-sm leading-normal font-normal text-balance">
                  {address?.address1}
                  {address?.address2 ? <>, {address?.address2}</> : null}
                  <br />
                  {address?.neighborhood}
                  <br />
                  {address?.city}, {address?.state}
                  <br />
                  {formatCEP(address?.postcode)}
                </ul>
              </ItemContent>
            </Item>

            <Item variant="outline" className="items-start">
              <ItemContent>
                <ItemTitle>Forma de pagamento</ItemTitle>
                <div className="text-muted-foreground text-sm leading-normal font-normal text-balance">
                  {Component && (
                    <Component {...order} invoice_id={invoice['invoice_id']} />
                  )}
                </div>
              </ItemContent>
            </Item>
          </ItemGroup>

          <Table className="pointer-events-none">
            <TableHeader>
              <TableRow>
                <TableHead>Curso</TableHead>
                <TableHead>Quantidade</TableHead>
                <TableHead>Valor unit.</TableHead>
                <TableHead>Total</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {items?.map(({ name, unit_price, quantity }, index) => {
                return (
                  <TableRow key={index}>
                    <TableCell>{name}</TableCell>
                    <TableCell>{quantity}</TableCell>
                    <TableCell>
                      <Currency>{unit_price}</Currency>
                    </TableCell>
                    <TableCell>
                      <Currency>{unit_price * quantity}</Currency>
                    </TableCell>
                  </TableRow>
                )
              })}
            </TableBody>

            {/* Summary */}
            <TableFooter>
              <TableRow>
                <TableCell className="text-right" colSpan={3}>
                  Subtotal
                </TableCell>
                <TableCell>
                  <Currency>{subtotal}</Currency>
                </TableCell>
              </TableRow>
              {/* Discount */}
              <TableRow>
                <TableCell colSpan={3}>
                  <span className="flex gap-1 justify-end">
                    Descontos
                    {coupon && (
                      <Kbd>
                        <Abbr maxLen={8}>{coupon}</Abbr>
                      </Kbd>
                    )}
                  </span>
                </TableCell>
                <TableCell>
                  <Currency>{discount}</Currency>
                </TableCell>
              </TableRow>
              {/* Interest */}
              {interest_amount ? (
                <TableRow>
                  <TableCell className="text-right" colSpan={3}>
                    Juros
                  </TableCell>
                  <TableCell>
                    <Currency>{interest_amount}</Currency>
                  </TableCell>
                </TableRow>
              ) : (
                <></>
              )}
              {/* Total */}
              <TableRow>
                <TableCell className="text-right" colSpan={3}>
                  Total
                </TableCell>
                <TableCell>
                  <Currency>{total}</Currency>
                </TableCell>
              </TableRow>
            </TableFooter>
          </Table>
        </CardContent>
      </Card>

      {/*<pre>{JSON.stringify(order, null, 2)}</pre>*/}
    </div>
  )
}

function Status({ status: s }: { status: string }) {
  const status = labels[s] ?? s
  const { icon: Icon, color } = statuses?.[s] ?? { icon: HelpCircleIcon }

  return (
    <Badge variant="outline" className={cn(color, ' px-1.5')}>
      <Icon className={cn('stroke-2', color)} />
      {status}
    </Badge>
  )
}

type PaymentMethodProps = {
  id: string
  status: string
  total: number
  invoice_id: string
  installments: number
}

type BankSlipPaymentMethodProps = PaymentMethodProps & {}

function BankSlipPaymentMethod({ status }: BankSlipPaymentMethodProps) {
  return (
    <ul className="flex max-lg:flex-col gap-x-1.5">
      <li>Boleto bancário</li>
      <li>
        <Status status={status} />
      </li>
    </ul>
  )
}

type PixPaymentMethodrops = PaymentMethodProps & {}

function PixPaymentMethod({}: PixPaymentMethodrops) {
  return <>Pix</>
}

function UnknownPaymentMethod() {
  return <>Deposito bancário</>
}

type CreditCardPaymentMethodProps = PaymentMethodProps & {
  stats: { last_attempt_succeeded: boolean }
  credit_card: { last4: string; brand: string }
}

function CreditCardPaymentMethod({
  id,
  status,
  total,
  credit_card,
  installments,
  invoice_id,
  stats
}: CreditCardPaymentMethodProps) {
  return (
    <>
      <ul className="flex max-lg:flex-col gap-x-1.5">
        <li>
          {credit_card.brand} (Crédito) **** {credit_card.last4}
        </li>
        <li>
          {stats.last_attempt_succeeded === false ? (
            <Badge
              variant="outline"
              className="text-red-400 border-red-400 px-1.5"
            >
              <AlertCircleIcon /> Pagamento não aprovado
            </Badge>
          ) : (
            <Status status={status} />
          )}
        </li>
      </ul>

      <p>
        {installments}x <Currency>{total / Number(installments)}</Currency>
      </p>

      {stats.last_attempt_succeeded === false ? (
        <div className="flex justify-center mt-2">
          <CreditCardPaymentDialog
            id={id}
            total={total}
            installments={installments}
            invoice_id={invoice_id}
          >
            <Button size="sm" variant="secondary" className="cursor-pointer">
              <ArrowLeftRightIcon /> Pagar com outro cartão
            </Button>
          </CreditCardPaymentDialog>
        </div>
      ) : null}
    </>
  )
}

const formSchema = z.object({
  credit_card: creditCardSchema
})

type Schema = z.input<typeof formSchema>

function CreditCardPaymentDialog({
  children,
  id,
  installments,
  invoice_id,
  total
}) {
  const { runAsync } = useRequest(
    async ({ credit_card }) => {
      return await fetch(`/~/api/orders/${id}/payment-retries`, {
        method: 'POST',
        headers: new Headers({ 'Content-Type': 'application/json' }),
        body: JSON.stringify({ credit_card, installments, invoice_id })
      })
    },
    { manual: true }
  )
  const { control, handleSubmit, formState } = useForm<Schema>({
    resolver: zodResolver(formSchema)
  })

  const onSubmit = async ({ credit_card }: Schema) => {
    const r = await runAsync({ credit_card })
    console.log(r.ok)
    console.log(await r.json())
  }

  return (
    <Dialog>
      <DialogTrigger asChild>{children}</DialogTrigger>

      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Novo cartão de crédito</DialogTitle>
          <DialogDescription>
            Use um novo cartão para concluir o pagamento. Nenhuma cobrança foi
            realizada no cartão anterior.
          </DialogDescription>
        </DialogHeader>

        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
          <CreditCard control={control} />

          <Separator />

          <DialogFooter className="*:cursor-pointer">
            <DialogClose asChild>
              <Button
                type="button"
                variant="link"
                className="text-black dark:text-white"
                tabIndex={-1}
              >
                Cancelar
              </Button>
            </DialogClose>

            <Button type="submit" disabled={formState.isSubmitting}>
              {formState.isSubmitting && <Spinner />}
              Pagar <Currency>{total}</Currency>
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}