import { Suspense } from 'react';
import { useParams } from 'react-router-dom';
import { useSeoMeta } from '@unhead/react';
import { CraftProfileForm } from '@/components/CraftProfileForm';
import { getBecomeRole } from '@/lib/becomeRoles';
import { useTranslation } from '@/contexts/language';
import NotFound from '@/pages/NotFound';

/**
 * Single entry point for every "become a <role>" flow (/become/:role).
 *
 * - Craft roles render the shared <CraftProfileForm> from their data config.
 * - Bespoke roles render their own lazy page component.
 * - Unknown roles fall through to the 404 page.
 *
 * This replaces 12 hardcoded routes + 12 component imports in the router.
 */

function PageLoader() {
  return (
    <div className="min-h-screen bg-black flex items-center justify-center">
      <div className="w-8 h-8 border-2 border-[#ff0040] border-t-transparent rounded-full animate-spin" />
    </div>
  );
}

export default function BecomeRolePage() {
  const { role: slug } = useParams<{ role: string }>();
  const role = getBecomeRole(slug);

  if (!role) {
    return <NotFound />;
  }

  if (role.kind === 'craft') {
    return <CraftRole role={role} />;
  }

  const Component = role.component;
  return (
    <Suspense fallback={<PageLoader />}>
      <Component />
    </Suspense>
  );
}

function CraftRole({
  role,
}: {
  role: Extract<ReturnType<typeof getBecomeRole>, { kind: 'craft' }>;
}) {
  const { t } = useTranslation();

  useSeoMeta({
    title: role.seoTitleKey ? t(role.seoTitleKey) : role.seoTitle,
    description: role.seoDescriptionKey ? t(role.seoDescriptionKey) : role.seoDescription,
  });

  return <CraftProfileForm config={role.config} />;
}