export const addedToCartConfig = {
  id: 'added-to-cart-popup',
  name: 'Added To Cart Popup',
  description: 'Show a popup when products are added to the cart',
  category: 'popups',
}

// Display page options
export const displayPageOptions = [
  { value: 'all', label: 'All Pages', description: 'Show on all pages' },
  { value: 'archive', label: 'Products Archive Only', description: 'Only on shop/category pages' },
  { value: 'single', label: 'Single Product Only', description: 'Only on single product pages' },
  { value: 'both', label: 'Archive & Single Product', description: 'Both archive and single product pages' },
]

// Product filter options
export const productFilterOptions = [
  { value: 'all', label: 'All Products', description: 'Show popup for all products' },
  { value: 'exclude', label: 'Exclude Specific Products', description: 'Show for all except selected products' },
  { value: 'include', label: 'Only Specific Products', description: 'Only show for selected products' },
]

// Cart display options
export const cartDisplayOptions = [
  { value: 'added-only', label: 'Added Product Only', description: 'Show only the product just added' },
  { value: 'full-cart', label: 'Full Cart', description: 'Show all items in the cart' },
]

// Font family options
export const fontFamilyOptions = [
  { value: 'inherit', label: 'Theme Default' },
  { value: 'Inter, sans-serif', label: 'Inter' },
  { value: 'Roboto, sans-serif', label: 'Roboto' },
  { value: 'Open Sans, sans-serif', label: 'Open Sans' },
  { value: 'Poppins, sans-serif', label: 'Poppins' },
  { value: 'Lato, sans-serif', label: 'Lato' },
  { value: 'Montserrat, sans-serif', label: 'Montserrat' },
]

// Font size options
export const fontSizeOptions = [
  { value: '12', label: '12px' },
  { value: '13', label: '13px' },
  { value: '14', label: '14px (Default)' },
  { value: '15', label: '15px' },
  { value: '16', label: '16px' },
  { value: '18', label: '18px' },
]

// Border radius options
export const borderRadiusOptions = [
  { value: '0', label: 'None (Square)' },
  { value: '4', label: 'Small (4px)' },
  { value: '8', label: 'Medium (8px)' },
  { value: '12', label: 'Large (12px)' },
  { value: '16', label: 'Extra Large (16px)' },
  { value: '24', label: 'Rounded (24px)' },
]

// Shadow options
export const shadowOptions = [
  { value: 'none', label: 'None' },
  { value: 'sm', label: 'Small' },
  { value: 'md', label: 'Medium' },
  { value: 'lg', label: 'Large' },
  { value: 'xl', label: 'Extra Large' },
]

// Style presets/templates
export interface StylePreset {
  id: string
  name: string
  description: string
  styles: Partial<PopupStyleSettings>
}

export const stylePresets: StylePreset[] = [
  {
    id: 'classic',
    name: 'Classic',
    description: 'Clean, professional look with subtle shadows',
    styles: {
      overlayColor: '#000000',
      overlayOpacity: 50,
      backgroundColor: '#ffffff',
      textColor: '#1f2937',
      headingColor: '#111827',
      priceColor: '#047857',
      borderColor: '#dbe2ea',
      iconColor: '#00226b',
      iconBackgroundColor: '#eef4ff',
      iconSize: '36',
      iconBorderRadius: '28',
      primaryButtonBg: '#00226b',
      primaryButtonText: '#ffffff',
      primaryButtonHoverBg: '#001a52',
      secondaryButtonBg: '#ffffff',
      secondaryButtonText: '#1f2937',
      secondaryButtonHoverBg: '#f3f4f6',
      borderWidth: '0',
      borderRadius: '14',
      buttonBorderRadius: '10',
      shadow: 'md',
      padding: '24',
    }
  },
  {
    id: 'flyout',
    name: 'Flyout',
    description: 'Right-side sliding panel, full height',
    styles: {
      overlayColor: '#000000',
      overlayOpacity: 30,
      backgroundColor: '#ffffff',
      textColor: '#1f2937',
      headingColor: '#111827',
      priceColor: '#047857',
      borderColor: '#dbe2ea',
      iconColor: '#00226b',
      iconBackgroundColor: '#eef4ff',
      iconSize: '36',
      iconBorderRadius: '28',
      primaryButtonBg: '#00226b',
      primaryButtonText: '#ffffff',
      primaryButtonHoverBg: '#001a52',
      secondaryButtonBg: '#ffffff',
      secondaryButtonText: '#1f2937',
      secondaryButtonHoverBg: '#f3f4f6',
      borderWidth: '0',
      borderRadius: '0',
      buttonBorderRadius: '10',
      shadow: 'xl',
      padding: '24',
    }
  },
  {
    id: 'solid-bar',
    name: 'Solid Bar',
    description: 'Full-width bottom bar notification',
    styles: {
      overlayColor: '#000000',
      overlayOpacity: 0,
      backgroundColor: '#ffffff',
      textColor: '#1f2937',
      headingColor: '#111827',
      priceColor: '#047857',
      borderColor: '#dbe2ea',
      iconColor: '#00226b',
      iconBackgroundColor: '#eef4ff',
      iconSize: '36',
      iconBorderRadius: '28',
      primaryButtonBg: '#00226b',
      primaryButtonText: '#ffffff',
      primaryButtonHoverBg: '#001a52',
      secondaryButtonBg: '#ffffff',
      secondaryButtonText: '#1f2937',
      secondaryButtonHoverBg: '#f3f4f6',
      borderWidth: '1',
      borderRadius: '0',
      buttonBorderRadius: '10',
      shadow: 'md',
      padding: '16',
    }
  },
]

export interface PopupStyleSettings {
  // Colors
  overlayColor: string
  overlayOpacity: number
  backgroundColor: string
  textColor: string
  headingColor: string
  priceColor: string
  borderColor: string

  // Success Icon
  iconColor: string
  iconBackgroundColor: string
  iconSize: string
  iconBorderRadius: string
  
  // Buttons
  primaryButtonBg: string
  primaryButtonText: string
  primaryButtonHoverBg: string
  secondaryButtonBg: string
  secondaryButtonText: string
  secondaryButtonHoverBg: string
  
  // Typography
  fontFamily: string
  fontSize: string
  headingFontSize: string
  
  // Spacing
  padding: string
  itemSpacing: string
  productAreaPadding: string
  relatedProductsGap: string
  relatedButtonsGap: string
  buttonGap: string
  
  // Border & Shadow
  borderWidth: string
  borderRadius: string
  productAreaBorderRadius: string
  buttonBorderRadius: string
  shadow: string
  
  // Dimensions
  popupWidth: string
  popupMaxHeight: string

  // Background
  productAreaBgColor: string

  // Close Button
  closeButtonSize: string
  closeButtonColor: string
  closeButtonBgColor: string

  // Text Alignment
  textAlign: 'left' | 'center' | 'right'

  // Animation (Pro)
  animationType: 'default' | 'fade' | 'slide-up' | 'slide-down' | 'zoom' | 'bounce' | 'flip'
}

export interface AddedToCartSettings {
  // General
  enabled: boolean
  
  // Display Settings
  displayPages: 'all' | 'archive' | 'single' | 'both'
  productFilter: 'all' | 'exclude' | 'include'
  excludedProducts: number[]
  includedProducts: number[]
  excludedCategories: number[]
  includedCategories: number[]
  
  // Design
  popupDesign: 'classic' | 'flyout' | 'solid-bar'
  cartDisplay: 'added-only' | 'full-cart'
  
  // Features
  showRelatedProducts: boolean
  relatedProductsCount: number
  showRecommendedProducts: boolean
  recommendedProductsCount: number
  
  // Buttons
  showViewCartButton: boolean
  showCheckoutButton: boolean
  showContinueShoppingButton: boolean
  viewCartButtonText: string
  checkoutButtonText: string
  continueShoppingButtonText: string

  // Content
  popupHeadingText: string
  showSuccessIcon: boolean
  
  // Mobile
  showOnMobile: boolean
  
  // Animation
  animationDuration: number
  autoCloseEnabled: boolean
  autoCloseDelay: number
  
  // Styling
  styles: PopupStyleSettings
}

export const defaultStyles: PopupStyleSettings = {
  // Colors
  overlayColor: '#000000',
  overlayOpacity: 50,
  backgroundColor: '#ffffff',
  textColor: '#1f2937',
  headingColor: '#111827',
  priceColor: '#047857',
  borderColor: '#dbe2ea',

  // Success Icon
  iconColor: '#00226b',
  iconBackgroundColor: '#eef4ff',
  iconSize: '36',
  iconBorderRadius: '28',
  
  // Buttons
  primaryButtonBg: '#00226b',
  primaryButtonText: '#ffffff',
  primaryButtonHoverBg: '#001a52',
  secondaryButtonBg: '#ffffff',
  secondaryButtonText: '#1f2937',
  secondaryButtonHoverBg: '#f3f4f6',
  
  // Typography
  fontFamily: 'inherit',
  fontSize: '14',
  headingFontSize: '18',
  
  // Spacing
  padding: '24',
  itemSpacing: '16',
  productAreaPadding: '0',
  relatedProductsGap: '16',
  relatedButtonsGap: '16',
  buttonGap: '8',
  
  // Border & Shadow
  borderWidth: '0',
  borderRadius: '14',
  productAreaBorderRadius: '0',
  buttonBorderRadius: '10',
  shadow: 'md',
  
  // Dimensions
  popupWidth: '480',
  popupMaxHeight: '80vh',

  // Background
  productAreaBgColor: '',

  // Close Button
  closeButtonSize: '32',
  closeButtonColor: '#6b7280',
  closeButtonBgColor: '',

  // Text Alignment
  textAlign: 'left',

  // Animation
  animationType: 'default',
}

export const defaultSettings: AddedToCartSettings = {
  // General
  enabled: false,
  
  // Display Settings
  displayPages: 'all',
  productFilter: 'all',
  excludedProducts: [],
  includedProducts: [],
  excludedCategories: [],
  includedCategories: [],
  
  // Design
  popupDesign: 'classic',
  cartDisplay: 'added-only',
  
  // Features
  showRelatedProducts: false,
  relatedProductsCount: 4,
  showRecommendedProducts: false,
  recommendedProductsCount: 4,
  
  // Buttons
  showViewCartButton: true,
  showCheckoutButton: true,
  showContinueShoppingButton: true,
  viewCartButtonText: 'View Cart',
  checkoutButtonText: 'Checkout',
  continueShoppingButtonText: 'Continue Shopping',

  // Content
  popupHeadingText: 'Product added to cart!',
  showSuccessIcon: true,
  
  // Mobile
  showOnMobile: true,
  
  // Animation
  animationDuration: 300,
  autoCloseEnabled: false,
  autoCloseDelay: 5000,
  
  // Styling
  styles: defaultStyles,
}