// components/LoginForm.tsx
'use client';

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { LogIn } from 'lucide-react';
import {
	AdminLoginInput,
	AdminLoginInputDefault,
	AdminLoginSchema,
} from '@/lib/modules/auth/auth.validation';

import FormProvider from '@/components/forms/FormProvider';
import RHFTextField from '@/components/forms/RHFTextField';
import RHFPasswordField from '@/components/forms/RHFPasswordField';
import PrimaryButton from '@/components/button/PrimaryButton';
import { useRouter } from 'next/navigation';
import { useLoginAdminMutation } from '@/store/slice/authApi';
import useFormSubmitHandler from '@/hooks/formHandler';
import { useDispatch } from 'react-redux';
import { AppDispatch } from '@/store/app';
import { fetchAuthData, setUser } from '@/store/authSlice';

export function LoginForm() {
	const router = useRouter();
	const [loginAdmin, { isLoading }] = useLoginAdminMutation();
	const dispatch: AppDispatch = useDispatch();

	const methods = useForm<AdminLoginInput>({
		resolver: zodResolver(AdminLoginSchema),
		defaultValues: AdminLoginInputDefault,
		mode: 'onChange',
	});

	const handleLogin = useFormSubmitHandler(
		async (data: AdminLoginInput) => {
			// call RTK Query mutation — it will send credentials: 'include'
			const result = await loginAdmin(data).unwrap();
			console.log({ result });
			// result is AuthUserProfile (server returns the user in response.data)
			if (result) {
				dispatch(setUser(result as any));
			}
			return { data: result };
		},
		() => {
			// make sure profile is fresh, then go to dashboard
			dispatch(fetchAuthData());
			router.push('/admin/dashboard');
		},
		'Login successful'
	);

	return (
		<FormProvider
			methods={methods}
			onSubmit={methods.handleSubmit(handleLogin)}
		>
			<div className="space-y-4">
				<RHFTextField
					name="email"
					label="Email"
					placeholder="Enter your email"
					isRequired
					leftIcon="user"
				/>
				<RHFPasswordField
					name="password"
					label="Password"
					placeholder="Enter your password"
					isRequired
				/>

				<PrimaryButton
					type="submit"
					isDisabled={isLoading}
					isLoading={isLoading}
					title="Login"
					startIcon={<LogIn className="w-5 h-5 mr-2" />}
					className="bg-primary/90 w-full"
				/>
			</div>
		</FormProvider>
	);
}