"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import {
    Form,
    FormControl,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Icons } from "@/components/icons";
import Loader from "@/components/common/loader";
import apis from "@/utils/apis";
import { useState } from "react";
import { useRouter } from "next/navigation";

const formSchema = z.object({
    email: z
    .string()
    .min(1, "Email is required")
    .email("Please enter a valid email address."),
});
type forgotPasswordFrom = z.infer<typeof formSchema>;

const ForgotPassowrd = () => {

    const router = useRouter()
    const [loading, setLoading] = useState(false)
    const form = useForm<forgotPasswordFrom>({
        resolver: zodResolver(formSchema),
        defaultValues: {
            email: "",
        },
    });


    const onSubmit = async (data: forgotPasswordFrom) => {
        try {
            setLoading(true)
            await apis.Auth.forgotPassword(data)
            router.push(`/auth/verify/email?type=forgot&email=${data?.email}`)
        } catch (error) {
        } finally {
            setLoading(false)
        }

    };


    return (
        <div className="auth-page h-screen flex items-center justify-center overflow-y-auto p-4 custom-scrollbar">
            <div className="w-full max-w-6xl place-items-center my-auto grid grid-cols-1 md:grid-cols-2 gap-8">
                {/* Left Section - Hidden on mobile, visible on larger screens */}
                <div className="hidden md:flex  flex-col justify-center items-start md:p-10 lg:p-3  text-white">
                    <span className="mb-6">
                        <Icons.Logo />
                    </span>
                    <p className="text-4xl font-semibold leading-tight lg:text-6xl">Forgot password?</p>
                    <p className="text-3xl mt-2  leading-relaxed lg:text-xl">Enter your email to receive a password reset link and regain access to your account.</p>
                </div>
                {/* Right Section - Always visible, contains the login form */}
                <div className="flex items-center  max-h-56 justify-center rounded-lg p-8 md:p-10 lg:p-12 bg-white w-full">
                    <section className="w-full">
                        <Form {...form}>
                            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
                                <FormField
                                    name="email"
                                    control={form.control}
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>Email<span className="text-blue-500 ml-1">*</span></FormLabel>
                                            <FormControl>
                                                <Input placeholder="Enter your email address" {...field} className={`${form.formState.errors.email ? "error-border" : ""}`} />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                                <Button className="w-full h-11 theme-background text-white" variant={"default"} type="submit"><Loader loading={loading}/>Submit</Button>
                            </form>
                        </Form>
                    </section>
                </div>
            </div>
        </div>

    );
}



export default ForgotPassowrd;