<template>
  <div class="drone-parts-container">
    <!-- Кнопка возврата в левом верхнем углу -->
    <button class="back-btn" @click="$emit('back')">
      ← Вернуться к маршруту
    </button>

    <!-- Левая панель - список компонентов -->
    <div class="parts-list scroll-strip">
      <ListCard
        v-for="part in parts"
        :key="part.id"
        :title="part.name"
        :subtitle="part.category"
        :image="part.image"
        :active="selectedPart?.id === part.id"
        @click="selectPart(part)"
      />
    </div>

    <!-- Правая часть - детали -->
    <div class="main-area">
      <div v-if="selectedPart" class="part-detail">
        <div class="detail-image">
          <img :src="selectedPart.image" :alt="selectedPart.name" />
        </div>
        
        <div class="detail-info">
          <h2>{{ selectedPart.name }}</h2>
          <p class="description">{{ selectedPart.description }}</p>
        </div>
        
        <div class="comments-section">
          <div class="comments-header">
            <h3>📝 Мой комментарий</h3>
          </div>
          
          <div v-if="myComment" class="existing-comment">
            <div class="comment-text">{{ myComment.text }}</div>
            <div class="comment-meta">
              <span class="comment-date">{{ myComment.date }}</span>
              <button class="edit-comment" @click="editComment">✏️ Редактировать</button>
              <button class="delete-comment" @click="deleteComment">🗑️ Удалить</button>
            </div>
          </div>
          
          <div v-else class="add-comment">
            <textarea 
              v-model="commentText" 
              :placeholder="`Мой комментарий к «${selectedPart.name}»...`"
              rows="3"
            ></textarea>
            <div class="comment-actions">
              <button class="save-btn" @click="saveComment" :disabled="!commentText.trim()">
                💾 Сохранить комментарий
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <div v-else class="empty-state">
        <div class="empty-icon">🛸</div>
        <h3>Выберите компонент дрона</h3>
        <p>Нажмите на любой компонент из списка слева</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ListCard from '@/components/UI/ListCard.vue'

const emit = defineEmits(['back'])
let db = null

const openDB = () => {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('DroneCommentsDB', 1)
    
    request.onerror = () => reject(request.error)
    request.onsuccess = () => resolve(request.result)
    
    request.onupgradeneeded = (event) => {
      const database = event.target.result
      if (!database.objectStoreNames.contains('comments')) {
        const store = database.createObjectStore('comments', { keyPath: 'id', autoIncrement: true })
        store.createIndex('part_id', 'part_id', { unique: false })
      }
    }
  })
}

const saveCommentToDB = async (partId, text) => {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['comments'], 'readwrite')
    const store = transaction.objectStore('comments')
    
    const comment = {
      part_id: partId,
      user_id: 'me',
      text: text,
      date: new Date().toLocaleString('ru-RU'),
      timestamp: Date.now()
    }
    
    const request = store.add(comment)
    request.onsuccess = () => resolve(request.result)
    request.onerror = () => reject(request.error)
  })
}

const loadCommentFromDB = async (partId) => {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['comments'], 'readonly')
    const store = transaction.objectStore('comments')
    const index = store.index('part_id')
    const request = index.getAll(partId)
    
    request.onsuccess = () => {
      const comments = request.result
      const myComment = comments.length > 0 ? comments[comments.length - 1] : null
      resolve(myComment)
    }
    request.onerror = () => reject(request.error)
  })
}

const updateCommentInDB = async (id, newText) => {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['comments'], 'readwrite')
    const store = transaction.objectStore('comments')
    
    const request = store.get(id)
    request.onsuccess = () => {
      const comment = request.result
      if (comment) {
        comment.text = newText
        comment.date = new Date().toLocaleString('ru-RU')
        comment.timestamp = Date.now()
        
        const updateRequest = store.put(comment)
        updateRequest.onsuccess = () => resolve()
        updateRequest.onerror = () => reject(updateRequest.error)
      } else {
        reject('Comment not found')
      }
    }
    request.onerror = () => reject(request.error)
  })
}

const deleteCommentFromDB = async (id) => {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['comments'], 'readwrite')
    const store = transaction.objectStore('comments')
    const request = store.delete(id)
    
    request.onsuccess = () => resolve()
    request.onerror = () => reject(request.error)
  })
}
const parts = ref([])
const selectedPart = ref(null)
const myComment = ref(null)
const commentText = ref('')
const dbReady = ref(false)
const loadParts = async () => {
  try {
    const response = await fetch('/droneComponents/components.json')
    if (response.ok) {
      parts.value = await response.json()
    } else {
      console.error('Файл components.json не найден')
      parts.value = []
    }
  } catch (error) {
    console.error('Ошибка загрузки компонентов:', error)
    parts.value = []
  }
}


const selectPart = async (part) => {
  selectedPart.value = part
  if (dbReady.value) {
    const comment = await loadCommentFromDB(part.id)
    myComment.value = comment
    commentText.value = ''
  }
}

// ========== КОММЕНТАРИИ ==========
const saveComment = async () => {
  if (!commentText.value.trim() || !selectedPart.value) return
  
  try {
    await saveCommentToDB(selectedPart.value.id, commentText.value.trim())
    const comment = await loadCommentFromDB(selectedPart.value.id)
    myComment.value = comment
    commentText.value = ''
  } catch (error) {
    console.error('Ошибка сохранения:', error)
  }
}

const editComment = () => {
  if (myComment.value) {
    commentText.value = myComment.value.text
    myComment.value = null
  }
}

const deleteComment = async () => {
  if (!confirm('Удалить комментарий?')) return
  
  try {
    await deleteCommentFromDB(myComment.value.id)
    myComment.value = null
    commentText.value = ''
  } catch (error) {
    console.error('Ошибка удаления:', error)
  }
}
onMounted(async () => {
  try {
    db = await openDB()
    dbReady.value = true
    await loadParts()
  } catch (error) {
    console.error('Ошибка открытия IndexedDB:', error)
  }
})
</script>

<style scoped>
.drone-parts-container {
  display: flex;
  height: 100vh;
  width: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  position: relative;
}

/* Кнопка возврата */
.back-btn {
    position: fixed;
    top: 20px;
    right: 20px;  
    z-index: 9999;
    padding: 12px 20px;
    background: linear-gradient(135deg, #ff6b6b, #c92a2a); 
    border: none;
    border-radius: 10px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: transform 0.2s;
}

.back-btn:hover {
    transform: scale(1.02);
}

/* Левая панель с отступом сверху, чтобы не перекрывалась кнопкой */
.parts-list {
  width: 300px;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 0;
}

/* Правая область */
.main-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.part-detail {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 24px;
  padding: 30px;
  backdrop-filter: blur(5px);
}

.detail-image {
  text-align: center;
  margin-bottom: 30px;
}

.detail-image img {
  max-width: 100%;
  max-height: 350px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.detail-info h2 {
  font-size: 28px;
  color: #fff;
  margin-bottom: 15px;
  text-align: center;
}

.description {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  margin-bottom: 30px;
  white-space: pre-wrap;
}

.comments-section {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 25px;
}

.comments-header h3 {
  font-size: 18px;
  color: #fff;
  margin: 0 0 20px 0;
}

.existing-comment {
  background: rgba(35, 170, 227, 0.15);
  border-radius: 12px;
  padding: 15px;
  border-left: 3px solid #23aae3;
}

.comment-text {
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 10px;
  white-space: pre-wrap;
}

.comment-meta {
  display: flex;
  gap: 15px;
  align-items: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.comment-meta button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: 0.2s;
}

.edit-comment {
  color: #23aae3;
}

.edit-comment:hover {
  background: rgba(35, 170, 227, 0.2);
}

.delete-comment {
  color: #ff6b6b;
}

.delete-comment:hover {
  background: rgba(255, 107, 107, 0.2);
}

.add-comment textarea {
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}

.add-comment textarea:focus {
  outline: none;
  border-color: #23aae3;
}

.add-comment textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.comment-actions {
  margin-top: 10px;
}

.save-btn {
  background: linear-gradient(135deg, #23aae3, #1a6d8f);
  border: none;
  padding: 10px 24px;
  border-radius: 24px;
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
}

.save-btn:hover:not(:disabled) {
  transform: scale(1.02);
  box-shadow: 0 2px 10px rgba(35, 170, 227, 0.4);
}

.save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.empty-icon {
  font-size: 80px;
  margin-bottom: 20px;
  opacity: 0.5;
}

.empty-state h3 {
  font-size: 24px;
  color: #fff;
  margin-bottom: 10px;
}

.empty-state p {
  color: rgba(255, 255, 255, 0.6);
}
</style>