examjam-frontend/app/(auth)/register/page.tsx

"use client";

import { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/navigation";

import { register } from "@/lib/auth";
import { useAuth } from "@/context/AuthContext";
import BackgroundWrapper from "@/components/BackgroundWrapper";
import FormField from "@/components/FormField";
import DestructibleAlert from "@/components/DestructibleAlert";

export default function RegisterPage() {
  const { setToken } = useAuth();
  const router = useRouter();
  const [form, setForm] = useState({
    name: "",
    institution: "",
    sscRoll: "",
    hscRoll: "",
    email: "",
    phone: "",
    password: "",
  });
  const [error, setError] = useState<string | null>(null);

  const handleError = (error: any) => {
    if (error?.detail) {
      const match = error.detail.match(/Key \((.*?)\)=\((.*?)\)/);
      if (match) {
        const field = match[1];
        const value = match[2];
        return `The ${field} already exists. Please use a different value.`;
      }
    }
    return "An unexpected error occurred. Please try again.";
  };

  const validateForm = () => {
    const { sscRoll, hscRoll, password } = form;
    if (sscRoll === hscRoll) {
      return "SSC Roll and HSC Roll must be unique.";
    }
    const passwordRegex =
      /^(?=.*[A-Z])(?=.*[!@#$%^&*(),.?":{}|<>])[A-Za-z\d!@#$%^&*(),.?":{}|<>]{8,16}$/;
    if (!passwordRegex.test(password)) {
      return "Password must be 8-16 characters long, include at least one uppercase letter and one special character.";
    }
    return null;
  };

  const createUser = async () => {
    const validationError = validateForm();
    if (validationError) {
      setError(validationError);
      return;
    }
    try {
      await register(form, setToken);
      router.push("/tabs/home");
    } catch (error: any) {
      console.error("Error:", error.response || error.message);
      if (error.response?.detail) {
        const decodedError = handleError({ detail: error.response.detail });
        setError(decodedError);
      } else {
        setError(error.message || "An unexpected error occurred.");
      }
    }
  };

  return (
    <BackgroundWrapper>
      <div className="min-h-screen flex flex-col items-center justify-center px-4 py-10">
        <div className="w-full max-w-md space-y-6">
          <div className="w-full aspect-[368/89] mx-auto">
            <Image
              src="/images/logo/logo.png"
              alt="Logo"
              width={368}
              height={89}
              className="w-full h-auto"
            />
          </div>

          <div className="space-y-10">
            <div className="space-y-6">
              <FormField
                title="Full name"
                value={form.name}
                handleChangeText={(e) =>
                  setForm({ ...form, name: e.target.value })
                }
              />
              <FormField
                title="Institution"
                placeholder="Enter a institution"
                value={form.institution}
                handleChangeText={(e) =>
                  setForm({ ...form, institution: e.target.value })
                }
              />
              <FormField
                title="SSC Roll No."
                placeholder="Enter your SSC Roll No."
                value={form.sscRoll}
                handleChangeText={(e) =>
                  setForm({ ...form, sscRoll: e.target.value })
                }
              />
              <FormField
                title="HSC Roll No."
                placeholder="Enter your HSC Roll No."
                value={form.hscRoll}
                handleChangeText={(e) =>
                  setForm({ ...form, hscRoll: e.target.value })
                }
              />
              <FormField
                title="Email Address"
                placeholder="Enter your email address..."
                value={form.email}
                handleChangeText={(e) =>
                  setForm({ ...form, email: e.target.value })
                }
              />
              <FormField
                title="Phone Number"
                placeholder="Enter your phone number.."
                value={form.phone}
                handleChangeText={(e) =>
                  setForm({ ...form, phone: e.target.value })
                }
              />
              <FormField
                title="Password"
                placeholder="Enter a password"
                value={form.password}
                handleChangeText={(e) =>
                  setForm({ ...form, password: e.target.value })
                }
              />
            </div>

            {error && <DestructibleAlert text={error} />}

            <button
              onClick={createUser}
              className="w-full h-14 rounded-full border border-blue-900 text-center text-base font-medium"
            >
              Get started
            </button>

            <p className="text-center text-sm">
              Already have an account?{" "}
              <Link href="/login" className="text-blue-600">
                Login here
              </Link>
            </p>
          </div>
        </div>
      </div>
    </BackgroundWrapper>
  );
}