import { useRequest, useToggle } from 'ahooks'
import { PatternFormat } from 'react-number-format'
import { ExternalLinkIcon, PencilIcon, SearchIcon } from 'lucide-react'
import { Controller, useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { formatCEP } from '@brazilian-utils/brazilian-utils'
import { z } from 'zod'
import valid from 'card-validator'

import { Currency } from '@repo/ui/components/currency'
import { Button } from '@repo/ui/components/ui/button'
import { Separator } from '@repo/ui/components/ui/separator'
import { Spinner } from '@repo/ui/components/ui/spinner'
import {
  Table,
  TableBody,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow
} from '@repo/ui/components/ui/table'
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemTitle
} from '@repo/ui/components/ui/item'
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger
} from '@repo/ui/components/ui/dialog'
import { paymentMethods } from '@repo/ui/routes/orders/data'

import { useWizard } from '@/components/wizard'
import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldSet
} from '@repo/ui/components/ui/field'
import { Input } from '@repo/ui/components/ui/input'
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput
} from '@repo/ui/components/ui/input-group'

import { useWizardStore } from './store'
import { useParams } from 'react-router'
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyTitle
} from '@repo/ui/components/ui/empty'

type ReviewProps = {
  onSubmit: () => void | Promise<void>
}

export function Review({ onSubmit }: ReviewProps) {
  const wizard = useWizard()
  const { items, summary, address } = useWizardStore()
  const { subtotal, discount, interest_amount, total } = summary()
  const [loading, { set }] = useToggle()

  return (
    <>
      <Summary />

      <form
        onSubmit={async (e) => {
          e.preventDefault()
          set(true)
          await onSubmit()
        }}
        className="space-y-4"
      >
        <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(({ 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>

          {/* Summary */}
          <TableFooter>
            <TableRow>
              <TableCell className="text-right" colSpan={3}>
                Subtotal
              </TableCell>
              <TableCell>
                <Currency>{subtotal}</Currency>
              </TableCell>
            </TableRow>
            {/* Discount */}
            <TableRow>
              <TableCell className="text-right" colSpan={3}>
                Descontos
              </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>

        <Separator />

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

          <Button
            type="submit"
            disabled={loading || !formSchema.safeParse(address).success}
          >
            {loading && <Spinner />}
            Pagar <Currency>{total}</Currency>
          </Button>
        </div>
      </form>
    </>
  )
}

export function Summary() {
  const { summary, credit_card, payment_method, installments, address } =
    useWizardStore()
  const { total } = summary()
  const numberValidation = valid.number(credit_card?.number)

  return (
    <ItemGroup className="grid lg:grid-cols-2 gap-4">
      {address ? (
        <Item variant="outline" className="items-start">
          <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>
          <ItemActions>
            <AddressDialog>
              <Button
                variant="ghost"
                type="button"
                className="text-muted-foreground cursor-pointer"
                size="icon-sm"
              >
                <PencilIcon />
                <span className="sr-only">Editar endereço</span>
              </Button>
            </AddressDialog>
          </ItemActions>
        </Item>
      ) : (
        <Empty className="border border-dashed md:p-6 gap-4">
          <EmptyHeader>
            <EmptyTitle>Nenhum endereço ainda</EmptyTitle>
            <EmptyDescription>
              Você ainda não cadastrou nenhum endereço.
            </EmptyDescription>
          </EmptyHeader>
          <EmptyContent>
            <AddressDialog>
              <Button size="sm" variant="outline" className="cursor-pointer">
                Cadastrar endereço
              </Button>
            </AddressDialog>
          </EmptyContent>
        </Empty>
      )}

      <Item variant="outline" className="items-start">
        <ItemContent>
          <ItemTitle>Forma de pagamento</ItemTitle>
          <ItemDescription>
            {credit_card ? (
              <>
                {numberValidation.card?.niceType} (Crédito) ****{' '}
                {credit_card.number.slice(-4)}
                <br />
                {installments}x{' '}
                <Currency>{total / Number(installments)}</Currency>
              </>
            ) : (
              <>
                {payment_method
                  ? paymentMethods[payment_method]
                  : payment_method}
              </>
            )}
          </ItemDescription>
        </ItemContent>
      </Item>
    </ItemGroup>
  )
}

const formSchema = z.object({
  postcode: z.string().min(1, 'Digite um CEP'),
  address1: z.string().min(1, 'Digite um endereço'),
  address2: z.string().optional(),
  neighborhood: z.string().min(1, 'Digite o bairro'),
  city: z.string().min(1, 'Digite a cidade'),
  state: z.string().min(1, 'Digite o estado')
})

export type Address = z.infer<typeof formSchema>

export function AddressDialog({ children }) {
  const { update, address } = useWizardStore()
  const { orgid } = useParams()
  const { runAsync } = useRequest(
    async (address: Address) => {
      await fetch(`/~/api/orgs/${orgid}/address`, {
        method: 'POST',
        body: JSON.stringify({ address }),
        headers: new Headers({ 'Content-Type': 'application/json' })
      })
    },
    {
      manual: true
    }
  )
  const { handleSubmit, control, reset, formState } = useForm({
    defaultValues: address,
    resolver: zodResolver(formSchema)
  })
  const [open, { toggle, set: setOpen }] = useToggle(address === undefined)

  const onSubmit = async (address: Address) => {
    await runAsync(address)
    setOpen(false)
    update({ address })
  }

  return (
    <Dialog open={open} onOpenChange={toggle}>
      <DialogTrigger asChild>{children}</DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Editar endereço</DialogTitle>
          <DialogDescription>
            Este endereço será utilizado para a emissão da NFS-e.
          </DialogDescription>
        </DialogHeader>

        <PostcodeForm onChange={reset} />

        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
          <FieldGroup>
            <FieldSet>
              <Controller
                control={control}
                name="address1"
                defaultValue=""
                render={({ field, fieldState }) => (
                  <Field data-invalid={fieldState.invalid}>
                    <FieldLabel htmlFor={field.name}>Endereço</FieldLabel>
                    <Input
                      id={field.name}
                      aria-invalid={fieldState.invalid}
                      {...field}
                    />

                    {fieldState.invalid && (
                      <FieldError errors={[fieldState.error]} />
                    )}
                  </Field>
                )}
              />

              <Controller
                control={control}
                name="address2"
                defaultValue=""
                render={({ field, fieldState }) => (
                  <Field data-invalid={fieldState.invalid}>
                    <FieldLabel htmlFor={field.name}>
                      Complemento{' '}
                      <span className="text-muted-foreground">(opcional)</span>
                    </FieldLabel>
                    <Input
                      id={field.name}
                      aria-invalid={fieldState.invalid}
                      {...field}
                    />

                    {fieldState.invalid && (
                      <FieldError errors={[fieldState.error]} />
                    )}
                  </Field>
                )}
              />

              <FieldGroup className="grid grid-cols-3">
                {/* Neighborhood */}
                <Controller
                  control={control}
                  name="neighborhood"
                  defaultValue=""
                  render={({ field, fieldState }) => (
                    <Field data-invalid={fieldState.invalid}>
                      <FieldLabel htmlFor={field.name}>Bairro</FieldLabel>
                      <Input
                        id={field.name}
                        aria-invalid={fieldState.invalid}
                        {...field}
                      />

                      {fieldState.invalid && (
                        <FieldError errors={[fieldState.error]} />
                      )}
                    </Field>
                  )}
                />
                {/* City */}
                <Controller
                  control={control}
                  name="city"
                  defaultValue=""
                  render={({ field, fieldState }) => (
                    <Field data-invalid={fieldState.invalid}>
                      <FieldLabel htmlFor={field.name}>Cidade</FieldLabel>
                      <Input
                        id={field.name}
                        aria-invalid={fieldState.invalid}
                        {...field}
                      />

                      {fieldState.invalid && (
                        <FieldError errors={[fieldState.error]} />
                      )}
                    </Field>
                  )}
                />
                {/* State */}
                <Controller
                  control={control}
                  name="state"
                  defaultValue=""
                  render={({ field, fieldState }) => (
                    <Field data-invalid={fieldState.invalid}>
                      <FieldLabel htmlFor={field.name}>Estado</FieldLabel>
                      <Input
                        id={field.name}
                        aria-invalid={fieldState.invalid}
                        {...field}
                      />

                      {fieldState.invalid && (
                        <FieldError errors={[fieldState.error]} />
                      )}
                    </Field>
                  )}
                />
              </FieldGroup>
            </FieldSet>
          </FieldGroup>

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

            <Button type="submit" disabled={formState.isSubmitting}>
              {formState.isSubmitting && <Spinner />} Atualizar endereço
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}

type PostcodeFormProps = {
  onChange: (value: Address) => void
}

function PostcodeForm({ onChange }: PostcodeFormProps) {
  const formSchema = z.object({
    postcode: z.string().min(1, 'Digite um CEP')
  })

  type Schema = z.infer<typeof formSchema>

  const { address } = useWizardStore()
  const { control, handleSubmit, setError, formState } = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: address
  })

  const { runAsync, loading } = useRequest(
    async (cep: string) => {
      return await fetch(`/~/api/cep/${cep}.json`)
    },
    { manual: true }
  )

  const onSubmit = async ({ postcode }: Schema) => {
    const r = await runAsync(postcode)

    if (r.ok) {
      onChange?.((await r.json()) as Address)
      return
    }

    setError('postcode', { message: 'CEP não encontrado' })
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <FieldGroup>
        <Controller
          control={control}
          name="postcode"
          defaultValue=""
          render={({ field: { onChange, ref, ...field }, fieldState }) => (
            <Field data-invalid={fieldState.invalid}>
              {/* CEP */}
              <FieldLabel htmlFor={field.name}>CEP</FieldLabel>
              <InputGroup>
                <PatternFormat
                  id={field.name}
                  format="#####-###"
                  mask="_"
                  placeholder="_____-___"
                  customInput={InputGroupInput}
                  getInputRef={ref}
                  aria-invalid={fieldState.invalid}
                  onValueChange={({ value }) => {
                    onChange(value)
                  }}
                  {...field}
                />
                <InputGroupAddon align="inline-end">
                  <InputGroupButton
                    type="submit"
                    variant="secondary"
                    tabIndex={formState.isSubmitted ? -1 : 0}
                    className="cursor-pointer"
                  >
                    {loading ? <Spinner /> : <SearchIcon />}
                  </InputGroupButton>
                </InputGroupAddon>
              </InputGroup>

              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}

              <FieldDescription>
                <a
                  href="https://buscacepinter.correios.com.br/app/endereco/index.php"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex gap-1 items-center "
                  tabIndex={-1}
                >
                  Não sei o CEP <ExternalLinkIcon className="size-4" />
                </a>
              </FieldDescription>
            </Field>
          )}
        />
      </FieldGroup>
    </form>
  )
}