<template>
  <div class="tracks-page">
    <div class="header-section">
      <h1>Библиотека треков</h1>
      <button class="btn-primary" @click="showUpload = true">Загрузить трек</button>
    </div>

    <div v-if="tracksStore.loading" class="loading">Загрузка...</div>

    <div v-else-if="tracksStore.tracks.length === 0" class="empty">
      <p>Нет треков. Загрузите первый!</p>
    </div>

    <div v-else class="tracks-list card">
      <TrackList
        :tracks="tracksStore.tracks"
        @delete="handleDelete"
      />
    </div>

    <Modal v-if="showUpload" title="Загрузить трек" @close="showUpload = false">
      <UploadTrack @uploaded="showUpload = false" />
    </Modal>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useTracksStore } from '../stores/tracks'
import TrackList from '../components/tracks/TrackList.vue'
import UploadTrack from '../components/tracks/UploadTrack.vue'
import Modal from '../components/common/Modal.vue'

const tracksStore = useTracksStore()

const showUpload = ref(false)

onMounted(() => {
  tracksStore.fetchTracks()
})

async function handleDelete(track) {
  if (confirm(`Удалить трек "${track.title}"?`)) {
    await tracksStore.deleteTrack(track.id)
  }
}
</script>

<style scoped>
.tracks-page {
  padding-top: 20px;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.header-section h1 {
  margin: 0;
}

.tracks-list {
  padding: 16px;
}

.loading, .empty {
  text-align: center;
  padding: 40px;
  color: #aaa;
}
</style>
