<script setup lang="ts">
/**
 * Hero-секция детального drawer'а сделки (Sprint 3 Phase C — extraction).
 *
 * Header с #id, именем, кнопкой закрытия, телефоном (tel: ссылка), относительным
 * временем и status-chip'ом.
 */
import type { MockDeal } from '../../composables/mockDeals';
import type { LeadStatus } from '../../composables/leadStatuses';

withDefaults(
    defineProps<{
        deal: MockDeal;
        status: LeadStatus | null;
        // 18.05.2026 ux: inline status picker — кликабельный chip с выпадающим
        // списком всех статусов. Если allStatuses не передан — chip read-only.
        allStatuses?: LeadStatus[];
    }>(),
    { allStatuses: () => [] },
);

defineEmits<{
    close: [];
    'change-status': [slug: string];
}>();

function formatRelative(minutes: number): string {
    if (minutes < 60) return `${minutes} мин назад`;
    if (minutes < 60 * 24) return `${Math.floor(minutes / 60)} ч назад`;
    return `${Math.floor(minutes / (60 * 24))} д назад`;
}
</script>

<template>
    <header class="hero pa-5">
        <div class="hero-eyebrow text-caption text-medium-emphasis">Сделка #{{ deal.id }}</div>
        <div class="hero-row mt-1">
            <h2 class="hero-name text-h5">{{ deal.name }}</h2>
            <v-btn icon="mdi-close" variant="text" size="small" aria-label="Закрыть панель" @click="$emit('close')" />
        </div>
        <div class="hero-meta mt-2">
            <a :href="`tel:${deal.phone.replace(/[^+\d]/g, '')}`" class="phone-link">{{ deal.phone }}</a>
            <span class="sep">·</span>
            <span class="text-caption text-medium-emphasis">
                <v-icon size="14" class="mr-1">mdi-clock-outline</v-icon>
                {{ formatRelative(deal.receivedMinutesAgo) }}
            </span>
        </div>

        <div v-if="status" class="status-row mt-3">
            <v-menu :disabled="(allStatuses?.length ?? 0) === 0">
                <template #activator="{ props: a }">
                    <v-chip
                        v-bind="a"
                        data-testid="status-chip-trigger"
                        size="small"
                        variant="tonal"
                        :style="{
                            color: status.colorHex,
                            borderColor: status.colorHex,
                            cursor: (allStatuses?.length ?? 0) > 0 ? 'pointer' : 'default',
                        }"
                    >
                        <span class="status-dot" :style="{ background: status.colorHex }" />
                        {{ status.nameRu }}
                        <v-icon v-if="(allStatuses?.length ?? 0) > 0" size="14" class="ml-1">mdi-menu-down</v-icon>
                    </v-chip>
                </template>
                <v-list density="compact">
                    <v-list-item
                        v-for="s in allStatuses"
                        :key="s.slug"
                        :data-testid="`status-option-${s.slug}`"
                        @click="$emit('change-status', s.slug)"
                    >
                        <template #prepend>
                            <span class="status-dot" :style="{ background: s.colorHex }" />
                        </template>
                        <v-list-item-title>{{ s.nameRu }}</v-list-item-title>
                    </v-list-item>
                </v-list>
            </v-menu>
        </div>
    </header>
</template>

<style scoped>
.hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.hero-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.hero-name {
    font-variation-settings: 'opsz' 24;
    letter-spacing: -0.018em;
    line-height: 1.2;
    color: #081319;
}

.hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.phone-link {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-feature-settings: 'tnum';
    color: #0f6e56;
    text-decoration: none;
    font-size: 13px;
}
.phone-link:hover {
    text-decoration: underline;
}
.hero-meta .sep {
    /* WCAG2AA 4.5:1 fix (was #92907b → 2.92:1 on ivory; #6b6356 → 5.33:1). */
    color: #6b6356;
}

.status-row {
    display: flex;
}
.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
}
</style>
