import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

import { AuthCardHeader } from "@/app/(auth)/_components/auth-card-header";
import { AuthPageShell } from "@/app/(auth)/_components/auth-page-shell";
import { LoginForm } from "@/app/(auth)/_components/login-form";
import { BrandLockup } from "@/components/common/brand-lockup";
import { Text } from "@/components/ui/text";
import { loginSchema, type LoginFormValues } from "@/domain/auth/schemas/login-schema";
import { useAuthContext } from "@/providers/auth-context";

export default function LoginPage() {
  const { login, isLoggingIn, loginError } = useAuthContext();

  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<LoginFormValues>({
    resolver: zodResolver(loginSchema),
    defaultValues: {
      username: "",
      password: "",
    },
  });

  return (
    <AuthPageShell>
      <BrandLockup className="mb-8" />
      <AuthCardHeader title="Welcome back" subtitle="Sign in to your account" />
      <LoginForm
        register={register}
        handleSubmit={handleSubmit}
        watch={watch}
        errors={errors}
        onSubmit={login}
        isLoggingIn={isLoggingIn}
        loginError={loginError}
      />
      <Text
        variant="caption"
        tone="muted"
        className="mt-5! block text-center text-(length:--text-xs)"
      >
        Having trouble? Contact your administrator.
      </Text>
    </AuthPageShell>
  );
}