<template>
  <!-- Кнопка-триггер -->
  <button class="mobile-select-btn" :class="[variant, { compact, 'has-selection': hasSelection }]" @click="open = true">
    <i v-if="icon" :data-lucide="icon" class="btn-icon"></i>
    <span v-if="!compact" class="btn-label">{{ displayValue }}</span>
    <i data-lucide="chevron-down" class="btn-arrow"></i>
  </button>

  <!-- Fullscreen панель выбора -->
  <Teleport to="body">
    <Transition name="slide-up">
      <div v-if="open" class="mobile-select-overlay" @click.self="open = false">
        <div class="mobile-select-panel">
          <!-- Header панели -->
          <div class="panel-header">
            <button class="panel-back" @click="open = false">
              <i data-lucide="arrow-left"></i>
            </button>
            <h3 class="panel-title">{{ title }}</h3>
          </div>

          <!-- Список опций -->
          <div class="panel-options">
            <button 
              v-for="option in options" 
              :key="option.id"
              class="option-item"
              :class="{ active: modelValue === option.id }"
              @click="selectOption(option.id)"
            >
              <span class="option-label">{{ option.label }}</span>
              <i v-if="modelValue === option.id" data-lucide="check" class="option-check"></i>
            </button>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

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

const props = defineProps({
  modelValue: {
    type: [Number, String, null],
    default: null
  },
  options: {
    type: Array,
    required: true
    // [{ id: 1, label: 'Option 1' }, ...]
  },
  title: {
    type: String,
    default: 'Выберите'
  },
  placeholder: {
    type: String,
    default: 'Выберите...'
  },
  icon: {
    type: String,
    default: null
  },
  variant: {
    type: String,
    default: 'default' // 'default' | 'accent'
  },
  compact: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue'])

const open = ref(false)

const displayValue = computed(() => {
  if (props.modelValue === null || props.modelValue === undefined) {
    return props.placeholder
  }
  const option = props.options.find(o => o.id === props.modelValue)
  return option?.label || props.placeholder
})

// Проверка: выбран ли не-дефолтный вариант (первый option обычно "Все")
const hasSelection = computed(() => {
  if (props.modelValue === null || props.modelValue === undefined) return false
  // Если первый option = null — значит "Все", проверяем что выбрано что-то другое
  const firstOption = props.options[0]
  return firstOption && props.modelValue !== firstOption.id
})

const selectOption = (id) => {
  emit('update:modelValue', id)
  open.value = false
}

// Refresh icons
const refreshIcons = () => {
  if (window.lucide) {
    setTimeout(() => window.lucide.createIcons(), 10)
  }
}

watch(open, (val) => {
  if (val) {
    document.body.style.overflow = 'hidden'
    refreshIcons()
  } else {
    document.body.style.overflow = ''
  }
})

// Cleanup при unmount — гарантируем сброс overflow
onUnmounted(() => {
  if (open.value) {
    document.body.style.overflow = ''
  }
})

onMounted(refreshIcons)
onUpdated(refreshIcons)
</script>

<style scoped>
/* Кнопка триггер */
.mobile-select-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  min-height: 40px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

@media (hover: hover) {
  .mobile-select-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
  }
}

.mobile-select-btn:active {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

/* Акцентная версия (для проекта) */
.mobile-select-btn.accent {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

@media (hover: hover) {
  .mobile-select-btn.accent:hover {
    background: var(--accent);
    color: #000;
  }
}

.mobile-select-btn.accent:active {
  background: var(--accent);
  color: #000;
}

.mobile-select-btn.accent .btn-icon,
.mobile-select-btn.accent .btn-arrow {
  opacity: 1;
}

/* Компактный режим (только иконка) */
.mobile-select-btn.compact {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  border-radius: 10px;
}

.mobile-select-btn.compact .btn-icon {
  width: 18px;
  height: 18px;
  margin: 0;
}

.mobile-select-btn.compact .btn-arrow {
  display: none;
}

/* Подсветка когда выбран активный фильтр */
.mobile-select-btn.has-selection {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.mobile-select-btn.has-selection .btn-icon {
  opacity: 1;
}

.btn-icon {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

.btn-label {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-arrow {
  width: 12px;
  height: 12px;
  opacity: 0.4;
  margin-left: 2px;
}

/* Overlay */
.mobile-select-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
}

/* Панель */
.mobile-select-panel {
  width: 100%;
  max-height: 80vh;
  background: var(--bg-body);
  border-radius: 0 0 20px 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Safe area для iPhone notch */
  padding-top: env(safe-area-inset-top, 0px);
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s;
}

.panel-back:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.panel-back i {
  width: 20px;
  height: 20px;
}

.panel-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

/* Опции */
.panel-options {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  padding-bottom: 16px;
}

.option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px;
  background: none;
  border: none;
  border-radius: 12px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}

@media (hover: hover) {
  .option-item:hover {
    background: rgba(255, 255, 255, 0.04);
  }
}

.option-item:active {
  background: rgba(255, 255, 255, 0.08);
}

.option-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.option-label {
  flex: 1;
}

.option-check {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

/* Анимация */
.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.3s ease;
}

.slide-up-enter-active .mobile-select-panel,
.slide-up-leave-active .mobile-select-panel {
  transition: transform 0.3s ease;
}

.slide-up-enter-from,
.slide-up-leave-to {
  opacity: 0;
}

.slide-up-enter-from .mobile-select-panel,
.slide-up-leave-to .mobile-select-panel {
  transform: translateY(-100%);
}
</style>
