salar-store/lib/static-images.ts

import { API } from "./site";

export type StaticImage = {
  id: string;
  url?: string | null;
  titleFa?: string | null;
  titleEn?: string | null;
  subtext?: string | null;
  linkUrl?: string | null;
  width?: number | null;
  height?: number | null;
  sortOrder?: number;
};

export type StaticImageWithUrl = StaticImage & { url: string };

export type StaticImageSlot = {
  id: string;
  key: string;
  pageKey?: string;
  kind: "single" | "list";
  label?: string;
  aspectRatio?: string;
  recommendedWidth?: number;
  itemCount?: number | null;
  sortOrder?: number;
  images?: StaticImage[];
};

export type StaticImageCatalogSlot = {
  key: string;
  label: string;
  kind: "single" | "list";
  pageKey: string;
  aspectRatio: string;
  itemCount: number | null;
  recommendedWidth: number;
};

/**
 * Slot keys the dashboard Refresh button imports from
 * GET /meshkee/static-image-slots. Keep aspectRatio + recommendedWidth in
 * sync with the live CSS when a slot's size changes.
 */
export const STATIC_IMAGE_KEYS = {
  slider: "slider",
  twoBannerBelowSlider: "two-banner-below-slider",
  categories: "categories",
  fourBanner: "four-banner",
  twoBannerRow: "two-banner-row",
  brands: "brands",
  aboutUsImage: "about-us-image",
} as const;

/** Previous catalog keys still returned by the tenant API until dashboard Refresh. */
const SLOT_KEY_ALIASES: Record<string, string[]> = {
  "two-banner-below-slider": ["banners-below-slider"],
  "four-banner": ["four-banner-section"],
  "two-banner-row": ["three-banner-row"],
};

export const STATIC_IMAGE_SLOT_CATALOG: StaticImageCatalogSlot[] = [
  {
    key: STATIC_IMAGE_KEYS.slider,
    label: "Homepage slider",
    kind: "list",
    pageKey: "home",
    aspectRatio: "21:8",
    itemCount: null,
    recommendedWidth: 1200,
  },
  {
    key: STATIC_IMAGE_KEYS.twoBannerBelowSlider,
    label: "Two banners below slider",
    kind: "list",
    pageKey: "home",
    aspectRatio: "13:5",
    itemCount: 2,
    recommendedWidth: 600,
  },
  {
    key: STATIC_IMAGE_KEYS.categories,
    label: "Homepage categories",
    kind: "list",
    pageKey: "home",
    aspectRatio: "1:1",
    itemCount: null,
    recommendedWidth: 160,
  },
  {
    key: STATIC_IMAGE_KEYS.fourBanner,
    label: "Four banner section",
    kind: "list",
    pageKey: "home",
    aspectRatio: "21:9",
    itemCount: 4,
    recommendedWidth: 600,
  },
  {
    key: STATIC_IMAGE_KEYS.twoBannerRow,
    label: "Two banner row",
    kind: "list",
    pageKey: "home",
    aspectRatio: "12:5",
    itemCount: 2,
    recommendedWidth: 600,
  },
  {
    key: STATIC_IMAGE_KEYS.brands,
    label: "Brand logos",
    kind: "list",
    pageKey: "home",
    aspectRatio: "2:1",
    itemCount: null,
    recommendedWidth: 196,
  },
  {
    key: STATIC_IMAGE_KEYS.aboutUsImage,
    label: "About us images",
    kind: "list",
    pageKey: "home",
    aspectRatio: "8:5",
    itemCount: 2,
    recommendedWidth: 720,
  },
];

export function slotAspectStyle(
  ratio?: string | null,
  fallback?: string,
): { aspectRatio: string } | undefined {
  const value = ratio?.trim() || fallback;
  if (!value) return undefined;
  return { aspectRatio: value.replace(":", " / ") };
}

export function slotAlt(image: StaticImage, fallback = ""): string {
  return image.titleFa?.trim() || image.titleEn?.trim() || fallback;
}

export function slotByKey(slots: StaticImageSlot[], key: string): StaticImageSlot | undefined {
  const aliases = SLOT_KEY_ALIASES[key] ?? [];
  return slots.find((slot) => slot.key === key) ?? slots.find((slot) => aliases.includes(slot.key));
}

export function imagesForSlot(slots: StaticImageSlot[], key: string): StaticImageWithUrl[] {
  const slot = slotByKey(slots, key);
  const catalog = STATIC_IMAGE_SLOT_CATALOG.find((item) => item.key === key);
  const raw = slot?.images ?? [];
  const sorted = [...raw].sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
  const result: StaticImageWithUrl[] = [];
  for (const image of sorted) {
    const url = typeof image.url === "string" ? image.url.trim() : "";
    if (!url) continue;
    result.push({ ...image, url });
  }

  const kind = catalog?.kind ?? slot?.kind ?? "list";
  const limit = catalog?.itemCount ?? (kind === "single" ? 1 : null);
  if (kind === "single" || limit === 1) return result.slice(0, 1);
  if (limit && limit > 0) return result.slice(0, limit);
  return result;
}

export function firstImageForSlot(
  slots: StaticImageSlot[],
  key: string,
): StaticImageWithUrl | undefined {
  return imagesForSlot(slots, key)[0];
}

export async function getStaticImageSlots(pageKey?: string): Promise<StaticImageSlot[]> {
  try {
    const url = new URL(`${API.base}/tenants/${API.domain}/website/static-images`);
    if (pageKey) url.searchParams.set("pageKey", pageKey);
    const response = await fetch(url, { next: { revalidate: 120 } });
    if (!response.ok) return [];
    const data = (await response.json()) as { items?: StaticImageSlot[] };
    return data.items ?? [];
  } catch {
    return [];
  }
}

export async function getStaticImageSlot(key: string): Promise<StaticImageSlot | null> {
  const keys = [key, ...(SLOT_KEY_ALIASES[key] ?? [])];
  for (const candidate of keys) {
    try {
      const url = new URL(`${API.base}/tenants/${API.domain}/website/static-images/${candidate}`);
      const response = await fetch(url, { next: { revalidate: 120 } });
      if (!response.ok) continue;
      return (await response.json()) as StaticImageSlot;
    } catch {
      // try next alias
    }
  }
  return null;
}