/**
 * Variable Simple Scenario - Advanced Animated Presets
 *
 * These presets feature modern animations for variable product price ranges.
 * CSS-based animations ensure compatibility across all rendering methods.
 *
 * @package OpusPriceBuilder
 */

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

// =====================================================
// Shared Helpers for Variable Simple Presets
// =====================================================

/**
 * Create responsive typography with optional tablet/mobile overrides.
 */
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;
    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 fixed typography (same value for all breakpoints).
 * Used for elements that should maintain consistent size across devices.
 */
// eslint-disable-next-line @typescript-eslint/no-unused-vars
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.
 */
const createSpacing = (
  top: number,
  right: number,
  bottom: number,
  left: number,
  options?: {
    tabletScale?: number;
    mobileScale?: number;
  }
) => {
  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/sub-elements.
 */
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,
});

// =====================================================
// Default Container Settings
// =====================================================

const createDefaultContainer = (overrides: Record<string, unknown> = {}) => ({
  border: createBorder(0, 0, "transparent"),
  padding: createFixedSpacing(0, 0, 0, 0),
  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,
});

/**
 * Variable Simple - Editorial Luxury Preset
 * Editorial luxury style with elegant typography
 */
export const variableSimpleEditorialLuxuryPreset: PresetDefinition = {
  id: "variable-simple-editorial-luxury",
  name: "Editorial Luxury",
  description: "Editorial luxury style with elegant typography",
  scenario: "variable_simple",
  preview: "variable-simple-editorial-luxury",
  isAdvanced: false,
  customCode: { css: true },
  containerSettings: createDefaultContainer({
    margin: createSpacing(0, 0, 0, 0),
    }),
  elements: [
    {
      type: "text",
      name: "Text",
      position: { x: 101, y: 128 },
      text: "from",
      color: "#64748b",
      typography: createTypography(18, 400, 0, "Inter", { fontStyle: "italic" }),
    },
    {
      type: "variablePriceRange",
      name: "Price Range",
      position: { x: 149, y: 112 },
      color: "#000000",
      displayMode: "range",
      separator: " — ",
      prefixText: "From",
      showCurrency: true,
      typography: createTypography(34, 400, 0, "Inter"),
      separatorTypography: createPartialTypography(34, 400),
      // minPriceTypography/maxPriceTypography: undefined = inherit from main typography
      minDecimal: {
        show: false,
        showCurrency: true,
        separator: "point",
        typography: {},
        position: "superscript",
      },
      maxDecimal: {
        show: false,
        showCurrency: true,
        separator: "point",
        typography: {},
        position: "superscript",
      },
      showOriginalRange: false,
    },
  ],
};

// =====================================================
// PRESET 1: Boutique (Minimalist & Luxury)
// =====================================================

/**
 * Boutique Preset
 *
 * Features:
 * - Elegant serif typography (Playfair Display)
 * - Italic "from" label positioned diagonally
 * - Underlined decimals with gold accent
 * - Luxury minimalist aesthetic
 */
export const variableSimpleBoutiquePreset: PresetDefinition = {
  id: "variable-simple-boutique",
  name: "Boutique",
  description: "Luxury minimalist style with italic from label",
  scenario: "variable_simple",
  preview: "variable-simple-boutique",
  isAdvanced: true,
  customCode: { css: true },
  containerSettings: createDefaultContainer({
    margin: createSpacing(20, 0, 0, 0),
    }),
  elements: [
    {
      type: "variablePriceRange",
      name: "Price Range",
      position: { x: 100, y: 100 },
      color: "#1e293b",
      displayMode: "from",
      separator: " – ",
      prefixText: "from",
      showCurrency: true,
      typography: createTypography(72, 400, -1, "Playfair Display"),
      separatorTypography: createPartialTypography(24, 400, "Playfair Display", "normal"),
      minDecimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: {
          fontFamily: "Playfair Display",
        },
        position: "superscript",
      },
      maxDecimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: {},
        position: "superscript",
      },
      showOriginalRange: false,
    },
  ],
};

// =====================================================
// PRESET 2: Cyberpunk (Tech Scanner Effect)
// =====================================================

/**
 * Cyberpunk Preset
 *
 * Features:
 * - Dark slate background with grid pattern
 * - Monospace tech font (JetBrains Mono)
 * - Animated scanner light effect
 * - Cyan glow and neon styling
 */
export const variableSimpleCyberpunkPreset: PresetDefinition = {
  id: "variable-simple-cyberpunk",
  name: "Cyberpunk",
  description: "Tech-inspired with animated scanner effect",
  scenario: "variable_simple",
  preview: "variable-simple-cyberpunk",
  fullPreview: "variable-simple-cyberpunk-full",
  isAdvanced: true,
  customCode: { css: true },
  containerSettings: createDefaultContainer({
    backgroundColor: "#020617",
    padding: createSpacing(28, 48, 28, 48),
    border: createBorder(1, 0, "#1e293b"),
    }),
  elements: [
    {
      type: "variablePriceRange",
      name: "Price Range",
      position: { x: 100, y: 100 },
      color: "#22d3ee",
      displayMode: "range",
      separator: " – ",
      prefixText: "",
      showCurrency: true,
      typography: createTypography(60, 700, -1, "JetBrains Mono"),
      separatorTypography: createPartialTypography(24, 400, "JetBrains Mono"),
      minDecimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: {},
        position: "superscript",
      },
      maxDecimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: {},
        position: "superscript",
      },
      showOriginalRange: false,
    },
  ],
};

// =====================================================
// PRESET 3: Soft UI (Neumorphic)
// =====================================================

/**
 * Soft UI Preset
 *
 * Features:
 * - Neumorphic card with soft shadows
 * - Subtle hover lift animation
 * - "Up to" badge with indigo accent
 * - Large watermark currency symbol
 */
export const variableSimpleSoftUIPreset: PresetDefinition = {
  id: "variable-simple-soft-ui",
  name: "Soft UI",
  description: "Neumorphic design with soft shadows and hover effects",
  scenario: "variable_simple",
  preview: "variable-simple-soft-ui",
  isAdvanced: true,
  customCode: { css: true },
  containerSettings: createDefaultContainer({
    padding: createSpacing(0, 0, 0, 0),
    }),
  elements: [
    {
      type: "variablePriceRange",
      name: "Price Range",
      position: { x: 100, y: 100 },
      color: "#374151",
      displayMode: "up-to",
      separator: " – ",
      prefixText: "Up to",
      showCurrency: true,
      typography: createTypography(48, 600, -1, "Inter"),
      separatorTypography: createPartialTypography(20, 400),
      padding: createSpacing(24, 24, 24, 24),
      backgroundColor: "#e5e7eb",
      border: createBorder(0, 24, "transparent"),
      minDecimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: {},
        position: "superscript",
      },
      maxDecimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: {},
        position: "superscript",
      },
      showOriginalRange: false,
    },
  ],
};

// =====================================================
// PRESET 4: Flash Sale (Custom HTML with Jiggle)
// =====================================================

/**
 * Flash Sale Preset
 *
 * Features:
 * - Bold yellow sticker with black shadow
 * - Periodic jiggle animation
 * - Circle decimal badge
 * - "FROM" label with custom HTML
 * - Uses customHtml with {{min_price}} and {{max_price}} placeholders
 */
export const variableSimpleFlashSalePreset: PresetDefinition = {
  id: "variable-simple-flash-sale",
  name: "Flash Sale",
  description: "Bold retail sticker with jiggle animation",
  scenario: "variable_simple",
  preview: "variable-simple-flash-sale",
  fullPreview: "variable-simple-flash-sale-full",
  isAdvanced: true,
  customCode: { css: true, html: true },
  containerSettings: createDefaultContainer({
    backgroundColor: "#facc15",
    padding: createSpacing(24, 24, 24, 24),
    // NOTE: Use <span> elements only (not <div>) since pbo-price-container is a span.
    // The exporter will auto-convert any <div> to <span> for HTML validity.
    }),
  elements: [
    {
      type: "variablePriceRange",
      name: "Price Range",
      position: { x: 100, y: 100 },
      color: "#000000",
      displayMode: "from",
      separator: " – ",
      prefixText: "FROM",
      showCurrency: true,
      typography: createTypography(72, 900, -2, "Archivo Black"),
      separatorTypography: createPartialTypography(24, 400, "Archivo Black"),
      minDecimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: {
          fontFamily: "Archivo Black",
        },
        position: "superscript",
      },
      maxDecimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: {},
        position: "superscript",
      },
      showOriginalRange: false,
    },
    {
      type: "text",
      name: "Text",
      position: { x: 278, y: 164 },
      text: "BEST VALUE",
      color: "#000000",
      typography: createTypography(10, 400, 0, "Archivo Black"),
    },
  ],
};

// =====================================================
// PRESET 5: Brutalist (Custom HTML with Marquee)
// =====================================================

/**
 * Brutalist Preset
 *
 * Features:
 * - Black background with stark typography
 * - Overlapping decimal in lime green
 * - Animated marquee ticker tape
 * - Mix-blend-mode for visual interest
 * - Uses customHtml with {{min_price}} and {{max_price}} placeholders
 */
export const variableSimpleBrutalistPreset: PresetDefinition = {
  id: "variable-simple-brutalist",
  name: "Brutalist",
  description: "Stark typography with marquee ticker and overlap effects",
  scenario: "variable_simple",
  preview: "variable-simple-brutalist",
  fullPreview: "variable-simple-brutalist-full",
  isAdvanced: true,
  customCode: { css: true, html: true },
  containerSettings: createDefaultContainer({
    backgroundColor: "#000000",
    padding: createSpacing(48, 48, 48, 48),
    border: createBorder(1, 0, "#1e293b"),
    // NOTE: Use <span> elements only (not <div>) since pbo-price-container is a span.
    // The exporter will auto-convert any <div> to <span> for HTML validity.
    }),
  elements: [
    {
      type: "variablePriceRange",
      name: "Price Range",
      position: { x: 100, y: 100 },
      color: "#ffffff",
      displayMode: "range",
      separator: " – ",
      prefixText: "",
      showCurrency: true,
      typography: createTypography(112, 900, -2, "Archivo Black"),
      separatorTypography: createPartialTypography(48, 400, "Archivo Black"),
      minDecimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: {
          fontFamily: "Archivo Black",
        },
        position: "superscript",
      },
      maxDecimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: {},
        position: "superscript",
      },
      showOriginalRange: false,
    },
    {
      type: "text",
      name: "Text",
      position: { x: 358, y: 226 },
      text: "Only 2 items left   ///   Free Shipping Worldwide",
      color: "#84cc16",
      backgroundColor: "rgba(255, 255, 255, 0.05)",
      typography: createTypography(14, 500, 0, "JetBrains Mono", { textTransform: "uppercase" }),
      padding: createSpacing(8, 12, 8, 12),
    },
  ],
};

// =====================================================
// Export and Registration
// =====================================================

export const variableSimpleAdvancedPresets: PresetDefinition[] = [
  variableSimpleEditorialLuxuryPreset,
  variableSimpleBoutiquePreset,
  variableSimpleCyberpunkPreset,
  variableSimpleSoftUIPreset,
  variableSimpleFlashSalePreset,
  variableSimpleBrutalistPreset,
];

export function registerAdvancedVariableSimplePresets(): void {
  variableSimpleAdvancedPresets.forEach((preset) => {
    registerPreset(preset);
  });
}

registerAdvancedVariableSimplePresets();
