<script setup lang="ts">
/**
 * Компактная карточка сделки в Kanban-колонке.
 *
 * Источник дизайна: liderra_v8_handoff/concepts/v8_kanban.html .kanban-card.
 * Содержит: имя + телефон + проект + стоимость + manager-avatar.
 *
 * Click → emit('open', deal.id) — TODO: правая панель DealDetailDrawer.
 */
import type { MockDeal } from '../../composables/mockDeals';
import { stripChannelPrefix } from '../../composables/projectName';

defineProps<{ deal: MockDeal }>();
const emit = defineEmits<{ open: [id: number] }>();

function formatCost(cost: number): string {
    return new Intl.NumberFormat('ru-RU').format(cost) + ' ₽';
}
</script>

<template>
    <v-card
        variant="outlined"
        class="kanban-card ld-hover-lift pa-3 mb-2"
        density="compact"
        @click="emit('open', deal.id)"
    >
        <div class="card-name">{{ deal.name }}</div>
        <div class="card-phone text-caption text-medium-emphasis">{{ deal.phone }}</div>
        <div class="card-meta mt-2">
            <span class="card-project text-caption">{{ stripChannelPrefix(deal.project) }}</span>
            <span class="card-cost num">{{ deal.costKopecks != null ? formatCost(deal.costKopecks / 100) : '—' }}</span>
        </div>
        <div class="card-foot mt-1">
            <v-avatar size="20" color="secondary">
                <span class="text-caption">{{ deal.manager.initials }}</span>
            </v-avatar>
            <span class="card-manager text-caption text-medium-emphasis ml-1">{{ deal.manager.name }}</span>
        </div>
    </v-card>
</template>

<style scoped>
.kanban-card {
    background: #fff;
    cursor: pointer;
    transition:
        border-color 0.15s,
        transform 0.15s;
}
.kanban-card:hover {
    border-color: #66635c !important;
    transform: translateY(-1px);
}

.card-name {
    font-weight: 500;
    font-size: 13px;
    color: #081319;
    line-height: 1.3;
}

.card-phone {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-feature-settings: 'tnum';
    font-size: 11px;
}

.card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-project {
    color: #66635c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

.card-cost {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-feature-settings: 'tnum';
    font-weight: 500;
    font-size: 12px;
    color: #081319;
}

.card-foot {
    display: flex;
    align-items: center;
}

.num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-feature-settings: 'tnum';
}
</style>
