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

import { isValidCPF } from '@brazilian-utils/brazilian-utils'
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { z } from 'zod'

import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

import logo from './logo.svg'

const cpf = z.string().refine(isValidCPF, { message: 'CPF inválido' })
const email = z.string().email({ message: 'Email inválido' })

const schema = z.object({
  username: z.union([cpf, email]),
  password: z.string()
})

type Schema = z.infer<typeof schema>

export function meta({}: Route.MetaArgs) {
  return [{ title: 'EDUSEG®' }]
}

export function loader({ context }: Route.LoaderArgs) {
  return { message: context.cloudflare.env.ISSUER_URL }
}

export default function Home({ loaderData }: Route.ComponentProps) {
  const { register, handleSubmit } = useForm({
    resolver: zodResolver(schema)
  })

  const onSubmit = (data: Schema) => {
    console.log(data)
  }

  return (
    <>
      <div className="w-full max-w-xs grid gap-6">
        <div className="flex justify-center">
          <div className="border border-white/15 bg-white/5 px-2.5 py-3 rounded-xl">
            <img src={logo} alt="React Router" className="block size-12" />
          </div>
        </div>

        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="grid gap-6">
            <div className="text-center space-y-1.5">
              <h1 className="text-2xl font-semibold font-display text-balance">
                Faça login
              </h1>
              <p className="text-white/50 text-sm">
                Não tem uma conta?{' '}
                <a href="#" className="font-medium text-white">
                  Cadastre-se
                </a>
                .
              </p>
            </div>

            <div className="grid gap-3">
              <Label htmlFor="email">Email ou CPF</Label>
              <Input id="email" {...register('username')} />
            </div>

            <div className="grid gap-3">
              <div className="flex items-center">
                <Label htmlFor="password">Senha</Label>
                <a
                  href="#"
                  className="ml-auto text-sm underline-offset-4 hover:underline"
                >
                  Esqueceu sua senha?
                </a>
              </div>
              <Input id="password" {...register('password')} />
            </div>
            <Button type="submit" className="w-full bg-lime-400 cursor-pointer">
              Entrar
            </Button>
          </div>
        </form>

        <p className="text-white/50 text-xs text-center">
          Ao fazer login, você concorda com nossa{' '}
          <a href="#" className="underline hover:no-underline">
            política de privacidade
          </a>
          .
        </p>
      </div>
    </>
  )
}