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,
  buildScenePath,
  getPrimaryEntryForScene,
  getProjectBySlug
} from '@/lib/content';

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

export async function generateStaticParams() {
  const { getProjects } = await import('@/lib/content');
  return getProjects().map((project) => ({ projectSlug: project.slug }));
}

export default async function ProjectPage({ params }: ProjectPageProps) {
  const { projectSlug } = await params;
  const project = getProjectBySlug(projectSlug);

  if (!project) {
    notFound();
  }

  return (
    <main className="page">
      <section className="hero panel" style={{ borderColor: project.theme.accentSoft }}>
        <p className="eyebrow">{project.client}</p>
        <h1>{project.title}</h1>
        <p className="lead">{project.intro}</p>
      </section>

      <section className="section-stack">
        <div className="section-heading">
          <div>
            <p className="eyebrow">Scenes</p>
            <h2>Catalogue des scenes</h2>
          </div>
          <p className="copy">
            Base de configuration typée, evolutive vers un back-office ulterieur.
          </p>
        </div>

        <div className="grid two-columns">
          {project.scenes.map((scene) => {
            const primaryEntry = getPrimaryEntryForScene(project, scene.id);
            return (
              <article className="panel card scene-card" key={scene.id}>
                <div className="scene-card__media">
                  <Image
                    src={scene.targetPreview}
                    alt={`Visuel cible ${scene.title}`}
                    width={960}
                    height={960}
                  />
                </div>
                <div className="scene-card__body">
                  <p className="eyebrow">Target #{scene.targetIndex}</p>
                  <h3>{scene.title}</h3>
                  <p className="copy">{scene.teaser}</p>
                  <div className="button-row">
                    <Link
                      className="button button--secondary"
                      href={buildScenePath(project.slug, scene.slug)}
                    >
                      Voir la scene
                    </Link>
                    {primaryEntry ? (
                      <Link
                        className="button button--primary"
                        href={buildExperiencePath(project.slug, primaryEntry.slug)}
                      >
                        Tester l’AR
                      </Link>
                    ) : null}
                  </div>
                </div>
              </article>
            );
          })}
        </div>
      </section>

      <section className="section-stack">
        <div className="section-heading">
          <div>
            <p className="eyebrow">Entrees QR</p>
            <h2>Routes mono-scene et multi-scenes</h2>
          </div>
          <p className="copy">
            Chaque entree peut generer un QR code dedie et pointer vers une URL statique.
          </p>
        </div>

        <div className="grid three-columns">
          {await Promise.all(
            project.entries.map(async (entry) => (
              <QrCodeCard
                key={entry.id}
                title={entry.title}
                url={`${project.siteUrl}${buildExperiencePath(project.slug, entry.slug)}`}
                caption={`${entry.mode === 'single' ? 'QR mono-scene' : 'QR multi-scenes'} · ${entry.sceneIds.length} scene(s) reliee(s).`}
              />
            ))
          )}
        </div>
      </section>
    </main>
  );
}