<script setup lang="ts">
/**
 * Фильтр-бар реестра «Сделки»: поиск по телефону + 3 select'а (Статус, Проект,
 * Город). Состояние держит родитель через v-model:*. Город — пока без данных
 * (источник §4 спеки не определён): select disabled при пустом availableCities.
 */
import type { LeadStatus } from '../../composables/leadStatuses';

const props = defineProps<{
    searchPhone: string;
    filterStatus: string | null;
    filterProject: number | null;
    filterCity: string | null;
    leadStatuses: LeadStatus[];
    availableProjects: { id: number; name: string }[];
    availableCities: string[];
}>();

defineEmits<{
    'update:searchPhone': [value: string];
    'update:filterStatus': [value: string | null];
    'update:filterProject': [value: number | null];
    'update:filterCity': [value: string | null];
    'clear-filters': [];
}>();

const hasActiveFilter = () => props.filterStatus !== null || props.filterProject !== null || props.filterCity !== null;
</script>

<template>
    <div class="deals-filters">
        <v-text-field
            :model-value="searchPhone"
            placeholder="Поиск по телефону…"
            prepend-inner-icon="mdi-magnify"
            variant="outlined"
            density="compact"
            hide-details
            clearable
            class="filters-search"
            data-testid="filter-search-phone"
            @update:model-value="(v: string) => $emit('update:searchPhone', v ?? '')"
        />
        <v-select
            :model-value="filterStatus"
            :items="leadStatuses"
            item-title="nameRu"
            item-value="slug"
            label="Статус"
            variant="outlined"
            density="compact"
            hide-details
            clearable
            class="filters-select"
            data-testid="filter-status"
            @update:model-value="(v: string | null) => $emit('update:filterStatus', v ?? null)"
        />
        <v-select
            :model-value="filterProject"
            :items="availableProjects"
            item-title="name"
            item-value="id"
            label="Проект"
            variant="outlined"
            density="compact"
            hide-details
            clearable
            class="filters-select"
            data-testid="filter-project"
            @update:model-value="(v: number | null) => $emit('update:filterProject', v ?? null)"
        />
        <v-select
            :model-value="filterCity"
            :items="availableCities"
            label="Город"
            variant="outlined"
            density="compact"
            hide-details
            clearable
            :disabled="availableCities.length === 0"
            class="filters-select"
            data-testid="filter-city"
            @update:model-value="(v: string | null) => $emit('update:filterCity', v ?? null)"
        />
        <v-btn
            v-if="hasActiveFilter()"
            variant="text"
            size="small"
            prepend-icon="mdi-filter-off"
            data-testid="clear-filters-btn"
            @click="$emit('clear-filters')"
        >
            Сбросить
        </v-btn>
    </div>
</template>

<style scoped>
.deals-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.filters-search {
    flex: 1 1 240px;
    max-width: 320px;
}
.filters-select {
    min-width: 170px;
    max-width: 220px;
}
</style>
