'use client';

import { useTransition } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { Loader2 } from 'lucide-react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
  CardFooter
} from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { requestPasswordReset } from '@/lib/auth/auth-client';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormMessage
} from '@/components/ui/form';
import { Routes } from '@/config/routes';
import { toast } from 'sonner';
import Image from 'next/image';

function useSchema() {
  return z.object({
    email: z
      .string()
      .min(1, { message: 'Dette felt er påkrævet' })
      .email({ message: 'Indtast en gyldig e-mail' })
  });
}

type ForgotPasswordFormData = z.infer<ReturnType<typeof useSchema>>;

export default function ForgotPassword() {
  const [loading, startTransition] = useTransition();
  const router = useRouter();
  const schema = useSchema();

  const form = useForm<ForgotPasswordFormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      email: ''
    }
  });

  const onSubmit = (data: ForgotPasswordFormData) => {
    startTransition(async () => {
      await requestPasswordReset(
        { ...data },
        {
          onSuccess() {
            toast.success('Tjek din e-mail', {
              description:
                'Vi har sendt et link til nulstilling af adgangskode til din e-mail. Hvis du ikke kan se e-mailen, tjek din spam-mappe.'
            });
            router.push(Routes.HOME);
          },
          onError({ error }: { error: Error }) {
            toast.error(error.message);
          }
        }
      );
    });
  };

  return (
    <Card className='w-full gap-8 rounded-none border-0 shadow-none'>
      <CardHeader className='gap-0'>
        <Link href={Routes.HOME}>
          <Image
            src='/logo.svg'
            alt='Magasinet KBH'
            width={120}
            height={120}
            className='size-[80px] md:size-[120px]'
            priority
          />
        </Link>

        <CardTitle className='mt-6 text-2xl font-bold md:text-4xl'>
          Glemt adgangskode
        </CardTitle>
        <CardDescription className='mt-0.5 font-serif text-sm leading-[1.2] text-[#303030] md:text-lg'>
          - indtast din email adresse og vi sender dig yderligere instruktioner
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)}>
            <FormField
              control={form.control}
              name='email'
              render={({ field }) => (
                <FormItem>
                  <FormControl>
                    <Input
                      id='email'
                      type='email'
                      autoComplete='email'
                      placeholder='Email / brugernavn'
                      className='border-dark-gray px-4 shadow-none md:h-17 md:text-xl'
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button
              type='submit'
              className='mt-10 w-full bg-neutral-900 font-medium md:h-17 md:text-3xl'
              disabled={loading}
            >
              {loading ? (
                <Loader2 className='animate-spin md:size-10' />
              ) : (
                'Send ny adgangskode'
              )}
            </Button>
          </form>
        </Form>
      </CardContent>

      <CardFooter>
        <p className='w-full text-center font-serif md:text-lg'>
          Har du endnu ikke en profil?
          <Link
            href={Routes.AUTH.SIGN_IN}
            className='text-client-red block hover:underline'
          >
            Log ind
          </Link>
        </p>
      </CardFooter>
    </Card>
  );
}