'use client';

import Link from 'next/link';

import { PasswordField } from '@/components/form';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { AuthBackground } from '@/components/auth/AuthBackground';
import { GuestGuard } from '@/guards';
import { useLoginForm } from '@/hooks/useLoginForm';
import { ROUTES } from '@/utils/routes';
import { Loader2 } from 'lucide-react';

export default function LoginPage() {
  const { register, handleSubmit, errors, isLoading } = useLoginForm();

  return (
    <GuestGuard>
      <div className="flex min-h-screen w-full">
        <AuthBackground />
        <div className="flex flex-1 md:w-1/2 items-center justify-center p-6 border-l border-border h-screen">
          <section className="w-full max-w-sm space-y-7">
            <header className="space-y-2 text-center md:text-left">
              <p className="text-sm font-medium text-muted-foreground">
                VisionRoad
              </p>
              <h1 className="text-2xl font-semibold tracking-tight">Sign in</h1>
              <p className="text-sm text-muted-foreground">
                Use your email and password to continue.
              </p>
            </header>

            <form className="space-y-5" onSubmit={handleSubmit}>
              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <Input
                  id="email"
                  type="email"
                  placeholder="admin@visionroad.ai"
                  autoComplete="email"
                  disabled={isLoading}
                  aria-invalid={!!errors.email}
                  {...register('email', {
                    required: 'Email is required',
                  })}
                />
                {errors.email && (
                  <p className="text-sm text-destructive">
                    {errors.email.message}
                  </p>
                )}
              </div>

              <PasswordField
                id="password"
                label="Password"
                required
                labelEnd={
                  <Link href={ROUTES.FORGOT_PASSWORD} className="text-primary">
                    Forgot password?
                  </Link>
                }
                placeholder="Enter password"
                autoComplete="current-password"
                disabled={isLoading}
                aria-invalid={!!errors.password}
                error={errors.password?.message}
                {...register('password', {
                  required: 'Password is required',
                })}
              />

              <Button type="submit" className="w-full" disabled={isLoading}>
                {isLoading ? (
                  <>
                    <Loader2 className="size-4 animate-spin" />
                    Signing in
                  </>
                ) : (
                  'Sign in'
                )}
              </Button>
            </form>
          </section>
        </div>
      </div>
    </GuestGuard>
  );
}