'use client';

import Link from 'next/link';
import { MailCheck, Send } from 'lucide-react';
import { Suspense } from 'react';

import { FormField } from '@/components/form';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { GuestGuard } from '@/guards';
import { useForgotPasswordForm } from '@/hooks/useForgotPasswordForm';
import { ROUTES } from '@/utils/routes';
import { Loader2 } from 'lucide-react';

function ForgotPasswordContent() {
  const {
    register,
    handleSubmit,
    errors,
    isLoading,
    isSubmitted,
    isFormSubmitted,
    canSubmit,
    displayInfo,
  } = useForgotPasswordForm();

  return (
    <GuestGuard>
      <div className="flex min-h-screen w-full">
        <div className="hidden w-[40%] md:flex" />
        <div className="flex h-screen flex-1 items-center justify-center border-l border-border p-6 md:w-[60%]">
          <section className="w-full max-w-sm space-y-7">
            <header className="space-y-2 text-center md:text-left">
              <p className="text-muted-foreground">RoadMonitor</p>
              <h1>{displayInfo.title}</h1>
              <p className="text-muted-foreground">{displayInfo.description}</p>
            </header>

            {!isSubmitted ? (
              <form className="space-y-5" onSubmit={handleSubmit}>
                <FormField
                  id="email"
                  label="Email"
                  required
                  error={isFormSubmitted ? errors.email?.message : undefined}
                >
                  <Input
                    id="email"
                    type="email"
                    placeholder="name@example.com"
                    autoComplete="email"
                    disabled={isLoading}
                    aria-invalid={!!errors.email}
                    {...register('email')}
                  />
                </FormField>

                <Button
                  type="submit"
                  className="w-full"
                  disabled={isLoading || !canSubmit}
                >
                  {isLoading ? (
                    <Loader2 className="size-4 animate-spin" />
                  ) : (
                    <Send />
                  )}
                  {displayInfo.buttonLabel}
                </Button>

                <div className="text-center">
                  <Link className="text-primary" href={ROUTES.LOGIN}>
                    Back to Login
                  </Link>
                </div>
              </form>
            ) : (
              <Button asChild className="w-full">
                <Link href={ROUTES.LOGIN}>
                  <MailCheck />
                  {displayInfo.buttonLabel}
                </Link>
              </Button>
            )}
          </section>
        </div>
      </div>
    </GuestGuard>
  );
}

export default function ForgotPasswordPage() {
  return (
    <Suspense fallback={null}>
      <ForgotPasswordContent />
    </Suspense>
  );
}