import Link from "next/link";
import { Suspense } from "react";
import { getBranding, getSiteContentMap, site } from "@/lib/session";
import { buildCityCounts } from "@/lib/pr-municipalities";
import { mergeCityCounts } from "@/lib/merge-city-counts";
import { CinematicHero } from "@/components/motion/CinematicHero";
import { Reveal } from "@/components/motion/Reveal";
import { LandingFeatures } from "@/components/landing/LandingFeatures";
import { LandingCtaBand } from "@/components/landing/LandingCtaBand";
import { PuertoRicoPueblosMap } from "@/components/PuertoRicoPueblosMap";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

export default async function HomePage() {
  const branding = await getBranding();
  const content = await getSiteContentMap();

  const [contractorCities, listingCities, jobCities] = await Promise.all([
    prisma.contractorProfile.findMany({ select: { city: true } }),
    prisma.listing.findMany({
      where: { status: "active" },
      select: { city: true },
    }),
    prisma.job.findMany({
      where: { status: "active" },
      select: { city: true },
    }),
  ]);

  const exploreCounts = mergeCityCounts(
    buildCityCounts(contractorCities.map((c) => c.city)),
    buildCityCounts(listingCities.map((l) => l.city)),
    buildCityCounts(jobCities.map((j) => j.city))
  );

  const features = [
    {
      href: "/servicios",
      icon: "services" as const,
      title: site(content, "pillar1Title", "Servicios"),
      blurb: "Encuentra contratistas, pide cotizaciones y firma acuerdos.",
      cta: "Ir a servicios",
    },
    {
      href: "/clasificados",
      icon: "classifieds" as const,
      title: site(content, "pillar2Title", "Clasificados"),
      blurb: "Compra, vende o puja por articulos en toda la isla.",
      cta: "Ir a clasificados",
    },
    {
      href: "/empleos",
      icon: "jobs" as const,
      title: site(content, "pillar3Title", "Empleos"),
      blurb: "Publica vacantes o postulate a trabajos locales.",
      cta: "Ir a empleos",
    },
    {
      href: "/explorar",
      icon: "explore" as const,
      title: "Explorar",
      blurb: "Busca por pueblo en el mapa y descubre todo junto.",
      cta: "Abrir explorador",
    },
  ];

  return (
    <div className="landing-page">
      <CinematicHero
        heroImage={branding.heroImage}
        badge={site(content, "heroBadge")}
        brandName={branding.brandName}
        lead={site(
          content,
          "heroLead",
          "Servicios, clasificados y empleos verificados en Puerto Rico."
        )}
        ctaPrimary={site(content, "ctaPrimary", "Ver modulos")}
        ctaPrimaryHref="#modulos"
        ctaSecondary={site(content, "ctaSecondary", "Como funciona")}
        ctaSecondaryHref="/como-funciona"
      />

      <Reveal className="landing-page__section">
        <LandingFeatures
          title={site(
            content,
            "pillarsTitle",
            "Todo lo que necesitas, en un solo lugar"
          )}
          subtitle={site(
            content,
            "pillarsSub",
            "Elige un modulo. Cada tarjeta te lleva a la seccion completa."
          )}
          features={features}
        />
      </Reveal>

      <Reveal className="landing-page__section">
        <div className="landing-map-teaser">
          <div className="landing-map-teaser__head">
            <div>
              <p className="landing-features__kicker">Mapa</p>
              <h2 className="landing-features__title">Busca por municipio</h2>
              <p className="landing-map-teaser__sub">
                Toca un pueblo y filtra resultados en Explorar.
              </p>
            </div>
            <Link href="/explorar" className="btn-ghost shrink-0">
              Ver mas →
            </Link>
          </div>
          <Suspense
            fallback={
              <div className="pr-pueblos-map__canvas grid place-items-center text-sm text-white/45">
                Cargando mapa…
              </div>
            }
          >
            <PuertoRicoPueblosMap
              counts={exploreCounts}
              label="Actividad en la isla"
              pathname="/explorar"
            />
          </Suspense>
        </div>
      </Reveal>

      <Reveal className="landing-page__section landing-page__section--last">
        <LandingCtaBand
          title="Listo para empezar?"
          text="Crea tu cuenta gratis y publica tu primera solicitud en minutos."
          primaryLabel="Crear cuenta"
          primaryHref="/register"
          secondaryLabel="Ya tengo cuenta"
          secondaryHref="/login"
        />
      </Reveal>
    </div>
  );
}