<template>
  <section
    :class="[
      'relative overflow-hidden',
      paddingClasses,
      bgColorClasses
    ]"
  >
    <!-- Background Pattern -->
    <XMarkPatternBg
      v-if="resolvedBg.pattern"
      :pattern="resolvedBg.pattern"
      :opacity="resolvedBg.patternOpacity"
      class="absolute inset-0 pointer-events-none"
    />

    <!-- Background Image -->
    <div
      v-if="resolvedBg.image"
      class="absolute inset-0"
      :class="{ 'xParallax': resolvedBg.parallax }"
      :data-parallax-speed="resolvedBg.parallaxSpeed"
    >
      <img
        :src="resolvedBg.image"
        :alt="resolvedBg.imageAlt"
        class="w-full h-full object-cover"
        :class="resolvedBg.imagePosition"
      />
      <div
        v-if="resolvedBg.imageOverlay"
        class="absolute inset-0"
        :class="bgImageOverlayClass"
      />
    </div>

    <!-- Custom Background Slot -->
    <slot name="background" />

    <!-- Content -->
    <div
      class="relative z-10"
      :class="containerClasses"
    >
      <slot />
    </div>
  </section>
</template>

<script setup>
const props = defineProps({
  /**
   * Background configuration object
   * @property {string} variant - 'default' | 'subtle' | 'elevated' | 'bold' | 'transparent'
   * @property {string} color - Custom Tailwind classes (overrides variant)
   * @property {string} image - Background image URL
   * @property {string} imageAlt - Background image alt text
   * @property {string} imageOverlay - 'light' | 'heavy' | 'gradient'
   * @property {string} imagePosition - Tailwind object-position class
   * @property {string} pattern - 'dots' | 'grid' | 'diagonal' | 'topography' | 'circuit' | 'waves'
   * @property {number} patternOpacity - Pattern opacity (0-1)
   * @property {boolean} parallax - Enable parallax on bg image
   * @property {number} parallaxSpeed - Parallax intensity (0.1 - 1.0)
   */
  bg: {
    type: [Object, String],
    default: () => ({}),
  },
  /** Vertical padding size */
  padding: {
    type: String,
    default: 'lg',
    validator: (v) => ['none', 'xs', 'sm', 'md', 'lg', 'xl'].includes(v),
  },
  /** Max-width container size */
  container: {
    type: String,
    default: 'lg',
    validator: (v) => ['sm', 'md', 'lg', 'xl', 'full', 'none'].includes(v),
  },
});

// Default bg values
const bgDefaults = {
  variant: 'default',
  color: '',
  image: '',
  imageAlt: '',
  imageOverlay: '',
  imagePosition: 'object-center',
  pattern: '',
  patternOpacity: 0.05,
  parallax: false,
  parallaxSpeed: 0.3,
};

// Resolve bg prop (supports string shorthand for variant or full object)
const resolvedBg = computed(() => {
  if (typeof props.bg === 'string') {
    return { ...bgDefaults, variant: props.bg };
  }
  return { ...bgDefaults, ...props.bg };
});

const paddingClasses = computed(() => {
  const sizes = {
    none: '',
    xs: 'py-8 md:py-10',
    sm: 'py-12 md:py-16',
    md: 'py-16 md:py-20',
    lg: 'py-20 md:py-28 lg:py-32',
    xl: 'py-28 md:py-36 lg:py-40',
  };
  return sizes[props.padding];
});

const bgColorClasses = computed(() => {
  // Custom color class takes priority
  if (resolvedBg.value.color) return resolvedBg.value.color;

  const colors = {
    default: 'bg-white dark:bg-neutral-950',
    subtle: 'bg-neutral-50 dark:bg-neutral-900',
    elevated: 'bg-primary-50/50 dark:bg-primary-950/20',
    bold: 'bg-neutral-950 dark:bg-white text-white dark:text-neutral-950',
    transparent: 'bg-transparent',
  };
  return colors[resolvedBg.value.variant] || colors.default;
});

const containerClasses = computed(() => {
  const containers = {
    sm: 'max-w-[42rem] mx-auto px-4 sm:px-6',
    md: 'max-w-[64rem] mx-auto px-4 sm:px-6 lg:px-8',
    lg: 'max-w-[80rem] mx-auto px-4 sm:px-6 lg:px-8',
    xl: 'max-w-[96rem] mx-auto px-4 sm:px-6 lg:px-8',
    full: 'w-full px-4 sm:px-6 lg:px-8',
    none: '',
  };
  return containers[props.container];
});

const bgImageOverlayClass = computed(() => {
  const overlays = {
    light: 'bg-black/30',
    heavy: 'bg-black/60',
    gradient: 'bg-gradient-to-t from-black/80 via-black/40 to-transparent',
  };
  return overlays[resolvedBg.value.imageOverlay] || '';
});
</script>
