/**
 * Puck Theme Tokens and Design Controls
 *
 * Provides centralized theme configuration and shared design controls
 * for consistent styling across all marketing blocks.
 */
import type { Fields } from '@measured/puck';
import { imagePickerField } from './fields/ImagePickerField';

// ============================================================================
// Theme Token Types
// ============================================================================

export interface ColorScale {
  50: string;
  100: string;
  200: string;
  300: string;
  400: string;
  500: string;
  600: string;
  700: string;
  800: string;
  900: string;
  950: string;
}

export interface ThemeTokens {
  colors: {
    primary: ColorScale;
    secondary: ColorScale;
    accent: ColorScale;
    neutral: ColorScale;
  };
  typography: {
    fontScale: {
      xs: string;
      sm: string;
      base: string;
      lg: string;
      xl: string;
      '2xl': string;
      '3xl': string;
      '4xl': string;
      '5xl': string;
      '6xl': string;
    };
    headingFamily: string;
    bodyFamily: string;
  };
  buttons: {
    radius: string;
    variants: {
      primary: {
        bg: string;
        text: string;
        hoverBg: string;
      };
      secondary: {
        bg: string;
        text: string;
        hoverBg: string;
      };
      ghost: {
        bg: string;
        text: string;
        hoverBg: string;
      };
    };
  };
  containerWidths: {
    narrow: string;
    normal: string;
    wide: string;
    full: string;
  };
}

// ============================================================================
// Default Theme Tokens
// ============================================================================

export const defaultThemeTokens: ThemeTokens = {
  colors: {
    primary: {
      50: '#f5f3ff',
      100: '#ede9fe',
      200: '#ddd6fe',
      300: '#c4b5fd',
      400: '#a78bfa',
      500: '#8b5cf6',
      600: '#7c3aed',
      700: '#6d28d9',
      800: '#5b21b6',
      900: '#4c1d95',
      950: '#2e1065',
    },
    secondary: {
      50: '#ecfdf5',
      100: '#d1fae5',
      200: '#a7f3d0',
      300: '#6ee7b7',
      400: '#34d399',
      500: '#10b981',
      600: '#059669',
      700: '#047857',
      800: '#065f46',
      900: '#064e3b',
      950: '#022c22',
    },
    accent: {
      50: '#fff7ed',
      100: '#ffedd5',
      200: '#fed7aa',
      300: '#fdba74',
      400: '#fb923c',
      500: '#f97316',
      600: '#ea580c',
      700: '#c2410c',
      800: '#9a3412',
      900: '#7c2d12',
      950: '#431407',
    },
    neutral: {
      50: '#fafafa',
      100: '#f4f4f5',
      200: '#e4e4e7',
      300: '#d4d4d8',
      400: '#a1a1aa',
      500: '#71717a',
      600: '#52525b',
      700: '#3f3f46',
      800: '#27272a',
      900: '#18181b',
      950: '#09090b',
    },
  },
  typography: {
    fontScale: {
      xs: '0.75rem',
      sm: '0.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '3.75rem',
    },
    headingFamily: 'Inter, system-ui, sans-serif',
    bodyFamily: 'Inter, system-ui, sans-serif',
  },
  buttons: {
    radius: '0.5rem',
    variants: {
      primary: {
        bg: 'bg-primary-600',
        text: 'text-white',
        hoverBg: 'hover:bg-primary-700',
      },
      secondary: {
        bg: 'bg-neutral-100',
        text: 'text-neutral-900',
        hoverBg: 'hover:bg-neutral-200',
      },
      ghost: {
        bg: 'bg-transparent',
        text: 'text-neutral-600',
        hoverBg: 'hover:bg-neutral-100',
      },
    },
  },
  containerWidths: {
    narrow: 'max-w-3xl',
    normal: 'max-w-6xl',
    wide: 'max-w-7xl',
    full: 'max-w-full',
  },
};

// ============================================================================
// Gradient Presets
// ============================================================================

export interface GradientPreset {
  name: string;
  label: string;
  value: string;
}

export const GRADIENT_PRESETS: GradientPreset[] = [
  {
    name: 'dark-purple',
    label: 'Dark Purple',
    value: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)',
  },
  {
    name: 'dark-blue',
    label: 'Dark Blue',
    value: 'linear-gradient(135deg, #0c1445 0%, #1a237e 50%, #283593 100%)',
  },
  {
    name: 'midnight',
    label: 'Midnight',
    value: 'linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)',
  },
  {
    name: 'ocean-dark',
    label: 'Ocean Dark',
    value: 'linear-gradient(135deg, #0d1b2a 0%, #1b263b 50%, #415a77 100%)',
  },
  {
    name: 'emerald-dark',
    label: 'Emerald Dark',
    value: 'linear-gradient(135deg, #064e3b 0%, #065f46 50%, #047857 100%)',
  },
  {
    name: 'royal',
    label: 'Royal',
    value: 'linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%)',
  },
  {
    name: 'sunset-dark',
    label: 'Sunset Dark',
    value: 'linear-gradient(135deg, #1f1c2c 0%, #431407 50%, #7c2d12 100%)',
  },
  {
    name: 'slate-dark',
    label: 'Slate Dark',
    value: 'linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%)',
  },
];

// ============================================================================
// Padding Presets
// ============================================================================

export const PADDING_PRESETS: Record<string, string> = {
  xs: 'py-4',
  sm: 'py-8',
  md: 'py-12',
  lg: 'py-16',
  xl: 'py-24',
};

// ============================================================================
// Container Width Presets
// ============================================================================

export const CONTAINER_WIDTH_PRESETS: Record<string, string> = {
  narrow: 'max-w-3xl',
  normal: 'max-w-6xl',
  wide: 'max-w-7xl',
  full: 'max-w-full w-full',
};

// ============================================================================
// Button Radius Presets
// ============================================================================

export const BUTTON_RADIUS_PRESETS: Record<string, string> = {
  none: 'rounded-none',
  sm: 'rounded-sm',
  md: 'rounded-md',
  lg: 'rounded-lg',
  full: 'rounded-full',
};

// ============================================================================
// Shadow Presets
// ============================================================================

export const SHADOW_PRESETS: Record<string, string> = {
  none: 'shadow-none',
  sm: 'shadow-sm',
  md: 'shadow-md',
  lg: 'shadow-lg',
  xl: 'shadow-xl',
};

// ============================================================================
// Background Variants
// ============================================================================

export const BACKGROUND_VARIANTS: Record<string, { className: string; textClass: string }> = {
  none: { className: '', textClass: 'text-neutral-900' },
  light: { className: 'bg-neutral-50', textClass: 'text-neutral-900' },
  dark: { className: 'bg-neutral-900', textClass: 'text-white' },
  gradient: { className: '', textClass: 'text-white' }, // gradient applied via style
};

// ============================================================================
// Design Controls Types
// ============================================================================

export interface DesignControlsProps {
  padding?: keyof typeof PADDING_PRESETS;
  backgroundVariant?: 'none' | 'light' | 'dark' | 'gradient';
  gradientPreset?: string;
  backgroundImage?: string;
  overlayStrength?: number;
  contentMaxWidth?: keyof typeof CONTAINER_WIDTH_PRESETS;
  alignment?: 'left' | 'center' | 'right';
  borderRadius?: keyof typeof BUTTON_RADIUS_PRESETS;
  shadow?: keyof typeof SHADOW_PRESETS;
  hideOnMobile?: boolean;
  hideOnTablet?: boolean;
  hideOnDesktop?: boolean;
  anchorId?: string;
}

export interface AppliedDesignControls {
  className: string;
  containerClassName: string;
  style: React.CSSProperties;
  textClassName: string;
}

// ============================================================================
// Create Design Controls Fields
// ============================================================================

export function createDesignControlsFields(): Fields<DesignControlsProps> {
  return {
    padding: {
      type: 'select',
      label: 'Padding',
      options: [
        { label: 'Extra Small', value: 'xs' },
        { label: 'Small', value: 'sm' },
        { label: 'Medium', value: 'md' },
        { label: 'Large', value: 'lg' },
        { label: 'Extra Large', value: 'xl' },
      ],
    },
    backgroundVariant: {
      type: 'select',
      label: 'Background',
      options: [
        { label: 'None', value: 'none' },
        { label: 'Light', value: 'light' },
        { label: 'Dark', value: 'dark' },
        { label: 'Gradient', value: 'gradient' },
      ],
    },
    gradientPreset: {
      type: 'select',
      label: 'Gradient Preset',
      options: GRADIENT_PRESETS.map(g => ({ label: g.label, value: g.name })),
    },
    backgroundImage: {
      ...imagePickerField,
      label: 'Background Image',
    },
    overlayStrength: {
      type: 'number',
      label: 'Overlay Strength (0-100)',
      min: 0,
      max: 100,
    },
    contentMaxWidth: {
      type: 'select',
      label: 'Content Width',
      options: [
        { label: 'Narrow', value: 'narrow' },
        { label: 'Normal', value: 'normal' },
        { label: 'Wide', value: 'wide' },
        { label: 'Full', value: 'full' },
      ],
    },
    alignment: {
      type: 'select',
      label: 'Alignment',
      options: [
        { label: 'Left', value: 'left' },
        { label: 'Center', value: 'center' },
        { label: 'Right', value: 'right' },
      ],
    },
    borderRadius: {
      type: 'select',
      label: 'Border Radius',
      options: [
        { label: 'None', value: 'none' },
        { label: 'Small', value: 'sm' },
        { label: 'Medium', value: 'md' },
        { label: 'Large', value: 'lg' },
        { label: 'Full', value: 'full' },
      ],
    },
    shadow: {
      type: 'select',
      label: 'Shadow',
      options: [
        { label: 'None', value: 'none' },
        { label: 'Small', value: 'sm' },
        { label: 'Medium', value: 'md' },
        { label: 'Large', value: 'lg' },
        { label: 'Extra Large', value: 'xl' },
      ],
    },
    hideOnMobile: {
      type: 'radio',
      label: 'Hide on Mobile',
      options: [
        { label: 'No', value: false },
        { label: 'Yes', value: true },
      ],
    },
    hideOnTablet: {
      type: 'radio',
      label: 'Hide on Tablet',
      options: [
        { label: 'No', value: false },
        { label: 'Yes', value: true },
      ],
    },
    hideOnDesktop: {
      type: 'radio',
      label: 'Hide on Desktop',
      options: [
        { label: 'No', value: false },
        { label: 'Yes', value: true },
      ],
    },
    anchorId: {
      type: 'text',
      label: 'Anchor ID (for navigation)',
    },
  };
}

// ============================================================================
// Apply Design Controls
// ============================================================================

export function applyDesignControls(props: Partial<DesignControlsProps>): AppliedDesignControls {
  const classes: string[] = [];
  const containerClasses: string[] = [];
  const style: React.CSSProperties = {};
  let textClassName = '';

  // Padding
  if (props.padding) {
    const paddingClass = PADDING_PRESETS[props.padding];
    if (paddingClass) {
      classes.push(paddingClass);
    }
  }

  // Background variant
  if (props.backgroundVariant) {
    const variant = BACKGROUND_VARIANTS[props.backgroundVariant];
    if (variant) {
      if (variant.className) {
        classes.push(variant.className);
      }
      textClassName = variant.textClass;

      // Apply gradient if selected
      if (props.backgroundVariant === 'gradient' && props.gradientPreset) {
        const gradient = GRADIENT_PRESETS.find(g => g.name === props.gradientPreset);
        if (gradient) {
          style.background = gradient.value;
        }
      }
    }
  }

  // Background image
  if (props.backgroundImage) {
    style.backgroundImage = `url(${props.backgroundImage})`;
    style.backgroundSize = 'cover';
    style.backgroundPosition = 'center';
  }

  // Overlay (applied via pseudo-element in render)
  // Note: overlayStrength is handled in component render

  // Content max width
  if (props.contentMaxWidth) {
    const widthClass = CONTAINER_WIDTH_PRESETS[props.contentMaxWidth];
    if (widthClass) {
      containerClasses.push(widthClass);
    }
  }

  // Alignment
  if (props.alignment) {
    const alignmentClasses: Record<string, string> = {
      left: 'text-left',
      center: 'text-center',
      right: 'text-right',
    };
    classes.push(alignmentClasses[props.alignment] || '');
  }

  // Border radius
  if (props.borderRadius) {
    const radiusClass = BUTTON_RADIUS_PRESETS[props.borderRadius];
    if (radiusClass) {
      classes.push(radiusClass);
    }
  }

  // Shadow
  if (props.shadow) {
    const shadowClass = SHADOW_PRESETS[props.shadow];
    if (shadowClass) {
      classes.push(shadowClass);
    }
  }

  // Visibility
  if (props.hideOnMobile) {
    classes.push('hidden sm:block');
  }
  if (props.hideOnTablet) {
    classes.push('sm:hidden md:block');
  }
  if (props.hideOnDesktop) {
    classes.push('md:hidden');
  }

  return {
    className: classes.filter(Boolean).join(' '),
    containerClassName: containerClasses.filter(Boolean).join(' '),
    style,
    textClassName,
  };
}

// ============================================================================
// Default Design Controls Props
// ============================================================================

export const defaultDesignControlsProps: DesignControlsProps = {
  padding: 'lg',
  backgroundVariant: 'none',
  contentMaxWidth: 'normal',
  alignment: 'left',
  borderRadius: 'none',
  shadow: 'none',
  hideOnMobile: false,
  hideOnTablet: false,
  hideOnDesktop: false,
};

// ============================================================================
// Helper: Merge with defaults
// ============================================================================

export function mergeWithDesignDefaults(
  props: Partial<DesignControlsProps>
): DesignControlsProps {
  return {
    ...defaultDesignControlsProps,
    ...props,
  };
}
