import Link from 'next/link';
import { notFound } from 'next/navigation';

import { ArExperiencePlayer } from '@/components/ar/ar-experience-player';
import { buildProjectPath, getEntryBySlug, getProjects } from '@/lib/content';

type ExperiencePageProps = {
  params: Promise<{ projectSlug: string; entrySlug: string }>;
};

export async function generateStaticParams() {
  return getProjects().flatMap((project) =>
    project.entries.map((entry) => ({
      projectSlug: project.slug,
      entrySlug: entry.slug
    }))
  );
}

export default async function ExperiencePage({ params }: ExperiencePageProps) {
  const { projectSlug, entrySlug } = await params;
  const payload = getEntryBySlug(projectSlug, entrySlug);

  if (!payload) {
    notFound();
  }

  const { project, entry, scenes } = payload;

  return (
    <main className="experience-page">
      <div className="experience-page__topbar">
        <Link href={buildProjectPath(project.slug)} className="button button--ghost">
          Retour au projet
        </Link>
        <div className="experience-page__meta">
          <span>{entry.title}</span>
          <span>{entry.mode === 'single' ? 'QR mono-scene' : 'QR multi-scenes'}</span>
        </div>
      </div>
      <ArExperiencePlayer project={project} entry={entry} scenes={scenes} />
    </main>
  );
}