import { useNavigate, useParams } from "@solidjs/router";
import { createEffect } from "solid-js";

/**
 * Catch-all signup route for role-specific URLs.
 *
 * Routes like /signup/developer, /signup/photographer, /signup/tutor, etc.
 * all map to the professional signup form with the role pre-selected.
 *
 * The professional route reads `role` from the query string (?role=DEVELOPER).
 */
const ROLE_ALIASES: Record<string, string> = {
  developer: "DEVELOPER",
  photographer: "PHOTOGRAPHER",
  "makeup-artist": "MAKEUP_ARTIST",
  makeup: "MAKEUP_ARTIST",
  tutor: "TUTOR",
  "video-editor": "VIDEO_EDITOR",
  video: "VIDEO_EDITOR",
  "graphic-designer": "GRAPHIC_DESIGNER",
  graphic: "GRAPHIC_DESIGNER",
  "social-media-manager": "SOCIAL_MEDIA_MANAGER",
  social: "SOCIAL_MEDIA_MANAGER",
  "fitness-trainer": "FITNESS_TRAINER",
  fitness: "FITNESS_TRAINER",
  "catering-services": "CATERING_SERVICES",
  catering: "CATERING_SERVICES",
  "ugc-content-creator": "UGC_CONTENT_CREATOR",
  ugc: "UGC_CONTENT_CREATOR",
};

export default function SignupRoleRoute() {
  const navigate = useNavigate();
  const params = useParams();

  createEffect(() => {
    const slug = (params.role || "").toLowerCase();
    const role = ROLE_ALIASES[slug] || slug.toUpperCase();
    navigate(`/signup/professional?role=${role}`, { replace: true });
  });

  return (
    <div
      style={{
        display: "flex",
        "justify-content": "center",
        "align-items": "center",
        "min-height": "100vh",
        background: "#07051a",
      }}
    >
      <p style={{ color: "#fff" }}>Redirecting...</p>
    </div>
  );
}