<script setup lang="ts">
import type { TenantStatus } from '../../../composables/mockTenants';

defineProps<{
    search: string;
    filterStatuses: TenantStatus[];
    filterTariffs: string[];
    availableTariffs: readonly string[];
}>();

const emit = defineEmits<{
    'update:search': [value: string];
    'update:filterStatuses': [value: TenantStatus[]];
    'update:filterTariffs': [value: string[]];
    clear: [];
}>();

const STATUS_OPTIONS: Array<{ value: TenantStatus; title: string }> = [
    { value: 'active', title: 'Активен' },
    { value: 'trial', title: 'Trial' },
    { value: 'overdue', title: 'Просрочка' },
    { value: 'suspended', title: 'Приостановлен' },
];
</script>

<template>
    <div class="filter-bar mt-4">
        <v-text-field
            :model-value="search"
            label="ИНН, юр. лицо, email админа…"
            placeholder="ИНН, юр. лицо, email админа…"
            prepend-inner-icon="mdi-magnify"
            variant="outlined"
            density="compact"
            hide-details
            clearable
            class="search-input"
            @update:model-value="(v: string | null) => emit('update:search', v ?? '')"
        />
        <v-select
            :model-value="filterStatuses"
            :items="STATUS_OPTIONS"
            multiple
            chips
            closable-chips
            clearable
            variant="outlined"
            density="compact"
            hide-details
            label="Статус"
            style="min-width: 180px; max-width: 280px"
            data-testid="filter-statuses"
            @update:model-value="(v: TenantStatus[]) => emit('update:filterStatuses', v)"
        />
        <v-select
            :model-value="filterTariffs"
            :items="availableTariffs"
            multiple
            chips
            closable-chips
            clearable
            variant="outlined"
            density="compact"
            hide-details
            label="Тариф"
            style="min-width: 180px; max-width: 280px"
            data-testid="filter-tariffs"
            @update:model-value="(v: string[]) => emit('update:filterTariffs', v)"
        />
        <v-btn
            v-if="filterStatuses.length > 0 || filterTariffs.length > 0"
            variant="text"
            size="small"
            prepend-icon="mdi-filter-off"
            data-testid="clear-filters-btn"
            @click="emit('clear')"
        >
            Сбросить
        </v-btn>
    </div>
</template>

<style scoped>
.filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.search-input {
    flex: 1 1 320px;
    max-width: 360px;
}
</style>
