'use client';
import { Button } from '@/components/ui/button';
import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { AuthLayout } from '@/src/components/auth/AuthLayout';
import { useApiWithToast } from '@/src/hooks/useApiWithToast';
import { UserService } from '@/src/services/UserService';
import { zodResolver } from '@hookform/resolvers/zod';
import { useSearchParams } from 'next/navigation';
import { useForm } from 'react-hook-form';
import { IoIosLock } from 'react-icons/io';
import { resetPasswordSchema, type ResetPasswordFormData } from '@/src/types/auth';

export default function ResetPasswordPage() {
  const { handle } = useApiWithToast();
  const searchParams = useSearchParams();
  const token = searchParams.get('token');

  const form = useForm<ResetPasswordFormData>({
    resolver: zodResolver(resetPasswordSchema),
    defaultValues: { password: '', confirmPassword: '' },
  });

  const onSubmit = async (values: ResetPasswordFormData) => {
    if (!token) {
      form.setError('root', { message: 'Invalid reset link' });
      return;
    }

    await handle(UserService.updatePassword(token, values.password), {
      messageOnSuccess: 'Password has been reset successfully',
      redirectTo: '/login',
    });
  };

  if (!token) {
    return (
      <AuthLayout title='Invalid Reset Link' footerText='Return to login' linkText='Login' linkHref='/login'>
        <div className='text-center'>
          <p className='text-neutral-200'>This password reset link is invalid or has expired.</p>
        </div>
      </AuthLayout>
    );
  }

  return (
    <AuthLayout title='Reset your password' footerText='Return to login' linkText='Login' linkHref='/login'>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
          <FormField
            control={form.control}
            name='password'
            render={({ field }) => (
              <FormItem>
                <FormControl>
                  <Input
                    placeholder='New password'
                    type='password'
                    {...field}
                    className='border-neutral-900 rounded-md !text-lg h-auto bg-white placeholder:text-neutral-500'
                    Icon={IoIosLock}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name='confirmPassword'
            render={({ field }) => (
              <FormItem>
                <FormControl>
                  <Input
                    placeholder='Confirm new password'
                    type='password'
                    {...field}
                    className='border-neutral-900 rounded-md !text-lg h-auto bg-white placeholder:text-neutral-500'
                    Icon={IoIosLock}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <Button
            type='submit'
            className='w-full hover:bg-neutral-900 border-neutral-900 border-2 rounded-md bg-white text-black hover:text-white'
          >
            Reset Password
          </Button>
        </form>
      </Form>
    </AuthLayout>
  );
}
