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

import { formatCEP } from '@brazilian-utils/brazilian-utils'
import { Suspense, useEffect } from 'react'
import { Await, Link } from 'react-router'

import { Currency } from '@repo/ui/components/currency'
import { Skeleton } from '@repo/ui/components/skeleton'
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,
  ItemDescription,
  ItemGroup,
  ItemTitle
} from '@repo/ui/components/ui/item'
import { paymentMethods } from '@repo/ui/routes/orders/data'
import { request as req } from '@repo/util/request'
import { useWizardStore } from '../_.$orgid.enrollments.buy/store'

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

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

  return { order }
}

export default function Route({ loaderData: { order } }: Route.ComponentProps) {
  const { reset } = useWizardStore()
  const { address, total, credit_card, payment_method, invoice, installments } =
    order

  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 space-y-2.5">
        <CardHeader>
          <CardTitle className="text-2xl">Detalhes do pagamento</CardTitle>
        </CardHeader>

        <CardContent>
          <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>
                <ItemDescription>
                  {credit_card ? (
                    <>
                      {credit_card.brand} (Crédito) **** {credit_card.last4}
                      <br />
                      {installments}x{' '}
                      <Currency>{total / Number(installments)}</Currency>
                    </>
                  ) : (
                    <>
                      {payment_method
                        ? paymentMethods[payment_method]
                        : payment_method}
                    </>
                  )}
                </ItemDescription>
              </ItemContent>
            </Item>
          </ItemGroup>
          {/*<pre>{JSON.stringify(order, null, 2)}</pre>*/}
        </CardContent>
      </Card>
    </div>
  )
}