<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue';
import { useOrderPriorityStore } from '@/stores/orderPriority';
import { usePageContextStore } from '@/stores/pageContext';

const orderPriorityStore = useOrderPriorityStore();
const pageContextStore = usePageContextStore();

// current page จาก global context store
const pageID = computed(() => pageContextStore.currentPage);

// โหลด priorities ตอน mount และเมื่อ page เปลี่ยน
onMounted(() => {
  if (pageID.value) {
    orderPriorityStore.fetchWithFilter(undefined, pageID.value);
  }
});

watch(pageID, (newVal) => {
  if (newVal) {
    orderPriorityStore.fetchWithFilter(undefined, newVal);
  }
});

const orders = computed(() => {
  return orderPriorityStore.priorities
    .filter((p) => p.page?.PageID === pageID.value)
    .sort((a, b) => a.priority - b.priority)
    .map((p) => ({
      id: p.order.OrderID,
      name: `ORDER${p.order.OrderID}`,
      orderPriorityID: p.orderPriorityID,
    }));
});

const draggedOrder = ref<{ id: number; orderPriorityID: number } | null>(null);

const handleDragStart = (order: any) => {
  draggedOrder.value = order;
};

const handleDragOver = (event: DragEvent) => {
  event.preventDefault();
};

const handleDrop = async (targetOrder: any) => {
  if (!draggedOrder.value || draggedOrder.value.id === targetOrder.id) return;

  const draggedIndex = orders.value.findIndex((o) => o.id === draggedOrder.value!.id);
  const targetIndex = orders.value.findIndex((o) => o.id === targetOrder.id);

  const updatedList = [...orders.value];
  const [moved] = updatedList.splice(draggedIndex, 1);
  updatedList.splice(targetIndex, 0, moved);

  const payload = {
    pages: [
      {
        pageID: pageID.value,
        configs: updatedList.map((order, index) => ({
          id: order.orderPriorityID,
          priority: index + 1,
        })),
      },
    ],
  };

  await orderPriorityStore.updateMany(payload);
  draggedOrder.value = null;
};
</script>

<template>
  <v-card class="pa-5" style="background-color: #333647; border-radius: 15px; min-height: 280px;">
    <p class="text-center font-weight-bold mb-2" style="color: white; font-size: 20px;">
      ลำดับความสำคัญ (Page {{ pageID }})
    </p>

    <transition-group name="list" tag="div">
      <div
        v-for="order in orders"
        :key="order.id"
        class="order-item"
        draggable="true"
        @dragstart="() => handleDragStart(order)"
        @dragover="handleDragOver"
        @drop="() => handleDrop(order)"
      >
        {{ order.name }}
      </div>
    </transition-group>
  </v-card>
</template>

<style scoped>
.order-item {
  background-color: white;
  color: black;
  padding: 10px;
  margin-bottom: 8px;
  text-align: center;
  cursor: move;
  user-select: none;
  border-radius: 5px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.order-item:hover {
  opacity: 0.9;
}

.order-item:active {
  transform: scale(1.05);
}

.list-move {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.list-enter-active, .list-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}

.list-enter-from, .list-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>