<script setup lang="ts">
import { ref } from 'vue'
import {
  ListTodo,
  ChevronUp,
  ChevronDown,
  ArrowUp,
  ArrowDown,
  Trash2,
  Zap,
} from '@lucide/vue'
import type { QueueItem } from '../../composables/useDashboardData'

const props = defineProps<{
  items: QueueItem[]
}>()

const emit = defineEmits<{
  remove: [id: string]
  moveUp: [id: string]
  moveDown: [id: string]
  changePriority: [id: string, priority: QueueItem['priority']]
  executeNow: [id: string]
}>()

const expanded = ref(true)

const priorityColor: Record<string, string> = {
  high: '#ef4444',
  medium: '#eab308',
  low: '#6b7385',
}

const dragIndex = ref<number | null>(null)
const dragOverIndex = ref<number | null>(null)

function onDragStart(idx: number): void {
  dragIndex.value = idx
}

function onDragOver(e: DragEvent, idx: number): void {
  e.preventDefault()
  dragOverIndex.value = idx
}

function onDrop(): void {
  if (dragIndex.value !== null && dragOverIndex.value !== null && dragIndex.value !== dragOverIndex.value) {
    const id = props.items[dragIndex.value]?.id
    if (id) {
      const targetId = props.items[dragOverIndex.value]?.id
      if (targetId) {
        if (dragIndex.value < dragOverIndex.value) {
          for (let i = dragIndex.value; i < dragOverIndex.value; i++) {
            emit('moveDown', props.items[i]!.id)
          }
        } else {
          for (let i = dragIndex.value; i > dragOverIndex.value; i--) {
            emit('moveUp', props.items[i]!.id)
          }
        }
      }
    }
  }
  dragIndex.value = null
  dragOverIndex.value = null
}

function onDragEnd(): void {
  dragIndex.value = null
  dragOverIndex.value = null
}
</script>

<template>
  <div class="queue-panel">
    <div class="queue-header" @click="expanded = !expanded">
      <div class="queue-header-left">
        <ListTodo :size="14" class="queue-icon" />
        <h2>Chat Queue</h2>
        <span class="queue-count">{{ items.length }}</span>
      </div>
      <button class="queue-toggle" aria-label="Toggle">
        <ChevronUp v-if="expanded" :size="14" />
        <ChevronDown v-else :size="14" />
      </button>
    </div>

    <Transition name="queue-expand">
      <div v-if="expanded" class="queue-list">
        <div
          v-for="(item, idx) in items"
          :key="item.id"
          class="queue-item"
          :class="{
            'drag-source': dragIndex === idx,
            'drag-over': dragOverIndex === idx && dragIndex !== idx,
          }"
          draggable="true"
          @dragstart="onDragStart(idx)"
          @dragover="onDragOver($event, idx)"
          @drop="onDrop"
          @dragend="onDragEnd"
        >
          <div class="queue-item-body">
            <div class="queue-item-head">
              <span
                class="priority-badge"
                :style="{
                  color: priorityColor[item.priority],
                  borderColor: `${priorityColor[item.priority]}30`,
                  background: `${priorityColor[item.priority]}10`,
                }"
              >
                {{ item.priority }}
              </span>
              <span class="queue-wait">{{ item.waitTime }}</span>
            </div>
            <p class="queue-text">{{ item.text }}</p>
          </div>

          <div class="queue-actions">
            <button
              class="q-action-btn"
              title="Execute now"
              @click.stop="emit('executeNow', item.id)"
            >
              <Zap :size="12" />
            </button>
            <button
              class="q-action-btn"
              title="Move up"
              :disabled="idx === 0"
              @click.stop="emit('moveUp', item.id)"
            >
              <ArrowUp :size="12" />
            </button>
            <button
              class="q-action-btn"
              title="Move down"
              :disabled="idx === items.length - 1"
              @click.stop="emit('moveDown', item.id)"
            >
              <ArrowDown :size="12" />
            </button>
            <button
              class="q-action-btn q-action-danger"
              title="Remove"
              @click.stop="emit('remove', item.id)"
            >
              <Trash2 :size="12" />
            </button>
          </div>
        </div>

        <div v-if="items.length === 0" class="queue-empty">
          <p>Queue is empty</p>
        </div>
      </div>
    </Transition>
  </div>
</template>

<style scoped>
.queue-panel {
  display: flex;
  flex-direction: column;
  background: rgba(22, 27, 34, 0.75);
  border: 1px solid rgba(139, 124, 246, 0.12);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  transition: border-color 0.2s ease;
}
.queue-panel:hover {
  border-color: rgba(139, 124, 246, 0.18);
}

.queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
}
.queue-header-left {
  display: flex;
  align-items: center;
  gap: 7px;
}
.queue-icon {
  color: #a78bfa;
}
.queue-header h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #e8eaf0;
}
.queue-count {
  font-size: 10px;
  font-weight: 700;
  color: #a78bfa;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(167, 139, 250, 0.1);
  font-variant-numeric: tabular-nums;
}
.queue-toggle {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #6b7385;
  cursor: pointer;
  transition: all 0.2s;
}
.queue-toggle:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #e8eaf0;
}

.queue-list {
  display: flex;
  flex-direction: column;
  padding: 0 10px 10px;
  gap: 4px;
}

.queue-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.15s, opacity 0.15s;
  cursor: grab;
}
.queue-item:hover {
  background: rgba(255, 255, 255, 0.03);
}
.queue-item:active {
  cursor: grabbing;
}
.drag-source {
  opacity: 0.4;
}
.drag-over {
  background: rgba(167, 139, 250, 0.08);
}

.queue-item-body {
  flex: 1;
  min-width: 0;
}
.queue-item-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.priority-badge {
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid;
}
.queue-wait {
  font-size: 8px;
  color: #6b7385;
  font-variant-numeric: tabular-nums;
}
.queue-text {
  margin: 0;
  font-size: 9.5px;
  color: #7e8799;
  line-height: 1.3;
}

/* Actions */
.queue-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
  margin-top: 2px;
}
.queue-item:hover .queue-actions {
  opacity: 1;
}
.q-action-btn {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #6b7385;
  cursor: pointer;
  transition: all 0.15s;
}
.q-action-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  color: #e8eaf0;
}
.q-action-btn:disabled {
  opacity: 0.25;
  cursor: default;
}
.q-action-danger:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.queue-empty {
  text-align: center;
  padding: 16px 0;
}
.queue-empty p {
  margin: 0;
  font-size: 10px;
  color: #6b7385;
}

/* Transition */
.queue-expand-enter-active,
.queue-expand-leave-active {
  transition: all 0.2s ease;
}
.queue-expand-enter-from,
.queue-expand-leave-to {
  opacity: 0;
  transform: translateY(-8px);
}
</style>
