"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";
import { RegisterForm } from "@/types/auth";

interface CustomError extends Error {
  response?: {
    detail?: string;
  };
}

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

  const handleError = (error: { detail: string }) => {
    if (error?.detail) {
      const match = error.detail.match(/Key \((.*?)\)=\((.*?)\)/);
      if (match) {
        const field = match[1];
        return `The ${field} already exists. Please try again.`;
      }
    }
    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("/home");
    } catch (error) {
      // Type guard for built-in Error type
      if (error instanceof Error) {
        console.error(
          "Error:",
          (error as CustomError).response || error.message
        );

        const response = (error as CustomError).response;

        if (response?.detail) {
          const decodedError = handleError({ detail: response.detail });
          setError(decodedError);
        } else {
          setError(error.message || "An unexpected error occurred.");
        }
      } else {
        // Fallback for non-standard errors
        console.error("Unexpected error:", error);
        setError("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={(value) => setForm({ ...form, name: value })}
              />

              <FormField
                title="Institution"
                value={form.institution}
                handleChangeText={(value) =>
                  setForm({ ...form, institution: value })
                }
              />

              <FormField
                title="SSC Roll No."
                value={form.sscRoll}
                handleChangeText={(value) =>
                  setForm({ ...form, sscRoll: value })
                }
              />

              <FormField
                title="HSC Roll No."
                value={form.hscRoll}
                handleChangeText={(value) =>
                  setForm({ ...form, hscRoll: value })
                }
              />

              <FormField
                title="Email Address"
                value={form.email}
                handleChangeText={(value) => setForm({ ...form, email: value })}
              />

              <FormField
                title="Phone Number"
                value={form.phone}
                handleChangeText={(value) => setForm({ ...form, phone: value })}
              />

              <FormField
                title="Password"
                value={form.password}
                handleChangeText={(value) =>
                  setForm({ ...form, password: value })
                }
                placeholder={undefined}
              />
            </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>
  );
}