<script setup lang="ts">
/**
 * RemindersFilters — табы-фильтры по статусу: Сегодня / Предстоит / Просрочено / Выполнено.
 * Каждый таб с counter-чипом (для overdue — красный).
 *
 * Sprint 4 Phase B/2 — split RemindersView (audit O-refactor-04 хвост).
 *
 * State `activeTab` через v-model (defineModel). Counts читаются из reminders-store
 * напрямую — без prop-drilling.
 */
import { computed } from 'vue';
import { useRemindersStore } from '../../stores/reminders';
import type { ReminderFilter } from '../../api/reminders';

// Vue 3.5 defineModel<T>() — Sprint 2 Phase B / O-stack-04 паттерн.
const activeTab = defineModel<ReminderFilter>({ required: true });

const store = useRemindersStore();

const tabs = computed(() => [
    { key: 'today' as const, label: 'Сегодня', count: store.counts.today },
    { key: 'upcoming' as const, label: 'Предстоит', count: store.counts.upcoming },
    { key: 'overdue' as const, label: 'Просрочено', count: store.counts.overdue },
    { key: 'completed' as const, label: 'Выполнено', count: null },
]);
</script>

<template>
    <v-card variant="outlined" class="mb-4">
        <v-tabs v-model="activeTab" color="primary" data-testid="reminders-tabs">
            <v-tab v-for="t in tabs" :key="t.key" :value="t.key" :data-testid="`tab-${t.key}`">
                {{ t.label }}
                <v-chip
                    v-if="t.count !== null && t.count > 0"
                    size="x-small"
                    class="ml-2 tab-chip"
                    :color="t.key === 'overdue' ? 'error' : 'default'"
                >
                    {{ t.count }}
                </v-chip>
            </v-tab>
        </v-tabs>
    </v-card>
</template>

<style scoped>
.tab-chip {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-feature-settings: 'tnum';
}
</style>
