<!--
|--------------------------------------------------------------------------
| BlocoItems.vue — lista de items de um bloco de roadmap com drag-drop local
|--------------------------------------------------------------------------
-->
<script setup>
import { useDraggableList } from '../composables/useDraggableList';

const props = defineProps({
    items: { type: Array, required: true },
    reorderFn: { type: Function, required: true },
    onEdit: { type: Function, required: true }
});

const drag = useDraggableList({
    onReorder: (from, to) => props.reorderFn(props.items, from, to)
});

const STATUS_LABEL = {
    pendente: { label: 'Pendente', color: 'var(--text-color-secondary)', bg: 'var(--surface-border)' },
    em_andamento: { label: 'Em andamento', color: '#f59e0b', bg: 'rgba(245,158,11,.15)' },
    concluido: { label: 'Concluído', color: '#10b981', bg: 'rgba(16,185,129,.15)' },
    cancelado: { label: 'Cancelado', color: '#94a3b8', bg: 'rgba(148,163,184,.15)' },
    bloqueado: { label: 'Bloqueado', color: '#ef4444', bg: 'rgba(239,68,68,.15)' }
};

const PRIOR_LABEL = {
    bloqueador: { label: 'Bloqueador', color: '#ef4444' },
    alta: { label: 'Alta', color: '#f59e0b' },
    media: { label: 'Média', color: '#0ea5e9' },
    diferencial: { label: 'Diferencial', color: '#a855f7' }
};

const ESFORCO_DESC = {
    S: '<1 semana',
    M: '1-3 semanas',
    L: '3-8 semanas',
    XL: '2+ meses'
};
const ESFORCO_COLOR = {
    S: '#10b981',
    M: '#0ea5e9',
    L: '#f59e0b',
    XL: '#ef4444'
};
</script>

<template>
    <ul class="items">
        <li
            v-for="(item, idx) in items"
            :key="item.id"
            :class="[
                'item',
                {
                    dragging: drag.dragIdx.value === idx,
                    'drop-target': drag.overIdx.value === idx && drag.dragIdx.value !== idx
                }
            ]"
            draggable="true"
            @dragstart="drag.onDragStart($event, idx)"
            @dragover.prevent="drag.onDragOver($event, idx)"
            @drop="drag.onDrop($event, idx)"
            @dragend="drag.onDragEnd"
        >
            <span class="drag-handle" title="Arrastar pra reordenar">
                <i class="pi pi-bars" />
            </span>

            <div class="item-num">{{ item.numero || '•' }}</div>

            <div class="item-main">
                <div class="item-head">
                    <h4 class="item-feature">{{ item.feature }}</h4>
                    <div class="item-badges">
                        <span
                            v-if="item.esforco"
                            class="badge esforco"
                            :style="{ color: ESFORCO_COLOR[item.esforco], borderColor: ESFORCO_COLOR[item.esforco] }"
                            :title="ESFORCO_DESC[item.esforco]"
                        >{{ item.esforco }}</span>
                        <span
                            v-if="item.prioridade"
                            class="badge prior"
                            :style="{ color: PRIOR_LABEL[item.prioridade]?.color }"
                        >{{ PRIOR_LABEL[item.prioridade]?.label }}</span>
                        <span
                            class="badge status"
                            :style="{ color: STATUS_LABEL[item.status]?.color, background: STATUS_LABEL[item.status]?.bg }"
                        >{{ STATUS_LABEL[item.status]?.label }}</span>
                        <button class="btn-icon" @click="onEdit(item)" title="Editar">
                            <i class="pi pi-pencil" />
                        </button>
                    </div>
                </div>
                <p v-if="item.descricao" class="item-desc">{{ item.descricao }}</p>
                <div v-if="item.notas" class="item-notas">
                    <i class="pi pi-comment text-xs" /> {{ item.notas }}
                </div>
            </div>
        </li>
    </ul>
</template>

<style scoped>
.items { list-style: none; padding: 0; margin: 0; }

.item {
    display: flex;
    gap: 10px;
    padding: 10px 6px;
    border-bottom: 1px dashed var(--surface-border);
    transition: all 0.15s;
}
.item:last-child { border-bottom: none; }
.item.dragging { opacity: 0.4; transform: scale(0.98); }
.item.drop-target {
    border-bottom-style: solid;
    border-bottom-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 5%, transparent);
}

.drag-handle {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    color: var(--text-color-secondary);
    cursor: grab;
    flex-shrink: 0;
    opacity: 0.3;
    transition: opacity 0.15s;
    margin-top: 2px;
}
.item:hover .drag-handle { opacity: 1; }
.drag-handle:hover { background: var(--surface-ground); }
.drag-handle:active { cursor: grabbing; }

.item-num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-color-secondary);
    min-width: 28px;
    text-align: right;
    padding-top: 2px;
    flex-shrink: 0;
}

.item-main { flex: 1; min-width: 0; }

.item-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.item-feature {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    flex: 1;
    min-width: 200px;
    margin: 0;
}

.item-badges {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 1px solid transparent;
}
.badge.esforco {
    background: transparent;
    min-width: 26px;
    text-align: center;
}

.item-desc {
    font-size: 12px;
    color: var(--text-color-secondary);
    line-height: 1.5;
    margin-top: 4px;
    margin-bottom: 0;
}

.item-notas {
    font-size: 11px;
    color: var(--text-color-secondary);
    background: color-mix(in srgb, var(--primary-color) 5%, transparent);
    padding: 6px 10px;
    border-radius: 6px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-icon {
    background: transparent;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    color: var(--text-color-secondary);
    cursor: pointer;
    font-size: 11px;
    transition: all 0.15s;
}
.btn-icon:hover {
    background: var(--surface-ground);
    color: var(--primary-color);
}
</style>
