import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
import Hero from '@/components/Hero/Hero';
import ReformaSlider from '@/components/ReformaSlider/ReformaSlider';
import Features from '@/components/Features/Features';
import QuienesSomos from '@/components/funnel/QuienesSomos';
import TestimoniosCliente from '@/components/funnel/TestimoniosCliente';
import GaleriaTrabajos from '@/components/funnel/GaleriaTrabajos';
import Footer from '@/components/Footer/Footer';
import TenantBrand from '@/components/funnel/TenantBrand';
import { getTenantBySlug, getPublishedTestimonios, getGaleria } from '@/lib/funnel/public-queries';
import { resolveTheme, themeStyle } from '@/lib/funnel/themes';

export const dynamic = 'force-dynamic';

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const tenant = await getTenantBySlug(slug);
  if (!tenant) return { title: 'Reforma no encontrada' };
  return {
    title: tenant.seoTitle ?? `${tenant.nombreEmpresa} · Presupuesto de reforma`,
    description:
      tenant.seoDescription ??
      `Pide tu presupuesto de reforma a ${tenant.nombreEmpresa}. Render IA y presupuesto orientativo en minutos.`,
  };
}

export default async function FunnelPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const tenant = await getTenantBySlug(slug);
  if (!tenant) notFound();

  const [testimonios, galeria] = await Promise.all([
    getPublishedTestimonios(tenant.id),
    getGaleria(tenant.id),
  ]);

  const theme = resolveTheme(tenant.themePreset, tenant.themeColor);

  return (
    <div
      className={theme.heading === 'serif' ? 'theme-serif' : undefined}
      style={themeStyle(tenant.themePreset, tenant.themeColor)}
    >
      <TenantBrand nombreEmpresa={tenant.nombreEmpresa} logoUrl={tenant.logoUrl} />
      <main id="main-content">
        <Hero slug={tenant.slug} />
        <ReformaSlider />
        <Features />
        {tenant.aboutEnabled && tenant.aboutTexto && (
          <QuienesSomos
            nombreEmpresa={tenant.nombreEmpresa}
            fotoUrl={tenant.aboutFotoUrl}
            texto={tenant.aboutTexto}
            aniosExperiencia={tenant.aniosExperiencia}
          />
        )}
        <GaleriaTrabajos fotos={galeria} nombreEmpresa={tenant.nombreEmpresa} />
        {testimonios.length > 0 && <TestimoniosCliente testimonios={testimonios} />}
      </main>
      <Footer />
    </div>
  );
}