"use client";

import { useEffect, useId, useState, type FormEvent } from "react";
import { Button } from "@/components/Button";
import { MagicLinkCheckEmail } from "@/components/auth/MagicLinkCheckEmail";
import { PasswordlessAuthShell } from "@/components/auth/PasswordlessAuthShell";
import { ApiError, authApi, type ValidationErrors } from "@/lib/api";
import {
  clearMagicLinkPending,
  readMagicLinkPending,
  writeMagicLinkPending,
} from "@/lib/magic-link-pending";
import { isValidEmail } from "@/lib/passwordless-auth";

const field =
  "h-11 max-h-11 w-full rounded-pv border-[1.5px] border-line bg-white px-4 text-sm text-text transition-[border-color,background-color] duration-150 ease-out focus:border-primary focus:bg-white focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent";

const fieldInvalid = "border-accent";

function firstFieldError(errors: ValidationErrors, key: string): string | undefined {
  return errors[key]?.[0];
}

function formMessageFromApiError(error: ApiError): string {
  if (error.status === 419) {
    return "Your session expired. Refresh the page and try again.";
  }

  if (error.kind === "rate_limited") {
    return "Please wait a moment before requesting another link.";
  }

  if (error.kind === "server") {
    return "Something went wrong. Please try again.";
  }

  if (error.kind === "network") {
    return error.message || "Unable to reach the server. Check your connection and try again.";
  }

  if (error.kind === "validation") {
    return error.message || "Please check the highlighted fields and try again.";
  }

  return "Something went wrong. Please try again.";
}

type Phase = "email" | "check_email";

export function SignInPage() {
  const formErrorId = useId();
  const [phase, setPhase] = useState<Phase>("email");
  const [email, setEmail] = useState("");
  const [expiresAt, setExpiresAt] = useState<string | null>(null);
  const [fieldErrors, setFieldErrors] = useState<ValidationErrors>({});
  const [formError, setFormError] = useState("");
  const [statusMessage, setStatusMessage] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [hydrated, setHydrated] = useState(false);

  const emailError = firstFieldError(fieldErrors, "email");

  useEffect(() => {
    const pending = readMagicLinkPending("login");
    if (pending) {
      setEmail(pending.email);
      setExpiresAt(pending.expires_at);
      setPhase("check_email");
      setStatusMessage("We sent a secure sign-in link.");
    }
    setHydrated(true);
  }, []);

  async function sendMagicLink() {
    if (isSubmitting) {
      return;
    }

    setFormError("");
    setFieldErrors({});

    if (!isValidEmail(email)) {
      setFieldErrors({ email: ["Enter a valid email address."] });
      return;
    }

    setIsSubmitting(true);

    try {
      const response = await authApi.sendMagicLink({
        email: email.trim(),
        intent: "login",
      });

      const nextEmail = email.trim();
      setEmail(nextEmail);
      setExpiresAt(response.expires_at);
      writeMagicLinkPending({
        email: nextEmail,
        expires_at: response.expires_at,
        intent: "login",
      });
      setPhase("check_email");
      setStatusMessage(
        phase === "check_email"
          ? "A new sign-in link has been sent."
          : "We sent a secure sign-in link.",
      );
    } catch (error) {
      if (error instanceof ApiError) {
        if (error.isValidation) {
          setFieldErrors(error.errors);
        }
        setFormError(formMessageFromApiError(error));
        if (phase === "check_email") {
          setStatusMessage(formMessageFromApiError(error));
        }
      } else {
        setFormError("Something went wrong. Please try again.");
      }
    } finally {
      setIsSubmitting(false);
    }
  }

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    await sendMagicLink();
  }

  function handleChangeEmail() {
    clearMagicLinkPending();
    setPhase("email");
    setExpiresAt(null);
    setFormError("");
    setFieldErrors({});
    setStatusMessage("");
  }

  if (!hydrated) {
    return (
      <PasswordlessAuthShell
        authSwitch={{
          prompt: "Don't have an account?",
          href: "/signup",
          label: "Sign up",
        }}
      >
        <p className="text-sm text-ink-60">Loading…</p>
      </PasswordlessAuthShell>
    );
  }

  return (
    <PasswordlessAuthShell
      authSwitch={{
        prompt: "Don't have an account?",
        href: "/signup",
        label: "Sign up",
      }}
    >
      {phase === "email" ? (
        <form
          className="flex flex-col"
          noValidate
          onSubmit={handleSubmit}
          aria-describedby={formError ? formErrorId : undefined}
        >
          <h1 className="text-[1.65rem] leading-tight font-semibold text-[#172554]">Welcome back.</h1>
          <p className="mt-2 text-[0.98rem] text-ink-60">
            Enter your email and we’ll send you a secure sign-in link.
          </p>

          {formError ? (
            <p
              id={formErrorId}
              className="mt-4 rounded-pv border border-accent/30 bg-accent/5 px-3 py-2.5 text-[0.88rem] text-accent"
              role="alert"
            >
              {formError}
            </p>
          ) : null}

          <div className="mt-7 flex flex-col gap-1">
            <label className="text-[0.86rem] font-semibold text-[#172554]" htmlFor="signin-email">
              Email
            </label>
            <input
              className={`${field} ${emailError ? fieldInvalid : ""}`}
              id="signin-email"
              name="email"
              type="email"
              autoComplete="email"
              required
              placeholder="you@studio.com"
              value={email}
              disabled={isSubmitting}
              aria-invalid={Boolean(emailError)}
              aria-describedby={emailError ? "signin-email-error" : undefined}
              onChange={(event) => setEmail(event.target.value)}
            />
            {emailError ? (
              <p id="signin-email-error" className="text-[0.82rem] font-medium text-accent" role="alert">
                {emailError}
              </p>
            ) : null}
          </div>

          <div className="mt-8">
            <Button
              type="submit"
              className="w-full active:scale-[0.98] duration-100 ease-out disabled:pointer-events-none disabled:opacity-55"
              disabled={isSubmitting}
              aria-busy={isSubmitting}
            >
              {isSubmitting ? "Sending…" : "Send Magic Link"}
            </Button>
          </div>
        </form>
      ) : expiresAt ? (
        <MagicLinkCheckEmail
          email={email.trim()}
          expiresAt={expiresAt}
          isSubmitting={isSubmitting}
          formError={formError}
          statusMessage={statusMessage}
          onResend={() => {
            void sendMagicLink();
          }}
          onChangeEmail={handleChangeEmail}
        />
      ) : null}
    </PasswordlessAuthShell>
  );
}