/**
 * @file app/(auth)/register/page.tsx
 * @description Client component providing a user registration interface with client-side validation, field completion checks, autocomplete, and ActionButton integration.
 */

"use client";

import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { registerUser } from "@/lib/services/auth.service";
import { ActionButton } from "@/app/components/ui/buttons/ActionButton";
import { Loader2, UserPlus } from "lucide-react";
import { JSX } from "react/jsx-runtime";

/**
 * Renders the registration page featuring a sign-up form, client-side validation,
 * input completion tracking, error feedback, and routing logic upon successful account creation.
 *
 * @returns {JSX.Element} The rendered registration page component.
 */
export default function RegisterPage(): JSX.Element {
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  // Controlled form state tracking for input completion validation
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");

  const isFormValid =
    firstName.trim() !== "" &&
    lastName.trim() !== "" &&
    email.trim() !== "" &&
    password.trim() !== "" &&
    confirmPassword.trim() !== "";

  /**
   * Clears active error state and updates corresponding input values on user modification.
   *
   * @param {React.ChangeEvent<HTMLInputElement>} e - The input change event.
   */
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (error) {
      setError(null);
    }
    const { name, value } = e.target;
    if (name === "firstName") setFirstName(value);
    if (name === "lastName") setLastName(value);
    if (name === "email") setEmail(value);
    if (name === "password") setPassword(value);
    if (name === "confirmPassword") setConfirmPassword(value);
  };

  /**
   * Handles user registration form submission, validates password equality, delegates registration
   * to the auth service, and navigates to the summary page upon success.
   *
   * @async
   * @param {React.FormEvent<HTMLFormElement>} event - The form submission event.
   * @returns {Promise<void>} Resolves when registration handling completes.
   */
  async function handleSubmit(
    event: React.FormEvent<HTMLFormElement>,
  ): Promise<void> {
    event.preventDefault();
    if (!isFormValid) return;

    setError(null);

    const formData = new FormData(event.currentTarget);
    const payload = Object.fromEntries(formData.entries());

    // Client-side password matching check
    if (payload.password !== payload.confirmPassword) {
      setError("Passwords do not match.");
      return;
    }

    setLoading(true);

    const result = await registerUser(payload);

    if (result.error) {
      setError(result.error);
      setLoading(false);
    } else {
      router.push("/summary");
    }
  }

  return (
    <div className="relative min-h-dvh w-full flex flex-col items-center justify-center p-4 overflow-x-hidden bg-background text-foreground selection:bg-primary selection:text-background">
      {/* Background Ambient Glow */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-x-0 -top-20 sm:-top-32 -z-10 transform-gpu overflow-hidden blur-2xl sm:blur-3xl"
      >
        <div
          className="relative left-[calc(50%-10rem)] aspect-1155/678 w-[20rem] sm:w-50rem -translate-x-1/2 rotate-30deg bg-linear-to-tr from-accent to-primary opacity-20 sm:opacity-15"
          style={{
            clipPath:
              "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
          }}
        />
      </div>

      {/* Registration Card Container */}
      <div className="w-full max-w-sm p-6 sm:p-8 space-y-6 border border-border rounded-2xl bg-card/80 backdrop-blur-md shadow-xl">
        <div className="space-y-1.5 text-center">
          <h1 className="text-2xl font-extrabold tracking-tight">
            Create an Account
          </h1>
          <p className="text-xs sm:text-sm text-foreground-muted">
            Get started with your{" "}
            <span className="bg-linear-to-r from-primary to-accent bg-clip-text font-semibold text-transparent">
              Flowstate
            </span>{" "}
            workspace.
          </p>
        </div>

        {error && (
          <div
            className="p-3 text-xs font-medium text-destructive bg-destructive-bg border border-destructive-border rounded-lg text-center"
            role="alert"
          >
            {error}
          </div>
        )}

        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="grid grid-cols-2 gap-2.5">
            <div className="space-y-1">
              <label
                htmlFor="firstName"
                className="block text-xs font-medium text-foreground-muted"
              >
                First Name*
              </label>
              <input
                id="firstName"
                name="firstName"
                type="text"
                value={firstName}
                placeholder="John"
                onChange={handleInputChange}
                maxLength={50}
                autoComplete="given-name"
                required
                className="w-full px-3.5 py-2.5 text-sm rounded-lg border border-border bg-background/50 text-foreground placeholder:text-foreground-muted/50 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
              />
            </div>

            <div className="space-y-1">
              <label
                htmlFor="lastName"
                className="block text-xs font-medium text-foreground-muted"
              >
                Last Name*
              </label>
              <input
                id="lastName"
                name="lastName"
                type="text"
                value={lastName}
                placeholder="Doe"
                onChange={handleInputChange}
                maxLength={50}
                autoComplete="family-name"
                required
                className="w-full px-3.5 py-2.5 text-sm rounded-lg border border-border bg-background/50 text-foreground placeholder:text-foreground-muted/50 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
              />
            </div>
          </div>

          <div className="space-y-1">
            <label
              htmlFor="email"
              className="block text-xs font-medium text-foreground-muted"
            >
              Email Address*
            </label>
            <input
              id="email"
              name="email"
              type="email"
              value={email}
              placeholder="name@example.com"
              onChange={handleInputChange}
              maxLength={255}
              autoComplete="email"
              required
              className="w-full px-3.5 py-2.5 text-sm rounded-lg border border-border bg-background/50 text-foreground placeholder:text-foreground-muted/50 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
            />
          </div>

          <div className="space-y-1">
            <label
              htmlFor="password"
              className="block text-xs font-medium text-foreground-muted"
            >
              Password*
            </label>
            <input
              id="password"
              name="password"
              type="password"
              value={password}
              placeholder="••••••••••••"
              onChange={handleInputChange}
              maxLength={72}
              autoComplete="new-password"
              required
              className="w-full px-3.5 py-2.5 text-sm rounded-lg border border-border bg-background/50 text-foreground placeholder:text-foreground-muted/50 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
            />
          </div>

          <div className="space-y-1">
            <label
              htmlFor="confirmPassword"
              className="block text-xs font-medium text-foreground-muted"
            >
              Confirm Password*
            </label>
            <input
              id="confirmPassword"
              name="confirmPassword"
              type="password"
              value={confirmPassword}
              placeholder="••••••••••••"
              onChange={handleInputChange}
              maxLength={72}
              autoComplete="new-password"
              required
              className="w-full px-3.5 py-2.5 text-sm rounded-lg border border-border bg-background/50 text-foreground placeholder:text-foreground-muted/50 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
            />
          </div>

          <ActionButton
            type="submit"
            variant="primary"
            disabled={loading || !isFormValid}
            icon={loading ? Loader2 : UserPlus}
            className="w-full sm:w-full"
          >
            {loading ? "Creating account..." : "Sign Up"}
          </ActionButton>
        </form>

        <div className="text-center text-xs text-foreground-muted pt-1">
          Already have an account?{" "}
          <Link
            href="/login"
            className="font-medium text-foreground hover:text-primary transition-colors hover:underline"
          >
            Sign In
          </Link>
        </div>
      </div>
    </div>
  );
}