// src/app/(public)/evento/[evento]/[cuestionario]/page.tsx
import FormularioPage from '@/containers/pages/formulario-page';
import { GetEventoWithCuestionario } from '@/types/evento';
import { fromParam } from '@/utils/slugify';
import type { Metadata } from 'next';

type PageParams = {
  evento: string; // "carrera-de-botargas-123"
  cuestionario: string; // "formulario-inscripcion-456"
};

type Props = {
  params: Promise<PageParams>;
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { evento, cuestionario } = await params; // <- await
  const { id: id_evento } = fromParam(evento);
  const { id: id_cuestionario } = fromParam(cuestionario);

  if (!id_evento || !id_cuestionario) {
    return { title: 'Evento', description: 'Descripción del evento' };
  }

  const res = await fetch(
    `${process.env.NEXT_PUBLIC_API_URL}/evento/${id_evento}/cuestionario/${id_cuestionario}`,
    { next: { revalidate: 60 } }
  );

  if (!res.ok) {
    return { title: 'Evento', description: 'Descripción del evento' };
  }

  const data: GetEventoWithCuestionario = await res.json();
  const title = data?.nombre_evento || 'Evento';
  const description = data?.descripcion_evento || 'Descripción del evento';
  const banner = data?.banner
    ? `${process.env.NEXT_PUBLIC_API_URL}/banners/${data.banner}`
    : undefined;

  return {
    title,
    description,
    openGraph: {
      title,
      description,
      images: banner
        ? [{ url: banner, width: 800, height: 400, alt: title }]
        : undefined,
    },
  };
}

export default async function Page({ params }: Props) {
  const { evento, cuestionario } = await params; // <- await
  const { id: id_evento } = fromParam(evento);
  const { id: id_cuestionario } = fromParam(cuestionario);

  if (!id_evento || !id_cuestionario) {
    // import { notFound } from 'next/navigation';
    // return notFound();
  }

  return (
    <FormularioPage
      id_evento={String(id_evento)}
      id_cuestionario={String(id_cuestionario)}
    />
  );
}
