import type { Metadata } from "next";
import { Suspense } from "react";
import { defaultDesignId, getDesignById, designRegistry } from "@/designs";

interface HomeProps {
  searchParams?: Promise<{
    design?: string;
  }>;
}

export const metadata: Metadata = {
  title: "Gizmedic | Software clinico seguro y escalable",
};

export default async function Home({ searchParams }: HomeProps) {
  const resolvedSearchParams = await searchParams;
  const paramVariant = normalizeId(resolvedSearchParams?.design);
  const envVariant = normalizeId(process.env.NEXT_PUBLIC_DESIGN_VARIANT);
  const designId = paramVariant ?? envVariant ?? defaultDesignId;

  const designEntry = getDesignById(designId) ?? getDesignById(defaultDesignId);

  if (!designEntry) {
    throw new Error("No se encontro ningun diseño disponible.");
  }

  const DesignComponent = designEntry.component;

  return (
    <Suspense fallback={<LoadingState />}>
      <DesignComponent />
    </Suspense>
  );
}

function LoadingState() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-slate-950 text-slate-200">
      <p className="text-sm uppercase tracking-[0.38em] text-slate-500">
        Cargando experiencias Gizmedic…
      </p>
    </div>
  );
}

function normalizeId(value?: string | null) {
  return value?.toString().trim().toLowerCase() || undefined;
}

export const availableDesigns = designRegistry.map((design) => ({
  id: design.id,
  name: design.name,
  description: design.description,
}));