'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 { 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 { createSerializer, parseAsString, parseAsStringLiteral, useQueryState } from 'nuqs'
import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import { z } from 'zod/v3'

const serializeLoginUrl = createSerializer({
  reset: parseAsStringLiteral(['success'])
})

const resetPasswordSchema = z
  .object({
    newPassword: z.string().min(8, 'Password must be at least 8 characters'),
    confirmPassword: z.string().min(1, 'Confirm the new password')
  })
  .refine((values) => values.newPassword === values.confirmPassword, {
    message: 'Passwords do not match',
    path: ['confirmPassword']
  })

type ResetPasswordFormValues = z.infer<typeof resetPasswordSchema>

export function ResetPasswordForm({ className, ...props }: React.ComponentProps<'div'>) {
  const router = useRouter()
  const [token] = useQueryState('token', parseAsString)
  const [isPending, startTransition] = React.useTransition()
  const form = useForm<ResetPasswordFormValues>({
    resolver: standardSchemaResolver(resetPasswordSchema),
    defaultValues: {
      newPassword: '',
      confirmPassword: ''
    },
    mode: 'onChange',
    reValidateMode: 'onChange'
  })

  if (!token) {
    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>
            <div className="p-20">
              <FieldGroup className="gap-10 pb-12">
                <div className="flex flex-col items-start">
                  <h1 className="text-xl font-medium">Invalid reset link</h1>
                  <p className="text-balance text-muted-foreground">
                    This password reset link is invalid or has expired. Please request a new one.
                  </p>
                </div>
                <Link
                  href="/admin/forgot-password"
                  className="text-sm underline-offset-4 hover:underline"
                >
                  Request a new reset link
                </Link>
              </FieldGroup>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

  const handleSubmit = (values: ResetPasswordFormValues) => {
    startTransition(async () => {
      try {
        const { error } = await authClient.resetPassword({
          newPassword: values.newPassword,
          token
        })
        if (error) {
          toast.error(error.message || 'Failed to reset password')
          return
        }
        await authClient.getSession({ query: { disableCookieCache: true } })
        router.push(serializeLoginUrl('/admin/login', { reset: 'success' }))
      } catch {
        toast.error('Failed to reset your password. Try again.')
      }
    })
  }

  const handleInvalid = (errors: FieldErrors<ResetPasswordFormValues>) => {
    const message = errors.newPassword?.message ?? errors.confirmPassword?.message
    toast.error(typeof message === 'string' ? message : 'Please check your new password.')
  }

  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">Reset password</h1>
                  <p className="text-balance text-muted-foreground">
                    Enter your new password below
                  </p>
                </div>
                <div className="flex flex-col gap-4">
                  <Field>
                    <FieldLabel htmlFor="newPassword">New Password</FieldLabel>
                    <Input
                      id="newPassword"
                      type="password"
                      autoComplete="off"
                      placeholder="Enter new password"
                      aria-invalid={Boolean(form.formState.errors.newPassword)}
                      {...form.register('newPassword')}
                      required
                      disabled={isPending}
                    />
                  </Field>
                  <Field>
                    <FieldLabel htmlFor="confirmPassword">Confirm Password</FieldLabel>
                    <Input
                      id="confirmPassword"
                      type="password"
                      autoComplete="off"
                      placeholder="Confirm new password"
                      aria-invalid={Boolean(form.formState.errors.confirmPassword)}
                      {...form.register('confirmPassword')}
                      required
                      disabled={isPending}
                    />
                  </Field>
                  <Field className="pt-4">
                    <Button type="submit" disabled={isPending} aria-busy={isPending}>
                      {isPending && <Spinner />}
                      {isPending ? 'Resetting…' : 'Reset Password'}
                    </Button>
                  </Field>
                </div>
              </FieldGroup>
            </form>
          </Form>
        </CardContent>
      </Card>
    </div>
  )
}