<template>
  <div class="relative inline-block text-left" ref="dropdownRef">
    <!-- Trigger Button -->
    <button
      @click="toggleDropdown"
      class="inline-flex items-center justify-center w-8 h-8 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
      :aria-expanded="isOpen"
      aria-haspopup="true"
    >
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
        <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
      </svg>
    </button>

    <!-- Dropdown Menu -->
    <Teleport to="body">
      <div
        v-if="isOpen"
        :style="dropdownStyle"
        class="absolute z-50 mt-1 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none min-w-[120px]"
        role="menu"
        aria-orientation="vertical"
      >
        <div class="py-1" role="none">
          <slot :close="closeDropdown" />
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'

const props = defineProps({
  placement: {
    type: String,
    default: 'bottom-end' // bottom-start, bottom-end, top-start, top-end
  }
})

const dropdownRef = ref(null)
const isOpen = ref(false)
const dropdownStyle = ref({})

const toggleDropdown = async () => {
  isOpen.value = !isOpen.value
  
  if (isOpen.value) {
    await nextTick()
    calculatePosition()
  }
}

const closeDropdown = () => {
  isOpen.value = false
}

const calculatePosition = () => {
  if (!dropdownRef.value) return
  
  const rect = dropdownRef.value.getBoundingClientRect()
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop
  const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
  
  let top, left
  
  switch (props.placement) {
    case 'bottom-start':
      top = rect.bottom + scrollTop
      left = rect.left + scrollLeft
      break
    case 'bottom-end':
      top = rect.bottom + scrollTop
      left = rect.right + scrollLeft - 120 // Approximate dropdown width
      break
    case 'top-start':
      top = rect.top + scrollTop - 40 // Approximate dropdown height
      left = rect.left + scrollLeft
      break
    case 'top-end':
      top = rect.top + scrollTop - 40
      left = rect.right + scrollLeft - 120
      break
    default:
      top = rect.bottom + scrollTop
      left = rect.right + scrollLeft - 120
  }
  
  dropdownStyle.value = {
    position: 'absolute',
    top: `${top}px`,
    left: `${left}px`,
    zIndex: 50
  }
}

// Close dropdown when clicking outside
const handleClickOutside = (event) => {
  if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
    closeDropdown()
  }
}

// Close dropdown on escape key
const handleEscape = (event) => {
  if (event.key === 'Escape' && isOpen.value) {
    closeDropdown()
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
  document.addEventListener('keydown', handleEscape)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
  document.removeEventListener('keydown', handleEscape)
})
</script>

<style scoped>
/* Ensure dropdown appears above other elements */
.z-50 {
  z-index: 50;
}
</style>
