frontend/app/(main)/register/page.tsx

"use client";

import Button from "@/components/atoms/buttons/Button";
import { useAuth } from "@/lib/auth-context";
import { SHOP_INFO } from "@/lib/constants";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { FormEvent, useEffect, useState } from "react";

// Static OTP for demo (in production, this would be sent via SMS)
const DEMO_OTP = "123456";

export default function RegisterPage() {
  const router = useRouter();
  const { setUser } = useAuth();

  const [step, setStep] = useState<"phone" | "otp">("phone");
  const [phone, setPhone] = useState("");
  const [otp, setOtp] = useState("");
  const [errors, setErrors] = useState({ phone: "", otp: "" });
  const [isLoading, setIsLoading] = useState(false);
  const [otpSending, setOtpSending] = useState(false);
  const [otpSendError, setOtpSendError] = useState("");

  const sendOtp = async () => {
    setOtpSending(true);
    setOtpSendError("");
    try {
      const res = await fetch("/api/sms_otp", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ phone }),
      });
      if (!res.ok) {
        setOtpSendError("Unable to send OTP, please try again");
      }
    } catch {
      setOtpSendError("Unable to connect, please try again");
    } finally {
      setOtpSending(false);
    }
  };

  useEffect(() => {
    if (step === "otp") {
      sendOtp();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [step]);

  // Validate Vietnamese phone number
  const validatePhone = (phoneNumber: string): boolean => {
    // Vietnamese phone format: 10 digits starting with 0
    // Valid prefixes: 03, 05, 07, 08, 09
    const phoneRegex = /^(0[3|5|7|8|9])[0-9]{8}$/;
    return phoneRegex.test(phoneNumber);
  };

  const handlePhoneSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (!phone.trim()) {
      setErrors({ ...errors, phone: "Please enter your phone number" });
      return;
    }

    if (!validatePhone(phone)) {
      setErrors({
        ...errors,
        phone: "Invalid phone number (e.g. 0987654321)",
      });
      return;
    }

    setIsLoading(true);
    setErrors({ phone: "", otp: "" });

    try {
      const res = await fetch("/api/customer/quick_signup", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ phone }),
      });

      if (res.ok) {
        setStep("otp");
      } else {
        const errorCode = (await res.text().catch(() => "")).trim();
        const phoneErrorMap: Record<string, string> = {
          ExistedUser: "Phone number already registered",
          InvalidPhoneNumber: "Invalid phone number",
        };
        const msg =
          phoneErrorMap[errorCode] ?? "An error occurred, please try again";
        setErrors({ phone: msg, otp: "" });
      }
    } catch {
      setErrors({ phone: "Unable to connect, please try again", otp: "" });
    } finally {
      setIsLoading(false);
    }
  };

  const handleOtpSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (!otp.trim()) {
      setErrors({ ...errors, otp: "Please enter your OTP code" });
      return;
    }

    setIsLoading(true);
    setErrors({ phone: "", otp: "" });

    try {
      const res = await fetch("/api/customer/quick_login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ phone, otp }),
      });

      if (res.ok) {
        const userData = await res.json();
        setUser(userData);
        localStorage.setItem("coffee-shop-user", JSON.stringify(userData));
        router.push("/");
      } else {
        const errorCode = (await res.text().catch(() => "")).trim();
        const msg =
          errorCode === "InvalidOTP"
            ? "Incorrect or expired OTP code"
            : "An error occurred, please try again";
        setErrors({ phone: "", otp: msg });
      }
    } catch {
      setErrors({ phone: "", otp: "Unable to connect, please try again" });
    } finally {
      setIsLoading(false);
    }
  };

  const handleBackToPhone = () => {
    setStep("phone");
    setOtp("");
    setErrors({ phone: "", otp: "" });
  };

  return (
    <div className="bg-background flex min-h-screen items-center justify-center px-4 py-8">
      {/* Register Form Card */}
      <div className="w-full max-w-md rounded-2xl bg-white p-8 shadow-lg">
        {/* Logo & Shop Name */}
        <div className="mb-8 flex flex-col items-center">
          <div className="relative mb-4 h-20 w-20">
            <Image
              src={SHOP_INFO.logo}
              alt={SHOP_INFO.name}
              fill
              className="object-contain"
              sizes="80px"
              priority
            />
          </div>
          <h1 className="mb-1 text-2xl font-bold text-(--color-primary-dark)">
            {SHOP_INFO.name}
          </h1>
          <p className="text-sm text-(--color-text-muted)">
            {step === "phone"
              ? "Create a customer account"
              : "Verify your phone number"}
          </p>
        </div>

        {/* Step Indicator */}
        <div className="mb-6 flex items-center justify-center gap-2">
          <div
            className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold ${
              step === "phone"
                ? "bg-(--color-primary) text-white"
                : "bg-(--color-accent-light) text-(--color-primary-dark)"
            }`}
          >
            1
          </div>
          <div className="h-0.5 w-12 bg-(--color-border)"></div>
          <div
            className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold ${
              step === "otp"
                ? "bg-(--color-primary) text-white"
                : "bg-(--color-border-light) text-(--color-text-muted)"
            }`}
          >
            2
          </div>
        </div>

        {/* Phone Step */}
        {step === "phone" && (
          <form onSubmit={handlePhoneSubmit} className="space-y-5">
            {/* Phone Input */}
            <div>
              <label
                htmlFor="phone"
                className="mb-2 block text-sm font-medium text-(--color-text-secondary)"
              >
                Phone number
              </label>
              <div className="relative">
                <i className="fa-solid fa-phone absolute top-1/2 left-4 hidden -translate-y-1/2 text-(--color-text-muted) lg:block"></i>
                <input
                  id="phone"
                  type="tel"
                  value={phone}
                  onChange={(e) => {
                    setPhone(e.target.value);
                    setErrors({ ...errors, phone: "" });
                  }}
                  placeholder="0987654321"
                  disabled={isLoading}
                  className={`text-foreground focus:ring-opacity-20 w-full rounded-xl border bg-white px-10 py-3 transition-all duration-150 outline-none placeholder:text-(--color-text-muted) focus:border-(--color-primary) focus:ring-2 focus:ring-(--color-primary) disabled:opacity-60 lg:pl-11 ${errors.phone ? "border-red-400" : "border-(--color-border)"} `}
                />
              </div>
              {errors.phone && (
                <p className="mt-1.5 flex items-center gap-1 text-xs text-red-500">
                  <i className="fa-solid fa-circle-exclamation"></i>
                  {errors.phone}
                </p>
              )}
              <p className="mt-2 text-xs text-(--color-text-muted)">
                Enter a Vietnamese phone number (10 digits, starting with 0)
              </p>
            </div>

            {/* Buttons */}
            <div className="space-y-3 pt-2">
              {/* Submit Button */}
              <Button
                variant="primaryNoBorder"
                type="submit"
                style="login"
                size="lg"
                disabled={isLoading}
              >
                {isLoading ? (
                  <>
                    <i className="fa-solid fa-spinner fa-spin mr-2"></i>
                    Processing...
                  </>
                ) : (
                  "Continue"
                )}
              </Button>

              {/* Back to Login */}
              <Link
                href="/login"
                className="flex w-full items-center justify-center rounded-xl border-2 border-(--color-primary) bg-white py-3 font-semibold text-(--color-primary) no-underline transition-all duration-150 hover:bg-(--color-primary) hover:text-white active:scale-98"
              >
                Back to sign in
              </Link>
            </div>
          </form>
        )}

        {/* OTP Step */}
        {step === "otp" && (
          <form onSubmit={handleOtpSubmit} className="space-y-5">
            {/* Info Message */}
            <div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
              <p className="mb-2 text-sm text-blue-800">
                <i className="fa-solid fa-circle-info mr-2"></i>
                {otpSending ? (
                  <>
                    <i className="fa-solid fa-spinner fa-spin mr-1"></i>
                    Sending OTP to <strong>{phone}</strong>...
                  </>
                ) : (
                  <>
                    OTP code sent to <strong>{phone}</strong>
                  </>
                )}
              </p>
              <p className="text-xs text-blue-600">
                Demo OTP:{" "}
                <code className="rounded bg-white px-2 py-1 font-mono">
                  {DEMO_OTP}
                </code>
              </p>
            </div>
            {otpSendError && (
              <p className="flex items-center gap-1 text-xs text-red-500">
                <i className="fa-solid fa-circle-exclamation"></i>
                {otpSendError}
              </p>
            )}

            {/* OTP Input */}
            <div>
              <label
                htmlFor="otp"
                className="mb-2 block text-sm font-medium text-(--color-text-secondary)"
              >
                OTP code
              </label>
              <div className="relative">
                <i className="fa-solid fa-key absolute top-1/2 left-4 hidden -translate-y-1/2 text-(--color-text-muted) lg:block"></i>
                <input
                  id="otp"
                  type="text"
                  value={otp}
                  onChange={(e) => {
                    setOtp(e.target.value);
                    setErrors({ ...errors, otp: "" });
                  }}
                  placeholder="Enter OTP code"
                  maxLength={6}
                  disabled={isLoading}
                  className={`text-foreground focus:ring-opacity-20 w-full rounded-xl border bg-white px-4 py-3 text-center text-lg tracking-widest transition-all duration-150 outline-none placeholder:text-sm placeholder:tracking-normal placeholder:text-(--color-text-muted) focus:border-(--color-primary) focus:ring-2 focus:ring-(--color-primary) disabled:opacity-60 lg:pl-11 ${errors.otp ? "border-red-400" : "border-(--color-border)"} `}
                />
              </div>
              {errors.otp && (
                <p className="mt-1.5 flex items-center gap-1 text-xs text-red-500">
                  <i className="fa-solid fa-circle-exclamation"></i>
                  {errors.otp}
                </p>
              )}
            </div>

            {/* Buttons */}
            <div className="space-y-3 pt-2">
              {/* Submit Button */}
              <Button
                variant="primaryNoBorder"
                type="submit"
                style="login"
                size="lg"
                disabled={isLoading || otpSending}
              >
                {isLoading ? (
                  <>
                    <i className="fa-solid fa-spinner fa-spin mr-2"></i>
                    Processing...
                  </>
                ) : (
                  "Complete registration"
                )}
              </Button>

              {/* Back Button */}
              <Button
                variant="bgWhite"
                onClick={handleBackToPhone}
                size="lg"
                style="login"
                disabled={isLoading}
              >
                Change phone number
              </Button>
            </div>

            {/* Resend OTP */}
            <div className="text-center">
              <button
                type="button"
                onClick={sendOtp}
                disabled={otpSending || isLoading}
                className="text-sm text-(--color-primary) underline disabled:cursor-not-allowed disabled:no-underline disabled:opacity-50"
              >
                {otpSending ? (
                  <>
                    <i className="fa-solid fa-spinner fa-spin mr-1"></i>
                    Resending...
                  </>
                ) : (
                  "Resend OTP code"
                )}
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}