<template>
  <div class="queued-list">
    <template v-if="packages.length === 0">
      <span class="empty-message">No packages queued.</span>
    </template>
    <template v-else>
      <v-expansion-panels class="queued-expansion">
        <v-expansion-panel class="queued-panel" elevation="0">
          <v-expansion-panel-title class="panel-title">
            <v-icon icon="mdi-format-list-bulleted" size="18" class="panel-icon" />
            Show all queued packages
            <span class="package-count">{{ packages.length }}</span>
          </v-expansion-panel-title>
          <v-expansion-panel-text class="panel-content">
            <div class="queued-items">
              <div
                v-for="pkg in packages"
                :key="`${pkg.pkgbase}-${pkg.repo}`"
                class="queued-item">
                <div class="item-info">
                  <span class="item-name">{{ pkg.pkgbase }}</span>
                  <span class="item-repo">{{ pkg.repo }}</span>
                </div>
                <code class="item-version">{{ pkg.arch_version }}</code>
              </div>
            </div>
          </v-expansion-panel-text>
        </v-expansion-panel>
      </v-expansion-panels>
    </template>
  </div>
</template>

<script lang="ts" setup>
import type { components } from '@/api'

defineProps({
  packages: {
    type: Array<components['schemas']['Package']>,
    required: true,
    default: () => []
  }
})
</script>

<style scoped>
.queued-list {
  width: 100%;
}

.empty-message {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.queued-expansion {
  --v-expansion-panel-border-radius: var(--radius-md);
}

.queued-panel {
  background: var(--color-bg-secondary) !important;
  border: 1px solid var(--color-border-subtle);
}

.panel-title {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  padding: var(--space-3) !important;
  min-height: auto !important;
}

.panel-icon {
  margin-right: var(--space-2);
  opacity: 0.7;
}

.package-count {
  margin-left: var(--space-2);
  background: var(--color-bg-hover);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.panel-content {
  padding: 0 !important;
}

.panel-content :deep(.v-expansion-panel-text__wrapper) {
  padding: var(--space-2);
}

.queued-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 300px;
  overflow-y: auto;
}

.queued-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.queued-item:hover {
  background: var(--color-bg-hover);
}

.item-info {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.item-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-repo {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.item-version {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Custom scrollbar for queued items */
.queued-items::-webkit-scrollbar {
  width: 6px;
}

.queued-items::-webkit-scrollbar-track {
  background: transparent;
}

.queued-items::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

.queued-items::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}
</style>
