/**
 * Default Preset Definitions
 *
 * This file contains all the built-in presets for the Price Builder.
 * Developers can easily add new presets by follow the same pattern.
 */

import type { PresetDefinition } from "./presetRegistry";
import { registerPreset } from "./presetRegistry";
import { createResponsiveValue } from "@/types";

// =====================================================
// Helper to create responsive typography for presets
// =====================================================

const createPresetTypography = (fontSize: number, fontWeight: number = 600, letterSpacing: number = 0, fontFamily: string = "Inter") => ({
  fontFamily,
  fontSize: createResponsiveValue(fontSize),
  fontWeight: createResponsiveValue(fontWeight),
  fontStyle: "normal" as const,
  lineHeight: 1.2,
  letterSpacing: createResponsiveValue(letterSpacing),
  textTransform: "none" as const,
  textDecoration: "none" as const,
});

// Helper to override typography values while keeping responsive structure
const withTypography = (
  base: ReturnType<typeof createPresetTypography>,
  overrides: {
    fontSize?: number;
    fontWeight?: number;
    letterSpacing?: number;
    fontFamily?: string;
    textTransform?: "none" | "uppercase" | "lowercase" | "capitalize";
    textDecoration?: "none" | "underline" | "line-through";
  } = {}
) => ({
  ...base,
  ...(overrides.fontSize !== undefined && {
    fontSize: createResponsiveValue(overrides.fontSize),
  }),
  ...(overrides.fontWeight !== undefined && {
    fontWeight: createResponsiveValue(overrides.fontWeight),
  }),
  ...(overrides.letterSpacing !== undefined && {
    letterSpacing: createResponsiveValue(overrides.letterSpacing),
  }),
  ...(overrides.fontFamily !== undefined && { fontFamily: overrides.fontFamily }),
  ...(overrides.textTransform !== undefined && {
    textTransform: overrides.textTransform,
  }),
  ...(overrides.textDecoration !== undefined && {
    textDecoration: overrides.textDecoration,
  }),
});

// Helper to create responsive border for presets
const createPresetBorder = (width: number = 0, radius: number = 0, color: string = "#000000") => ({
  width: createResponsiveValue(width),
  style: "solid" as const,
  color,
  radius,
});

// Helper to create responsive spacing with individual values for presets
const createPresetSpacing = (top: number, right: number, bottom: number, left: number) => ({
  top: createResponsiveValue(top),
  right: createResponsiveValue(right),
  bottom: createResponsiveValue(bottom),
  left: createResponsiveValue(left),
});

// Helper to create partial responsive typography (for decimals, separator, min/max price typography)
// All these use Partial<ResponsiveTypographySettings>
const createPartialTypography = (
  fontSize: number,
  fontWeight: number = 400,
  fontFamily: string = "Inter",
  fontStyle: "normal" | "italic" = "normal"
) => ({
  fontSize: createResponsiveValue(fontSize),
  fontWeight: createResponsiveValue(fontWeight),
  fontFamily,
  fontStyle,
});

// =====================================================
// Default Typography and Styles (responsive)
// =====================================================

const defaultTypography = createPresetTypography(24, 600, 0);

// =====================================================
// SIMPLE PRICE PRESETS
// =====================================================

/**
 * Simple Price - Basic
 * Regular price only, simple layout
 */
export const simpleBasicPreset: PresetDefinition = {
  id: "simple-basic",
  name: "Basic Price",
  description: "Simple price display with currency",
  scenario: "simple",
  preview: "simple-basic",
  elements: [
    {
      type: "regularPrice",
      name: "Regular Price",
      position: { x: 100, y: 100 },
      color: "#1f2937",
      typography: withTypography(defaultTypography, { fontSize: 28 }),
      decimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: createPartialTypography(16),
        position: "superscript",
      },
    },
  ],
};

/**
 * Simple Price - Currency Centered
 * Currency symbol positioned absolutely and centered, regular price without currency
 */
export const simpleCurrencyCenteredPreset: PresetDefinition = {
  id: "simple-currency-centered",
  name: "Centered Currency",
  description: "Currency centered above, price below",
  scenario: "simple",
  preview: "simple-currency-centered",
  elements: [
    {
      type: "currencySymbol",
      name: "Currency",
      position: { x: 127, y: 98 },
      symbolCode: "EUR",
      positionType: "relative",
      color: "#6b7280",
      typography: withTypography(defaultTypography, {
        fontSize: 16,
        fontWeight: 500,
      }),
    },
    {
      type: "regularPrice",
      name: "Regular Price",
      position: { x: 100, y: 120 },
      color: "#1f2937",
      typography: withTypography(defaultTypography, {
        fontSize: 32,
        fontWeight: 700,
      }),
      decimal: {
        show: true,
        showCurrency: false,
        separator: "point",
        typography: createPartialTypography(18),
        position: "superscript",
      },
    },
  ],
};

/**
 * Simple Price - Elegant
 * Stylish price with subtle styling
 */
export const simpleElegantPreset: PresetDefinition = {
  id: "simple-elegant",
  name: "Elegant",
  description: "Elegant price with refined typography",
  scenario: "simple",
  preview: "simple-elegant",
  elements: [
    {
      type: "regularPrice",
      name: "Regular Price",
      position: { x: 100, y: 100 },
      color: "#374151",
      typography: withTypography(createPresetTypography(38, 400, 1, "Georgia, serif"), {}),
      decimal: {
        show: true,
        showCurrency: true,
        separator: "comma",
        typography: createPartialTypography(21),
        position: "baseline",
      },
    },
  ],
};

/**
 * Simple Price - Bold
 * Large bold price display
 */
export const simpleBoldPreset: PresetDefinition = {
  id: "simple-bold",
  name: "Bold",
  description: "Large bold price display",
  scenario: "simple",
  preview: "simple-bold",
  elements: [
    {
      type: "regularPrice",
      name: "Regular Price",
      position: { x: 100, y: 100 },
      color: "#111827",
      typography: withTypography(defaultTypography, {
        fontSize: 36,
        fontWeight: 800,
      }),
      decimal: {
        show: false,
        showCurrency: true,
        separator: "point",
        typography: createPartialTypography(20),
        position: "superscript",
      },
    },
  ],
};

// =====================================================
// VARIABLE SIMPLE PRESETS
// =====================================================

/**
 * Variable Simple - Range
 * Price range display for variable products using the new variablePriceRange element
 */
export const variableSimpleRangePreset: PresetDefinition = {
  id: "variable-simple-range",
  name: "Price Range",
  description: "Shows min-max price range for variable products",
  scenario: "variable_simple",
  preview: "variable-simple-range",
  elements: [
    {
      type: "variablePriceRange",
      name: "Price Range",
      position: { x: 100, y: 100 },
      color: "#374151",
      displayMode: "range",
      separator: " – ",
      prefixText: "From",
      showCurrency: true,
      typography: withTypography(defaultTypography, { fontSize: 24 }),
      separatorTypography: createPartialTypography(18, 400),
      minDecimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: {},
        position: "superscript",
      },
      maxDecimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: {},
        position: "superscript",
      },
      showOriginalRange: false,
    },
  ],
};

/**
 * Variable Simple - From Price
 * "From $X" style display for variable products
 */
export const variableSimpleFromPreset: PresetDefinition = {
  id: "variable-simple-from",
  name: "From Price",
  description: "Shows 'From $19.99' format",
  scenario: "variable_simple",
  preview: "variable-simple-from",
  elements: [
    {
      type: "variablePriceRange",
      name: "From Price",
      position: { x: 100, y: 100 },
      color: "#374151",
      displayMode: "from",
      separator: " – ",
      prefixText: "From",
      showCurrency: true,
      typography: withTypography(defaultTypography, { fontSize: 22 }),
      separatorTypography: createPartialTypography(16, 400, "Inter", "italic"),
      // minPriceTypography/maxPriceTypography: undefined = inherit from main typography
      minDecimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: {},
        position: "superscript",
      },
      maxDecimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: {},
        position: "superscript",
      },
      showOriginalRange: false,
    },
  ],
};

/**
 * Variable Simple - Compact
 * Compact price display with no decimals
 */
export const variableSimpleCompactPreset: PresetDefinition = {
  id: "variable-simple-compact",
  name: "Compact Range",
  description: "Compact range without decimals",
  scenario: "variable_simple",
  preview: "variable-simple-compact",
  elements: [
    {
      type: "variablePriceRange",
      name: "Price Range",
      position: { x: 100, y: 100 },
      color: "#1f2937",
      displayMode: "range",
      separator: "-",
      prefixText: "From",
      showCurrency: true,
      typography: withTypography(defaultTypography, { fontSize: 20, fontFamily: "__default__" }),
      separatorTypography: createPartialTypography(16, 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,
    },
  ],
};

// =====================================================
// VARIABLE SALE PRESETS
// =====================================================

/**
 * Variable Sale - Sale Range
 * Sale price range using the variablePriceRange element
 */
export const variableSaleRangePreset: PresetDefinition = {
  id: "variable-sale-range",
  name: "Sale Range",
  description: "Variable sale with price range in red",
  scenario: "variable_sale",
  preview: "variable-sale-range",
  elements: [
    {
      type: "variablePriceRange",
      name: "Sale Price Range",
      position: { x: 100, y: 105 },
      color: "#dc2626",
      displayMode: "range",
      separator: " – ",
      prefixText: "From",
      showCurrency: true,
      typography: withTypography(defaultTypography, {
        fontSize: 24,
        fontWeight: 700,
      }),
      separatorTypography: createPartialTypography(18, 400, "__default__"),
      minDecimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: {},
        position: "superscript",
      },
      maxDecimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: {},
        position: "superscript",
      },
      showOriginalRange: false,
    },
  ],
};

/**
 * Variable Sale - From Sale Price
 * "From $X" style for sale variable products
 */
export const variableSaleFromPreset: PresetDefinition = {
  id: "variable-sale-from",
  name: "From Sale",
  description: "Shows 'From $X' with sale styling",
  scenario: "variable_sale",
  preview: "variable-sale-from",
  elements: [
    {
      type: "variablePriceRange",
      name: "From Sale Price",
      position: { x: 100, y: 105 },
      color: "#dc2626",
      displayMode: "from",
      separator: " – ",
      prefixText: "From",
      showCurrency: true,
      typography: withTypography(defaultTypography, {
        fontSize: 22,
        fontWeight: 600,
        fontFamily: "__default__",
      }),
      separatorTypography: createPartialTypography(16, 400, "Inter", "italic"),
      minDecimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: {},
        position: "superscript",
      },
      maxDecimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: {},
        position: "superscript",
      },
      showOriginalRange: false,
    },
  ],
};

/**
 * Variable Sale - With Badge
 * Variable sale range with discount badge
 */
export const variableSaleBadgePreset: PresetDefinition = {
  id: "variable-sale-badge",
  name: "With Badge",
  description: "Variable sale range with discount badge",
  scenario: "variable_sale",
  preview: "variable-sale-badge",
  elements: [
    {
      type: "variablePriceRange",
      name: "Sale Price Range",
      position: { x: 100, y: 105 },
      color: "#1f2937",
      displayMode: "range",
      separator: " – ",
      prefixText: "From",
      showCurrency: true,
      typography: withTypography(defaultTypography, {
        fontSize: 24,
        fontWeight: 700,
        fontFamily: "__default__",
      }),
      separatorTypography: createPartialTypography(18, 400),
      // minPriceTypography/maxPriceTypography: undefined = inherit from main typography
      minDecimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: {},
        position: "superscript",
      },
      maxDecimal: {
        show: true,
        showCurrency: true,
        separator: "point",
        typography: {},
        position: "superscript",
      },
      showOriginalRange: false,
    },
    {
      type: "discountBadge",
      name: "Discount Badge",
      position: { x: 280, y: 107 },
      positionType: "relative",
      color: "#ffffff",
      backgroundColor: "#f5220a",
      typography: withTypography(defaultTypography, {
        fontSize: 11,
        fontWeight: 700,
        fontFamily: "__default__",
      }),
      border: createPresetBorder(0, 12, "#000000"),
      padding: createPresetSpacing(4, 8, 4, 8),
      format: "percentage",
    },
  ],
};

// =====================================================
// Register all default presets
// =====================================================

export function registerDefaultPresets(): void {
  // Simple presets
  registerPreset(simpleBasicPreset);
  registerPreset(simpleCurrencyCenteredPreset);
  registerPreset(simpleElegantPreset);
  registerPreset(simpleBoldPreset);

  // Variable simple presets
  registerPreset(variableSimpleRangePreset);
  registerPreset(variableSimpleFromPreset);
  registerPreset(variableSimpleCompactPreset);

  // Variable sale presets
  registerPreset(variableSaleRangePreset);
  registerPreset(variableSaleFromPreset);
  registerPreset(variableSaleBadgePreset);
}

// Initialize default presets on module load
registerDefaultPresets();

// Export all presets for external use
export const simplePresets = [simpleBasicPreset, simpleCurrencyCenteredPreset, simpleElegantPreset, simpleBoldPreset];

export const variableSimplePresets = [variableSimpleRangePreset, variableSimpleFromPreset, variableSimpleCompactPreset];

export const variableSalePresets = [variableSaleRangePreset, variableSaleFromPreset, variableSaleBadgePreset];
