<template>
  <div
    class="relative w-full overflow-hidden"
    :style="{ height: heightValue }"
  >
    <svg
      class="absolute inset-0 w-full h-full"
      :class="{ 'scale-x-[-1]': reverse, 'scale-y-[-1]': invert }"
      preserveAspectRatio="none"
      :viewBox="`0 0 1200 ${viewBoxHeight}`"
      xmlns="http://www.w3.org/2000/svg"
    >
      <!-- Full background with top color -->
      <rect x="0" y="0" width="1200" :height="viewBoxHeight" :fill="topColor" />
      <!-- Shape path with bottom color -->
      <path :d="pathData" :fill="bottomColor" />
    </svg>

    <!-- Glow line -->
    <div
      v-if="glow"
      class="absolute left-0 right-0 h-px"
      :style="glowLineStyle"
    />
  </div>
</template>

<script setup>
const props = defineProps({
  /** Shape variant */
  variant: {
    type: String,
    default: 'diagonal',
    validator: (v) => ['concave', 'convex', 'diagonal', 'slant', 'clouds', 'waves', 'tilt', 'peaks', 'scallop', 'arrow'].includes(v),
  },
  /** Top section color */
  topColor: {
    type: String,
    default: 'rgb(243 244 246)',
  },
  /** Bottom section color */
  bottomColor: {
    type: String,
    default: 'rgb(249 250 251)',
  },
  /** Height size */
  height: {
    type: String,
    default: 'md',
    validator: (v) => ['sm', 'md', 'lg', 'xl', '2xl', '3xl'].includes(v),
  },
  /** Reverse direction (flip horizontally) */
  reverse: {
    type: Boolean,
    default: false,
  },
  /** Invert vertically (swap top/bottom) */
  invert: {
    type: Boolean,
    default: false,
  },
  /** Show glow line */
  glow: {
    type: Boolean,
    default: false,
  },
  /** Glow line color */
  glowColor: {
    type: String,
    default: 'rgba(99, 102, 241, 0.5)',
  },
})

const heightValue = computed(() => {
  const heights = {
    sm: '40px',
    md: '64px',
    lg: '96px',
    xl: '128px',
    '2xl': '160px',
    '3xl': '200px',
  }
  return heights[props.height]
})

const viewBoxHeight = computed(() => {
  const heights = {
    sm: 80,
    md: 120,
    lg: 160,
    xl: 200,
    '2xl': 240,
    '3xl': 280,
  }
  return heights[props.height]
})

const pathData = computed(() => {
  const h = viewBoxHeight.value
  const mid = h / 2

  const paths = {
    // Full diagonal from top-left corner to bottom-right corner
    diagonal: `M0 0 L1200 ${h} L0 ${h} Z`,

    // Slant - opposite direction, from top-right to bottom-left
    slant: `M1200 0 L1200 ${h} L0 ${h} Z`,

    // Concave - curves inward (scoops down)
    concave: `M0 ${mid} Q600 ${h} 1200 ${mid} L1200 ${h} L0 ${h} Z`,

    // Convex - curves outward (bulges up)
    convex: `M0 ${mid} Q600 0 1200 ${mid} L1200 ${h} L0 ${h} Z`,

    // Tilt - gentle diagonal (less steep than full diagonal)
    tilt: `M0 0 L1200 ${mid + 20} L1200 ${h} L0 ${h} Z`,

    // Waves - multiple wave pattern
    waves: `M0 ${mid}
      Q150 ${mid - 30} 300 ${mid}
      T600 ${mid}
      T900 ${mid}
      T1200 ${mid}
      L1200 ${h} L0 ${h} Z`,

    // Clouds - fluffy bumps
    clouds: `M0 ${mid + 20}
      Q100 ${mid - 40} 200 ${mid + 10}
      Q300 ${mid - 50} 400 ${mid + 15}
      Q500 ${mid - 45} 600 ${mid + 5}
      Q700 ${mid - 55} 800 ${mid + 20}
      Q900 ${mid - 40} 1000 ${mid + 10}
      Q1100 ${mid - 50} 1200 ${mid + 15}
      L1200 ${h} L0 ${h} Z`,

    // Peaks - mountain-like
    peaks: `M0 ${mid + 20}
      L200 ${mid - 30}
      L400 ${mid + 10}
      L600 ${mid - 40}
      L800 ${mid + 5}
      L1000 ${mid - 25}
      L1200 ${mid + 15}
      L1200 ${h} L0 ${h} Z`,

    // Scallop - repeating curves
    scallop: `M0 ${mid}
      Q100 ${mid - 40} 200 ${mid}
      Q300 ${mid - 40} 400 ${mid}
      Q500 ${mid - 40} 600 ${mid}
      Q700 ${mid - 40} 800 ${mid}
      Q900 ${mid - 40} 1000 ${mid}
      Q1100 ${mid - 40} 1200 ${mid}
      L1200 ${h} L0 ${h} Z`,

    // Arrow - pointed center
    arrow: `M0 ${mid + 20} L600 ${mid - 50} L1200 ${mid + 20} L1200 ${h} L0 ${h} Z`,
  }
  return paths[props.variant]
})

const glowLineStyle = computed(() => {
  return {
    top: '50%',
    transform: 'translateY(-50%)',
    background: props.glowColor,
    boxShadow: `0 0 8px ${props.glowColor}, 0 0 16px ${props.glowColor}`,
  }
})
</script>
