<template>
  <div class="ivyforms-style-color-picker">
    <div
      ref="triggerRef"
      class="ivyforms-style-color-picker__trigger ivyforms-flex ivyforms-align-items-center ivyforms-justify-content-flex-end"
      @click.stop="togglePicker"
    >
      <slot name="reference" />
    </div>

    <Teleport to="body">
      <Transition name="el-fade-in-linear">
        <div v-if="showPicker" class="ivyforms-style-color-picker__overlay" @click="closePicker">
          <div class="ivyforms-style-color-picker__panel" :style="panelPosition" @click.stop>
            <ElColorPickerPanel
              v-model="hexColor"
              :predefine="colorSetSimple"
              @update:model-value="onColorChange"
            />
          </div>
        </div>
      </Transition>
    </Teleport>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { colorSetSimple } from '@/constants/colorSet'

const props = defineProps<{
  modelValue: string
}>()

const emit = defineEmits<{
  'update:modelValue': [value: string]
}>()

const showPicker = ref(false)
const hexColor = ref(props.modelValue || '')
const triggerRef = ref<HTMLElement | null>(null)

// Panel position with smart overflow detection
const panelPosition = computed(() => {
  if (!triggerRef.value) {
    return { top: 0, left: 0 }
  }
  const rect = triggerRef.value.getBoundingClientRect()
  const panelHeight = 350 // Approximate height of color picker panel
  const viewportHeight = window.innerHeight
  const spaceBelow = viewportHeight - rect.bottom
  const spaceAbove = rect.top

  // Position above if not enough space below
  const shouldPositionAbove = spaceBelow < panelHeight && spaceAbove > spaceBelow

  if (shouldPositionAbove) {
    return {
      bottom: `${viewportHeight - rect.top + 8}px`,
      left: `${rect.left}px`,
      top: 'auto',
    }
  }

  return {
    top: `${rect.bottom + 8}px`,
    left: `${rect.left}px`,
  }
})

const onColorChange = (color: string) => {
  hexColor.value = color
  emit('update:modelValue', color)
}

// Initialize from modelValue
watch(
  () => props.modelValue,
  (newValue) => {
    if (newValue) {
      hexColor.value = newValue
    }
  },
)

// Toggle picker visibility
const togglePicker = () => {
  showPicker.value = !showPicker.value
}

// Close picker when clicking outside
const closePicker = () => {
  showPicker.value = false
}
</script>

<style lang="scss">
.ivyforms-style-color-picker {
  position: relative;
  display: inline-block;
  width: 100%;

  &__trigger {
    cursor: pointer;
    pointer-events: auto;
    width: 100%;
  }

  &__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1999;
  }

  &__panel {
    position: fixed;
    z-index: 2000;

    .el-color-picker-panel {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .el-color-picker-panel__wrapper,
    .el-color-picker-panel__body {
      padding: 0;
    }

    /* Hide footer input/editor inside the teleported panel. */
    .el-color-picker-panel__footer,
    .el-color-picker-panel__footer .el-input,
    .el-color-picker-panel__footer input,
    .el-color-picker-panel__footer .el-input__inner {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
    }

    /* Also ensure any `.el-input` inside the panel is hidden */
    .el-input,
    .el-input__inner {
      display: none !important;
    }
  }
}

.el-fade-in-linear-enter-active,
.el-fade-in-linear-leave-active {
  transition: opacity 0.2s ease;
}

.el-fade-in-linear-enter-from,
.el-fade-in-linear-leave-to {
  opacity: 0;
}

.ivyforms-color-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 240px;

  .ivyforms-color-text-input :is(.el-input__wrapper, .el-input__inner) {
    padding-right: 44px !important;
  }
}

.ivyforms-style-color-picker {
  .ivyforms-color-preview {
    width: 22px !important;
    height: 22px !important;
    background-clip: padding-box !important;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 1px solid var(--map-base-dusk-stroke--2);
    cursor: pointer;
    z-index: 10;
    pointer-events: auto;
    transition: transform 0.15s ease;

    &:hover {
      transform: translateY(-50%) scale(1.05);
    }
  }
}
</style>
