<template>
  <Teleport to="body">
    <div class="toast-container" :class="{ mobile: isMobile }">
      <TransitionGroup :name="isMobile ? 'toast-mobile' : 'toast'">
        <div 
          v-for="(toast, index) in toasts" 
          :key="toast.id"
          class="toast"
          :class="toast.type"
          :style="getStackStyle(index)"
          @click="!isMobile && remove(toast.id)"
          @touchstart="handleTouchStart($event, toast.id)"
          @touchmove="handleTouchMove($event, toast.id)"
          @touchend="handleTouchEnd($event, toast.id)"
        >
          <!-- Progress bar (время до автозакрытия) -->
          <div class="toast-progress" :style="{ '--duration': toast.duration + 'ms' }"></div>
          
          <!-- Цветной акцент слева -->
          <div class="toast-accent"></div>
          
          <div class="toast-content">
            <div class="toast-icon">
              <i :data-lucide="iconName(toast.type)"></i>
            </div>
            <span class="toast-message">{{ toast.message }}</span>
          </div>
          
          <!-- Кнопка закрытия (только десктоп) -->
          <button v-if="!isMobile" class="toast-close" @click.stop="remove(toast.id)">
            <i data-lucide="x"></i>
          </button>
          
          <!-- Swipe hint для мобильных (на верхнем тосте) -->
          <div v-if="isMobile && index === toasts.length - 1" class="swipe-hint">
            <i data-lucide="chevrons-left"></i>
          </div>
        </div>
      </TransitionGroup>
    </div>
  </Teleport>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useToast } from '../../composables/useToast'
import { useLucideIcons } from '../../composables/useLucideIcons'
import { useMobile } from '../../composables/useMobile'

const { toasts, remove } = useToast()
const { refreshIcons } = useLucideIcons()
const { isMobile } = useMobile()

// Swipe tracking
const swipeState = ref({})

const handleTouchStart = (e, id) => {
  const touch = e.touches[0]
  swipeState.value[id] = {
    startX: touch.clientX,
    startY: touch.clientY,
    currentX: 0,
    swiping: false
  }
}

const handleTouchMove = (e, id) => {
  const state = swipeState.value[id]
  if (!state) return
  
  const touch = e.touches[0]
  const deltaX = touch.clientX - state.startX
  const deltaY = Math.abs(touch.clientY - state.startY)
  
  // Определяем направление: горизонтальный свайп влево
  if (Math.abs(deltaX) > 10 && deltaX < 0 && deltaY < 30) {
    state.swiping = true
    state.currentX = Math.max(deltaX, -150) // Ограничиваем свайп
    
    // Применяем трансформацию (сохраняем центрирование -50%)
    const el = e.currentTarget
    el.style.transform = `translateX(calc(-50% + ${state.currentX}px))`
    el.style.opacity = 1 - Math.abs(state.currentX) / 150
  }
}

const handleTouchEnd = (e, id) => {
  const state = swipeState.value[id]
  if (!state) return
  
  const el = e.currentTarget
  
  // Если свайпнули достаточно далеко — удаляем
  if (state.currentX < -80) {
    // Помечаем как swiped чтобы отключить CSS-анимацию TransitionGroup
    el.classList.add('swiped')
    el.style.transform = 'translateX(-150%)'
    el.style.opacity = '0'
    // Удаляем сразу, анимация уже произошла через JS
    setTimeout(() => remove(id), 100)
  } else {
    // Возвращаем на место
    el.style.transition = 'transform 0.2s, opacity 0.2s'
    el.style.transform = 'translateX(-50%)'
    el.style.opacity = '1'
    setTimeout(() => {
      el.style.transition = ''
    }, 200)
  }
  
  delete swipeState.value[id]
}

// Stack effect для нескольких тостов (мобильная версия)
// Новые тосты полностью перекрывают старые, без уменьшения
const getStackStyle = (index) => {
  if (!isMobile.value) return {}
  
  // Новые тосты (с большим индексом) должны быть сверху
  return {
    zIndex: 100 + index
  }
}

// Обновляем иконки при добавлении новых toast
watch(() => toasts.value.length, () => {
  setTimeout(refreshIcons, 10)
})

const iconName = (type) => {
  switch (type) {
    case 'success': return 'circle-check'
    case 'error': return 'circle-x'
    case 'warning': return 'triangle-alert'
    case 'info': 
    default: return 'info'
  }
}
</script>

<style scoped>
/* ==================== DESKTOP ==================== */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 360px;
}

/* Safe area для iPhone */
@supports (padding-top: env(safe-area-inset-top)) {
  .toast-container:not(.mobile) {
    top: calc(20px + env(safe-area-inset-top));
    right: calc(20px + env(safe-area-inset-right));
  }
}

.toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  padding-left: 20px;
  background: var(--bg-secondary, #1a1a1f);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: auto;
  cursor: pointer;
  backdrop-filter: blur(12px);
  overflow: hidden;
}

/* Цветной акцент слева */
.toast-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 4px 0 0 4px;
}

.toast-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.toast-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-icon i,
.toast-icon svg {
  width: 20px;
  height: 20px;
}

.toast-message {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #f4f4f5);
  line-height: 1.4;
}

.toast-close {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted, #6b6b70);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.toast-close:hover {
  opacity: 1;
}

.toast-close i,
.toast-close svg {
  width: 14px;
  height: 14px;
}

/* Progress bar */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.3;
  animation: progress var(--duration) linear forwards;
  border-radius: 0 0 0 12px;
}

@keyframes progress {
  from { width: 100%; }
  to { width: 0%; }
}

/* Swipe hint (скрыт по умолчанию) */
.swipe-hint {
  display: none;
}

/* ==================== ТИПЫ УВЕДОМЛЕНИЙ ==================== */
.toast.success .toast-accent { background: var(--accent, #00d4aa); }
.toast.success .toast-icon { color: var(--accent, #00d4aa); }
.toast.success .toast-progress { color: var(--accent, #00d4aa); }

.toast.error .toast-accent { background: var(--red, #f87171); }
.toast.error .toast-icon { color: var(--red, #f87171); }
.toast.error .toast-progress { color: var(--red, #f87171); }

.toast.warning .toast-accent { background: var(--orange, #fbbf24); }
.toast.warning .toast-icon { color: var(--orange, #fbbf24); }
.toast.warning .toast-progress { color: var(--orange, #fbbf24); }

.toast.info .toast-accent { background: var(--blue, #60a5fa); }
.toast.info .toast-icon { color: var(--blue, #60a5fa); }
.toast.info .toast-progress { color: var(--blue, #60a5fa); }

/* ==================== DESKTOP ANIMATIONS ==================== */
.toast-enter-active {
  animation: toast-in 0.3s ease-out;
}

.toast-leave-active {
  animation: toast-out 0.2s ease-in forwards;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* ==================== MOBILE ==================== */
.toast-container.mobile {
  top: auto;
  bottom: 90px; /* Над навигацией */
  left: 0;
  right: 0;
  max-width: none;
  gap: 0;
  min-height: 60px; /* Место для абсолютно спозиционированных тостов */
  align-items: center;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .toast-container.mobile {
    bottom: calc(90px + env(safe-area-inset-bottom));
  }
}

.toast-container.mobile .toast {
  width: 100%;
  max-width: 340px;
  padding: 12px 16px;
  padding-left: 18px;
  border-radius: 16px;
  cursor: default;
  /* Pill-style с цветным градиентом на фоне */
  background: linear-gradient(135deg, 
    rgba(30, 30, 35, 0.95) 0%, 
    rgba(25, 25, 30, 0.98) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* Акцент на мобильных — градиентная полоска */
.toast-container.mobile .toast-accent {
  width: 3px;
  background: linear-gradient(180deg, currentColor 0%, transparent 100%);
}

.toast-container.mobile .toast.success .toast-accent { color: var(--accent, #00d4aa); }
.toast-container.mobile .toast.error .toast-accent { color: var(--red, #f87171); }
.toast-container.mobile .toast.warning .toast-accent { color: var(--orange, #fbbf24); }
.toast-container.mobile .toast.info .toast-accent { color: var(--blue, #60a5fa); }

/* Swipe hint на мобильных */
.toast-container.mobile .swipe-hint {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  opacity: 0.4;
  animation: swipe-hint 1.5s ease-in-out infinite;
}

.toast-container.mobile .swipe-hint i,
.toast-container.mobile .swipe-hint svg {
  width: 16px;
  height: 16px;
}

@keyframes swipe-hint {
  0%, 100% { transform: translateX(0); opacity: 0.4; }
  50% { transform: translateX(-4px); opacity: 0.7; }
}

/* ==================== MOBILE ANIMATIONS ==================== */
.toast-mobile-enter-active {
  animation: toast-mobile-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toast-mobile-leave-active {
  animation: toast-mobile-out 0.25s ease-in forwards;
}

/* Отключаем анимацию для элементов удалённых свайпом (уже анимированы через JS) */
.toast-mobile-leave-active.swiped {
  animation: none;
}

@keyframes toast-mobile-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes toast-mobile-out {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-150%) translateY(0);
  }
}

/* Все тосты на мобильных в одном месте, новые поверх старых */
.toast-container.mobile .toast {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* Только верхний (последний) тост интерактивен */
.toast-container.mobile .toast:not(:last-child) {
  pointer-events: none;
}
</style>
