<script setup lang="ts">
/**
 * Filter-bar для DealsView (Sprint 3 Phase C):
 *   - btn-toggle с DEALS_TABS (active/all/...) + chip-counts
 *   - search input (имя/телефон/проект)
 *   - multi-select Проект и Менеджер
 *   - кнопка «Сбросить фильтры» (если хоть один из multi-select заполнен)
 *
 * Состояние держится в родителе через v-model:* (двунаправленные связки).
 */
import { DEALS_TABS } from '../../composables/mockDeals';

defineProps<{
    activeTab: (typeof DEALS_TABS)[number]['id'];
    searchQuery: string;
    filterProjects: string[];
    filterManagers: string[];
    availableProjects: string[];
    availableManagers: { name: string; initials: string }[];
    counts: Record<string, number>;
}>();

defineEmits<{
    'update:activeTab': [value: (typeof DEALS_TABS)[number]['id']];
    'update:searchQuery': [value: string];
    'update:filterProjects': [value: string[]];
    'update:filterManagers': [value: string[]];
    'clear-filters': [];
}>();
</script>

<template>
    <div class="filter-bar mt-4">
        <v-btn-toggle
            :model-value="activeTab"
            mandatory
            color="primary"
            density="comfortable"
            variant="outlined"
            @update:model-value="(v: (typeof DEALS_TABS)[number]['id']) => $emit('update:activeTab', v)"
        >
            <v-btn v-for="tab in DEALS_TABS" :key="tab.id" :value="tab.id" size="small">
                {{ tab.label }}
                <v-chip size="x-small" class="ml-2 chip-count" variant="tonal">
                    {{ counts[tab.id] }}
                </v-chip>
            </v-btn>
        </v-btn-toggle>

        <v-text-field
            :model-value="searchQuery"
            placeholder="Поиск: имя, телефон, проект…"
            prepend-inner-icon="mdi-magnify"
            variant="outlined"
            density="compact"
            hide-details
            clearable
            class="search-input ml-4"
            @update:model-value="(v: string) => $emit('update:searchQuery', v ?? '')"
        />

        <v-select
            :model-value="filterProjects"
            :items="availableProjects"
            multiple
            chips
            closable-chips
            clearable
            variant="outlined"
            density="compact"
            hide-details
            label="Проект"
            style="min-width: 180px; max-width: 260px"
            data-testid="filter-projects"
            @update:model-value="(v: string[]) => $emit('update:filterProjects', v ?? [])"
        />
        <v-select
            :model-value="filterManagers"
            :items="availableManagers"
            item-title="name"
            item-value="name"
            multiple
            chips
            closable-chips
            clearable
            variant="outlined"
            density="compact"
            hide-details
            label="Менеджер"
            style="min-width: 180px; max-width: 260px"
            data-testid="filter-managers"
            @update:model-value="(v: string[]) => $emit('update:filterManagers', v ?? [])"
        />
        <v-btn
            v-if="filterProjects.length > 0 || filterManagers.length > 0"
            variant="text"
            size="small"
            prepend-icon="mdi-filter-off"
            data-testid="clear-filters-btn"
            @click="$emit('clear-filters')"
        >
            Сбросить фильтры
        </v-btn>
    </div>
</template>

<style scoped>
.filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.search-input {
    flex: 1 1 320px;
    max-width: 360px;
}

.chip-count {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
</style>
