import dynamicImport from "next/dynamic";
import { notFound } from "next/navigation";
import FacilitySearch from "@/app/FacilitySearch";
import {
  type FacilityRecord,
  enrichFacilities,
  filterFacilitiesByArea,
  getAvailablePlaceConfigs,
  getPlaceConfigFromSlug,
} from "@/app/facilityData";
import { API_URL } from "@/config/constants";

const PlaceMap = dynamicImport(() => import("@/components/PlaceMap"), {
  ssr: false,
  loading: () => (
    <div className="overflow-hidden rounded-[2rem] border border-[#D7DED0] bg-white p-8 shadow-sm">
      <p className="text-sm text-[#617063]">Laster kartet...</p>
    </div>
  ),
});

export const dynamicParams = true;
export const dynamic = "force-dynamic";

export async function generateStaticParams() {
  return getAvailablePlaceConfigs().map((slug) => ({ slug }));
}

export default async function PlacePage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const place = getPlaceConfigFromSlug(slug);

  if (!place) {
    notFound();
  }

  let facilities: FacilityRecord[] = [];

  try {
    const res = await fetch(`${API_URL}/facilities`, {
      next: { revalidate: 0 },
      cache: "no-store",
    });

    if (!res.ok) {
      throw new Error(`API returnerte status ${res.status}`);
    }

    facilities = await res.json();
  } catch (error) {
    console.error("Kritisk feil ved henting av sted-data:", error);
    facilities = [];
  }

  const safeData = Array.isArray(facilities) ? facilities : [];
  const facilitiesInPlace = filterFacilitiesByArea(enrichFacilities(safeData), place.areaFilter);

  return (
    <main className="site-shell min-h-screen">
      <section className="mx-auto max-w-[1400px] px-4 py-8 sm:px-6 sm:py-10 lg:px-8 lg:py-12">
        <div className="max-w-4xl">
          <p className="mb-3 text-[11px] font-extrabold uppercase tracking-[0.3em] text-[#6FA786]">Steder</p>
          <h1 className="section-title text-4xl text-[#112015] sm:text-5xl lg:text-6xl">{place.title}</h1>
          <p className="mt-4 max-w-3xl text-base leading-8 text-[#617063]">{place.intro}</p>
          <div className="mt-5 flex flex-wrap gap-3">
            <span className="rounded-full bg-white px-4 py-2 text-[11px] font-extrabold uppercase tracking-[0.18em] text-[#112015] shadow-sm">
              {facilitiesInPlace.length} anlegg
            </span>
            <span className="rounded-full bg-[#25312A] px-4 py-2 text-[11px] font-extrabold uppercase tracking-[0.18em] text-white">
              Kart og liste i samme visning
            </span>
          </div>
        </div>

        <div className="mt-8">
          <PlaceMap facilities={facilitiesInPlace} placeLabel={place.label} />
        </div>
      </section>

      <FacilitySearch
        initialFacilities={safeData}
        variant="catalog"
        title={place.title}
        intro={`Filtrer anleggene i ${place.label} videre etter banestatus, antall hull og andre egenskaper.`}
        fixedAreaFilter={place.areaFilter}
        hideTitleBlock
      />
    </main>
  );
}