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

import { QrCodeCard } from '@/components/ui/qr-code-card';
import {
  buildExperiencePath,
  buildProjectPath,
  getPrimaryEntryForScene,
  getProjects,
  getSceneBySlug
} from '@/lib/content';

type ScenePageProps = {
  params: Promise<{ projectSlug: string; sceneSlug: string }>;
};

export async function generateStaticParams() {
  return getProjects().flatMap((project) =>
    project.scenes.map((scene) => ({
      projectSlug: project.slug,
      sceneSlug: scene.slug
    }))
  );
}

export default async function ScenePage({ params }: ScenePageProps) {
  const { projectSlug, sceneSlug } = await params;
  const resolved = getSceneBySlug(projectSlug, sceneSlug);

  if (!resolved) {
    notFound();
  }

  const { project, scene } = resolved;
  const entry = getPrimaryEntryForScene(project, scene.id);

  return (
    <main className="page">
      <nav className="breadcrumbs">
        <Link href={buildProjectPath(project.slug)}>Retour au projet</Link>
      </nav>

      <section className="grid scene-layout">
        <article className="panel scene-detail">
          <p className="eyebrow">Scene</p>
          <h1>{scene.title}</h1>
          <p className="lead">{scene.teaser}</p>
          <p className="copy">
            Contenu AR : <strong>{scene.arContent.kind}</strong>. Instruction de tracking :
            {' '}
            {scene.trackingProfile.instruction}
          </p>
          <div className="button-row">
            {entry ? (
              <Link
                className="button button--primary"
                href={buildExperiencePath(project.slug, entry.slug)}
              >
                Ouvrir l’experience AR
              </Link>
            ) : null}
            <Link className="button button--secondary" href={buildProjectPath(project.slug)}>
              Voir les autres scenes
            </Link>
          </div>
        </article>

        <article className="panel scene-preview">
          <Image
            src={scene.targetPreview}
            alt={`Image cible ${scene.title}`}
            width={1200}
            height={1200}
          />
        </article>
      </section>

      {entry ? (
        <section className="grid one-column">
          <QrCodeCard
            title={`QR ${entry.mode === 'single' ? 'mono-scene' : 'multi-scenes'}`}
            url={`${project.siteUrl}${buildExperiencePath(project.slug, entry.slug)}`}
            caption="URL prete a encoder dans un QR code imprime a cote de la bache."
          />
        </section>
      ) : null}
    </main>
  );
}