<template>
    <div class="employee-sector">
        <h3 style="color: black;">เลือกพนักงาน</h3>
        <div class="employee-list">
            <div v-for="employee in employees" :key="employee.EmployeeID" class="employee-card" draggable="true"
                @dragstart="onDragStart($event, employee)">
                <!-- ✅ ปิด Drag Default ของรูปภาพ -->
                <img :src="employee.image || defaultImage" alt="employee" class="employee-image" @dragstart.prevent />
                <span style="color: black;">{{ employee.name }}</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { Employee } from '@/types/Employee'
import { ref, onMounted } from 'vue'
import { listEmployees } from '@/services/employee'

// ✅ ดึง BASE URL จาก ENV
const IMAGE_BASE_URL = import.meta.env.VITE_EMP_IMAGE_BASE || ''
const defaultImage = '/images/noimage.jpg'

const employees = ref<Employee[]>([])

const onDragStart = (event: DragEvent, employee: Employee) => {
    event.dataTransfer?.setData('text/plain', JSON.stringify(employee))
    event.dataTransfer!.effectAllowed = 'move'
}

// ✅ โหลดข้อมูลพนักงานตอน mount
onMounted(async () => {
    try {
        const res = await listEmployees()
        employees.value = res.map((e) => ({
            ...e,
            image: e.image ? IMAGE_BASE_URL + e.image : defaultImage,
        }))
    } catch (error) {
        console.error('โหลดพนักงานไม่สำเร็จ', error)
    }
})
</script>

<style scoped>
.employee-sector {
    max-height: 250px;
    border-radius: 20px;
    text-align: center;
}

.employee-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    justify-items: center;
    padding: 10px;
}

.employee-card {
    margin: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 120px;
    border: 2px solid #ccc;
    border-radius: 10px;
    cursor: grab;
    background: white;
    transition: all 0.3s ease;
}

@media (max-width: 600px) {
    .employee-list {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    }

    .employee-card {
        width: 80px;
        height: 100px;
    }

    .employee-image {
        width: 40px;
        height: 40px;
    }
}

.employee-card:hover {
    background: #f0f0f0;
}

.employee-card:active {
    cursor: grabbing;
}

.employee-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 5px;
}
</style>