/**
 * Sale Scenario - Advanced Animated Presets
 *
 * These presets feature modern animations for sale prices.
 * CSS-based animations ensure compatibility across all rendering methods.
 *
 * @package OpusPriceBuilder
 */

import type { PresetDefinition } from "@/registry/presetRegistry";
import { registerPreset } from "@/registry/presetRegistry";
import { createResponsiveValue, getAssetsImageFolder, type ResponsiveValue } from "@/types";

// =====================================================
// Shared Helpers for Sale Presets
// =====================================================

/**
 * Create responsive typography with optional tablet/mobile overrides.
 * Desktop value is required, tablet defaults to 85% of desktop, mobile to 70%.
 */
const createTypography = (
  fontSize: number,
  fontWeight: number = 600,
  letterSpacing: number = 0,
  fontFamily: string = "Inter",
  options: {
    fontStyle?: "normal" | "italic";
    textTransform?: "none" | "uppercase" | "lowercase" | "capitalize";
    textDecoration?: "none" | "underline" | "line-through";
    lineHeight?: number;
    // Responsive overrides
    tabletFontSize?: number;
    mobileFontSize?: number;
    tabletFontWeight?: number;
    mobileFontWeight?: number;
    tabletLetterSpacing?: number;
    mobileLetterSpacing?: number;
  } = {},
) => ({
  fontFamily,
  fontSize: {
    desktop: fontSize,
    tablet: options.tabletFontSize ?? Math.round(fontSize * 0.85),
    mobile: options.mobileFontSize ?? Math.round(fontSize * 0.7),
  } as ResponsiveValue<number>,
  fontWeight: {
    desktop: fontWeight,
    tablet: options.tabletFontWeight ?? fontWeight,
    mobile: options.mobileFontWeight ?? fontWeight,
  } as ResponsiveValue<number>,
  fontStyle: options.fontStyle ?? ("normal" as const),
  lineHeight: options.lineHeight ?? 1.2,
  letterSpacing: {
    desktop: letterSpacing,
    tablet: options.tabletLetterSpacing ?? letterSpacing,
    mobile: options.mobileLetterSpacing ?? Math.round(letterSpacing * 0.7),
  } as ResponsiveValue<number>,
  textTransform: options.textTransform ?? ("none" as const),
  textDecoration: options.textDecoration ?? ("none" as const),
});

/**
 * Create typography with same value for all breakpoints (no responsive scaling).
 * Use for elements that should maintain consistent size across devices.
 */
const createFixedTypography = (
  fontSize: number,
  fontWeight: number = 600,
  letterSpacing: number = 0,
  fontFamily: string = "Inter",
  options: {
    fontStyle?: "normal" | "italic";
    textTransform?: "none" | "uppercase" | "lowercase" | "capitalize";
    textDecoration?: "none" | "underline" | "line-through";
    lineHeight?: number;
  } = {},
) => ({
  fontFamily,
  fontSize: createResponsiveValue(fontSize),
  fontWeight: createResponsiveValue(fontWeight),
  fontStyle: options.fontStyle ?? ("normal" as const),
  lineHeight: options.lineHeight ?? 1.2,
  letterSpacing: createResponsiveValue(letterSpacing),
  textTransform: options.textTransform ?? ("none" as const),
  textDecoration: options.textDecoration ?? ("none" as const),
});

const createBorder = (
  width: number = 0,
  radius: number = 0,
  color: string = "#000000",
  style: "solid" | "dashed" | "dotted" = "solid",
) => ({
  width: createResponsiveValue(width),
  style,
  color,
  radius,
});

/**
 * Create responsive spacing with optional tablet/mobile overrides.
 */
const createSpacing = (
  top: number,
  right: number,
  bottom: number,
  left: number,
  options?: {
    tabletScale?: number; // Scale factor for tablet (default: 0.75)
    mobileScale?: number; // Scale factor for mobile (default: 0.5)
  },
) => {
  const tabletScale = options?.tabletScale ?? 0.75;
  const mobileScale = options?.mobileScale ?? 0.5;

  return {
    top: {
      desktop: top,
      tablet: Math.round(top * tabletScale),
      mobile: Math.round(top * mobileScale),
    } as ResponsiveValue<number>,
    right: {
      desktop: right,
      tablet: Math.round(right * tabletScale),
      mobile: Math.round(right * mobileScale),
    } as ResponsiveValue<number>,
    bottom: {
      desktop: bottom,
      tablet: Math.round(bottom * tabletScale),
      mobile: Math.round(bottom * mobileScale),
    } as ResponsiveValue<number>,
    left: {
      desktop: left,
      tablet: Math.round(left * tabletScale),
      mobile: Math.round(left * mobileScale),
    } as ResponsiveValue<number>,
  };
};

/**
 * Create fixed spacing (same value for all breakpoints).
 */
const createFixedSpacing = (top: number, right: number, bottom: number, left: number) => ({
  top: createResponsiveValue(top),
  right: createResponsiveValue(right),
  bottom: createResponsiveValue(bottom),
  left: createResponsiveValue(left),
});

/**
 * Create partial typography for decimals with responsive support.
 */
const createPartialTypography = (
  fontSize: number,
  fontWeight: number = 400,
  fontFamily?: string,
  fontStyle: "normal" | "italic" = "normal",
  options?: {
    tabletFontSize?: number;
    mobileFontSize?: number;
  },
) => ({
  fontSize: {
    desktop: fontSize,
    tablet: options?.tabletFontSize ?? Math.round(fontSize * 0.85),
    mobile: options?.mobileFontSize ?? Math.round(fontSize * 0.7),
  } as ResponsiveValue<number>,
  fontWeight: createResponsiveValue(fontWeight),
  ...(fontFamily && { fontFamily }),
  fontStyle,
});

const createDefaultContainer = (overrides: Record<string, unknown> = {}) => ({
  border: createBorder(0, 0, "transparent"),
  padding: createFixedSpacing(16, 24, 16, 24),
  margin: createFixedSpacing(0, 0, 0, 0),
  backgroundColor: "transparent",
  backgroundImage: null,
  backgroundImageId: null,
  backgroundSize: "cover" as const,
  backgroundPosition: "center" as const,
  backgroundRepeat: "no-repeat" as const,
  ...overrides,
});

// =====================================================
// PRESET 1: Classic Red Strikeout with Savings Pill
// =====================================================

/**
 * Classic Sale Preset with animated savings badge
 *
 * Features:
 * - Bold sale price prominent
 * - Strikethrough original price
 * - Animated red "Save $X" pill badge
 */
export const saleClassicRedPreset: PresetDefinition = {
  id: "sale-classic-red",
  name: "Classic Red Strikeout",
  description: "Bold sale price with animated savings badge",
  scenario: "sale",
  preview: "sale-classic-red",
  isAdvanced: false,
  customCode: { css: true },
  containerSettings: createDefaultContainer({
    backgroundColor: "#ffffff",
    padding: createSpacing(0, 0, 0, 0),
    }),
  elements: [
    {
      type: "salePrice",
      name: "Sale Price",
      position: { x: 115, y: 115 },
      color: "#0f172a",
      typography: createTypography(42, 700, -1),
      decimal: {
        show: false,
        showCurrency: true,
        separator: "point",
        typography: createPartialTypography(20, 700),
        position: "inline",
      },
    },
    {
      type: "regularPrice",
      name: "Regular Price",
      position: { x: 210, y: 125 },
      color: "#94a3b8",
      typography: createTypography(22, 500),
      lineThrough: {
        enabled: true,
        direction: "horizontal",
        style: "single",
        color: "#ef4444",
        thickness: 2,
      },
      decimal: {
        show: false,
        showCurrency: true,
        separator: "point",
        typography: createPartialTypography(12, 500),
        position: "inline",
      },
    },
    {
      type: "discountBadge",
      name: "Savings Badge",
      position: { x: 140, y: 175 },
      color: "#dc2626",
      backgroundColor: "#fef2f2",
      format: "custom",
      customFormat: "Save {discountAmount}",
      typography: createTypography(12, 700),
      padding: createSpacing(6, 12, 6, 12),
      border: createBorder(1, 6, "#fecaca"),
      positionType: "relative",
    },
  ],
};

// =====================================================
// PRESET 2: Percentage Circle Badge
// =====================================================

/**
 * Percentage Circle Preset
 *
 * Features:
 * - Original price with arc strikethrough
 * - Bold sale price
 * - Animated circular percentage badge
 */
export const salePercentageCirclePreset: PresetDefinition = {
  id: "sale-percentage-circle",
  name: "Percentage Circle",
  description: "Animated circular discount badge",
  scenario: "sale",
  preview: "sale-percentage-circle",
  isAdvanced: false,
  customCode: { css: true },
  containerSettings: createDefaultContainer({
    backgroundColor: "#ffffff",
    padding: createSpacing(0, 0, 0, 0),
    }),
  elements: [
    {
      type: "regularPrice",
      name: "Regular Price",
      position: { x: 110, y: 115 },
      color: "#94a3b8",
      typography: createTypography(16, 600),
      lineThrough: {
        enabled: true,
        direction: "diagonal-up",
        style: "single",
        color: "#94a3b8",
        thickness: 1,
      },
      decimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: createPartialTypography(12, 600),
        position: "inline",
      },
    },
    {
      type: "salePrice",
      name: "Sale Price",
      position: { x: 110, y: 135 },
      color: "#0f172a",
      typography: createTypography(42, 700, -1),
      decimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: createPartialTypography(20, 700),
        position: "inline",
      },
    },
    {
      type: "discountBadge",
      name: "Percentage Badge",
      position: { x: 260, y: 125 },
      color: "#ffffff",
      backgroundColor: "#0f172a",
      format: "percentage",
      typography: createTypography(11, 700),
      padding: createSpacing(23, 13, 23, 13),
      border: createBorder(0, 50, "transparent"),
    },
  ],
};

// =====================================================
// PRESET 3: Row Badge
// =====================================================

/**
 * Row Badge Preset
 *
 * Features:
 * - Row layout with percentage badge
 */
export const saleRowBadgePreset: PresetDefinition = {
  id: "sale-row-badge",
  name: "Row Badge",
  description: "Row layout with percentage badge",
  scenario: "sale",
  preview: "sale-row-badge",
  isAdvanced: false,
  customCode: { css: true },
  containerSettings: createDefaultContainer({
    backgroundColor: "#ffffff",
    padding: createSpacing(0, 0, 0, 0),
    }),
  elements: [
    {
      type: "regularPrice",
      name: "Regular Price",
      position: { x: 100, y: 100 },
      color: "#999",
      typography: createTypography(22, 600),
      lineThrough: {
        enabled: true,
        direction: "horizontal",
        style: "single",
        color: "#999",
        thickness: 2,
      },
      decimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: createPartialTypography(12, 600),
        position: "inline",
      },
    },
    {
      type: "salePrice",
      name: "Sale Price",
      position: { x: 187, y: 100 },
      color: "#000",
      typography: createTypography(24, 700, -1),
      decimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: createPartialTypography(14, 700),
        position: "inline",
      },
    },

    {
      type: "discountBadge",
      name: "Percentage Badge",
      position: { x: 279, y: 100 },
      positionType: "relative",
      color: "#ffffff",
      backgroundColor: "#db0000",
      format: "percentage",
      typography: createTypography(12, 700),
      padding: createSpacing(5, 7, 5, 7),
      border: createBorder(0, 4, "transparent"),
    },
  ],
};

// =====================================================
// PRESET 4: Double Stack Vertical
// =====================================================

/**
 * Double Stack Vertical Preset
 *
 * Features:
 * - Original price on top with diagonal strike
 * - Bold sale price below
 * - Slide-in animation
 */
export const saleDoubleStackPreset: PresetDefinition = {
  id: "sale-double-stack",
  name: "Double Stack",
  description: "Vertical stacked prices with slide animation",
  scenario: "sale",
  preview: "sale-double-stack",
  isAdvanced: false,
  customCode: { css: true },
  containerSettings: createDefaultContainer({
    padding: createSpacing(0, 0, 0, 0),
    }),
  elements: [
    {
      type: "regularPrice",
      name: "Regular Price",
      position: { x: 160, y: 115 },
      color: "#cbd5e1",
      typography: createTypography(22, 600),
      lineThrough: {
        enabled: true,
        style: "single",
        color: "#ef4444",
        thickness: 2,
        direction: "diagonal-down",
      },
      decimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: createPartialTypography(14, 600),
        position: "inline",
      },
    },
    {
      type: "salePrice",
      name: "Sale Price",
      position: { x: 125, y: 145 },
      color: "#0f172a",
      typography: createTypography(48, 800, -2, "Archivo Black"),
      decimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: createPartialTypography(24, 800, "Archivo Black"),
        position: "inline",
      },
    },
  ],
};

// =====================================================
// PRESET 5: Flash Sale Green
// =====================================================

/**
 * Flash Sale Green Preset
 *
 * Features:
 * - Pulsing "Flash Sale" badge
 * - Green color scheme
 * - Emerald accent colors
 */
export const saleFlashGreenPreset: PresetDefinition = {
  id: "sale-flash-green",
  name: "Flash Sale",
  description: "Pulsing flash sale with count-up animation",
  scenario: "sale",
  preview: "sale-flash-green",
  fullPreview: "sale-flash-green-full",
  isAdvanced: true,
  customCode: { css: true },
  containerSettings: createDefaultContainer({
    backgroundColor: "#ffffff",
    padding: createSpacing(0, 0, 0, 0),
    }),
  elements: [
    {
      type: "text",
      name: "Flash Badge",
      position: { x: 149, y: 112 },
      text: "Flash Sale",
      color: "#047857",
      backgroundColor: "#d1fae5",
      typography: createTypography(14, 700, 0.5, "Inter", {
        textTransform: "uppercase",
      }),
      rotation: -2,
      padding: createSpacing(5, 14, 5, 14),
      border: createBorder(0, 999, "transparent"),
    },
    {
      type: "salePrice",
      name: "Sale Price",
      position: { x: 115, y: 145 },
      color: "#047857",
      typography: createTypography(36, 700, -1),
      decimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: createPartialTypography(18, 700),
        position: "inline",
      },
      animation: {
        type: "scaleIn",
        duration: 1000,
        delay: 0,
        easing: "ease-out",
      },
    },
    {
      type: "regularPrice",
      name: "Regular Price",
      position: { x: 253, y: 155 },
      color: "rgba(6, 78, 59, 0.4)",
      typography: createTypography(16, 600),
      lineThrough: {
        enabled: true,
        direction: "horizontal",
        style: "single",
        color: "#ff0000",
        thickness: 2,
      },
      decimal: {
        show: false,
        showCurrency: true,
        separator: "point",
        typography: createPartialTypography(10, 600),
        position: "inline",
      },
    },
  ],
};

// =====================================================
// PRESET 6: Data Corruption (Cyberpunk)
// =====================================================

/**
 * Cyberpunk Data Corruption Preset
 *
 * Features:
 * - Dark tech background with grid overlay
 * - Glitching/flickering original price
 * - Shimmer gradient text on sale price
 * - Neon cyan accents
 */
export const saleCyberpunkPreset: PresetDefinition = {
  id: "sale-cyberpunk",
  name: "Data Corruption",
  description: "Cyberpunk style with glitch and shimmer effects",
  scenario: "sale",
  preview: "sale-cyberpunk",
  fullPreview: "sale-cyberpunk-full",
  isAdvanced: true,
  customCode: { css: true },
  containerSettings: createDefaultContainer({
    backgroundColor: "#020617",
    padding: createSpacing(48, 48, 48, 48),
    border: createBorder(1, 8, "#1e293b"),
    }),
  elements: [
    {
      type: "regularPrice",
      name: "Regular Price",
      position: { x: 140, y: 110 },
      color: "#64748b",
      typography: createTypography(28, 400, 0, "JetBrains Mono"),
      decimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: createPartialTypography(18, 400, "JetBrains Mono"),
        position: "inline",
      },
    },
    {
      type: "currencySymbol",
      name: "Currency",
      position: { x: 115, y: 140 },
      color: "#22d3ee",
      positionType: "relative",
      opacity: 0.8,
      typography: createTypography(24, 700, 0, "JetBrains Mono"),
    },
    {
      type: "salePrice",
      name: "Sale Price",
      position: { x: 140, y: 145 },
      color: "#06b6d4",
      typography: createTypography(72, 700, -2, "JetBrains Mono"),
      decimal: {
        show: true,
        showCurrency: false,
        separator: "point",
        typography: createPartialTypography(24, 400, "JetBrains Mono"),
        position: "baseline",
      },
    },
    {
      type: "text",
      name: "Badge",
      position: { x: 145, y: 225 },
      text: "Only today",
      color: "#22d3ee",
      backgroundColor: "rgba(8, 145, 178, 0.1)",
      typography: createTypography(10, 500, 2, "JetBrains Mono", {
        textTransform: "uppercase",
      }),
      padding: createSpacing(4, 10, 4, 10),
      border: createBorder(1, 0, "rgba(6, 182, 212, 0.3)"),
    },
  ],
};

// =====================================================
// PRESET 7: Soft Tactile (Neumorphic)
// =====================================================

/**
 * Neumorphic Soft UI Preset
 *
 * Features:
 * - Soft extruded container with shadows
 * - Sunken original price pill
 * - Count-up animation on sale price
 * - Tactile/pressable appearance
 */
export const saleNeumorphicPreset: PresetDefinition = {
  id: "sale-neumorphic",
  name: "Soft Tactile",
  description: "Neumorphic soft UI with counting animation",
  scenario: "sale",
  preview: "sale-neumorphic",
  fullPreview: "sale-neumorphic-full",
  isAdvanced: true,
  customCode: { css: true, html: true },
  containerSettings: createDefaultContainer({
    backgroundColor: "#e2e8f0",
    padding: createSpacing(48, 48, 48, 48),
    border: createBorder(0, 24, "transparent"),
    }),
  elements: [
    {
      type: "regularPrice",
      name: "Regular Price",
      position: { x: 160, y: 105 },
      color: "#94a3b8",
      typography: createTypography(14, 500),
      padding: createSpacing(8, 20, 8, 20),
      border: createBorder(0, 32, "transparent"),
      lineThrough: {
        enabled: true,
        direction: "horizontal",
        style: "single",
        color: "rgba(148, 163, 184, 0.5)",
        thickness: 2,
      },
      decimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: createPartialTypography(10, 500),
        position: "inline",
      },
    },
    {
      type: "currencySymbol",
      name: "Currency",
      position: { x: 119, y: 145 },
      color: "#94a3b8",
      typography: createTypography(28, 500),
    },
    {
      type: "salePrice",
      name: "Sale Price",
      position: { x: 140, y: 145 },
      color: "#475569",
      typography: createTypography(80, 600, -2),
      decimal: {
        show: true,
        showCurrency: false,
        separator: "point",
        typography: createPartialTypography(28, 500),
        position: "superscript",
      },
      animation: {
        type: "scaleIn",
        duration: 1500,
        delay: 0,
        easing: "ease-out",
      },
    },
    {
      type: "discountBadge",
      name: "Sale Badge",
      position: { x: 250, y: 205 },
      color: "#ffffff",
      backgroundColor: "#6366f1",
      format: "custom",
      customFormat: "SALE",
      typography: createTypography(10, 700, 1),
      padding: createSpacing(6, 14, 6, 14),
      border: createBorder(0, 150, "transparent"),
      animation: {
        type: "none",
        duration: 0,
        delay: 0,
        easing: "linear",
      },
    },
  ],
};

// =====================================================
// PRESET 8: Mega Deal (Bold Retail)
// =====================================================

/**
 * Bold Retail Mega Deal Preset
 *
 * Features:
 * - Bright yellow background (attention grabbing)
 * - Massive sale price typography
 * - Rotated original price with thick strike
 * - Shake animation on the price block
 * - Circular percentage badge
 */
export const saleMegaDealPreset: PresetDefinition = {
  id: "sale-mega-deal",
  name: "Mega Deal",
  description: "Bold retail style with shake animation",
  scenario: "sale",
  preview: "sale-mega-deal",
  fullPreview: "sale-mega-deal-full",
  isAdvanced: true,
  customCode: { css: true, js: true },
  containerSettings: createDefaultContainer({
    backgroundColor: "#FFD700",
    padding: createSpacing(48, 48, 48, 48),
    border: createBorder(2, 8, "#0f172a"),
    }),
  elements: [
    {
      type: "regularPrice",
      name: "Regular Price",
      position: { x: 110, y: 100 },
      rotation: -18,
      color: "#1e293b",
      typography: createTypography(28, 900, 0, "Archivo Black", {
        tabletFontSize: 22,
        mobileFontSize: 18,
      }),
      positionType: "absolute",
      lineThrough: {
        enabled: true,
        style: "single",
        color: "#0f172a",
        thickness: 6,
        direction: "horizontal",
      },
      decimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: createPartialTypography(16, 900, "Archivo Black", "normal", {
          tabletFontSize: 14,
          mobileFontSize: 12,
        }),
        position: "inline",
      },
    },
    {
      type: "currencySymbol",
      name: "Currency",
      position: { x: 105, y: 145 },
      color: "#0f172a",
      typography: createTypography(40, 900, 0, "Archivo Black", {
        tabletFontSize: 32,
        mobileFontSize: 24,
      }),
    },
    {
      type: "salePrice",
      name: "Sale Price",
      position: { x: 150, y: 135 },
      color: "#0f172a",
      typography: createTypography(120, 900, -4, "Archivo Black", {
        tabletFontSize: 90,
        mobileFontSize: 64,
        tabletLetterSpacing: -3,
        mobileLetterSpacing: -2,
      }),
      decimal: {
        show: true,
        showCurrency: false,
        separator: "none",
        typography: {
          ...createTypography(40, 900, 0, "Archivo Black", {
            textDecoration: "underline",
            tabletFontSize: 32,
            mobileFontSize: 24,
          }),
          textDecoration: "underline" as const,
        },
        position: "baseline",
      },
    },
    {
      type: "discountBadge",
      name: "Percentage Badge",
      position: { x: 290, y: 100 },
      rotation: 20,
      color: "#ffffff",
      backgroundColor: "#0f172a",
      format: "custom",
      customFormat: "-{discount}%\nOFF",
      positionType: "absolute",
      typography: createTypography(15, 900, 0, "Archivo Black", {
        tabletFontSize: 16,
        mobileFontSize: 14,
      }),
      padding: createFixedSpacing(15, 15, 15, 15),
      border: createBorder(4, 40, "#ffffff"),
    },
  ],
};

// =====================================================
// PRESET 9: Raw Contrast (Brutalist)
// =====================================================

/**
 * Brutalist Raw Contrast Preset
 *
 * Features:
 * - Large stroked background price
 * - Solid foreground price with blend mode
 * - Slide-in animation from opposite directions
 * - "FINAL" tag with rotation
 */
export const saleBrutalistPreset: PresetDefinition = {
  id: "sale-brutalist",
  name: "Raw Contrast",
  description: "Brutalist overlapping prices with slide animation",
  scenario: "sale",
  preview: "sale-brutalist",
  isAdvanced: true,
  customCode: { css: true },
  containerSettings: createDefaultContainer({
    backgroundColor: "#ffffff",
    padding: createSpacing(48, 48, 48, 48),
    border: createBorder(1, 8, "#e2e8f0"),
    }),
  elements: [
    {
      type: "regularPrice",
      name: "Background Price",
      position: { x: 105, y: 130 },
      color: "transparent",
      typography: createTypography(160, 900, -6, "Archivo Black"),
      decimal: {
        show: false,
        showCurrency: false,
        separator: "point",
        typography: createPartialTypography(60, 900),
        position: "inline",
      },
    },
    {
      type: "currencySymbol",
      name: "Currency",
      position: { x: 105, y: 155 },
      color: "#0f172a",
      typography: createTypography(36, 900, 0, "Archivo Black"),
    },
    {
      type: "salePrice",
      name: "Sale Price",
      position: { x: 145, y: 140 },
      color: "#0f172a",
      typography: createTypography(100, 900, -4, "Archivo Black"),
      decimal: {
        show: false,
        showCurrency: false,
        separator: "point",
        typography: createPartialTypography(40, 900),
        position: "inline",
      },
    },
    {
      type: "text",
      name: "Final Tag",
      position: { x: 285, y: 155 },
      text: "FINAL",
      color: "#ffffff",
      backgroundColor: "#0f172a",
      typography: createTypography(14, 500, 0, "JetBrains Mono"),
      padding: createSpacing(6, 12, 6, 12),
    },
  ],
};

// =====================================================
// PRESET 10: Data Corruption (Cyberpunk) 2
// =====================================================

/**
 * Cyberpunk Data Corruption Preset
 *
 * Features:
 * - Dark tech background with grid overlay
 * - Glitching/flickering original price
 * - Shimmer gradient text on sale price
 * - Neon cyan accents
 * - Custom Currency SVG icon
 */
export const saleCyberpunkPreset2: PresetDefinition = {
  id: "sale-cyberpunk2",
  name: "Data Corruption (custom currency icon)",
  description: "Cyberpunk style with glitch and shimmer effects and custom currency icon",
  scenario: "sale",
  preview: "sale-cyberpunk2",
  fullPreview: "sale-cyberpunk2-full",
  isAdvanced: true,
  customCode: { css: true },
  containerSettings: createDefaultContainer({
    backgroundColor: "#020617",
    padding: createSpacing(48, 48, 48, 48),
    border: createBorder(1, 8, "#1e293b"),
    }),
  elements: [
    {
      type: "regularPrice",
      name: "Regular Price",
      position: { x: 192, y: 110 },
      color: "#64748b",
      typography: createTypography(28, 400, 0, "JetBrains Mono"),
      decimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: createPartialTypography(18, 400, "JetBrains Mono"),
        position: "inline",
      },
    },
    {
      type: "currencySymbol",
      name: "Currency",
      position: { x: 142, y: 152 },
      color: "#22d3ee",
      positionType: "relative",
      opacity: 0.8,
      useCustomImage: true,
      customImageUrl: getAssetsImageFolder() + "currencies/cyberpunk-dollar.svg",
      typography: createTypography(56, 700, 0, "JetBrains Mono"),
    },
    {
      type: "salePrice",
      name: "Sale Price",
      position: { x: 206, y: 146 },
      color: "#06b6d4",
      typography: createTypography(72, 700, -2, "JetBrains Mono"),
      decimal: {
        show: true,
        showCurrency: false,
        separator: "point",
        typography: createPartialTypography(24, 400, "JetBrains Mono"),
        position: "baseline",
      },
    },
    {
      type: "text",
      name: "Badge",
      position: { x: 198, y: 232 },
      text: "Only today",
      color: "#22d3ee",
      backgroundColor: "rgba(8, 145, 178, 0.1)",
      typography: createTypography(10, 500, 2, "JetBrains Mono", {
        textTransform: "uppercase",
      }),
      padding: createSpacing(4, 10, 4, 10),
      border: createBorder(1, 0, "rgba(6, 182, 212, 0.3)"),
    },
  ],
};

// =====================================================
// Register Advanced Sale Presets
// =====================================================

export function registerAdvancedSalePresets(): void {
  registerPreset(saleClassicRedPreset);
  registerPreset(salePercentageCirclePreset);
  registerPreset(saleFlashGreenPreset);
  registerPreset(saleRowBadgePreset);
  registerPreset(saleDoubleStackPreset);
  registerPreset(saleCyberpunkPreset);
  registerPreset(saleNeumorphicPreset);
  registerPreset(saleMegaDealPreset);
  registerPreset(saleBrutalistPreset);
  registerPreset(saleCyberpunkPreset2);
}

// Export all sale advanced presets
export const saleAdvancedPresets = [
  saleClassicRedPreset,
  salePercentageCirclePreset,
  saleFlashGreenPreset,
  saleRowBadgePreset,
  saleDoubleStackPreset,
  saleCyberpunkPreset,
  saleNeumorphicPreset,
  saleMegaDealPreset,
  saleBrutalistPreset,
  saleCyberpunkPreset2,
];

// Auto-register on import
registerAdvancedSalePresets();
