<script setup lang="ts">
/**
 * Sticky-bar массовой смены статуса для выбранных сделок (редизайн 2026-05-17).
 * Только смена статуса — корзина/экспорт убраны (экспорт — панель по датам).
 */
import type { MockDeal } from '../../composables/mockDeals';
import type { LeadStatus } from '../../composables/leadStatuses';

defineProps<{
    selectedCount: number;
    statusMenuOpen: boolean;
    leadStatuses: LeadStatus[];
}>();

defineEmits<{
    'update:statusMenuOpen': [value: boolean];
    'apply-status': [slug: MockDeal['statusSlug']];
    'clear-selected': [];
}>();
</script>

<template>
    <v-card
        v-if="selectedCount > 0"
        class="bulk-bar mt-3"
        color="secondary"
        theme="dark"
        variant="flat"
        data-testid="bulk-bar"
    >
        <div class="bulk-bar-inner">
            <span class="bulk-count"
                >Выбрано <span class="num">{{ selectedCount }}</span></span
            >
            <v-spacer />
            <v-menu
                :model-value="statusMenuOpen"
                :close-on-content-click="false"
                @update:model-value="(v: boolean) => $emit('update:statusMenuOpen', v)"
            >
                <template #activator="{ props: menuProps }">
                    <v-btn
                        v-bind="menuProps"
                        variant="tonal"
                        size="small"
                        prepend-icon="mdi-tag-arrow-right"
                        data-testid="bulk-status-btn"
                    >
                        Сменить статус
                    </v-btn>
                </template>
                <v-list density="compact" max-height="320" min-width="240">
                    <v-list-item
                        v-for="s in leadStatuses"
                        :key="s.slug"
                        :data-testid="`bulk-status-item-${s.slug}`"
                        @click="$emit('apply-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>
            <v-btn
                icon="mdi-close"
                variant="text"
                size="small"
                data-testid="bulk-clear-btn"
                @click="$emit('clear-selected')"
            />
        </div>
    </v-card>
</template>

<style scoped>
.num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-feature-settings: 'tnum';
    font-weight: 500;
}
.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
}
.bulk-bar {
    position: sticky;
    top: 0;
    z-index: 4;
}
.bulk-bar-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
}
.bulk-count {
    color: #f6f3ec;
    font-size: 13px;
}
</style>
