<template>
  <div class="screenshot-controls">
    <!-- Основная кнопка скриншота -->
    <button 
      @click="takeScreenshot"
      :disabled="isTakingScreenshot || !isModelReady"
      class="screenshot-btn"
      :class="{ 'screenshot-btn-loading': isTakingScreenshot }"
    >
      <Camera v-if="!isTakingScreenshot" class="w-5 h-5" />
      <Loader2 v-else class="w-5 h-5 animate-spin" />
      {{ buttonText }}
    </button>

    <!-- Уведомление -->
    <Transition name="notification">
      <div v-if="showNotification" class="screenshot-notification" :class="notificationType">
        <CheckCircle v-if="notificationType === 'success'" class="w-4 h-4" />
        <AlertCircle v-else-if="notificationType === 'error'" class="w-4 h-4" />
        <Download v-else-if="notificationType === 'downloading'" class="w-4 h-4 animate-bounce" />
        {{ notificationMessage }}
      </div>
    </Transition>

    <!-- Меню настроек (опционально) -->
    <div v-if="showSettings" class="screenshot-settings">
      <button @click="toggleSettings" class="settings-btn">
        <Settings class="w-4 h-4" />
      </button>
      
      <div v-if="settingsOpen" class="settings-dropdown">
        <label>
          <input type="checkbox" v-model="settings.keepAutoRotate" />
          Сохранять авто-вращение
        </label>
        <label>
          <select v-model="settings.format">
            <option value="image/png">PNG</option>
            <option value="image/jpeg">JPEG</option>
            <option value="image/webp">WebP</option>
          </select>
        </label>
        <label>
          Качество:
          <input type="range" v-model.number="settings.quality" min="0.1" max="1.0" step="0.1" />
          {{ Math.round(settings.quality * 100) }}%
        </label>
        <label>
          <input type="checkbox" v-model="settings.transparentBg" />
          Прозрачный фон
        </label>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onUnmounted } from 'vue'
import { Camera, Loader2, CheckCircle, AlertCircle, Download, Settings } from '@lucide/vue'

// Пропсы для конфигурации
const props = defineProps({
  // Ссылка на Three.js рендерер
  renderer: {
    type: Object,
    required: true
  },
  // Ссылка на OrbitControls (для управления авто-вращением)
  controls: {
    type: Object,
    default: null
  },
  // Флаг готовности модели
  isModelReady: {
    type: Boolean,
    default: false
  },
  // Имя файла по умолчанию
  filename: {
    type: String,
    default: 'screenshot'
  },
  // Показывать ли настройки
  showSettings: {
    type: Boolean,
    default: false
  },
  // Текст на кнопке
  buttonText: {
    type: String,
    default: 'Сделать скриншот'
  },
  // Автоматическое уведомление
  autoNotify: {
    type: Boolean,
    default: true
  }
})

// Состояния
const isTakingScreenshot = ref(false)
const showNotification = ref(false)
const notificationMessage = ref('')
const notificationType = ref('success')
const settingsOpen = ref(false)

// Настройки по умолчанию
const settings = ref({
  keepAutoRotate: true,
  format: 'image/png',
  quality: 1.0,
  transparentBg: false
})

// Таймер для уведомлений
let notificationTimeout = null

// Показать уведомление
const showNotificationMessage = (message, type = 'success', duration = 3000) => {
  if (!props.autoNotify) return
  
  if (notificationTimeout) clearTimeout(notificationTimeout)
  
  notificationMessage.value = message
  notificationType.value = type
  showNotification.value = true
  
  notificationTimeout = setTimeout(() => {
    showNotification.value = false
  }, duration)
}

// Переключение настроек
const toggleSettings = () => {
  settingsOpen.value = !settingsOpen.value
}

// Основной метод скриншота
const takeScreenshot = async () => {
  if (!props.renderer || !props.isModelReady) {
    showNotificationMessage('Модель еще не загружена', 'error', 2000)
    return
  }

  isTakingScreenshot.value = true
  
  // Сохраняем состояние авто-вращения
  let wasAutoRotating = false
  if (props.controls && !settings.value.keepAutoRotate) {
    wasAutoRotating = props.controls.autoRotate
    if (wasAutoRotating) {
      props.controls.autoRotate = false
      props.controls.update()
    }
  }

  try {
    // Небольшая задержка для стабилизации кадра
    await new Promise(resolve => setTimeout(resolve, 50))
    
    const canvas = props.renderer.domElement
    
    // Если нужен прозрачный фон
    if (settings.value.transparentBg) {
      const originalClearColor = props.renderer.getClearColor()
      const originalAlpha = props.renderer.getClearAlpha()
      props.renderer.setClearColor(0x000000, 0)
      
      // Делаем скриншот после изменения прозрачности
      await new Promise(resolve => setTimeout(resolve, 10))
      
      const blob = await new Promise((resolve) => {
        canvas.toBlob(resolve, settings.value.format, settings.value.quality)
      })
      
      // Восстанавливаем оригинальный цвет фона
      props.renderer.setClearColor(originalClearColor, originalAlpha)
      
      if (blob) {
        downloadBlob(blob)
      }
    } else {
      // Обычный скриншот
      const blob = await new Promise((resolve) => {
        canvas.toBlob(resolve, settings.value.format, settings.value.quality)
      })
      
      if (blob) {
        downloadBlob(blob)
      }
    }
    
    showNotificationMessage('Скриншот сохранен!', 'success', 2000)
    
  } catch (error) {
    console.error('Ошибка при создании скриншота:', error)
    showNotificationMessage('Ошибка при сохранении скриншота', 'error', 3000)
  } finally {
    // Восстанавливаем авто-вращение
    if (props.controls && !settings.value.keepAutoRotate && wasAutoRotating) {
      props.controls.autoRotate = wasAutoRotating
      props.controls.update()
    }
    
    isTakingScreenshot.value = false
  }
}

// Скачивание blob
const downloadBlob = (blob) => {
  // Показываем уведомление о начале скачивания
  showNotificationMessage('Подготовка файла...', 'downloading', 1000)
  
  const link = document.createElement('a')
  const url = URL.createObjectURL(blob)
  const extension = settings.value.format.split('/')[1]
  const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-')
  
  link.href = url
  link.download = `${props.filename}-${timestamp}.${extension}`
  document.body.appendChild(link)
  link.click()
  
  // Очищаем
  document.body.removeChild(link)
  URL.revokeObjectURL(url)
}

// Очистка при размонтировании
onUnmounted(() => {
  if (notificationTimeout) clearTimeout(notificationTimeout)
})

// Следим за изменениями прозрачности
watch(() => settings.value.transparentBg, (newVal) => {
  if (props.renderer) {
    if (newVal) {
      props.renderer.setClearColor(0x000000, 0)
    } else {
      props.renderer.setClearColor(0x000000, 1)
    }
  }
})
</script>

<style scoped>
.screenshot-controls {
  position: relative;
  display: inline-block;
}

.screenshot-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.75rem;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.screenshot-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.screenshot-btn:active:not(:disabled) {
  transform: translateY(0);
}

.screenshot-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.screenshot-btn-loading {
  cursor: wait;
}

.screenshot-notification {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: white;
  color: #1f2937;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  font-size: 0.875rem;
  font-weight: 500;
}

.screenshot-notification.success {
  background: #10b981;
  color: white;
}

.screenshot-notification.error {
  background: #ef4444;
  color: white;
}

.screenshot-notification.downloading {
  background: #3b82f6;
  color: white;
}

.notification-enter-active,
.notification-leave-active {
  transition: all 0.3s ease;
}

.notification-enter-from {
  transform: translateX(100%);
  opacity: 0;
}

.notification-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

.screenshot-settings {
  position: relative;
  display: inline-block;
  margin-left: 0.5rem;
}

.settings-btn {
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.75rem;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.settings-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.settings-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.75rem;
  color: white;
  min-width: 200px;
  z-index: 100;
}

.settings-dropdown label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.settings-dropdown select,
.settings-dropdown input[type="range"] {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.25rem;
  color: white;
  padding: 0.25rem;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-bounce {
  animation: bounce 0.5s ease infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-25%);
  }
}
</style>