'use client'

import * as React from 'react'
import type { FieldErrors } from 'react-hook-form'
import { authClient } from '@admin/auth/client'
import { Button } from '@admin/components/ui/button'
import { Card, CardContent } from '@admin/components/ui/card'
import { Field, FieldGroup, FieldLabel } from '@admin/components/ui/field'
import { Form } from '@admin/components/ui/form'
import { Input } from '@admin/components/ui/input'
import { Spinner } from '@admin/components/ui/spinner'
import { getAdminPostLoginPath } from '@admin/utils/auth/get-admin-post-login-path'
import { cn } from '@admin/utils/shared/cn'
import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { parseAsStringLiteral, useQueryState } from 'nuqs'
import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import { z } from 'zod/v3'

const loginSchema = z.object({
  email: z.string().trim().min(1, 'Email is required').email('Enter a valid email address'),
  password: z.string().min(1, 'Password is required')
})

type LoginFormValues = z.infer<typeof loginSchema>

export function LoginForm({ className, ...props }: React.ComponentProps<'div'>) {
  const router = useRouter()
  const [reset] = useQueryState('reset', parseAsStringLiteral(['success']))
  const [isPending, startTransition] = React.useTransition()
  const form = useForm<LoginFormValues>({
    resolver: standardSchemaResolver(loginSchema),
    defaultValues: {
      email: '',
      password: ''
    },
    mode: 'onChange',
    reValidateMode: 'onChange'
  })

  React.useEffect(() => {
    if (reset === 'success') {
      toast.success('Password reset. Sign in with your new password.', {
        id: 'admin-login-password-reset-success'
      })
    }
  }, [reset])

  const handleSubmit = (values: LoginFormValues) => {
    startTransition(async () => {
      try {
        const result = await authClient.signIn.email({
          email: values.email,
          password: values.password
        })

        if (result.error) {
          toast.error(result.error.message || 'Invalid email or password')
          return
        }

        const user = result.data?.user
        const role = user && typeof user === 'object' && 'role' in user ? user.role : undefined

        router.replace(getAdminPostLoginPath(role))
        router.refresh()
      } catch {
        toast.error('Failed to sign you in. Try again.')
      }
    })
  }

  const handleInvalid = (errors: FieldErrors<LoginFormValues>) => {
    const message = errors.email?.message ?? errors.password?.message
    toast.error(typeof message === 'string' ? message : 'Please check your sign-in details.')
  }

  return (
    <div className={cn('flex flex-col gap-6', className)} {...props}>
      <Card className="overflow-hidden p-0">
        <CardContent className="grid grid-cols-[5fr_7fr] p-0">
          <div className="relative block bg-muted">
            <Image
              src="https://assets.betterstart.dev/assets/placeholder.png"
              alt=""
              fill
              sizes="42vw"
              className="object-cover"
            />
          </div>
          <Form {...form}>
            <form
              autoComplete="off"
              noValidate
              onSubmit={form.handleSubmit(handleSubmit, handleInvalid)}
              className="p-20"
            >
              <FieldGroup className="gap-10 pb-12">
                <div className="flex flex-col items-start">
                  <h1 className="text-xl font-medium">Sign In</h1>
                </div>
                <div className="flex flex-col gap-4">
                  <Field>
                    <FieldLabel htmlFor="email">Email</FieldLabel>
                    <Input
                      id="email"
                      type="email"
                      autoComplete="off"
                      placeholder="m@example.com"
                      aria-invalid={Boolean(form.formState.errors.email)}
                      {...form.register('email')}
                      required
                      disabled={isPending}
                    />
                  </Field>
                  <Field>
                    <div className="flex items-center">
                      <FieldLabel htmlFor="password">Password</FieldLabel>
                      <Link
                        href="/admin/forgot-password"
                        className="ml-auto text-sm underline-offset-4 hover:underline"
                        tabIndex={-1}
                      >
                        Forgot password?
                      </Link>
                    </div>
                    <Input
                      id="password"
                      type="password"
                      autoComplete="off"
                      placeholder="Enter your password"
                      aria-invalid={Boolean(form.formState.errors.password)}
                      {...form.register('password')}
                      required
                      disabled={isPending}
                    />
                  </Field>
                  <Field className="pt-4">
                    <Button type="submit" disabled={isPending} aria-busy={isPending}>
                      {isPending && <Spinner />}
                      {isPending ? 'Signing in…' : 'Sign in'}
                    </Button>
                  </Field>
                </div>
              </FieldGroup>
            </form>
          </Form>
        </CardContent>
      </Card>
    </div>
  )
}