<template>
  <div class="bucket" :class="{ 'drag-over': isDragOver }" @dragenter.prevent="onDragEnter"
    @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop.prevent="onDrop">
    <div v-if="tracks.length === 0" class="bucket-empty">
      Drop cards here
    </div>
    <draggable v-else v-model="tracks" item-key="id" class="bucket-cards" @start="onDragStart" @end="onDragEnd"
      :touch-start-threshold="50">
      <template #item="{ element: track }">
        <card :track="track" tabindex="0" is-face-up class="bucket-card" @click="flipCard(track)" />
      </template>
    </draggable>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import draggable from 'vuedraggable'
import { useDataStore } from '~/store/data'

const props = defineProps<{
  modelValue?: any[]
  boxId?: string
}>()

const dataStore = useDataStore()
const isDragOver = ref(false)
const drag = ref(false)
const tracks = ref<any[]>(props.modelValue || [])

watch(() => props.modelValue, (newValue) => {
  if (newValue) {
    tracks.value = [...newValue]
  }
})

if (props.boxId) {
  onMounted(async () => {
    await dataStore.loadData()
    tracks.value = dataStore.getTracksByboxId(props.boxId)
  })
}

// Gestion du drag and drop desktop
const onDragEnter = (e: DragEvent) => {
  e.preventDefault()
  isDragOver.value = true
}

const onDragOver = (e: DragEvent) => {
  e.preventDefault()
  isDragOver.value = true
}

const onDragLeave = () => {
  isDragOver.value = false
}

const onDragStart = () => {
  drag.value = true
}

const onDragEnd = () => {
  drag.value = false
  isDragOver.value = false
}

const onDrop = (e: DragEvent) => {
  isDragOver.value = false
  const cardData = e.dataTransfer?.getData('application/json')
  if (cardData) {
    try {
      const track = JSON.parse(cardData)
      if (!tracks.value.some(t => t.id === track.id)) {
        tracks.value.push(track)
      }
    } catch (e) {
      console.error('Erreur lors du traitement de la carte déposée', e)
    }
  }
}

const flipCard = (track: any) => {
  track.isFaceUp = !track.isFaceUp
}
</script>

<style scoped>
.bucket {
  min-height: 200px;
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 1rem;
  transition: all 0.3s ease;
  background-color: rgba(255, 255, 255, 0.1);
  touch-action: none;
}

.bucket.drag-over {
  border-color: #4CAF50;
  background-color: rgba(76, 175, 80, 0.1);
}

.bucket-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #666;
  font-style: italic;
}

.bucket-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  width: 100%;
}

.bucket-card {
  transition: transform 0.2s;
  cursor: move;
  touch-action: none;
  /* Important pour le touch */
}

.bucket-card:hover {
  transform: translateY(-4px);
}

.bucket-card:active {
  opacity: 0.7;
}
</style>
