import Link from "next/link";
import { Suspense } from "react";
import { prisma } from "@/lib/prisma";
import { money } from "@/lib/fees";
import { buildCityCounts } from "@/lib/pr-municipalities";
import { mergeCityCounts } from "@/lib/merge-city-counts";
import { PuertoRicoPueblosMap } from "@/components/PuertoRicoPueblosMap";
import { Reveal } from "@/components/motion/Reveal";
import { InteractiveCard } from "@/components/motion/InteractiveCard";

export const dynamic = "force-dynamic";

export default async function ExplorarPage({
  searchParams,
}: {
  searchParams: Promise<{ q?: string; city?: string }>;
}) {
  const sp = await searchParams;
  const q = (sp.q || "").trim();
  const city = (sp.city || "").trim();

  const cityFilter = city ? { contains: city } : undefined;

  const [
    contractors,
    listings,
    jobs,
    contractorCities,
    listingCities,
    jobCities,
  ] = await Promise.all([
    prisma.contractorProfile.findMany({
      where: {
        ...(cityFilter ? { city: cityFilter } : {}),
        ...(q
          ? {
              OR: [
                { name: { contains: q } },
                { category: { contains: q } },
                { city: { contains: q } },
                { bio: { contains: q } },
              ],
            }
          : {}),
      },
      take: 12,
      orderBy: { rating: "desc" },
    }),
    prisma.listing.findMany({
      where: {
        status: "active",
        ...(q
          ? {
              OR: [
                { title: { contains: q } },
                { description: { contains: q } },
                { category: { contains: q } },
              ],
            }
          : {}),
      },
      take: 12,
      orderBy: { createdAt: "desc" },
    }),
    prisma.job.findMany({
      where: {
        status: "active",
        ...(cityFilter ? { city: cityFilter } : {}),
        ...(q
          ? {
              OR: [
                { title: { contains: q } },
                { company: { contains: q } },
                { description: { contains: q } },
              ],
            }
          : {}),
      },
      take: 12,
      orderBy: { createdAt: "desc" },
    }),
    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 counts = mergeCityCounts(
    buildCityCounts(contractorCities.map((c) => c.city)),
    buildCityCounts(listingCities.map((l) => l.city)),
    buildCityCounts(jobCities.map((j) => j.city))
  );

  const hasFilters = !!(q || city);
  const totalResults = contractors.length + listings.length + jobs.length;

  return (
    <div>
      <Reveal>
        <h1 className="text-3xl font-semibold">Explorar</h1>
        <p className="mt-1 text-white/60">
          Mapa interactivo, busqueda unificada y resultados por pueblo
        </p>
      </Reveal>

      <Reveal className="mt-8" delay={0.05}>
        <Suspense
          fallback={
            <div className="pr-pueblos-map__canvas grid place-items-center text-sm text-white/45">
              Cargando mapa…
            </div>
          }
        >
          <PuertoRicoPueblosMap
            counts={counts}
            label="Toca un municipio para filtrar"
            pathname="/explorar"
          />
        </Suspense>
      </Reveal>

      <Reveal className="mt-8" delay={0.08}>
        <form className="flex flex-wrap gap-2">
          <input
            className="input max-w-lg flex-1"
            name="q"
            placeholder="Ej. plomeria, iPhone, electricista…"
            defaultValue={q}
          />
          {city ? <input type="hidden" name="city" value={city} /> : null}
          <button className="btn-primary" type="submit">
            Buscar
          </button>
          {hasFilters ? (
            <Link href="/explorar" className="btn-ghost">
              Limpiar filtros
            </Link>
          ) : null}
        </form>
        {city ? (
          <p className="mt-2 text-sm text-[var(--effect)]">
            Filtrando por: <strong>{city}</strong>
          </p>
        ) : null}
      </Reveal>

      {!hasFilters ? (
        <Reveal className="mt-10">
          <div className="landing-explore-hint">
            <p className="text-sm text-white/65">
              Selecciona un pueblo en el mapa o escribe en el buscador para ver
              servicios, clasificados y empleos en esa zona.
            </p>
            <div className="mt-4 flex flex-wrap gap-3">
              <Link href="/servicios" className="btn-ghost">
                Ver servicios
              </Link>
              <Link href="/clasificados" className="btn-ghost">
                Ver clasificados
              </Link>
              <Link href="/empleos" className="btn-ghost">
                Ver empleos
              </Link>
            </div>
          </div>
        </Reveal>
      ) : (
        <div className="mt-10 space-y-10">
          <p className="text-sm text-white/50">
            {totalResults} resultado{totalResults === 1 ? "" : "s"} encontrados
          </p>

          <section>
            <h2 className="text-xl font-semibold">
              Servicios ({contractors.length})
            </h2>
            <div className="mt-3 grid gap-3 sm:grid-cols-2">
              {contractors.length === 0 ? (
                <p className="text-sm text-white/50">Sin contratistas en este filtro.</p>
              ) : (
                contractors.map((c, i) => (
                  <Reveal key={c.id} delay={0.04 * i}>
                    <InteractiveCard href={`/perfil/${c.id}`}>
                      <p className="font-medium">{c.name}</p>
                      <p className="text-sm text-white/60">
                        {c.category} · {c.city}
                      </p>
                      <p className="mt-1 text-sm text-[var(--lime)]">
                        ★ {c.rating.toFixed(1)}
                      </p>
                    </InteractiveCard>
                  </Reveal>
                ))
              )}
            </div>
          </section>

          <section>
            <h2 className="text-xl font-semibold">
              Clasificados ({listings.length})
            </h2>
            <div className="mt-3 grid gap-3 sm:grid-cols-2">
              {listings.length === 0 ? (
                <p className="text-sm text-white/50">Sin clasificados en este filtro.</p>
              ) : (
                listings.map((l, i) => (
                  <Reveal key={l.id} delay={0.04 * i}>
                    <InteractiveCard href={`/clasificados/${l.id}`}>
                      <p className="font-medium">{l.title}</p>
                      <p className="text-sm text-[var(--lime)]">{money(l.currentBid)}</p>
                    </InteractiveCard>
                  </Reveal>
                ))
              )}
            </div>
          </section>

          <section>
            <h2 className="text-xl font-semibold">Empleos ({jobs.length})</h2>
            <div className="mt-3 grid gap-3 sm:grid-cols-2">
              {jobs.length === 0 ? (
                <p className="text-sm text-white/50">Sin empleos en este filtro.</p>
              ) : (
                jobs.map((j, i) => (
                  <Reveal key={j.id} delay={0.04 * i}>
                    <InteractiveCard href={`/empleos/${j.id}`}>
                      <p className="font-medium">{j.title}</p>
                      <p className="text-sm text-white/60">
                        {j.company} · {j.city}
                      </p>
                    </InteractiveCard>
                  </Reveal>
                ))
              )}
            </div>
          </section>
        </div>
      )}
    </div>
  );
}