import type { Metadata } from "next";
import { AboutPreview } from "@/components/home/AboutPreview";
import { BannerRow } from "@/components/home/BannerRow";
import { BlogCarousel } from "@/components/home/BlogCarousel";
import { Branches } from "@/components/home/Branches";
import { CategoryShowcase } from "@/components/home/CategoryShowcase";
import { Hero } from "@/components/home/Hero";
import { ProductCarousel } from "@/components/home/ProductCarousel";
import { Services } from "@/components/home/Services";
import { Stats } from "@/components/home/Stats";
import { WideBanner } from "@/components/home/WideBanner";
import {
  about,
  bannersBelowSlider,
  blogPosts,
  branches,
  consumablesFallback,
  refrigeratorPartsFallback,
  services,
  showcaseCategories,
  site,
  slides,
  threeBannerRow,
  twoBannerRow,
  washingMachinePartsFallback,
} from "@/lib/data";
import { fetchBlogs } from "@/lib/blog";
import { fetchSpecialProducts } from "@/lib/store";
import { fetchStaticImageSlots, overlaySlotImages, pickSlot } from "@/lib/static-images";

export const revalidate = 60;

export const metadata: Metadata = {
  title: {
    absolute: `${site.name} | ${site.tagline}`,
  },
  description: site.description,
};

export default async function HomePage() {
  const [slots, consumables, refrigerator, washing, blogs] = await Promise.all([
    fetchStaticImageSlots("home"),
    fetchSpecialProducts("consumeables"),
    fetchSpecialProducts("refrigrator-parts"),
    fetchSpecialProducts("washing-machine-parts"),
    fetchBlogs({ pageSize: 8 }),
  ]);

  const slider = overlaySlotImages(
    pickSlot(slots, "slider"),
    slides.map((slide) => ({
      id: slide.id,
      image: slide.image,
      href: slide.href,
      title: slide.title,
      kicker: slide.kicker,
    })),
    "slider",
  );

  const icons = overlaySlotImages(
    pickSlot(slots, "three-icon-image"),
    services.map((service) => ({
      id: service.id,
      image: "",
      href: service.href,
      title: service.title,
      text: service.text,
    })),
    "three-icon-image",
  );

  const categories = overlaySlotImages(
    pickSlot(slots, "categories"),
    showcaseCategories.map((item) => ({
      id: item.id,
      image: item.image,
      href: item.href,
      title: item.title,
      text: item.text,
    })),
    "categories",
  );

  const aboutImage = overlaySlotImages(
    pickSlot(slots, "about-us-image"),
    [{ id: "about", image: about.image }],
    "about-us-image",
  );

  const fiveBanners = overlaySlotImages(
    pickSlot(slots, "five-banner-section"),
    [...twoBannerRow, ...threeBannerRow].map((banner) => ({
      id: banner.id,
      image: banner.image,
      href: banner.href,
      title: banner.title,
      kicker: banner.kicker,
      text: banner.text,
    })),
    "five-banner-section",
  );

  const twoBanners = overlaySlotImages(
    pickSlot(slots, "two-banner-row"),
    bannersBelowSlider.map((banner) => ({
      id: banner.id,
      image: banner.image,
      href: banner.href,
      title: banner.title,
      kicker: banner.kicker,
      text: banner.text,
    })),
    "two-banner-row",
  );

  const fullRow = overlaySlotImages(
    pickSlot(slots, "full-row-image"),
    [
      {
        id: "wide",
        image: "/images/banners/wide.jpg",
        href: "/contact",
        title: "اگر به دنبال قطعه ی خاصی هستید، با ما تماس بگیرید.",
        kicker: "Contact us",
      },
    ],
    "full-row-image",
  );

  const branchImages = overlaySlotImages(
    pickSlot(slots, "two-branch-image"),
    branches.map((branch) => ({
      id: branch.id,
      image: branch.image,
      href: "/contact",
      title: branch.title,
      text: branch.address,
    })),
    "two-branch-image",
  );

  return (
    <>
      <Hero slides={slider.items} aspectRatio={slider.aspectRatio} />
      <Services items={icons.items} />
      <ProductCarousel
        id="consumables"
        title={consumables.special?.title || "اقلام مصرفی"}
        subtitle="قطعات مصرفی پرفروش برای تعمیرگاه و مصرف‌کننده"
        products={consumables.products.length ? consumables.products : consumablesFallback}
      />
      <CategoryShowcase items={categories.items} aspectRatio={categories.aspectRatio} />
      <ProductCarousel
        id="refrigerator-parts"
        title={refrigerator.special?.title || "قطعات یخچال"}
        subtitle="قطعات یخچال و فریزر"
        products={refrigerator.products.length ? refrigerator.products : refrigeratorPartsFallback}
      />
      <AboutPreview image={aboutImage.items[0]} aspectRatio={aboutImage.aspectRatio} />
      <ProductCarousel
        id="washing-machine-parts"
        title={washing.special?.title || "قطعات ماشین لباسشویی"}
        subtitle="قطعات لباسشویی خانگی و صنعتی"
        products={washing.products.length ? washing.products : washingMachinePartsFallback}
      />
      <BannerRow banners={fiveBanners.items.slice(0, 2)} columns={2} aspectRatio={fiveBanners.aspectRatio} />
      <BannerRow banners={fiveBanners.items.slice(2, 5)} columns={3} aspectRatio={fiveBanners.aspectRatio} />
      <BlogCarousel posts={blogs.items} fallback={blogPosts} />
      <BannerRow banners={twoBanners.items} columns={2} aspectRatio={twoBanners.aspectRatio} />
      <Stats />
      <WideBanner image={fullRow.items[0]} aspectRatio={fullRow.aspectRatio} />
      <Branches images={branchImages.items} aspectRatio={branchImages.aspectRatio} />
    </>
  );
}