import Link from "next/link";
import { TrainingShell } from "@/components/training-shell";
import { requireAppContext } from "@/lib/app-auth";
import { getDemoScenarioById } from "@/lib/demo-content";

type ScenarioPageProps = {
  params: Promise<{
    id: string;
  }>;
};

export default async function ScenarioPage({ params }: ScenarioPageProps) {
  await requireAppContext();
  const { id } = await params;
  const scenario = await getDemoScenarioById(id);

  if (!scenario) {
    return (
      <main className="app-shell flex min-h-screen items-center justify-center px-6 py-16">
        <div className="glass-card max-w-xl rounded-[32px] p-8 text-center">
          <p className="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--accent-red)]">
            Cas pratique introuvable
          </p>
          <h1 className="mt-4 text-4xl font-extrabold tracking-[-0.04em] text-[var(--ink)]">
            Cette simulation n&apos;existe pas dans le jeu de donnees demo.
          </h1>
          <p className="mt-4 text-base leading-8 text-[var(--foreground)]">
            Revenez a l&apos;accueil pour choisir un cas pratique disponible dans
            les fichiers YAML de la demo.
          </p>
          <Link
            href="/"
            className="mt-8 inline-flex rounded-full bg-[var(--primary)] px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-[var(--primary-strong)]"
          >
            Retour a l&apos;accueil
          </Link>
        </div>
      </main>
    );
  }

  return <TrainingShell scenario={scenario} />;
}