<template>
  <div
    class="barneo-search-widget"
    :class="{
      'barneo-search-widget--dark': mergedConfig.darkMode === true,
      'barneo-search-widget--light': mergedConfig.darkMode === false,
      'barneo-search-widget--focus-enabled': mergedConfig.focusMode === true,
    }"
  >
    <!-- Поле ввода поиска -->
    <slot
      name="search-input"
      :search-query="searchQuery"
      :config="mergedConfig"
      :handle-input="handleInput"
      :handle-focus="handleFocus"
      :handle-blur="handleBlur"
      :handle-click="handleClick"
      :handle-search="handleSearch"
      :handle-clear="handleClear"
      :hide-suggestions="hideSuggestions"
    >
      <div class="search-input-container">
        <div class="search-input-wrapper">
          <input
            :value="searchQuery"
            @input="handleInput"
            type="text"
            class="search-input"
            :class="{
              'search-input--has-clear':
                mergedConfig.showClearButton !== false && searchQuery,
            }"
            :placeholder="mergedConfig.placeholder"
            @focus="handleFocus"
            @blur="handleBlur"
            @click="handleClick"
            @keydown.enter="enhancedHandleSearch"
            @keydown.escape="hideSuggestions"
          />
          <!-- Кнопка очистки -->
          <button
            v-if="mergedConfig.showClearButton !== false && searchQuery"
            @click="handleClear"
            @mousedown.prevent
            class="search-input__clear"
            type="button"
            :title="`Очистить поле поиска`"
          >
            <svg
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M18 6L6 18M6 6L18 18"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </button>
        </div>
        <!-- Кнопка поиска -->
        <button
          @click="enhancedHandleSearch"
          class="search-button"
          type="button"
          :title="`Найти товары`"
        >
          <svg
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M21 21L16.514 16.506L21 21ZM19 10.5C19 15.194 15.194 19 10.5 19C5.806 19 2 15.194 2 10.5C2 5.806 5.806 2 10.5 2C15.194 2 19 5.806 19 10.5Z"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </button>
      </div>
    </slot>

    <!-- Выпадающее окно с предложениями -->
    <div
      v-show="showSuggestions"
      class="suggestions-dropdown"
      @mousedown.prevent
    >
      <!-- История поиска (показываем только при пустом инпуте) -->
      <slot
        name="search-history"
        :history-queries="historyQueries"
        :clear-history="clearHistory"
        :select-history-query="selectHistoryQuery"
        :delete-history-query="deleteHistoryQuery"
        :is-loading="isLoading"
      >
        <div
          v-if="!isLoading && !hasSearchResults && isEmptyQuery && hasHistory"
          class="suggestion-section"
        >
          <div class="section-header">
            <h4 class="section-title">Вы недавно искали</h4>
            <button
              class="clear-button"
              @click="clearHistory"
              @mousedown.prevent
              type="button"
            >
              Очистить
            </button>
          </div>
          <div class="history-list">
            <div
              v-for="query in historyQueries"
              :key="query"
              class="history-item-container"
            >
              <button
                @click="selectHistoryQuery(query)"
                @mousedown.prevent
                class="history-item"
                type="button"
              >
                <svg
                  class="history-icon"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M12 8V12L15 15"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                  <path
                    d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
                    stroke="currentColor"
                    stroke-width="2"
                  />
                </svg>
                <span class="history-text">{{ query }}</span>
              </button>
              <button
                @click="deleteHistoryQuery(query)"
                @mousedown.prevent
                class="history-delete-button"
                type="button"
                :title="`Удалить ${query} из истории`"
              >
                <svg
                  width="14"
                  height="14"
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M18 6L6 18M6 6L18 18"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </slot>

      <!-- Поисковые подсказки (показываем только при наличии результатов поиска) -->
      <slot
        name="search-hints"
        :product-hints="productHints"
        :full-hints="fullHints"
        :select-hint="selectHint"
        :select-hint-by-full-text="selectHintByFullText"
        :select-full-hint="selectFullHint"
        :is-loading="isLoading"
      >
        <div
          v-if="!isLoading && hasSearchResults && hasProductHints"
          class="suggestion-section"
        >
          <h4 class="section-title">Поисковые подсказки</h4>
          <div class="popular-queries">
            <button
              v-for="hint in productHints"
              :key="hint.word"
              @click="selectHint(hint)"
              @mousedown.prevent
              class="query-tag"
              type="button"
            >
              {{ hint.word }}
            </button>
          </div>
          <div class="hint-list">
            <button
              v-for="hint in fullHints"
              :key="hint"
              @click="selectFullHint(hint)"
              @mousedown.prevent
              class="hint-item"
              type="button"
            >
              <svg
                class="hint-icon"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M21 21L16.514 16.506L21 21ZM19 10.5C19 15.194 15.194 19 10.5 19C5.806 19 2 15.194 2 10.5C2 5.806 5.806 2 10.5 2C15.194 2 19 5.806 19 10.5Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
              <span class="hint-text">
                <strong>{{ searchQuery }}</strong
                >{{ hint.substring(searchQuery.length) }}
              </span>
            </button>
          </div>
        </div>
      </slot>

      <!-- Популярные запросы (показываем только если нет результатов поиска) -->
      <slot
        name="popular-queries"
        :popular-queries="popularQueries"
        :select-query="selectQuery"
        :is-loading="isLoading"
      >
        <div
          v-if="!isLoading && !hasSearchResults && hasPopularQueries"
          class="suggestion-section"
        >
          <h4 class="section-title">Популярные запросы</h4>
          <div class="popular-queries">
            <button
              v-for="query in popularQueries"
              :key="query"
              @click="selectQuery(query)"
              @mousedown.prevent
              class="query-tag"
              type="button"
            >
              {{ query }}
            </button>
          </div>
        </div>
      </slot>

      <!-- Популярные товары или результаты поиска -->
      <slot
        name="search-results"
        :search-results="searchResults"
        :has-search-results="hasSearchResults"
        :select-product="(product: any, event?: MouseEvent) => selectProduct(product, event)"
        :handle-aux-click="(product: any, event: MouseEvent) => handleAuxClick(product, event)"
        :format-price="formatPrice"
        :handle-image-error="handleImageError"
        :is-loading="isLoading"
      >
        <div
          v-if="!isLoading && hasSearchResults && hasSearchResultsData"
          class="suggestion-section"
        >
          <h4 class="section-title">Результаты поиска</h4>
          <div class="popular-products">
            <button
              v-for="product in searchResults"
              :key="product.id"
              @click="(event) => selectProduct(product, event)"
              @auxclick="(event) => handleAuxClick(product, event)"
              @mousedown.prevent
              class="product-item"
              type="button"
            >
              <div class="product-image">
                <div v-if="!product.picture" class="product-placeholder">
                  🛍️
                </div>
                <img
                  v-else
                  :src="product.picture"
                  :alt="product.name"
                  @error="handleImageError"
                />
              </div>
              <div class="product-info">
                <div class="product-name">{{ product.name }}</div>
                <div v-if="product.price !== 0" class="product-price">
                  {{ formatPrice(product.price ?? 0) }}
                </div>
                <div v-else class="availability-out-of-stock">
                  нет в наличии
                </div>
              </div>
            </button>
          </div>
        </div>
      </slot>

      <!-- Сообщение "ничего не найдено" -->
      <slot
        name="no-results"
        :search-query="searchQuery"
        :has-search-results="hasSearchResults"
        :search-results="searchResults"
        :is-loading="isLoading"
      >
        <div
          v-if="!isLoading && hasSearchResults && searchResults.length === 0"
          class="suggestion-section"
        >
          <div class="no-results">
            <div class="no-results-icon">🔍</div>
            <div class="no-results-text">
              <div class="no-results-title">
                В результате поиска товары не были найдены
              </div>
              <div class="no-results-query">
                По запросу: <strong>"{{ searchQuery }}"</strong>
              </div>
              <div class="no-results-suggestions">
                Попробуйте изменить запрос или воспользуйтесь популярными
                товарами ниже
              </div>
            </div>
          </div>
        </div>
      </slot>

      <!-- Популярные товары (показываем только если не выполнялся поиск) -->
      <slot
        name="popular-products"
        :popular-products="popularProducts"
        :select-product="(product: any, event?: MouseEvent) => selectProduct(product, event)"
        :handle-aux-click="(product: any, event: MouseEvent) => handleAuxClick(product, event)"
        :format-price="formatPrice"
        :handle-image-error="handleImageError"
        :has-search-results="hasSearchResults"
        :search-results="searchResults"
        :is-loading="isLoading"
      >
        <div
          v-if="!isLoading && hasPopularProducts && !hasSearchResults"
          class="suggestion-section"
        >
          <h4 class="section-title">Популярные товары</h4>
          <div class="popular-products">
            <button
              v-for="product in popularProducts"
              :key="product.id"
              @click="(event) => selectProduct(product, event)"
              @auxclick="(event) => handleAuxClick(product, event)"
              @mousedown.prevent
              class="product-item"
              type="button"
            >
              <div class="product-image">
                <div v-if="!product.picture" class="product-placeholder">
                  🛍️
                </div>
                <img
                  v-else
                  :src="product.picture"
                  :alt="product.name"
                  @error="handleImageError"
                />
              </div>
              <div class="product-info">
                <div class="product-name">{{ product.name }}</div>
                <div class="product-price">
                  {{ formatPrice(product.price ?? 0) }}
                </div>
              </div>
            </button>
          </div>
        </div>
      </slot>

      <!-- Состояние загрузки -->
      <slot name="loading" :is-loading="isLoading">
        <div v-if="isLoading" class="loading-state">
          <!-- Скелетон для популярных запросов/подсказок -->
          <div class="suggestion-section">
            <h4 class="section-title skeleton-title"></h4>
            <div class="popular-queries">
              <div
                v-for="i in 5"
                :key="`tag-${i}`"
                class="skeleton-tag"
                :style="{ width: `${60 + i * 15}px` }"
              ></div>
            </div>
          </div>

          <!-- Скелетон для результатов поиска -->
          <div class="suggestion-section">
            <h4 class="section-title skeleton-title"></h4>
            <div class="popular-products">
              <div v-for="i in 5" :key="`product-${i}`" class="product-item">
                <div class="product-image skeleton-image"></div>
                <div class="product-info">
                  <div
                    class="skeleton-product-name"
                    :style="{ width: `${70 + i * 5}%` }"
                  ></div>
                  <div
                    class="skeleton-product-price"
                    :style="{ width: `${40 + i * 10}%` }"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </slot>

      <!-- Состояние ошибки -->
      <slot name="error" :error="error">
        <div v-if="error" class="error-state">
          <span>{{ error }}</span>
        </div>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import type {
  BarneoSearchWidgetProps,
  SearchWidgetEmits,
  SearchWidgetExpose,
} from "../types";
import { useSearchWidget } from "../composables/useSearchWidget";
import { useSearchStateManager } from "../../sharedState/composables/useSearchStateManager";
import { useSharedState } from "../../sharedState/composables/useSharedState";
import { useBarneoConfig } from "../../../config/BarneoConfigManager";
import { computed, onMounted, onUnmounted } from "vue";

/**
 * Пропсы с значениями по умолчанию
 */
const props = withDefaults(defineProps<BarneoSearchWidgetProps>(), {
  config: () => ({}), // Используем глобальную конфигурацию
});

/**
 * Эмиты компонента
 */
const emit = defineEmits<SearchWidgetEmits>();

// Получаем глобальную конфигурацию
const {
  searchWidgetConfig,
  productsWidgetConfig,
  apiService: globalApiService,
} = useBarneoConfig();

// Объединяем глобальную конфигурацию с пропсами
const mergedConfig = computed(() => ({
  ...searchWidgetConfig,
  ...props.config,
}));

// Используем основной composable для всей логики поиска
const {
  // Состояние
  searchQuery,
  showSuggestions,
  isFastLoading,
  error,
  historyQueries,
  popularQueries,
  popularProducts,
  searchResults,
  productHints,
  fullHints,
  hasSearchResults,

  // Вычисляемые свойства
  hasHistory,
  hasPopularQueries,
  hasPopularProducts,
  hasSearchResultsData,
  hasProductHints,
  hasFullHints,
  isEmptyQuery,

  // Обработчики событий
  handleInput,
  handleSearch,
  handleFocus,
  handleClick,
  handleBlur,
  hideSuggestions,
  handleClear,

  // Обработчики выбора
  selectHistoryQuery,
  selectQuery,
  selectHint,
  selectFullHint,
  selectHintByFullText,
  selectProduct,

  // Обработчики истории
  deleteHistoryQuery,
  clearHistory,

  // Утилиты
  formatPrice,
  handleImageError,
} = useSearchWidget(
  mergedConfig.value,
  props.apiService || globalApiService,
  emit
);

// Получаем sharedState для глобального состояния загрузки
const sharedState = useSharedState();

// Вычисляемое состояние загрузки: локальная для быстрых запросов + глобальная для глубоких
const isLoading = computed(
  () => isFastLoading.value || sharedState.searchState.isLoading
);

// Интеграция с sharedState через useSearchStateManager
const { performDeepSearch } = useSearchStateManager(
  props.apiService || globalApiService,
  { productsWidget: productsWidgetConfig }
);

// Защита от дублирования запросов
let isSearching = false;

// Отслеживание изменений роута для скрытия suggestions
let currentPath = "";
let currentSearch = "";

// Функция для получения текущего пути без query параметров
const getCurrentPath = () => {
  return window.location.pathname;
};

// Функция для получения текущих query параметров
const getCurrentSearch = () => {
  return window.location.search;
};

// Функция для проверки, изменился ли роут (но не query)
const hasRouteChanged = () => {
  const newPath = getCurrentPath();
  const newSearch = getCurrentSearch();

  // Если изменился путь - это изменение роута
  if (newPath !== currentPath) {
    return true;
  }

  // Если изменились query параметры, но не путь - это не изменение роута
  if (newSearch !== currentSearch && newPath === currentPath) {
    return false;
  }

  return false;
};

// Функция для обновления текущего состояния роута
const updateCurrentRoute = () => {
  currentPath = getCurrentPath();
  currentSearch = getCurrentSearch();
};

// Функция для скрытия suggestions при изменении роута
const hideSuggestionsOnRouteChange = () => {
  if (hasRouteChanged()) {
    hideSuggestions();
    updateCurrentRoute();
  }
};

// Обработчик auxclick для средней кнопки мыши
const handleAuxClick = (product: any, event: MouseEvent) => {
  // Используем ту же логику, что и selectProduct, но с принудительным event
  selectProduct(product, event);
};

// Переопределяем handleSearch для выполнения глубокого поиска
const originalHandleSearch = handleSearch;
const enhancedHandleSearch = async () => {
  if (isSearching) return; // Предотвращаем дублирование

  // Закрываем дропдаун при поиске
  hideSuggestions();

  if (searchQuery.value.trim()) {
    isSearching = true;
    try {
      // Сбрасываем активные фильтры при новом поисковом запросе
      sharedState.clearFilters();

      // Эмитим событие глубокого поиска
      emit("deepSearch", searchQuery.value.trim());

      // Выполняем глубокий поиск через sharedState
      await performDeepSearch(searchQuery.value.trim());
    } finally {
      isSearching = false;
    }
  } else {
    // Если запрос пустой, используем оригинальный handleSearch
    await originalHandleSearch();
  }
};

// Инициализация и очистка
onMounted(() => {
  // Инициализируем текущий роут
  updateCurrentRoute();

  // Слушаем изменения роута
  window.addEventListener("popstate", hideSuggestionsOnRouteChange);

  // Слушаем изменения URL через History API
  const originalPushState = history.pushState;
  const originalReplaceState = history.replaceState;

  history.pushState = function (...args) {
    originalPushState.apply(history, args);
    hideSuggestionsOnRouteChange();
  };

  history.replaceState = function (...args) {
    originalReplaceState.apply(history, args);
    hideSuggestionsOnRouteChange();
  };
});

onUnmounted(() => {
  // Восстанавливаем оригинальные методы
  window.removeEventListener("popstate", hideSuggestionsOnRouteChange);

  // Восстанавливаем оригинальные методы History API
  history.pushState = history.pushState;
  history.replaceState = history.replaceState;
});

// Экспортируем публичные методы компонента
defineExpose<SearchWidgetExpose>({
  clear: handleClear,
  focus: () => {
    const input = document.querySelector(".search-input") as HTMLInputElement;
    if (input) {
      input.focus();
    }
  },
  blur: () => {
    const input = document.querySelector(".search-input") as HTMLInputElement;
    if (input) {
      input.blur();
    }
  },
  search: enhancedHandleSearch,
});
</script>
