import { Hero } from "@/components/home/Hero";
import { FeaturedCategories } from "@/components/home/FeaturedCategories";
import { SiteFeatures } from "@/components/home/SiteFeatures";
import { ProductCarousel } from "@/components/home/ProductCarousel";
import { BannerRow } from "@/components/home/BannerRow";
import { AboutDoctor } from "@/components/home/AboutDoctor";
import { BlogCarousel } from "@/components/home/BlogCarousel";
import { FaqPreview } from "@/components/home/FaqPreview";
import { categories, heroBanners, specialSale, twoBanners, tripleBanners, yeganehProducts } from "@/lib/data";
import { getSlides } from "@/lib/media";
import { fetchStaticImageSlots, overlaySlotImages, pickSlot } from "@/lib/static-images";
import { fetchBlogs } from "@/lib/blog";
import { fetchSpecialProducts } from "@/lib/store";

export const revalidate = 60;

const placeholderSlides = [
  { id: "slide-1", image: "/placeholders/slider-1.svg", href: "#" },
  { id: "slide-2", image: "/placeholders/slider-2.svg", href: "#" },
  { id: "slide-3", image: "/placeholders/slider-3.svg", href: "#" },
];

export default async function HomePage() {
  const [slots, sale, vitamins, bodybuilding, blogs] = await Promise.all([
    fetchStaticImageSlots("home"),
    fetchSpecialProducts("special-sale"),
    fetchSpecialProducts("multi-vitamin"),
    fetchSpecialProducts("body-building-supplement"),
    fetchBlogs({ pageSize: 8 }),
  ]);
  const localSlides = getSlides();

  const slider = overlaySlotImages(
    pickSlot(slots, "slider"),
    localSlides.length ? localSlides : placeholderSlides,
    "slider",
  );
  const belowSlider = overlaySlotImages(
    pickSlot(slots, "two-banner-below-slider"),
    heroBanners.map((banner) => ({ id: banner.id, image: banner.image, href: banner.href })),
    "two-banner-below-slider",
  );
  const categoryItems = overlaySlotImages(
    pickSlot(slots, "categories"),
    categories.map((category) => ({
      id: category.id,
      image: category.image,
      href: category.href,
      title: category.title,
    })),
    "categories",
  );
  const twoBannerRow = overlaySlotImages(
    pickSlot(slots, "two-banner-row"),
    twoBanners.map((banner) => ({ id: banner.id, image: banner.image, href: banner.href })),
    "two-banner-row",
  );
  const threeBannerRow = overlaySlotImages(
    pickSlot(slots, "three-banner-row"),
    tripleBanners.map((banner) => ({ id: banner.id, image: banner.image, href: banner.href })),
    "three-banner-row",
  );
  const aboutImage = overlaySlotImages(
    pickSlot(slots, "about-us-image"),
    [{ id: "about", image: "/placeholders/doctor.svg" }],
    "about-us-image",
  );

  return (
    <>
      <Hero
        slides={slider.items}
        banners={belowSlider.items}
        sliderAspectRatio={slider.aspectRatio}
        bannerAspectRatio={belowSlider.aspectRatio}
      />
      <FeaturedCategories items={categoryItems.items} aspectRatio={categoryItems.aspectRatio} />
      <SiteFeatures />
      <ProductCarousel
        id="special-sale"
        title={sale.special?.title || "فروش ویژه"}
        subtitle="تخفیف‌های منتخب امروز داروخانه"
        products={sale.products.length ? sale.products : specialSale}
        href="/products"
        accent="sale"
      />
      <BannerRow banners={twoBannerRow.items} columns={2} aspectRatio={twoBannerRow.aspectRatio} />
      <ProductCarousel
        id="multi-vitamin"
        title={vitamins.special?.title || "مولتی ویتامین‌ها"}
        subtitle="مکمل‌های ویتامینه منتخب"
        products={vitamins.products.length ? vitamins.products : yeganehProducts}
        href="/products"
      />
      <BannerRow banners={threeBannerRow.items} columns={3} aspectRatio={threeBannerRow.aspectRatio} />
      <ProductCarousel
        id="body-building-supplement"
        title={bodybuilding.special?.title || "مکمل‌های بدنسازی"}
        subtitle="پروتئین، کراتین و مکمل ورزشی"
        products={bodybuilding.products.length ? bodybuilding.products : specialSale}
        href="/products"
      />
      <AboutDoctor image={aboutImage.items[0]} aspectRatio={aboutImage.aspectRatio} />
      <BlogCarousel posts={blogs.items} />
      <FaqPreview />
    </>
  );
}