"use client";

import { useState } from "react";
import Link from "next/link";
import { ApiError } from "@/lib/api/client";
import { login, resendVerification } from "@/lib/api/auth";
import { AuthCard, Field, FormAlert, PasswordField, Submit, readError, type FieldErrors } from "./Form";
import GoogleButton from "./GoogleButton";
import VerifyEmail from "./VerifyEmail";
import { useFinish, useNextQuery } from "./useFinish";

export default function LoginForm() {
  const finish = useFinish();
  const q = useNextQuery();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [busy, setBusy] = useState(false);
  const [errors, setErrors] = useState<FieldErrors>({});
  const [message, setMessage] = useState<string | null>(null);
  const [verify, setVerify] = useState(false);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setBusy(true);
    setErrors({});
    setMessage(null);
    try {
      const s = await login(email.trim(), password);
      finish(s.token, s.user);
    } catch (err) {
      setBusy(false);
      // Registered but never verified: send a fresh code and switch to the code step.
      if (err instanceof ApiError && err.status === 403 && err.errors && "requires_verification" in err.errors) {
        void resendVerification(email.trim()).catch(() => {});
        return setVerify(true);
      }
      const r = readError(err);
      setErrors(r.fields);
      setMessage(r.message);
    }
  };

  if (verify) {
    return (
      <AuthCard title="Verify your email">
        <VerifyEmail email={email.trim()} onVerified={finish} />
      </AuthCard>
    );
  }

  return (
    <AuthCard title="Welcome back" lead="Sign in to save places and write reviews.">
      <form className="acct-form" onSubmit={submit} noValidate>
        <Field label="Email" type="email" value={email} onChange={setEmail} error={errors.email} autoComplete="email" required autoFocus />
        <PasswordField label="Password" value={password} onChange={setPassword} error={errors.password} autoComplete="current-password" required />
        <Link className="acct-link acct-forgot" href={`/forgot-password${q}`}>
          Forgot password?
        </Link>
        {message && <FormAlert>{message}</FormAlert>}
        <Submit busy={busy}>Sign in</Submit>
      </form>
      <GoogleButton onSignedIn={finish} />
      <p className="acct-alt">
        New here?{" "}
        <Link className="acct-link" href={`/register${q}`}>
          Create an account
        </Link>
      </p>
    </AuthCard>
  );
}