<template>
  <div class="input-wrapper">
    <label v-if="label" :for="id" class="input-label">
      {{ label }}
      <span v-if="required" class="required-mark">*</span>
      <span v-if="maxLength" class="char-limit">({{ maxLength }} characters)</span>
      <div v-if="helpButton" class="help-button-container">
        <button @click="toggleHelpTooltip" type="button" class="help-button" :title="'Help'">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"></circle>
            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
            <path d="M12 17h.01"></path>
          </svg>
        </button>
        <div v-if="showHelpTooltip" class="help-tooltip">
          <div class="help-tooltip-content">
            <p class="help-tooltip-text">{{ helpText }}</p>
            <a v-if="helpUrl" @click="openHelpUrl" class="help-tooltip-link">Learn more</a>
          </div>
        </div>
      </div>
    </label>
    
    <div class="input-container">
      <select
        v-if="type === 'select'"
        :id="id"
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)"
        @blur="$emit('blur', $event)"
        @focus="$emit('focus', $event)"
        :disabled="disabled"
        :required="required"
        class="base-input select-input"
        :class="{ 'has-error': error }"
      >
        <option value="">{{ placeholder || 'Select option' }}</option>
        <option
          v-for="option in options"
          :key="option.value"
          :value="option.value"
        >
          {{ option.label }}
        </option>
      </select>

      <input
        v-else
        :id="id"
        :type="type"
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)"
        @blur="$emit('blur', $event)"
        @focus="$emit('focus', $event)"
        :placeholder="placeholder"
        :disabled="disabled"
        :required="required"
        :maxlength="maxLength"
        class="base-input"
        :class="{ 'has-error': error }"
      >
    </div>

    <p v-if="error" class="error-message">{{ error }}</p>
    <p v-if="helpText && !helpButton" class="help-text">{{ helpText }}</p>
  </div>
</template>

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

// Get props access
const props = defineProps({
  id: {
    type: String,
    required: true
  },
  modelValue: {
    type: [String, Number],
    default: ''
  },
  label: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'text'
  },
  placeholder: {
    type: String,
    default: ''
  },
  required: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  error: {
    type: String,
    default: ''
  },
  helpText: {
    type: String,
    default: ''
  },
  maxLength: {
    type: Number,
    default: null
  },
  options: {
    type: Array,
    default: () => []
  },
  helpButton: {
    type: Boolean,
    default: false
  },
  helpUrl: {
    type: String,
    default: ''
  }
});

defineEmits(['update:modelValue', 'blur', 'focus']);

// Help tooltip state
const showHelpTooltip = ref(false)
let autoHideTimeout = null

// Help button functionality
const toggleHelpTooltip = () => {
  showHelpTooltip.value = !showHelpTooltip.value

  if (showHelpTooltip.value) {
    // Auto-hide after 5 seconds
    autoHideTimeout = setTimeout(() => {
      showHelpTooltip.value = false
    }, 5000)
  } else {
    // Clear timeout if manually closed
    if (autoHideTimeout) {
      clearTimeout(autoHideTimeout)
      autoHideTimeout = null
    }
  }
}

const openHelpUrl = () => {
  if (props.helpUrl) {
    window.open(props.helpUrl, '_blank', 'noopener,noreferrer')
  }
  // Close tooltip after opening link
  hideTooltip()
}

const hideTooltip = () => {
  showHelpTooltip.value = false
  if (autoHideTimeout) {
    clearTimeout(autoHideTimeout)
    autoHideTimeout = null
  }
}

// Click outside to close
const handleClickOutside = (event) => {
  const helpContainer = event.target.closest('.help-button-container')
  if (!helpContainer && showHelpTooltip.value) {
    hideTooltip()
  }
}

// Lifecycle hooks
onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
  if (autoHideTimeout) {
    clearTimeout(autoHideTimeout)
  }
})
</script>

<style scoped>
.input-wrapper {
  display: flex;
  flex-direction: column;
}

.input-label {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.help-button-container {
  position: relative;
  display: inline-block;
}

.help-button {
  background: none;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 0.25rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease-in-out;
}

.help-button:hover {
  color: #374151;
  background-color: #f3f4f6;
}

.help-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.help-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  margin-top: 0.5rem;
  min-width: 200px;
  max-width: 300px;
}

.help-tooltip-content {
  background: #374151;
  color: white;
  padding: 0.75rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  position: relative;
}

.help-tooltip-content::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #374151;
}

.help-tooltip-text {
  margin: 0 0 0.5rem 0;
  font-size: 0.875rem;
  line-height: 1.4;
}

.help-tooltip-link {
  color: #93c5fd;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.875rem;
  display: inline-block;
}

.help-tooltip-link:hover {
  color: #dbeafe;
}

.required-mark {
  color: #dc2626;
}

.char-limit {
  color: #6b7280;
  font-size: 0.8rem;
}

.base-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
}

.has-error {
  border-color: #dc2626;
}

.error-message {
  color: #dc2626;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.help-text {
  color: #6b7280;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}
</style>