<script setup lang="ts">
/**
 * Колонка статуса в Kanban-доске с поддержкой DnD (sortable group).
 *
 * Источник дизайна: liderra_v8_handoff/concepts/v8_kanban.html .kanban-column.
 * DnD: vuedraggable@4 (обёртка SortableJS для Vue 3). group="kanban-deals" —
 * карточки можно перетаскивать между колонками; при drop emit('change', evt)
 * с типом события (added/removed/moved) для родителя (KanbanView).
 *
 * v-model:deals — двусторонняя привязка списка карточек: vuedraggable
 * мутирует array при drop, родитель получает обновлённый список.
 */
import { computed } from 'vue';
import draggable from 'vuedraggable';
import type { LeadStatus } from '../../composables/leadStatuses';
import type { MockDeal } from '../../composables/mockDeals';
import KanbanCard from './KanbanCard.vue';

interface DraggableChangeEvent {
    added?: { element: MockDeal; newIndex: number };
    removed?: { element: MockDeal; oldIndex: number };
    moved?: { element: MockDeal; oldIndex: number; newIndex: number };
}

const props = defineProps<{
    status: LeadStatus;
    deals: MockDeal[];
}>();

const emit = defineEmits<{
    'update:deals': [list: MockDeal[]];
    change: [event: DraggableChangeEvent];
    openDeal: [id: number];
}>();

const localDeals = computed({
    get: () => props.deals,
    set: (v) => emit('update:deals', v),
});

const total = computed(() => props.deals.reduce((sum, d) => sum + d.cost, 0));

function formatTotal(cost: number): string {
    if (cost === 0) return '—';
    return new Intl.NumberFormat('ru-RU').format(cost) + ' ₽';
}

function onDraggableChange(event: DraggableChangeEvent) {
    emit('change', event);
}
</script>

<template>
    <div class="kanban-column">
        <header class="column-head" :style="{ '--accent': status.colorHex }">
            <div class="column-head-row">
                <span class="column-name ld-label">{{ status.nameRu }}</span>
                <span class="column-count">{{ deals.length }}</span>
            </div>
            <div class="column-total">{{ formatTotal(total) }}</div>
        </header>

        <draggable
            v-model="localDeals"
            class="column-body"
            group="kanban-deals"
            item-key="id"
            ghost-class="ghost-card"
            drag-class="drag-card"
            animation="150"
            @change="onDraggableChange"
        >
            <template #item="{ element }: { element: MockDeal }">
                <KanbanCard :deal="element" @open="(id) => emit('openDeal', id)" />
            </template>
            <template #footer>
                <div v-if="deals.length === 0" class="column-empty">
                    <span class="text-caption text-medium-emphasis">пусто · перетащите сюда</span>
                </div>
            </template>
        </draggable>
    </div>
</template>

<style scoped>
.kanban-column {
    flex: 0 0 280px;
    width: 280px;
    background: #f0ede4;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

.column-head {
    padding: 12px;
    border-radius: 8px 8px 0 0;
    border-top: 3px solid var(--accent);
    background: #f6f3ec;
}

.column-head-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.column-name {
    font-weight: 600;
    font-size: 13px;
    color: #081319;
    letter-spacing: -0.005em;
}

.column-count {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-feature-settings: 'tnum';
    font-size: 12px;
    color: #66635c;
    background: #fff;
    padding: 1px 8px;
    border-radius: 10px;
    border: 1px solid #d9d5cd;
}

.column-total {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-feature-settings: 'tnum';
    font-size: 11px;
    color: var(--accent);
    margin-top: 2px;
    font-weight: 500;
}

.column-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px;
    min-height: 80px;
}

.column-empty {
    text-align: center;
    padding: 24px 0;
    border: 1px dashed #d9d5cd;
    border-radius: 6px;
    color: #92907b;
    margin-top: 8px;
}

/* Drag-эффекты от vuedraggable / SortableJS. */
.ghost-card {
    opacity: 0.4;
    background: #e1eeea !important;
}
.drag-card {
    opacity: 0.95;
    transform: rotate(1deg);
}
</style>
