<script setup>
import { ref, computed, onMounted } from 'vue'
import { useTranslation } from 'i18next-vue'
import { useRouter, useRoute } from 'vue-router'
import { useCollections } from '../composables/useCollections.js'
import { useJsonExport } from '../composables/useJsonExport.js'
import { useKeyboardShortcut } from '../composables/useKeyboardShortcut.js'

const { t } = useTranslation()
const router = useRouter()
const route = useRoute()
const { getById, remove } = useCollections()
const { exportCollection } = useJsonExport()

const collection = ref(null)
const loading = ref(true)

const collectionId = computed(() => route.params.id)

onMounted(async () => {
  const data = await getById(collectionId.value)
  if (!data) {
    router.replace({ name: 'collections' })
    return
  }
  collection.value = data
  loading.value = false
})

function goToEdit() {
  router.push({ name: 'collection-edit', params: { id: collectionId.value } })
}

useKeyboardShortcut('e', goToEdit)
useKeyboardShortcut('escape', goBack, false)

function goBack() {
  router.push({ name: 'collections' })
}

function goToSession(sessionId) {
  router.push({ name: 'session-detail', params: { id: sessionId } })
}

async function onDelete() {
  if (!collection.value) return
  const confirmed = window.confirm(
    t('collections.deleteConfirm', { label: collection.value.label }),
  )
  if (!confirmed) return
  await remove(collectionId.value)
  router.push({ name: 'collections' })
}

async function onExport() {
  await exportCollection(collectionId.value)
}
</script>

<template>
  <Teleport to="#actionbar-actions" defer>
    <button
      data-testid="collection-back-btn"
      :title="$t('collections.title') + ' ' + $t('shortcuts.back')"
      :aria-label="$t('collections.title')"
      @click="goBack"
    >
      <i class="bi bi-arrow-left"></i>
    </button>
    <button
      data-testid="collection-export-single-btn"
      :title="$t('export.collection')"
      :aria-label="$t('export.collection')"
      @click="onExport"
    >
      <i class="bi bi-download"></i>
    </button>
    <button
      data-testid="collection-edit-btn"
      :title="$t('collections.edit') + ' ' + $t('shortcuts.edit')"
      :aria-label="$t('collections.edit')"
      @click="goToEdit"
    >
      <i class="bi bi-pencil"></i>
    </button>
    <button
      data-testid="collection-delete-btn"
      :title="$t('collections.delete')"
      :aria-label="$t('collections.delete')"
      @click="onDelete"
    >
      <i class="bi bi-trash"></i>
    </button>
  </Teleport>

  <div class="collection-detail-view">
    <p v-if="loading" class="text-muted">{{ $t('app.loading') }}</p>

    <template v-else-if="collection">
      <h2 data-testid="collection-detail-title">{{ collection.label }}</h2>

      <div v-if="collection.sessions && collection.sessions.length" class="sessions-section">
        <h3>{{ $t('collections.form.sessions') }}</h3>
        <ol class="collection-session-list">
          <li
            v-for="(session, index) in collection.sessions"
            :key="'session-' + index"
            class="collection-session-item"
            :data-testid="'collection-detail-session-' + index"
          >
            <span class="collection-session-number">{{ index + 1 }}</span>
            <a
              class="collection-session-title"
              :data-testid="'collection-detail-session-link-' + index"
              @click="goToSession(session.session_id)"
            >
              {{ session.title }}
            </a>
          </li>
        </ol>
      </div>
    </template>
  </div>
</template>

<style scoped>
.collection-detail-view {
  max-width: 800px;
}

.collection-detail-view h2 {
  font-size: 22px;
  margin-bottom: 8px;
}

.sessions-section {
  margin-bottom: 20px;
}

.sessions-section h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}

.collection-session-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.collection-session-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border-color);
}

.collection-session-number {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.collection-session-title {
  font-size: 14px;
  color: var(--btn-primary-bg);
  cursor: pointer;
  text-decoration: none;
}

.collection-session-title:hover {
  text-decoration: underline;
}
</style>
