'use client';
import * as z from 'zod';
import Image from "next/image";

import { useEffect } from "react";
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { useTranslations, useLocale } from 'next-intl';
import { Link } from '@/i18n/navigation';
import { useSearchParams } from 'next/navigation';
import { toast } from '@/hooks/use-toast';
import { useFormSubmission } from '@/hooks/use-form-submission';

import { Loader, Lock, Mail } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { TextField } from '@/components/form/text-field';
import { Label } from "@/components/ui/label";

export function NewPasswordForm() {
    const t = useTranslations();
    const locale = useLocale();
    const searchParams = useSearchParams();
    const emailFromUrl = searchParams.get('email') || '';

    const newPasswordSchema = z.object({
        email: z.string().email('Invalid email address'),
        password: z.string()
            .min(8, t("custom.password-min"))
            .regex(/[A-Z]/, t("custom.password-upper"))
            .regex(/[a-z]/, t("custom.password-lower"))
            .regex(/[0-9]/, t("custom.password-number")),
        confirmPassword: z.string().min(8, t("custom.confirm-password")),
    }).refine((data) => data.password === data.confirmPassword, {
        message: t("custom.passwords-dont-match"),
        path: ["confirmPassword"],
    });

    type NewPasswordFormData = z.infer<typeof newPasswordSchema>;

    const {
        register,
        handleSubmit,
        formState: { errors },
        setValue
    } = useForm<NewPasswordFormData>({
        resolver: zodResolver(newPasswordSchema),
        defaultValues: {
            email: emailFromUrl,
            password: '',
            confirmPassword: '',
        },
    });

    useEffect(() => {
        if (emailFromUrl) {
            setValue('email', emailFromUrl);
        }
    }, [emailFromUrl, setValue]);

    const submitFunc = useFormSubmission({
        endPoint: '/password/new/store',
        method: 'POST',
        context: 'main',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        onSuccess: (response) => {
            toast({
                variant: "success",
                title: t('custom.done'),
                description: t('custom.password-reset-success'),
            });

            window.location.href = '/login';
        },
        onError: () => {
            toast({
                variant: "destructive",
                title: t('custom.failed'),
                description: t('custom.try-again')
            });
            return { handled: true };
        }
    })

    const onSubmit = (data: NewPasswordFormData) => {
        submitFunc.mutate({
            identifiant: data.email,
            password: data.password,
            password_confirmation: data.confirmPassword
        });
    };

    return (
        <div className="w-full px-6">
            <div className="space-y-4">
                <div className="w-40">
                    <Link href={'/'}>
                        <Image
                            src={locale === 'ar' ? '/images/logo.png' : '/images/logo-en.png'}
                            alt="mwaheb-logo"
                            className="w-full h-20 object-contain"
                            width={200}
                            height={200}
                            priority
                        />
                    </Link>
                </div>
                <div className="text-start mb-8">
                    <p className="text-baby-blue w-64 font-bold text-xl">
                        {t("reset-password.new-desc")}
                    </p>
                </div>
            </div>
            <div className="flex-1 py-10 flex flex-col justify-center mx-auto w-full">
                <form className="space-y-6 text-black"
                    onSubmit={handleSubmit(onSubmit)}
                >
                    {/* Hidden email field */}
                    <input type="hidden" {...register('email')} />

                    {/* password */}
                    <TextField
                        label={t("form.new-password")}
                        placeholder={t('placeholder.new-password')}
                        labelIcon={<Lock className='size-3.5' />}
                        type='password'

                        register={register}
                        registerFor='password'
                        errors={errors}
                        toggleSeePassword
                        required
                    />

                    {/* confirm password */}
                    <TextField
                        label={t("form.confirm-password")}
                        placeholder={t('placeholder.confirm-password')}
                        labelIcon={<Lock className='size-3.5' />}
                        type='password'

                        register={register}
                        registerFor='confirmPassword'
                        errors={errors}
                        toggleSeePassword
                        required
                    />

                    <Button
                        type="submit"
                        disabled={submitFunc.isPending}
                        className='w-full bg-primary-tw-400 text-white'
                    >
                        {submitFunc.isPending ? (
                            <>
                                <Loader className="w-5 h-5 animate-spin" />
                                {t('custom.submitting')}
                            </>
                        ) : (
                            t("custom.reset-password")
                        )}
                    </Button>

                    {/* Back to Login */}
                    <div className="text-center text-gray-600 text-sm">
                        <Link
                            href="/login"
                            className="text-purple-800 font-semibold !underline underline-offset-1"
                        >
                            {t("custom.back-to-login")}
                        </Link>
                    </div>
                </form>
            </div>
        </div>
    );
};