import { createServiceClient } from "@/lib/supabase";
import Header from "@/components/Header";
import Hero from "@/components/Hero";
import FamilyGuardPromo from "@/components/FamilyGuardPromo";
import TaglineBanner from "@/components/TaglineBanner";
import StatsBar from "@/components/StatsBar";
import Services from "@/components/Services";
import Technologies from "@/components/Technologies";
import DataSovereignty from "@/components/DataSovereignty";
import PaperlessSection from "@/components/PaperlessSection";
import About from "@/components/About";
import Contact from "@/components/Contact";
import Footer from "@/components/Footer";
import { GalerieAnzeige } from "@/components/GalerieAnzeige";

export const dynamic = "force-dynamic";

export default async function Home() {
  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL ?? "";

  let hero = null,
    badges: { text: string }[] = [],
    ueberUns = null,
    stats: { wert: string; label: string }[] = [],
    galerie: { id: string; storage_path: string; alt_text: string }[] = [],
    kontakt = null,
    oeffnung: { tag: string; von: string; bis: string }[] = [];

  try {
    const db = createServiceClient();
    const [
      heroResult,
      badgesResult,
      ueberUnsResult,
      statsResult,
      galerieResult,
      kontaktResult,
      oeffnungResult,
    ] = await Promise.allSettled([
      db.from("hero_content").select("*").limit(1).single(),
      db.from("hero_badges").select("*").order("reihenfolge"),
      db.from("ueber_uns_content").select("*").limit(1).single(),
      db.from("ueber_uns_stats").select("*").order("reihenfolge"),
      db.from("galerie_bilder").select("*").order("reihenfolge"),
      db.from("kontakt_info").select("*").limit(1).single(),
      db.from("kontakt_oeffnungszeiten").select("*").order("reihenfolge"),
    ]);

    hero = heroResult.status === "fulfilled" ? heroResult.value.data : null;
    badges = badgesResult.status === "fulfilled" ? (badgesResult.value.data ?? []) : [];
    ueberUns = ueberUnsResult.status === "fulfilled" ? ueberUnsResult.value.data : null;
    stats = statsResult.status === "fulfilled" ? (statsResult.value.data ?? []) : [];
    galerie = galerieResult.status === "fulfilled" ? (galerieResult.value.data ?? []) : [];
    kontakt = kontaktResult.status === "fulfilled" ? kontaktResult.value.data : null;
    oeffnung = oeffnungResult.status === "fulfilled" ? (oeffnungResult.value.data ?? []) : [];
  } catch {
    // Supabase nicht konfiguriert — Fallback-Werte greifen
  }

  const galerieBilder = galerie.map((b) => ({
    id: b.id,
    src: `${supabaseUrl}/storage/v1/object/public/galerie-bilder/${b.storage_path}`,
    alt: b.alt_text,
  }));

  return (
    <main className="min-h-screen bg-[#f0f4f8] dark:bg-[#18212f]">
      <Header />
      <Hero
        eyebrowText={hero?.eyebrow_text}
        headline1={hero?.headline1}
        subtext1={hero?.subtext1}
        subtext2={hero?.subtext2}
        cta1Text={hero?.cta1_text}
        cta1Href={hero?.cta1_href}
        cta2Text={hero?.cta2_text}
        cta2Href={hero?.cta2_href}
        bgImagePath={hero?.bg_image_path}
        badges={badges.length > 0 ? badges.map((b) => b.text) : undefined}
      />
      <FamilyGuardPromo />
      <TaglineBanner />
      <StatsBar />
      <Services />
      <TaglineBanner />
      <PaperlessSection />
      <DataSovereignty />
      <TaglineBanner />
      <Technologies />
      <About
        eyebrowText={ueberUns?.eyebrow_text}
        absatz1={ueberUns?.absatz1}
        absatz2={ueberUns?.absatz2}
        stats={stats.length > 0 ? stats : undefined}
      />
      {galerieBilder.length > 0 && (
        <>
          <TaglineBanner />
          <section className="py-16 px-4 sm:px-6 lg:px-8">
            <div className="max-w-7xl mx-auto">
              <GalerieAnzeige bilder={galerieBilder} />
            </div>
          </section>
        </>
      )}
      <TaglineBanner />
      <Contact
        telefon={kontakt?.telefon}
        email={kontakt?.email}
        adresseZeile1={kontakt?.adresse_zeile1}
        adresseZeile2={kontakt?.adresse_zeile2}
        oeffnungszeiten={oeffnung.length > 0 ? oeffnung : undefined}
      />
      <Footer />
    </main>
  );
}