<template>
  <div class="custom-input-container"
       :class="{ 'dark': isDark, 'focused': isFocused, 'disabled': disabled }">
    <div class="input-prefix" v-if="prefixIcon || $slots.prefix">
      <slot name="prefix">
        <i :class="prefixIcon" v-if="prefixIcon"></i>
      </slot>
    </div>

    <input
      ref="inputRef"
      :type="type"
      :value="modelValue"
      :placeholder="placeholder"
      :disabled="disabled"
      :readonly="readonly"
      :maxlength="maxlength"
      class="custom-input"
      @input="handleInput"
      @focus="handleFocus"
      @blur="handleBlur"
      @keydown="handleKeydown"
    />

    <div class="input-suffix" v-if="suffixIcon || $slots.suffix || clearable">
      <button
        v-if="clearable && modelValue && !disabled"
        class="clear-btn"
        @click="handleClear"
        type="button"
      >
        <i class="fas fa-times"></i>
      </button>
      <slot name="suffix">
        <i :class="suffixIcon" v-if="suffixIcon"></i>
      </slot>
    </div>
  </div>
</template>

<script setup>
import {ref, computed} from 'vue';
import {useThemeStore} from '../stores/theme.ts';

const themeStore = useThemeStore();

const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: ''
  },
  type: {
    type: String,
    default: 'text'
  },
  placeholder: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  },
  clearable: {
    type: Boolean,
    default: false
  },
  prefixIcon: {
    type: String,
    default: ''
  },
  suffixIcon: {
    type: String,
    default: ''
  },
  maxlength: {
    type: Number,
    default: undefined
  }
});

const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'clear', 'keydown']);

const inputRef = ref(null);
const isFocused = ref(false);

const isDark = computed(() => themeStore.isDarkMode);

const handleInput = (event) => {
  emit('update:modelValue', event.target.value);
};

const handleFocus = (event) => {
  isFocused.value = true;
  emit('focus', event);
};

const handleBlur = (event) => {
  isFocused.value = false;
  emit('blur', event);
};

const handleClear = () => {
  emit('update:modelValue', '');
  emit('clear');
  inputRef.value?.focus();
};

const handleKeydown = (event) => {
  emit('keydown', event);
};

const focus = () => {
  inputRef.value?.focus();
};

const blur = () => {
  inputRef.value?.blur();
};

defineExpose({
  focus,
  blur
});
</script>

<style scoped>
.custom-input-container {
  position: relative;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.custom-input-container:hover {
  border-color: #cbd5e1;
}

.custom-input-container.focused {
  border-color: #4361ee;
  box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.1);
}

.custom-input-container.disabled {
  background: #f8fafc;
  border-color: #e2e8f0;
  cursor: not-allowed;
}

.custom-input-container.dark {
  background: #374151;
  border-color: #4b5563;
}

.custom-input-container.dark:hover {
  border-color: #6b7280;
}

.custom-input-container.dark.focused {
  border-color: #4361ee;
  box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.2);
}

.custom-input-container.dark.disabled {
  background: #1f2937;
  border-color: #374151;
}

.input-prefix,
.input-suffix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: #64748b;
  font-size: 14px;
}

.custom-input-container.dark .input-prefix,
.custom-input-container.dark .input-suffix {
  color: #9ca3af;
}

.custom-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 12px 16px;
  font-size: 14px;
  color: #1a202c;
  line-height: 1.5;
}

.custom-input::placeholder {
  color: #94a3b8;
}

.custom-input:disabled {
  cursor: not-allowed;
  color: #94a3b8;
}

.custom-input-container.dark .custom-input {
  color: #f7fafc;
}

.custom-input-container.dark .custom-input::placeholder {
  color: #6b7280;
}

.custom-input-container.dark .custom-input:disabled {
  color: #6b7280;
}

.clear-btn {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clear-btn:hover {
  color: #64748b;
  background: #f1f5f9;
}

.custom-input-container.dark .clear-btn:hover {
  color: #d1d5db;
  background: #4b5563;
}
</style>
