import Header from "@/components/Header";
import Hero from "@/components/Hero";
import ProductCategories from "@/components/ProductCategories";
import ProductCarousel from "@/components/ProductCarousel";
import BannerRow from "@/components/BannerRow";
import ConsoleCategories from "@/components/ConsoleCategories";
import AboutDcorya from "@/components/AboutDcorya";
import ContactTeaser from "@/components/ContactTeaser";
import Footer from "@/components/Footer";
import {
  fetchStaticImageSlots,
  overlaySlotImages,
  pickSlot,
  type SlotMediaItem,
} from "@/lib/static-images";
import { fetchStoreSpecials, resolveSpecialCarousel } from "@/lib/specials";

export const revalidate = 60;

const sliderFallbacks: SlotMediaItem[] = [
  { id: "slide-1", image: "/images/slide-1.jpg" },
  { id: "slide-2", image: "/images/slide-2.jpg" },
  { id: "slide-3", image: "/images/slide-3.jpg" },
  { id: "slide-4", image: "/images/slide-4.jpg" },
];

const categoryFallbacks: SlotMediaItem[] = [
  {
    id: "cat-crafts",
    image: "/images/cat-crafts.png",
    href: "#",
    title: "هنرهای دستی",
    titleEn: "ARTS AND CRAFTS",
  },
  {
    id: "cat-decoration",
    image: "/images/cat-decoration.png",
    href: "#",
    title: "دکوری و تزئینی",
    titleEn: "DECORATION",
  },
  {
    id: "cat-kitchen",
    image: "/images/cat-kitchen.png",
    href: "#",
    title: "آشپز خانه",
    titleEn: "KITCHEN",
  },
  {
    id: "cat-wood",
    image: "/images/cat-wood.png",
    href: "#",
    title: "محصولات چوبی",
    titleEn: "WOOD PRODUCTS",
  },
];

const bannerFallbacks: SlotMediaItem[] = [
  { id: "banner-1", image: "/images/banner-1.png", href: "#" },
  {
    id: "banner-2",
    image: "/images/console-cat-4.jpg",
    href: "#",
    title: "کلکسیون میز کنسول",
    titleEn: "NEW COLLECTION",
  },
];

const secondCategoryFallbacks: SlotMediaItem[] = [
  { id: "console-1", image: "/images/console-cat-1.png", href: "#", title: "سه تیکه" },
  { id: "console-2", image: "/images/console-cat-2.png", href: "#", title: "انواع میز پذیرایی" },
  { id: "console-3", image: "/images/console-cat-3.png", href: "#", title: "قلمکاری روی مس" },
  { id: "console-4", image: "/images/console-cat-4.jpg", href: "#", title: "انواع شمعــــدان" },
  { id: "console-5", image: "/images/console-cat-5.png", href: "#", title: "میز کنسول" },
  { id: "console-6", image: "/images/console-cat-6.png", href: "#", title: "میز تی وی" },
];

const aboutFallback: SlotMediaItem[] = [
  { id: "about", image: "/images/product-2.jpg", title: "محصولات چوبی دکوریا" },
];

export default async function Home() {
  const [slots, specials] = await Promise.all([
    fetchStaticImageSlots("home"),
    fetchStoreSpecials(),
  ]);

  const [newCollection, specialSale, handmades] = await Promise.all([
    resolveSpecialCarousel("new-collection", specials),
    resolveSpecialCarousel("special-sale", specials),
    resolveSpecialCarousel("our-handmades", specials),
  ]);

  const slider = overlaySlotImages(pickSlot(slots, "slider"), sliderFallbacks, "slider");
  const categories = overlaySlotImages(pickSlot(slots, "categories"), categoryFallbacks, "categories");
  const banners = overlaySlotImages(
    pickSlot(slots, "two-banner-below-slider"),
    bannerFallbacks,
    "two-banner-below-slider",
  );
  const secondCategories = overlaySlotImages(
    pickSlot(slots, "second-categories"),
    secondCategoryFallbacks,
    "second-categories",
  );
  const about = overlaySlotImages(
    pickSlot(slots, "about-us-image"),
    aboutFallback,
    "about-us-image",
  );

  return (
    <>
      <Header />
      <main>
        <Hero slides={slider.items} aspectRatio={slider.aspectRatio} />
        <ProductCategories items={categories.items} aspectRatio={categories.aspectRatio} />
        <ProductCarousel
          id={newCollection.id}
          eyebrow={newCollection.eyebrow}
          title={newCollection.title}
          products={newCollection.products}
        />
        <BannerRow items={banners.items} aspectRatio={banners.aspectRatio} />
        <ConsoleCategories items={secondCategories.items} aspectRatio={secondCategories.aspectRatio} />
        <ProductCarousel
          id={specialSale.id}
          eyebrow={specialSale.eyebrow}
          title={specialSale.title}
          products={specialSale.products}
        />
        <AboutDcorya image={about.items[0]} aspectRatio={about.aspectRatio} />
        <ProductCarousel
          id={handmades.id}
          eyebrow={handmades.eyebrow}
          title={handmades.title}
          products={handmades.products}
          muted={handmades.muted}
        />
        <ContactTeaser />
      </main>
      <Footer />
    </>
  );
}