/**
 * Simple Scenario - Advanced Animated Presets
 *
 * These presets feature modern animations that work in both SSR and Web Component modes.
 * 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 Advanced 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),
});

/**
 * Create responsive border settings
 */
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/sub-elements 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,
});

// =====================================================
// Default Container Settings for Advanced Presets
// =====================================================

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,
});

export const simpleHandwrittenPreset: PresetDefinition = {
  id: "simple-handwritten",
  name: "Handwritten Style",
  description: "Casual handwritten font with playful design",
  scenario: "simple",
  preview: "simple-handwritten",
  isAdvanced: false,
  containerSettings: createDefaultContainer({
    padding: createSpacing(0, 0, 0, 0),
  }),
  elements: [
    {
      type: "currencySymbol",
      name: "Currency",
      position: { x: 137, y: 115 },
      positionType: "relative",
      color: "#000",
      typography: createTypography(30, 500, 0, "Caveat"),
      margin: createSpacing(0, 0, 0, 0),
    },
    {
      type: "regularPrice",
      name: "Regular Price",
      position: { x: 155, y: 115 },
      color: "#000",
      typography: createTypography(30, 700, -2, "Caveat"),
      decimal: {
        show: true,
        showCurrency: false,
        separator: "point",
        typography: createPartialTypography(20, 700, "Caveat"),
        position: "baseline",
      },
    },
  ],
};

export const simpleBoldContrastPreset: PresetDefinition = {
  id: "simple-bold-contrast",
  name: "Bold Contrast",
  description: "A clean, high-contrast layout that emphasizes the primary price",
  scenario: "simple",
  preview: "simple-bold-contrast",
  isAdvanced: false,
  customCode: { css: true },
  containerSettings: createDefaultContainer({
    padding: createSpacing(0, 0, 0, 0),
    }),
  elements: [
    {
      type: "currencySymbol",
      name: "Currency",
      position: { x: 86, y: 109 },
      positionType: "relative",
      color: "#a3a3a3",
      typography: createTypography(18, 400, 0, "Archivo Black"),
      margin: createSpacing(0, 0, 0, 0),
    },
    {
      type: "regularPrice",
      name: "Regular Price",
      position: { x: 100, y: 100 },
      color: "#000",
      typography: createTypography(34, 400, 0, "Archivo Black"),
      decimal: {
        show: true,
        showCurrency: false,
        separator: "point",
        typography: createPartialTypography(16, 400, "Archivo Black"),
        position: "superscript",
      },
    },
  ],
};

// =====================================================
// PRESET 1: Split-Speed Counter
// =====================================================

/**
 * Split-Speed Counter Preset
 *
 * Features:
 * - Large integer price with animated count-up
 * - Smaller decimals that "race" to catch up (blur effect)
 * - USD currency label below decimals
 * - Dark slate color scheme
 */
export const simpleSplitSpeedPreset: PresetDefinition = {
  id: "simple-split-speed",
  name: "Split-Speed Counter",
  description: "Animated counter with racing decimals effect",
  scenario: "simple",
  preview: "simple-split-speed",
  fullPreview: "simple-split-speed-full",
  isAdvanced: true,
  customCode: { css: true },
  containerSettings: createDefaultContainer({
    padding: createSpacing(0, 0, 0, 0),
    }),
  elements: [
    {
      type: "currencySymbol",
      name: "Currency",
      position: { x: 121, y: 123 },
      positionType: "relative",
      color: "#cbd5e1",
      typography: createTypography(30, 500),
      margin: createSpacing(10, 0, 0, 0),
    },
    {
      type: "regularPrice",
      name: "Regular Price",
      position: { x: 155, y: 115 },
      color: "#0f172a",
      typography: createTypography(80, 700, -2),
      decimal: {
        show: true,
        showCurrency: false,
        separator: "none",
        typography: createPartialTypography(36, 700),
        position: "absolute",
        absoluteOffset: { x: 128, y: -8 },
      },
      animation: {
        type: "scaleIn",
        duration: 2500,
        delay: 0,
        easing: "ease-out",
      },
    },
  ],
};

// =====================================================
// PRESET 2: Mechanical Slot Machine
// =====================================================

/**
 * Mechanical Slot Preset
 *
 * Features:
 * - Individual digit slots that roll like a slot machine
 * - Mechanical spring-bounce effect
 * - Tech/monospace font for digits
 * - Light gray container with subtle shadows
 */
export const simpleSlotMachinePreset: PresetDefinition = {
  id: "simple-slot-machine",
  name: "Slot Machine",
  description: "Mechanical slot-style rolling digits",
  scenario: "simple",
  preview: "simple-slot-machine",
  fullPreview: "simple-slot-machine-full",
  isAdvanced: true,
  customCode: { css: true, js: true },
  containerSettings: createDefaultContainer({
    backgroundColor: "#f1f5f9",
    padding: createSpacing(32, 32, 32, 32),
    border: createBorder(1, 0, "#e2e8f0"),
  }),
  elements: [
    {
      type: "currencySymbol",
      name: "Currency",
      position: { x: 120, y: 130 },
      color: "#94a3b8",
      typography: createTypography(24, 700),
    },
    {
      type: "regularPrice",
      name: "Regular Price",
      position: { x: 160, y: 120 },
      color: "#1e293b",
      typography: createTypography(48, 700, 0, "JetBrains Mono"),
      decimal: {
        show: false,
        showCurrency: false,
        separator: "point",
        typography: createPartialTypography(32, 700, "JetBrains Mono"),
        position: "inline",
      },
      animation: {
        type: "slideIn",
        duration: 2000,
        delay: 0,
        easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",
        direction: "bottom",
      },
    },
  ],
};

// =====================================================
// PRESET 3: Liquid Metal (Shimmer)
// =====================================================

/**
 * Liquid Metal Shimmer Preset
 *
 * Features:
 * - Gradient shimmer effect sweeping across price
 * - Dark background for contrast
 * - Bold, heavy typography
 * - Amber accent color
 */
export const simpleLiquidMetalPreset: PresetDefinition = {
  id: "simple-liquid-metal",
  name: "Liquid Metal",
  description: "Shimmer gradient effect with gold accent",
  scenario: "simple",
  preview: "simple-liquid-metal",
  fullPreview: "simple-liquid-metal-full",
  isAdvanced: true,
  customCode: { css: true },
  containerSettings: createDefaultContainer({
    backgroundColor: "#0f172a",
    padding: createSpacing(32, 32, 32, 32),
    border: createBorder(1, 0, "#1e293b"),
    }),
  elements: [
    {
      type: "currencySymbol",
      name: "Currency",
      position: { x: 115, y: 145 },
      color: "#475569",
      typography: createTypography(36, 800),
    },
    {
      type: "regularPrice",
      name: "Regular Price",
      position: { x: 155, y: 125 },
      color: "#fbbf24",
      typography: createTypography(80, 800, -2, "Archivo Black"),
      decimal: {
        show: true,
        showCurrency: false,
        separator: "point",
        typography: createPartialTypography(36, 800),
        position: "baseline",
      },
    },
  ],
};

// =====================================================
// PRESET 4: Gravity Spring
// =====================================================

/**
 * Gravity Spring Bounce Preset
 *
 * Features:
 * - Decimals bounce in with elastic physics
 * - Clean, minimal white design
 * - Subtle indigo accent for decimals
 * - Spring animation with overshoot
 */
export const simpleGravitySpringPreset: PresetDefinition = {
  id: "simple-gravity-spring",
  name: "Gravity Spring",
  description: "Elastic bounce animation with spring physics",
  scenario: "simple",
  preview: "simple-gravity-spring",
  fullPreview: "simple-gravity-spring-full",
  isAdvanced: true,
  customCode: { css: true },
  containerSettings: createDefaultContainer({
    padding: createSpacing(0, 0, 0, 0),
    }),
  elements: [
    {
      type: "currencySymbol",
      name: "Currency",
      position: { x: 130, y: 145 },
      color: "#0f172a",
      typography: createTypography(24, 600),
    },
    {
      type: "regularPrice",
      name: "Regular Price",
      position: { x: 160, y: 125 },
      color: "#0f172a",
      typography: createTypography(72, 600, -1),
      decimal: {
        show: true,
        showCurrency: false,
        separator: "point",
        typography: createPartialTypography(40, 600),
        position: "superscript",
      },
    },
  ],
};

// =====================================================
// Register Advanced Simple Presets
// =====================================================

export function registerAdvancedSimplePresets(): void {
  registerPreset(simpleHandwrittenPreset);
  registerPreset(simpleBoldContrastPreset);
  registerPreset(simpleSplitSpeedPreset);
  registerPreset(simpleSlotMachinePreset);
  registerPreset(simpleLiquidMetalPreset);
  registerPreset(simpleGravitySpringPreset);
}

// Export all simple advanced presets
export const simpleAdvancedPresets = [
  simpleHandwrittenPreset,
  simpleBoldContrastPreset,
  simpleSplitSpeedPreset,
  simpleSlotMachinePreset,
  simpleLiquidMetalPreset,
  simpleGravitySpringPreset,
];

// Auto-register on import
registerAdvancedSimplePresets();
