nxtgauge-frontend-solid/src/routes/signup.tsx

import { A, useNavigate, useSearchParams } from "@solidjs/router";
import { createMemo, createSignal, For, onMount, Show } from "solid-js";
import PublicBackground from "~/components/PublicBackground";
import PublicHeader from "~/components/PublicHeader";
import CaptchaCanvas from "~/components/CaptchaCanvas";
import {
  checkPasswordStrength,
  isPasswordStrong,
  isValidCaptcha,
  isValidEmail,
  isValidName,
  validateRegisterForm,
} from "~/lib/form-validation";

type RoleKey = "company" | "job_seeker" | "professional" | "customer";

type RegisterErrors = Record<string, string>;

function normalizeIntent(intent: string | null | undefined): RoleKey {
  const v = String(intent || "").toLowerCase();
  if (v.includes("company")) return "company";
  if (v.includes("professional")) return "professional";
  if (
    v.includes("developer") ||
    v.includes("photographer") ||
    v.includes("makeup") ||
    v.includes("tutor") ||
    v.includes("video") ||
    v.includes("graphic") ||
    v.includes("social") ||
    v.includes("fitness") ||
    v.includes("catering") ||
    v.includes("ugc")
  )
    return "professional";
  if (v.includes("customer")) return "customer";
  return "job_seeker";
}

function randomCaptcha(length = 6): string {
  const alphabet = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
  let out = "";
  for (let i = 0; i < length; i += 1) {
    out += alphabet[Math.floor(Math.random() * alphabet.length)];
  }
  return out;
}

function PasswordVisibilityIcon(props: { visible: boolean }) {
  if (props.visible) {
    return (
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M3 3l18 18" />
        <path d="M10.58 10.58a2 2 0 0 0 2.83 2.83" />
        <path d="M9.88 5.09A11 11 0 0 1 12 4.9c5.5 0 10 4.1 10 7.1 0 1.2-.72 2.53-1.95 3.72" />
        <path d="M6.1 6.1C3.54 7.58 2 9.79 2 12c0 3 4.48 7.1 10 7.1 1.72 0 3.36-.4 4.84-1.12" />
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z" />
      <circle cx="12" cy="12" r="3" />
    </svg>
  );
}

export default function SignupRoute() {
  const navigate = useNavigate();
  const [search] = useSearchParams();
  onMount(() => {
    // Legacy redirect to choose-role removed for dashboard-first flow.
    // If no intent/role provided, normalizeIntent will default to job_seeker.
  });

  const [step, setStep] = createSignal<"register" | "verify">("register");
  const [firstName, setFirstName] = createSignal("");
  const [lastName, setLastName] = createSignal("");
  const [email, setEmail] = createSignal("");
  const [password, setPassword] = createSignal("");
  const [confirmPassword, setConfirmPassword] = createSignal("");
  const role = createMemo<RoleKey>(() => normalizeIntent(search.intent || search.role));
  const selectedProfessionalRole = createMemo(() =>
    String(search.role || "")
      .trim()
      .toUpperCase()
  );
  const [termsAccepted, setTermsAccepted] = createSignal(false);
  const [captcha, setCaptcha] = createSignal("");
  const [captchaCode, setCaptchaCode] = createSignal(randomCaptcha());
  const [otp, setOtp] = createSignal(["", "", "", "", "", ""]);
  const [errors, setErrors] = createSignal<RegisterErrors>({});
  const [serverError, setServerError] = createSignal("");
  const [emailExists, setEmailExists] = createSignal(false);
  const [submitting, setSubmitting] = createSignal(false);
  const [pendingEmail, setPendingEmail] = createSignal("");
  const [verifiedSuccess, setVerifiedSuccess] = createSignal(false);
  const [showPassword, setShowPassword] = createSignal(false);
  const [showConfirmPassword, setShowConfirmPassword] = createSignal(false);

  const passwordChecks = createMemo(() => checkPasswordStrength(password(), confirmPassword()));
  const otpCode = createMemo(() => otp().join(""));
  const firstNameValid = createMemo(() => !firstName().trim() || isValidName(firstName()));
  const lastNameValid = createMemo(() => !lastName().trim() || isValidName(lastName()));
  const emailValid = createMemo(() => !email().trim() || isValidEmail(email()));
  const canSubmit = createMemo(
    () =>
      firstName().trim().length > 0 &&
      firstNameValid() &&
      lastName().trim().length > 0 &&
      lastNameValid() &&
      emailValid() &&
      isValidEmail(email()) &&
      isPasswordStrong(passwordChecks()) &&
      passwordChecks().match &&
      isValidCaptcha(captcha(), captchaCode()) &&
      termsAccepted() &&
      !emailExists()
  );

  const refreshCaptcha = () => {
    setCaptcha("");
    setCaptchaCode(randomCaptcha());
  };

  const checkEmailExists = async (emailValue: string) => {
    const normalized = emailValue.trim().toLowerCase();
    if (!normalized || !isValidEmail(normalized)) {
      setEmailExists(false);
      return false;
    }

    try {
      const response = await fetch("/api/gateway/api/auth/check-email", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        credentials: "include",
        body: JSON.stringify({ email: normalized }),
      });
      const payload = await response.json().catch(() => ({}));
      const exists = Boolean(response.ok && payload?.exists);
      setEmailExists(exists);
      return exists;
    } catch {
      setEmailExists(false);
      return false;
    }
  };

  const setOtpDigit = (index: number, value: string) => {
    const clean = value.replace(/\D/g, "").slice(0, 1);
    setOtp((prev) => {
      const next = prev.slice();
      next[index] = clean;
      return next;
    });
    if (clean) {
      const nextEl = document.querySelector<HTMLInputElement>(`#otp-${index + 1}`);
      if (nextEl) nextEl.focus();
    }
  };

  const saveUserForDashboard = (input: {
    firstName: string;
    lastName: string;
    email: string;
    roleKey: RoleKey;
    user?: any;
  }) => {
    const fullName = `${input.firstName} ${input.lastName}`.trim();
    const payload = {
      firstName: input.firstName,
      lastName: input.lastName,
      fullName,
      name: fullName,
      displayName: fullName,
      email: input.email.toLowerCase(),
      roleKey: input.roleKey,
      role: input.roleKey,
      selectedProfessionalRole: selectedProfessionalRole() || null,
      user: input.user || null,
    };
    if (typeof window !== "undefined") {
      window.localStorage.setItem("nxtgauge_signup_profile_v1", JSON.stringify(payload));
      window.localStorage.setItem("nxtgauge_auth_user", JSON.stringify(payload));
      window.localStorage.setItem("nxtgauge_user", JSON.stringify(payload));
    }
  };

  const register = async () => {
    setServerError("");
    const validation = validateRegisterForm({
      firstName: firstName(),
      lastName: lastName(),
      email: email(),
      password: password(),
      confirmPassword: confirmPassword(),
      captcha: captcha(),
      expectedCaptcha: captchaCode(),
      termsAccepted: termsAccepted(),
    });
    setErrors(validation.errors);
    if (!validation.isValid) return;

    setSubmitting(true);
    try {
      const res = await fetch("/api/auth/register", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        credentials: "include",
        body: JSON.stringify({
          full_name: `${firstName().trim()} ${lastName().trim()}`.trim(),
          email: email().trim().toLowerCase(),
          password: password(),
          phone: "",
          intent: role(),
          role_key: selectedProfessionalRole() || undefined,
        }),
      });

      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setServerError(String(data?.error || data?.message || "Unable to create account."));
        refreshCaptcha();
        return;
      }

      const cleanEmail = email().trim().toLowerCase();
      setPendingEmail(cleanEmail);
      setVerifiedSuccess(false);
      saveUserForDashboard({
        firstName: firstName().trim(),
        lastName: lastName().trim(),
        email: cleanEmail,
        roleKey: role(),
      });
      setStep("verify");
      setOtp(["", "", "", "", "", ""]);
    } finally {
      setSubmitting(false);
    }
  };

  const verifyOtp = async () => {
    setServerError("");
    if (otpCode().length !== 6) {
      setServerError("Enter the 6-digit code sent to your email.");
      return;
    }
    setSubmitting(true);
    try {
      const verifyRes = await fetch("/api/gateway/api/auth/verify-email", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        credentials: "include",
        body: JSON.stringify({ otp: otpCode() }),
      });
      const verifyData = await verifyRes.json().catch(() => ({}));
      if (!verifyRes.ok) {
        setServerError(String(verifyData?.error || verifyData?.message || "Verification failed."));
        return;
      }
      setVerifiedSuccess(true);
      setTimeout(() => navigate("/login?verified=1", { replace: true }), 1400);
    } finally {
      setSubmitting(false);
    }
  };

  const resendOtp = async () => {
    setServerError("");
    setSubmitting(true);
    try {
      const res = await fetch("/api/gateway/api/auth/resend-otp", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        credentials: "include",
        body: JSON.stringify({ email: pendingEmail() || email().trim().toLowerCase() }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setServerError(String(data?.error || data?.message || "Unable to resend OTP right now."));
      }
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <main class="auth-page">
      <PublicBackground />
      <PublicHeader />
      <div class="auth-layout">
        <section class="auth-visual card glass-dark">
          <img class="auth-visual-img" src="/images/auth-company-2.jpg" alt="Get Started" />
          <div class="auth-visual-overlay" />
          <div class="auth-visual-content">
            <p class="eyebrow">Get Started</p>
            <h1 class="title light">Create Your Nxtgauge Account</h1>
            <p class="subtitle light">
              Join verified opportunities and continue directly to your dashboard after signup.
            </p>
          </div>
        </section>

        <section class="auth-form card glass-light">
          <Show
            when={step() === "register"}
            fallback={
              <>
                <h2 class="title">Verify Email</h2>
                <p class="subtitle">
                  Enter the 6-digit code sent to <strong>{pendingEmail() || email()}</strong>.
                </p>

                <Show
                  when={!verifiedSuccess()}
                  fallback={
                    <div
                      style={{
                        "margin-top": "12px",
                        "border-radius": "12px",
                        border: "1px solid #FED7AA",
                        background: "#FFF7ED",
                        padding: "14px 16px",
                        color: "#C2410C",
                        "text-align": "center",
                      }}
                    >
                      <div style={{ "font-size": "30px", "line-height": "1" }}>✓</div>
                      <p style={{ margin: "8px 0 0", "font-weight": "700", "font-size": "14px" }}>
                        Your email has been verified.
                      </p>
                      <p style={{ margin: "6px 0 0", "font-size": "13px" }}>
                        Redirecting to login...
                      </p>
                    </div>
                  }
                >
                  <div class="otp-row">
                    <For each={Array.from({ length: 6 }, (_, index) => index)}>
                      {(index) => (
                        <input
                          id={`otp-${index}`}
                          class="otp-input"
                          inputMode="numeric"
                          maxlength={1}
                          value={otp()[index]}
                          onInput={(e) => setOtpDigit(index, e.currentTarget.value)}
                        />
                      )}
                    </For>
                  </div>

                  <button
                    class="auth-submit-btn"
                    type="button"
                    disabled={submitting()}
                    onClick={() => void verifyOtp()}
                  >
                    {submitting() ? "Verifying..." : "Verify and Continue"}
                  </button>

                  <div class="auth-footer-row">
                    <p class="note">Didn’t receive code?</p>
                    <button
                      class="auth-forgot-link"
                      type="button"
                      onClick={() => void resendOtp()}
                      disabled={submitting()}
                    >
                      Resend OTP
                    </button>
                  </div>
                </Show>
              </>
            }
          >
            <h2 class="title">Create Your Account</h2>
            <p class="subtitle">
              Sign up first, then go directly to dashboard after email verification.
            </p>

            <div class="grid" style={{ "grid-template-columns": "1fr 1fr", margin: 0 }}>
              <div class="field">
                <label class="label" for="first-name">
                  FULL NAME
                </label>
                <input
                  id="first-name"
                  class="input"
                  value={firstName()}
                  onInput={(e) => setFirstName(e.currentTarget.value)}
                />
                <p
                  class="validation-note"
                  style={{ color: firstName().trim() && firstNameValid() ? "#fd6116" : "#6e7591" }}
                >
                  {firstName().trim() && firstNameValid()
                    ? "✓ First name looks good"
                    : "• First name is required"}
                </p>
              </div>
              <div class="field">
                <label class="label" for="last-name">
                  LAST NAME
                </label>
                <input
                  id="last-name"
                  class="input"
                  value={lastName()}
                  onInput={(e) => setLastName(e.currentTarget.value)}
                />
                <p
                  class="validation-note"
                  style={{ color: lastName().trim() && lastNameValid() ? "#fd6116" : "#6e7591" }}
                >
                  {lastName().trim() && lastNameValid()
                    ? "✓ Last name looks good"
                    : "• Last name is required"}
                </p>
              </div>
            </div>

            <div class="field">
              <label class="label" for="email">
                EMAIL ADDRESS
              </label>
              <input
                id="email"
                type="email"
                class="input"
                value={email()}
                onInput={(e) => {
                  setEmail(e.currentTarget.value);
                  setEmailExists(false);
                }}
                onBlur={() => {
                  void checkEmailExists(email());
                }}
              />
              <p
                class="validation-note"
                style={{
                  color: emailExists()
                    ? "#dc2626"
                    : email().trim() && emailValid()
                      ? "#fd6116"
                      : "#6e7591",
                }}
              >
                {emailExists()
                  ? "• This email is already registered"
                  : email().trim() && emailValid()
                    ? "✓ Valid email format"
                    : "• Enter a valid email format"}
              </p>
            </div>

            <div class="grid" style={{ "grid-template-columns": "1fr 1fr", margin: 0 }}>
              <div class="field">
                <label class="label" for="password">
                  PASSWORD
                </label>
                <div class="auth-password-wrap">
                  <input
                    id="password"
                    type={showPassword() ? "text" : "password"}
                    class="input"
                    value={password()}
                    onInput={(e) => setPassword(e.currentTarget.value)}
                  />
                  <button
                    class="auth-toggle-visibility"
                    type="button"
                    onClick={() => setShowPassword((prev) => !prev)}
                    aria-label={showPassword() ? "Hide password" : "Show password"}
                  >
                    <PasswordVisibilityIcon visible={showPassword()} />
                  </button>
                </div>
                <div class="password-strength-grid">
                  <p style={{ color: passwordChecks().minLength ? "#fd6116" : "#6e7591" }}>
                    {passwordChecks().minLength ? "✓" : "•"} 8+ chars
                  </p>
                  <p style={{ color: passwordChecks().uppercase ? "#fd6116" : "#6e7591" }}>
                    {passwordChecks().uppercase ? "✓" : "•"} Uppercase
                  </p>
                  <p style={{ color: passwordChecks().special ? "#fd6116" : "#6e7591" }}>
                    {passwordChecks().special ? "✓" : "•"} Special
                  </p>
                  <p style={{ color: passwordChecks().lowercase ? "#fd6116" : "#6e7591" }}>
                    {passwordChecks().lowercase ? "✓" : "•"} Lowercase
                  </p>
                  <p style={{ color: passwordChecks().number ? "#fd6116" : "#6e7591" }}>
                    {passwordChecks().number ? "✓" : "•"} Number
                  </p>
                </div>
              </div>
              <div class="field">
                <label class="label" for="confirm-password">
                  CONFIRM PASSWORD
                </label>
                <div class="auth-password-wrap">
                  <input
                    id="confirm-password"
                    type={showConfirmPassword() ? "text" : "password"}
                    class="input"
                    value={confirmPassword()}
                    onInput={(e) => setConfirmPassword(e.currentTarget.value)}
                  />
                  <button
                    class="auth-toggle-visibility"
                    type="button"
                    onClick={() => setShowConfirmPassword((prev) => !prev)}
                    aria-label={showConfirmPassword() ? "Hide password" : "Show password"}
                  >
                    <PasswordVisibilityIcon visible={showConfirmPassword()} />
                  </button>
                </div>
                <p
                  class="validation-note"
                  style={{
                    color: confirmPassword() && passwordChecks().match ? "#fd6116" : "#6e7591",
                  }}
                >
                  {confirmPassword() && passwordChecks().match
                    ? "✓ Passwords match"
                    : "• Passwords do not match"}
                </p>
              </div>
            </div>

            <div class="field">
              <label class="label" for="captcha">
                CAPTCHA
              </label>
              <div class="auth-captcha-row">
                <button
                  type="button"
                  class="auth-captcha-refresh"
                  onClick={refreshCaptcha}
                  aria-label="Refresh captcha"
                >
                  ↻
                </button>
                <CaptchaCanvas code={captchaCode()} class="auth-captcha-canvas" />
                <input
                  id="captcha"
                  class="input"
                  value={captcha()}
                  onInput={(e) => setCaptcha(e.currentTarget.value.toUpperCase())}
                  placeholder="Enter captcha"
                />
              </div>
              <p
                class="validation-note"
                style={{
                  color:
                    captcha() && isValidCaptcha(captcha(), captchaCode()) ? "#fd6116" : "#6e7591",
                }}
              >
                {captcha()
                  ? isValidCaptcha(captcha(), captchaCode())
                    ? "✓ Captcha matched"
                    : "• Captcha does not match"
                  : "• Enter captcha to continue"}
              </p>
            </div>

            <div class="field" style={{ "margin-top": "16px" }}>
              <label class="auth-checkbox-wrapper">
                <input
                  class="auth-checkbox"
                  type="checkbox"
                  checked={termsAccepted()}
                  onChange={(e) => setTermsAccepted(e.currentTarget.checked)}
                />
                <span class="auth-checkbox-label">
                  I agree to the <A href="/terms">Terms and Conditions</A> and{" "}
                  <A href="/privacy">Privacy Policy</A>
                </span>
              </label>
            </div>

            <button
              class="auth-submit-btn"
              type="button"
              disabled={submitting() || !canSubmit()}
              onClick={() => void register()}
            >
              {submitting() ? "Creating Account..." : "Sign Up"}
            </button>

            <div class="auth-footer-row">
              <p class="footer-text">We will send a verification code to your email.</p>
              <p class="note">
                Already have an account? <A href="/login">Sign In</A>
              </p>
            </div>
          </Show>

          <Show when={serverError()}>
            <p class="error">{serverError()}</p>
          </Show>
        </section>
      </div>
    </main>
  );
}