<template>
  <div
    class="absolute inset-0 pointer-events-none"
    :style="{
      opacity: opacity,
      backgroundImage: `url('${patternSvg}')`,
      backgroundSize: size
    }"
  />
</template>

<script setup>
const props = defineProps({
  /** Pattern type */
  pattern: {
    type: String,
    default: 'dots',
    validator: (v) => ['dots', 'grid', 'diagonal', 'topography', 'circuit', 'waves'].includes(v),
  },
  /** Pattern opacity (0-1) */
  opacity: {
    type: Number,
    default: 0.05,
  },
  /** Background size */
  size: {
    type: String,
    default: 'auto',
  },
  /** Pattern color */
  color: {
    type: String,
    default: 'currentColor',
  },
});

const patterns = {
  dots: (color) => `data:image/svg+xml,${encodeURIComponent(`
    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <circle cx="2" cy="2" r="1" fill="${color}"/>
    </svg>
  `)}`,

  grid: (color) => `data:image/svg+xml,${encodeURIComponent(`
    <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 0h40v40H0z" fill="none" stroke="${color}" stroke-width="0.5"/>
    </svg>
  `)}`,

  diagonal: (color) => `data:image/svg+xml,${encodeURIComponent(`
    <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 40L40 0" stroke="${color}" stroke-width="0.5"/>
    </svg>
  `)}`,

  topography: (color) => `data:image/svg+xml,${encodeURIComponent(`
    <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 50 Q25 30 50 50 T100 50" stroke="${color}" fill="none" stroke-width="0.5"/>
      <path d="M0 70 Q25 50 50 70 T100 70" stroke="${color}" fill="none" stroke-width="0.5"/>
      <path d="M0 30 Q25 10 50 30 T100 30" stroke="${color}" fill="none" stroke-width="0.5"/>
    </svg>
  `)}`,

  circuit: (color) => `data:image/svg+xml,${encodeURIComponent(`
    <svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
      <path d="M30 0v20M30 40v20M0 30h20M40 30h20" stroke="${color}" stroke-width="0.5" fill="none"/>
      <circle cx="30" cy="30" r="3" stroke="${color}" fill="none" stroke-width="0.5"/>
    </svg>
  `)}`,

  waves: (color) => `data:image/svg+xml,${encodeURIComponent(`
    <svg width="100" height="20" viewBox="0 0 100 20" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 10 Q25 0 50 10 T100 10" stroke="${color}" fill="none" stroke-width="0.5"/>
    </svg>
  `)}`,
};

const patternSvg = computed(() => {
  // Use fully opaque color - opacity is controlled by the wrapper element
  const colorValue = props.color === 'currentColor' ? 'rgb(0,0,0)' : props.color;
  return patterns[props.pattern]?.(colorValue) || patterns.dots(colorValue);
});
</script>
