/* eslint-disable */
'use client';
import React, { useState } from 'react';
import { useForm, FormProvider } from 'react-hook-form';
import {
    FormControl,
    FormField,
    FormItem,
    FormLabel,
    FormMessage
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { z } from 'zod';

const formSchema = z.object({
    email: z.string().email({ message: "Invalid email address" }),
    password: z.string().min(8, {
        message: "Password must be at least 8 characters"
    }).max(64, {
        message: "Password must be at most 64 characters"
    }),
});
type FormValues = z.infer<typeof formSchema>;

import logo1 from '@/public/logo/Paintingssg-logo.png';
import logo2 from '@/public/logo/Paintingssg-logo-color.png';
import { zodResolver } from "@hookform/resolvers/zod";
import { toast } from "react-toastify";
import {useRouter} from "next/navigation";
import PrimaryButton from "@/components/common-ui/PrimaryButton";

type SubmitResult = { success: boolean; message: string };

interface Props {
    submit: (formData: FormData) => Promise<SubmitResult>;
}

export default function LoginFrom({ submit }: Props) {
    const [loading, setLoading] = useState(false);
    const form = useForm<FormValues>({
        resolver: zodResolver(formSchema),
        mode: 'onSubmit',
        defaultValues: {
            email: '',
            password: '',
        },
    });
    const router = useRouter();

    const onSubmit = async (data: FormValues) => {
        setLoading(true);
        const formData = new FormData();
        formData.append('email', data.email);
        formData.append('password', data.password);
        try {
            const res = await submit(formData);
            if (res.success) {
                router.push('/dashboard');
                toast.success(res.message);
            } else {
                toast.error(res.message);
            }
        } catch (error) {
            console.error("Login failed:", error);
        } finally {
            setLoading(false);
        }
    }

    return (
        <div className="flex justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900">
            <FormProvider {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md w-96">
                    <div>
                        <div className='dark:block hidden'>
                            <img src={logo1.src} alt="Logo" width={200} height={64} className="mx-auto"></img>
                        </div>
                        <div className='dark:hidden block'>
                            <img src={logo2.src} alt="Logo" width={200} height={64} className="mx-auto"/>
                        </div>
                        <h2 className="text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100 text-center">Please Sign In To Continue</h2>
                        <p className="text-sm text-gray-600 dark:text-gray-300 text-center">Welcome back! Please enter your details.</p>
                    </div>
                    <FormField
                        control={form.control}
                        name="email"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Email</FormLabel>
                                <FormControl>
                                    <Input placeholder="Email" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                    <FormField
                        control={form.control}
                        name="password"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Password</FormLabel>
                                <FormControl>
                                    <Input type="password" placeholder="Password" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <PrimaryButton
                        loading={loading}
                        text={'Sign In'}
                        loadingText={'Signing In'}
                        type={'submit'}
                        classNames={'w-full'}
                    />
                </form>
            </FormProvider>
        </div>
    );
}