import { v4 } from "uuid";
import { AlertCircle, X, Search } from "lucide-vue-next";
import { resolveComponent, mergeProps, useSSRContext } from "vue";
import { ssrRenderAttrs, ssrRenderAttr, ssrInterpolate, ssrRenderComponent, ssrRenderList, ssrRenderClass } from "vue/server-renderer";
import { _ as _export_sfc } from "./FlashMessages-DUb4hfI8.js";
const _sfc_main = {
  inheritAttrs: false,
  components: {
    Search,
    X,
    AlertCircle
  },
  props: {
    id: {
      type: String,
      default() {
        return `search-input-${v4()}`;
      }
    },
    modelValue: String,
    label: String,
    placeholder: String,
    helperText: String,
    error: String,
    disabled: {
      type: Boolean,
      default: false
    },
    isLoading: {
      type: Boolean,
      default: false
    },
    disableReset: {
      type: Boolean,
      default: false
    },
    autocomplete: {
      type: String,
      default: "off"
    },
    size: {
      type: String,
      default: "md",
      validator: (value) => ["sm", "md", "lg"].includes(value)
    },
    showResultsCount: {
      type: Boolean,
      default: false
    },
    resultsCount: {
      type: Number,
      default: null
    },
    showSuggestions: {
      type: Boolean,
      default: false
    },
    suggestions: {
      type: Array,
      default: () => []
    },
    debounceMs: {
      type: Number,
      default: 300
    }
  },
  emits: ["update:modelValue", "reset", "focus", "blur", "keydown", "enter", "search", "suggestion-select"],
  data() {
    return {
      isFocused: false,
      selectedSuggestion: -1,
      debounceTimer: null
    };
  },
  watch: {
    modelValue(newValue) {
      if (this.debounceMs > 0) {
        clearTimeout(this.debounceTimer);
        this.debounceTimer = setTimeout(() => {
          this.$emit("search", newValue);
        }, this.debounceMs);
      } else {
        this.$emit("search", newValue);
      }
    }
  },
  mounted() {
    document.addEventListener("click", this.handleClickOutside);
  },
  beforeUnmount() {
    document.removeEventListener("click", this.handleClickOutside);
    if (this.debounceTimer) {
      clearTimeout(this.debounceTimer);
    }
  },
  methods: {
    onInput(event) {
      this.$emit("update:modelValue", event.target.value);
      this.selectedSuggestion = -1;
    },
    onFocus(event) {
      this.isFocused = true;
      this.$emit("focus", event);
    },
    onBlur(event) {
      setTimeout(() => {
        this.isFocused = false;
        this.selectedSuggestion = -1;
        this.$emit("blur", event);
      }, 150);
    },
    onKeydown(event) {
      this.$emit("keydown", event);
      if (event.key === "Enter") {
        if (this.selectedSuggestion >= 0 && this.suggestions[this.selectedSuggestion]) {
          this.selectSuggestion(this.suggestions[this.selectedSuggestion]);
        } else {
          this.$emit("enter", event);
        }
      } else if (event.key === "ArrowDown") {
        event.preventDefault();
        this.selectedSuggestion = Math.min(this.selectedSuggestion + 1, this.suggestions.length - 1);
      } else if (event.key === "ArrowUp") {
        event.preventDefault();
        this.selectedSuggestion = Math.max(this.selectedSuggestion - 1, -1);
      } else if (event.key === "Escape") {
        this.isFocused = false;
        this.selectedSuggestion = -1;
        this.$refs.input.blur();
      }
    },
    clearSearch() {
      this.$emit("update:modelValue", "");
      this.$emit("reset");
      this.selectedSuggestion = -1;
      this.focus();
    },
    selectSuggestion(suggestion) {
      this.$emit("update:modelValue", suggestion);
      this.$emit("suggestion-select", suggestion);
      this.isFocused = false;
      this.selectedSuggestion = -1;
    },
    handleClickOutside(event) {
      if (!this.$el.contains(event.target)) {
        this.isFocused = false;
        this.selectedSuggestion = -1;
      }
    },
    focus() {
      this.$refs.input.focus();
    },
    blur() {
      this.$refs.input.blur();
    },
    select() {
      this.$refs.input.select();
    }
  }
};
function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
  const _component_Search = resolveComponent("Search");
  const _component_X = resolveComponent("X");
  const _component_AlertCircle = resolveComponent("AlertCircle");
  _push(`<div${ssrRenderAttrs(mergeProps({
    class: ["relative", _ctx.$attrs.class]
  }, _attrs))}>`);
  if ($props.label) {
    _push(`<label${ssrRenderAttr("for", $props.id)} class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">${ssrInterpolate($props.label)}</label>`);
  } else {
    _push(`<!---->`);
  }
  _push(`<div class="relative"><div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">`);
  _push(ssrRenderComponent(_component_Search, { class: "w-4 h-4 text-slate-400 dark:text-slate-500" }, null, _parent));
  _push(`</div><input${ssrRenderAttrs(mergeProps({
    id: $props.id,
    ref: "input"
  }, { ..._ctx.$attrs, class: null }, {
    class: [
      "w-full pl-10 pr-10 py-3 bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 rounded-lg text-sm text-slate-900 dark:text-white placeholder-slate-500 dark:placeholder-slate-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200",
      $props.error ? "border-red-500 dark:border-red-400 focus:ring-red-500 focus:border-red-500" : "",
      $props.disabled ? "bg-slate-50 dark:bg-slate-800 text-slate-500 dark:text-slate-400 cursor-not-allowed" : "",
      $props.size === "sm" ? "pl-8 pr-8 py-2 text-xs" : "",
      $props.size === "lg" ? "pl-12 pr-12 py-4 text-base" : ""
    ],
    type: "text",
    name: "search",
    placeholder: $props.placeholder || _ctx.$t("Search..."),
    value: $props.modelValue,
    disabled: $props.disabled,
    autocomplete: $props.autocomplete
  }))}>`);
  if (!$props.disableReset && $props.modelValue && !$props.disabled) {
    _push(`<button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors duration-200 group">`);
    _push(ssrRenderComponent(_component_X, { class: "w-4 h-4 group-hover:scale-110 transition-transform duration-200" }, null, _parent));
    _push(`</button>`);
  } else {
    _push(`<!---->`);
  }
  if ($props.isLoading) {
    _push(`<div class="absolute inset-y-0 right-3 flex items-center"><div class="animate-spin rounded-full h-4 w-4 border-2 border-slate-300 border-t-blue-600"></div></div>`);
  } else {
    _push(`<!---->`);
  }
  if ($props.showResultsCount && $props.resultsCount !== null) {
    _push(`<div class="absolute inset-y-0 right-3 flex items-center"><span class="text-xs text-slate-500 dark:text-slate-400 bg-slate-100 dark:bg-slate-600 px-2 py-1 rounded-full">${ssrInterpolate($props.resultsCount)}</span></div>`);
  } else {
    _push(`<!---->`);
  }
  _push(`</div>`);
  if ($props.helperText && !$props.error) {
    _push(`<div class="mt-2 text-sm text-slate-500 dark:text-slate-400">${ssrInterpolate($props.helperText)}</div>`);
  } else {
    _push(`<!---->`);
  }
  if ($props.error) {
    _push(`<div class="mt-2 flex items-center gap-2 text-sm text-red-600 dark:text-red-400">`);
    _push(ssrRenderComponent(_component_AlertCircle, { class: "w-4 h-4 flex-shrink-0" }, null, _parent));
    _push(`<span>${ssrInterpolate($props.error)}</span></div>`);
  } else {
    _push(`<!---->`);
  }
  if ($props.showSuggestions && $props.suggestions.length > 0 && $data.isFocused) {
    _push(`<div class="absolute z-50 w-full mt-1 bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 rounded-lg shadow-lg max-h-60 overflow-y-auto"><div class="py-1"><!--[-->`);
    ssrRenderList($props.suggestions, (suggestion, index) => {
      _push(`<div class="${ssrRenderClass([
        "px-4 py-3 text-sm cursor-pointer transition-colors duration-150 flex items-center gap-3",
        $data.selectedSuggestion === index ? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300" : "text-slate-900 dark:text-white hover:bg-slate-50 dark:hover:bg-slate-600"
      ])}">`);
      _push(ssrRenderComponent(_component_Search, { class: "w-4 h-4 text-slate-400" }, null, _parent));
      _push(`<span>${ssrInterpolate(suggestion)}</span></div>`);
    });
    _push(`<!--]--></div></div>`);
  } else {
    _push(`<!---->`);
  }
  _push(`</div>`);
}
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("resources/js/Shared/SearchInput.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
const SearchInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["ssrRender", _sfc_ssrRender]]);
export {
  SearchInput as S
};
