<template>
  <div
    class="barneo-filters-widget"
    :class="{
      'barneo-filters-widget--dark': mergedConfig.darkMode === true,
      'barneo-filters-widget--light': mergedConfig.darkMode === false,
    }"
  >
    <!-- Заголовок -->
    <slot name="filters-title" :config="mergedConfig">
      <div class="barneo-filters-title">Фильтры</div>
    </slot>

    <!-- Скелетон загрузки -->
    <slot
      name="filters-skeleton"
      :is-loading="showSkeleton"
      :skeleton-data="skeletonData"
    >
      <div v-if="showSkeleton" class="barneo-filters-skeleton">
        <div
          v-for="(skeletonGroup, index) in skeletonData"
          :key="index"
          class="barneo-filter-skeleton-group"
        >
          <div class="barneo-filter-skeleton-header"></div>
          <div class="barneo-filter-skeleton-values">
            <div
              v-for="j in skeletonGroup.valuesCount"
              :key="j"
              class="barneo-filter-skeleton-value"
            >
              <div class="barneo-filter-skeleton-checkbox"></div>
              <div class="barneo-filter-skeleton-label"></div>
            </div>
          </div>
          <div
            v-if="skeletonGroup.hasToggle"
            class="barneo-filter-skeleton-toggle"
          >
            <div class="barneo-filter-skeleton-toggle-text"></div>
            <div class="barneo-filter-skeleton-toggle-icon"></div>
          </div>
        </div>
      </div>
    </slot>

    <!-- Список фильтров -->
    <div v-if="showFiltersList" class="barneo-filters-list">
      <slot
        v-for="filter in displayFilters"
        :key="filter.code"
        name="filter-group"
        :filter="filter"
        :visible-values="visibleValues(filter)"
        :max-values-per-filter="maxValuesPerFilter"
        :is-expanded="isFilterExpanded(filter.code)"
        :handle-filter-click="handleFilterClick"
        :toggle-filter-expansion="toggleFilterExpansion"
        :is-filter-value-active="isFilterValueActive"
      >
        <div class="barneo-filter-group">
          <!-- Заголовок группы фильтров -->
          <div class="barneo-filter-group-header">
            {{ filter.name }}
          </div>

          <!-- Значения фильтров -->
          <div v-if="filter.type === 'checkbox'" class="barneo-filter-values">
            <slot
              v-for="value in visibleValues(filter)"
              :key="value.id"
              name="filter-value"
              :filter-code="filter.code"
              :value="value"
              :is-active="isFilterValueActive(filter.code, value.id)"
              :handle-click="handleFilterClick"
            >
              <div class="barneo-filter-value">
                <slot
                  name="filter-checkbox"
                  :filter-code="filter.code"
                  :value="value"
                  :is-active="isFilterValueActive(filter.code, value.id)"
                  :handle-click="handleFilterClick"
                >
                  <div class="barneo-filter-checkbox">
                    <input
                      type="checkbox"
                      :id="`${filter.code}-${value.id}`"
                      :checked="isFilterValueActive(filter.code, value.id)"
                      class="barneo-filter-checkbox-input"
                      @change="handleFilterClick(filter.code, value.id)"
                      @click.stop
                    />
                    <label
                      :for="`${filter.code}-${value.id}`"
                      class="barneo-filter-checkbox-label"
                      @click.stop
                    >
                      {{ value.name }}
                    </label>
                  </div>
                </slot>
              </div>
            </slot>
          </div>

          <!-- Range фильтры -->
          <div v-else-if="filter.type === 'range'" class="barneo-filter-range">
            <slot
              name="filter-range"
              :filter-code="filter.code"
              :filter="filter"
              :handle-range-change="handleRangeFilterChange"
              :handle-range-selector-change="handleRangeSelectorChange"
              :active-range="getActiveRangeFilter(filter.code)"
              :range-selector-value="getRangeSelectorValue(filter.code)"
              :range-step="getRangeStep(filter)"
              :range-format-value="getRangeFormatValue(filter)"
              :is-range-active="isRangeFilterActive(filter.code)"
              :range-min="Number((filter as any).gte) || 0"
              :range-max="Number((filter as any).lte) || 1000"
            >
              <div class="barneo-filter-range-container">
                <!-- Заголовок range фильтра (опционально) -->
                <slot
                  name="filter-range-header"
                  :filter-code="filter.code"
                  :filter="filter"
                  :is-active="isRangeFilterActive(filter.code)"
                >
                  <div
                    v-if="filter.description"
                    class="barneo-filter-range-description"
                  >
                    {{ filter.description }}
                  </div>
                </slot>

                <!-- Range селектор -->
                <BarneoRangeSelector
                  :min="Number((filter as any).gte) || 0"
                  :max="Number((filter as any).lte) || 1000"
                  :value="getRangeSelectorValue(filter.code)"
                  :step="getRangeStep(filter)"
                  :format-value="getRangeFormatValue(filter)"
                  @change="handleRangeSelectorChange(filter.code, $event)"
                />

                <!-- Индикатор активного диапазона -->
                <slot
                  name="filter-range-indicator"
                  :filter-code="filter.code"
                  :filter="filter"
                  :active-range="getActiveRangeFilter(filter.code)"
                  :is-active="isRangeFilterActive(filter.code)"
                >
                  <!-- По умолчанию скрыт -->
                </slot>

                <!-- Кнопка сброса range фильтра -->
                <slot
                  name="filter-range-reset"
                  :filter-code="filter.code"
                  :filter="filter"
                  :is-active="isRangeFilterActive(filter.code)"
                  :handle-reset="() => handleRangeSelectorChange(filter.code, [Number((filter as any).gte) || 0, Number((filter as any).lte) || 1000])"
                >
                  <!-- По умолчанию скрыта -->
                </slot>
              </div>
            </slot>
          </div>

          <!-- Кнопка "Показать все" -->
          <slot
            v-if="
              filter.type === 'checkbox' &&
              filter.values.length > maxValuesPerFilter
            "
            name="filter-toggle"
            :filter-code="filter.code"
            :is-expanded="isFilterExpanded(filter.code)"
            :handle-toggle="toggleFilterExpansion"
          >
            <div
              class="barneo-filter-toggle"
              @click="toggleFilterExpansion(filter.code)"
            >
              {{ isFilterExpanded(filter.code) ? "Скрыть" : "Показать все" }}
              <svg
                class="barneo-filter-toggle-icon"
                :class="{ expanded: isFilterExpanded(filter.code) }"
                xmlns="http://www.w3.org/2000/svg"
                width="12.253906"
                height="7.501465"
                viewBox="0 0 12.2539 7.50146"
                fill="none"
              >
                <path
                  d="M5.5 7.22C5.85 7.59 6.4 7.59 6.74 7.22L11.99 1.6C12.33 1.23 12.33 0.64 11.99 0.27C11.65 -0.1 11.1 -0.1 10.75 0.27L6.12 5.23L1.49 0.27C1.15 -0.09 0.59 -0.09 0.25 0.27C-0.09 0.64 -0.09 1.23 0.25 1.6L5.5 7.22L5.5 7.22Z"
                  fill="currentColor"
                  fill-opacity="1.000000"
                  fill-rule="nonzero"
                />
              </svg>
            </div>
          </slot>
        </div>
      </slot>
    </div>

    <!-- Пустое состояние -->
    <slot
      name="filters-empty"
      :is-loading="showEmptyState"
      :has-filters="displayHasFilters"
      :query="searchState.query"
    >
      <div v-if="showEmptyState" class="barneo-filters-empty">
        <div class="barneo-filters-empty-icon">🔍</div>
        <div class="barneo-filters-empty-content">
          <div class="barneo-filters-empty-title">Фильтры не найдены</div>
          <div class="barneo-filters-empty-text">
            Попробуйте изменить параметры поиска
          </div>
        </div>
      </div>
    </slot>

    <!-- Состояние загрузки -->
    <slot name="loading" :is-loading="isLoading">
      <div v-if="isLoading" class="loading-state"></div>
    </slot>

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

<script setup lang="ts">
import { ref, computed, watch, onMounted, onUnmounted } from "vue";
import type {
  BarneoFiltersWidgetProps,
  FiltersWidgetEmits,
} from "../types/components";
import type { Filter } from "../types/models";
import type {
  ApiResponse,
  CatalogSearchResponse,
  TopQueriesResponse,
  PopularProductsResponse,
} from "../../searchWidget/types";
import { useFiltersWidgetNoWatch } from "../composables/useFiltersWidgetNoWatch";
import { useSharedState } from "../../sharedState/composables/useSharedState";
import { useBarneoConfig } from "../../../config/BarneoConfigManager";
import { SearchApiService } from "../../../services/api";
import BarneoRangeSelector from "./BarneoRangeSelector.vue";

const props = withDefaults(defineProps<BarneoFiltersWidgetProps>(), {
  config: () => ({}), // Используем глобальную конфигурацию
  filters: () => [],
  loading: false,
  error: null,
  activeFilters: () => ({}),
});

const emit = defineEmits<FiltersWidgetEmits>();

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

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

// Получаем sharedState для доступа к состоянию загрузки
const { searchState } = useSharedState();

// Используем API сервис из props или глобальный
const apiService = props.apiService || globalApiService;

// Initialize composable
const {
  filters,
  isLoading: localIsLoading,
  error: localError,
  activeFilters,
  rangeFilters,
  activeRangeFilters,
  hasFilters,
  hasActiveFilters,
  activeFiltersCount,
  applyFilters,
  resetFilters,
  removeFilterValue,
  loadFilters,
  handleFilterValueClick,
  handleRangeFilterApply,
  isFilterValueActive,
  getActiveValuesForFilter,
  getActiveRangeFilter,
} = useFiltersWidgetNoWatch(mergedConfig.value, apiService, emit);

// Используем состояние загрузки из sharedState
const isLoading = computed(() => {
  const loading = searchState.isLoading || localIsLoading.value;
  return loading;
});
const error = computed(() => searchState.error || localError.value);

// Отключаем конфликтующие watch в useFiltersWidget
// Мы будем управлять фильтрами через sharedState

// Адаптер больше не нужен, так как логика упрощена

// Local state for filter expansion
const expandedFilters = ref<Set<string>>(new Set());

// Computed properties
const maxValuesPerFilter = computed(
  () => mergedConfig.value?.maxValuesPerFilter || 5
);

// Правильное отображение фильтров в шаблоне
const displayFilters = computed(() => {
  // Используем фильтры из sharedState - они содержат и checkbox, и range фильтры
  const sharedFilters = searchState.filters || [];
  return sharedFilters;
});

const displayHasFilters = computed(() => {
  // Показываем фильтры только когда есть данные, есть запрос и не идет загрузка
  const hasFilters = displayFilters.value.length > 0;
  const hasQuery = !!searchState.query;
  const notLoading = !isLoading.value;

  return hasFilters && hasQuery && notLoading;
});

// Computed свойства для условий отображения
const showSkeleton = computed(() => {
  return isLoading.value;
});

const showFiltersList = computed(() => {
  return !isLoading.value && displayHasFilters.value;
});

const showEmptyState = computed(() => {
  return !isLoading.value && !displayHasFilters.value && searchState.query;
});

// Скелетон на основе реальных данных
const skeletonData = computed(() => {
  // Используем фильтры из sharedState
  const sharedFilters = searchState.filters || [];

  if (sharedFilters.length > 0) {
    // Если у нас есть реальные фильтры, используем их структуру
    return sharedFilters.map((filter) => ({
      hasToggle:
        filter.type === "checkbox" &&
        filter.values.length > maxValuesPerFilter.value,
      valuesCount:
        filter.type === "checkbox"
          ? expandedFilters.value.has(filter.code)
            ? filter.values.length
            : Math.min(filter.values.length, maxValuesPerFilter.value)
          : 0,
    }));
  } else {
    // Если фильтров нет, показываем дефолтный скелетон
    return [
      { hasToggle: true, valuesCount: 5 },
      { hasToggle: false, valuesCount: 3 },
      { hasToggle: true, valuesCount: 4 },
    ];
  }
});

// Methods
const getFilterName = (filterCode: string): string => {
  const filter = filters.value.find((f: Filter) => f.code === filterCode);
  return filter?.name || filterCode;
};

const visibleValues = (filter: Filter) => {
  if (filter.type !== "checkbox") return [];

  const isExpanded = expandedFilters.value.has(filter.code);
  if (isExpanded) {
    return filter.values;
  }

  return filter.values.slice(0, maxValuesPerFilter.value);
};

const toggleFilterExpansion = (filterCode: string) => {
  if (expandedFilters.value.has(filterCode)) {
    expandedFilters.value.delete(filterCode);
  } else {
    expandedFilters.value.add(filterCode);
  }
};

const isFilterExpanded = (filterCode: string): boolean => {
  return expandedFilters.value.has(filterCode);
};

// Обработчик клика по фильтру
const handleFilterClick = (filterCode: string, valueId: string) => {
  // Используем метод из composable, который автоматически применит фильтр
  handleFilterValueClick(filterCode, valueId);
};

// Обработчик изменения range фильтра
const handleRangeFilterChange = (
  filterCode: string,
  gte?: string,
  lte?: string
) => {
  // Получаем актуальные значения из DOM
  const gteInput = document.getElementById(
    `${filterCode}-gte`
  ) as HTMLInputElement;
  const lteInput = document.getElementById(
    `${filterCode}-lte`
  ) as HTMLInputElement;

  const actualGte = gteInput?.value || "";
  const actualLte = lteInput?.value || "";

  // Получаем текущие активные значения
  const currentRange = getActiveRangeFilter(filterCode);
  const currentGte = currentRange?.gte || "";
  const currentLte = currentRange?.lte || "";

  // Проверяем, изменились ли значения
  if (actualGte !== currentGte || actualLte !== currentLte) {
    // Применяем фильтр, даже если заполнено только одно поле
    // API сам заполнит второе поле максимальным значением
    handleRangeFilterApply(
      filterCode,
      actualGte || undefined,
      actualLte || undefined
    );
  } else {
  }
};

// Обработчик потери фокуса для range фильтра
const handleRangeFilterBlur = (
  filterCode: string,
  fieldType: "gte" | "lte"
) => {
  // Используем setTimeout чтобы проверить, не переключился ли фокус на другое поле того же фильтра
  setTimeout(() => {
    const activeElement = document.activeElement;
    const gteInput = document.getElementById(
      `${filterCode}-gte`
    ) as HTMLInputElement;
    const lteInput = document.getElementById(
      `${filterCode}-lte`
    ) as HTMLInputElement;

    // Если фокус переключился на другое поле того же фильтра, не делаем запрос
    if (activeElement === gteInput || activeElement === lteInput) {
      return;
    }

    // Иначе применяем фильтр
    handleRangeFilterChange(filterCode);
  }, 10);
};

// Методы для работы с range селектором
const getRangeSelectorValue = (filterCode: string): [number, number] => {
  const activeRange = getActiveRangeFilter(filterCode);
  const filter = displayFilters.value.find((f) => f.code === filterCode);

  if (activeRange?.gte && activeRange?.lte) {
    return [Number(activeRange.gte), Number(activeRange.lte)];
  }

  // Возвращаем дефолтные значения из фильтра
  const min = Number((filter as any)?.gte) || 0;
  const max = Number((filter as any)?.lte) || 1000;
  return [min, max];
};

const getRangeStep = (filter: Filter): number => {
  // Определяем шаг на основе типа фильтра
  if (filter.code === "price") {
    return 100; // Для цены шаг 100
  }
  return 1; // По умолчанию шаг 1
};

const getRangeFormatValue = (filter: Filter) => {
  return (value: number) => {
    if (filter.code === "price") {
      // Разделяем на 100 и убираем копейки
      const rubles = Math.floor(value / 100);
      return `${rubles.toLocaleString()} ₽`;
    }
    return value.toString();
  };
};

const handleRangeSelectorChange = (
  filterCode: string,
  value: [number, number]
) => {
  const [min, max] = value;

  // Применяем фильтр с новыми значениями
  handleRangeFilterApply(filterCode, min.toString(), max.toString());
};

// Проверяем, активен ли range фильтр
const isRangeFilterActive = (filterCode: string): boolean => {
  const activeRange = getActiveRangeFilter(filterCode);
  const filter = displayFilters.value.find((f) => f.code === filterCode);

  if (!activeRange || !filter) return false;

  // Проверяем, отличается ли активный диапазон от дефолтного
  const defaultMin = Number((filter as any)?.gte) || 0;
  const defaultMax = Number((filter as any)?.lte) || 1000;

  const activeMin = Number(activeRange.gte) || defaultMin;
  const activeMax = Number(activeRange.lte) || defaultMax;

  return activeMin !== defaultMin || activeMax !== defaultMax;
};

// Фильтры автоматически синхронизируются через useFiltersWidgetNoWatch

// Логика сброса фильтров при изменении запроса уже обрабатывается в useFiltersWidgetNoWatch

// Активные фильтры автоматически синхронизируются через composable

// Expose methods for parent component
defineExpose({
  applyFilters,
  resetFilters,
  removeFilterValue,
  loadFilters,
});
</script>

<style scoped>
/* Component-specific styles can be added here if needed */
</style>
