export const shopAssets = {
  arrowIcon: "/assets/images/icon/arrow.svg",
  arrowAlt: "Arrow Icon",
  ratingIcon: "/assets/images/icon/rating2.svg",
  ratingAlt: "Rating star",
  searchIcon: "/assets/images/icon/search.svg",
  searchAlt: "Search submit button icon",
  pagiPrev: "/assets/images/icon/pagi1-1.svg",
  pagiPrevAlt: "Previous page navigation arrow",
  pagiNext: "/assets/images/icon/pagi1-2.svg",
  pagiNextAlt: "Next page navigation arrow",
} as const;

export type ShopProduct = {
  id: string;
  title: string;
  href: string;
  imageSrc: string;
  imageAlt: string;
  imageWidth: number;
  imageHeight: number;
  onSale: boolean;
  rating: number;
  compareAtPrice?: string;
  price: string;
  /** Final sale price in USD for filters, cart, and sorting. */
  unitPrice: number;
  /** Matches `ShopCategory.id` values for sidebar filters. */
  categoryIds: string[];
  /** Matches `ShopTag.id` values for sidebar filters. */
  tagIds: string[];
  /** Optional product-detail gallery; if absent, detail page falls back to duplicated main image. */
  detailGallery?: {
    thumbSrc: string;
    largeSrc: string;
    alt: string;
  }[];
  aosDelay: number;
};

export const shopProducts: ShopProduct[] = [
  {
    id: "winter-black-sneakers",
    title: "Winter Black Sneakers",
    href: "#",
    imageSrc: "/assets/images/shop/shop1-1.png",
    imageAlt: "Winter Black Sneakers",
    imageWidth: 480,
    imageHeight: 600,
    onSale: true,
    rating: 5,
    compareAtPrice: "$79.00",
    price: "$59.00",
    unitPrice: 59,
    categoryIds: ["winter-shoes", "men-fashion"],
    tagIds: ["fashion", "shopping"],
    aosDelay: 200,
  },
  {
    id: "stylish-golden-watch",
    title: "Stylish golden watch",
    href: "#",
    imageSrc: "/assets/images/event/product2-1.webp",
    imageAlt: "Stylish golden watch",
    imageWidth: 480,
    imageHeight: 600,
    onSale: true,
    rating: 5,
    compareAtPrice: "$69.00",
    price: "$39.00",
    unitPrice: 39,
    categoryIds: ["smart-watch"],
    tagIds: ["watch", "smart", "shopping"],
    aosDelay: 300,
  },
  {
    id: "leather-women-handbag",
    title: "Leather women handbag",
    href: "#",
    imageSrc: "/assets/images/event/bag1-3.webp",
    imageAlt: "Leather women handbag",
    imageWidth: 480,
    imageHeight: 600,
    onSale: true,
    rating: 5,
    compareAtPrice: "$89.00",
    price: "$49.00",
    unitPrice: 49,
    categoryIds: ["leather-bag"],
    tagIds: ["leather", "fashion", "shopping"],
    aosDelay: 400,
  },
  {
    id: "yellow-woman-bag",
    title: "Yellow woman bag",
    href: "#",
    imageSrc: "/assets/images/event/product2-2.webp",
    imageAlt: "Yellow woman bag",
    imageWidth: 480,
    imageHeight: 600,
    onSale: true,
    rating: 5,
    compareAtPrice: "$119.00",
    price: "$89.00",
    unitPrice: 89,
    categoryIds: ["leather-bag"],
    tagIds: ["fashion", "shopping"],
    aosDelay: 200,
  },
  {
    id: "antique-wall-clock",
    title: "Antique wall clock",
    href: "#",
    imageSrc: "/assets/images/shop/shop1-5.png",
    imageAlt: "Antique wall clock",
    imageWidth: 480,
    imageHeight: 600,
    onSale: true,
    rating: 5,
    compareAtPrice: "$79.00",
    price: "$69.00",
    unitPrice: 69,
    categoryIds: ["steel-wall-clock"],
    tagIds: ["furniture", "shopping"],
    aosDelay: 300,
  },
  {
    id: "cinturon-fondo-blanco",
    title: "Cinturón con fondo Blanco",
    href: "#",
    imageSrc: "/assets/images/shop/shop1-6.png",
    imageAlt: "Cinturón con fondo Blanco",
    imageWidth: 480,
    imageHeight: 600,
    onSale: true,
    rating: 5,
    compareAtPrice: "$99.00",
    price: "$59.00",
    unitPrice: 59,
    categoryIds: ["men-fashion"],
    tagIds: ["fashion", "leather"],
    aosDelay: 400,
  },
  {
    id: "baby-shoe",
    title: "Close-up of baby shoe",
    href: "#",
    imageSrc: "/assets/images/shop/shop1-7.png",
    imageAlt: "Close-up of baby shoe",
    imageWidth: 480,
    imageHeight: 600,
    onSale: true,
    rating: 5,
    price: "$89.00",
    unitPrice: 89,
    categoryIds: ["winter-shoes", "uncategorized"],
    tagIds: ["fashion", "shopping"],
    aosDelay: 300,
  },
  {
    id: "headphones-djs",
    title: "Headphones for DJs",
    href: "#",
    imageSrc: "/assets/images/shop/shop1-8.png",
    imageAlt: "Headphones for DJs",
    imageWidth: 480,
    imageHeight: 600,
    onSale: true,
    rating: 5,
    compareAtPrice: "$90.00",
    price: "$79.00",
    unitPrice: 79,
    categoryIds: ["headphone"],
    tagIds: ["smart", "shopping"],
    aosDelay: 400,
  },
  {
    id: "business-school-bag",
    title: "Business school lather bag",
    href: "#",
    imageSrc: "/assets/images/shop/shop1-9.png",
    imageAlt: "Business school lather bag",
    imageWidth: 480,
    imageHeight: 600,
    onSale: true,
    rating: 5,
    compareAtPrice: "$89.00",
    price: "$69.00",
    unitPrice: 69,
    categoryIds: ["leather-bag", "men-fashion"],
    tagIds: ["leather", "shopping"],
    detailGallery: [
      {
        thumbSrc: "/assets/images/event/bag1-1.webp",
        largeSrc: "/assets/images/event/bag1-1.webp",
        alt: "Business school lather bag - front",
      },
      {
        thumbSrc: "/assets/images/event/bag1-2.webp",
        largeSrc: "/assets/images/event/bag1-2.webp",
        alt: "Business school lather bag - angle",
      },
      {
        thumbSrc: "/assets/images/event/bag1-3.webp",
        largeSrc: "/assets/images/event/bag1-3.webp",
        alt: "Business school lather bag - detail",
      },
      {
        thumbSrc: "/assets/images/event/bag1-4.webp",
        largeSrc: "/assets/images/event/bag1-4.webp",
        alt: "Business school lather bag - lifestyle",
      },
    ],
    aosDelay: 200,
  },
];

export type ShopSortOption = {
  value: string;
  label: string;
};

export const shopSortOptions: ShopSortOption[] = [
  { value: "", label: "Default sorting" },
  { value: "price-asc", label: "Sort by price: low to high" },
  { value: "price-desc", label: "Sort by price: high to low" },
  { value: "name-asc", label: "Sort by name: A–Z" },
  { value: "name-desc", label: "Sort by name: Z–A" },
];

export type ShopCategory = {
  id: string;
  label: string;
  count: number;
  href: string;
};

export const shopCategories: ShopCategory[] = [
  { id: "headphone", label: "Headphone", count: 2, href: "#" },
  { id: "leather-bag", label: "Leather Bag", count: 3, href: "#" },
  { id: "men-fashion", label: "Men Fashion", count: 4, href: "#" },
  { id: "smart-watch", label: "Smart Watch", count: 2, href: "#" },
  { id: "steel-wall-clock", label: "Steel Wall Clock", count: 2, href: "#" },
  { id: "uncategorized", label: "Uncategorized", count: 1, href: "#" },
  { id: "winter-shoes", label: "Winter Shoes", count: 2, href: "#" },
];

export type ShopTag = {
  id: string;
  label: string;
  href: string;
};

export const shopTags: ShopTag[] = [
  { id: "fashion", label: "Fashion", href: "#" },
  { id: "furniture", label: "Furniture", href: "#" },
  { id: "leather", label: "Leather", href: "#" },
  { id: "shopping", label: "Shopping", href: "#" },
  { id: "smart", label: "Smart", href: "#" },
  { id: "watch", label: "Watch", href: "#" },
];

export type ShopTopRatedProduct = Pick<
  ShopProduct,
  | "id"
  | "title"
  | "href"
  | "imageSrc"
  | "imageAlt"
  | "rating"
  | "compareAtPrice"
  | "price"
> & {
  imageWidth: number;
  imageHeight: number;
};

const topRatedProductIds = [
  "stylish-golden-watch",
  "yellow-woman-bag",
  "leather-women-handbag",
] as const;

export const shopTopRatedProducts: ShopTopRatedProduct[] = topRatedProductIds
  .map((id) => shopProducts.find((product) => product.id === id))
  .filter((product): product is ShopProduct => Boolean(product))
  .map((product) => ({
    id: product.id,
    title: product.title,
    href: product.href,
    imageSrc: product.imageSrc,
    imageAlt: product.imageAlt,
    imageWidth: 120,
    imageHeight: 120,
    rating: product.rating,
    compareAtPrice: product.compareAtPrice,
    price: product.price,
  }));

export type ShopPaginationLink =
  | { kind: "prev"; href: string; ariaLabel: string }
  | { kind: "next"; href: string; ariaLabel: string }
  | { kind: "page"; href: string; label: string };

export const shopPagination: ShopPaginationLink[] = [
  { kind: "prev", href: "#", ariaLabel: "Previous" },
  { kind: "page", href: "#", label: "01" },
  { kind: "page", href: "#", label: "02" },
  { kind: "page", href: "#", label: "03" },
  { kind: "next", href: "#", ariaLabel: "Next" },
];

export const shopListMeta = {
  /** Total catalog products (filters narrow the visible subset). */
  totalResults: shopProducts.length,
} as const;

export const shopPriceFilter = {
  title: "Filter by price",
  rangeMin: 30,
  rangeMax: 90,
  minDefault: 30,
  maxDefault: 70,
  displayMin: 40,
  displayMax: 70,
  filterHref: "#",
  filterLabel: "Filter",
} as const;