<template>
	<div class="animate-fade-slide-in">
		<FilterBar
			title="КАТЕГОРИИ"
			:groups="filterGroups"
			v-model="filters"
		/>

		<div class="content-swap mb-5" :class="cardsClass">
			<div class="grid grid-cols-4 gap-3">
				<KpiCard
					v-for="card in visibleCards"
					:key="card.key"
					v-bind="card"
					:change-up="true"
					:small-value="true"
					@click="onCardClick(card.key)"
				/>
			</div>
		</div>

		<DetailPanel
			:open="detailOpen"
			:title="detailData?.title || ''"
			:columns="detailData?.head || []"
			:rows="detailData?.rows || []"
			:summary="detailData?.sum || ''"
			@close="closeDetail"
		/>
	</div>
</template>

<script setup>
import { ref, computed } from "vue"
import FilterBar from "@/components/shared/FilterBar.vue"
import KpiCard from "@/components/shared/KpiCard.vue"
import DetailPanel from "@/components/shared/DetailPanel.vue"
import { useStore } from "@/data/store"
import { useContentSwap } from "@/utils/useContentSwap"

const { D } = useStore()
const { cardsClass, detailOpen, openDetail, closeDetail } = useContentSwap()

const filters = ref({})
const detailData = ref(null)

const filterGroups = [
	{
		chips: [
			{ key: "rates", label: "Ставки" },
			{ key: "social", label: "Взносы" },
			{ key: "limits", label: "Лимиты" },
			{ key: "inspection", label: "Инспекция" },
		],
	},
]

const allCards = [
	{ key: "rates", label: "Налоговые ставки", value: "ВКРП", subtitle: "9 налогов · ставки 2026", change: "📊", status: "normal" },
	{ key: "social", label: "Соц. взносы", value: "DSMF·İTS", subtitle: "3 вида · работодатель + работник", change: "💰", status: "normal" },
	{ key: "limits", label: "Пороги и лимиты", value: "₼400", subtitle: "МЗП · ƏDV порог · льготы", change: "📋", status: "normal" },
	{ key: "inspection", label: "Инспекция", value: "Risk", subtitle: "пороги · дедлайны · частота", change: "🔍", status: "normal" },
]

const visibleCards = computed(() =>
	allCards.filter((c) => filters.value[c.key] !== false)
)

function onCardClick(key) {
	detailData.value = D.region[key] || null
	if (detailData.value) openDetail()
}
</script>
