<script setup lang="ts">
/**
 * Дашборд — стартовая страница для авторизованных пользователей.
 *
 * Источник дизайна: liderra_v8_handoff/concepts/v8_dashboard.html.
 * MVP: page-head + 4 KPI-cards (получено лидов / конверсия / активные проекты /
 * баланс). Графики (Активность по дням, Воронка из 14 статусов).
 *
 * Все числа сейчас mock'и — TODO: GET /api/dashboard/summary с tenant-context'ом
 * по middleware SetTenantContext (фаза backend).
 *
 * Sprint 4 Phase B/3 — split на DashboardPageHead + DashboardKpiRow +
 * DashboardBalance (audit O-refactor-04 закрытие). State (range, kpis, balance)
 * остаётся в parent ради единого mock-data flow и future API-fetch'а.
 *
 * Примечание: «recent deals list» в Phase B/3 plan'е — на текущем дашборде нет
 * (есть только charts row); если будет добавлено в будущем — выносится в
 * DashboardRecentDeals.vue по аналогии.
 */
import { ref } from 'vue';
import ActivityChart from '../components/charts/ActivityChart.vue';
import FunnelChart from '../components/charts/FunnelChart.vue';
import DashboardPageHead from '../components/dashboard/DashboardPageHead.vue';
import DashboardKpiRow, { type Kpi } from '../components/dashboard/DashboardKpiRow.vue';
import DashboardBalance, { type Balance } from '../components/dashboard/DashboardBalance.vue';

const range = ref<'today' | '7d' | '30d' | 'custom'>('7d');

const kpis: Kpi[] = [
    {
        label: 'Получено лидов',
        value: '247',
        delta: { dir: 'up', text: '12.3%' },
        sub: 'vs предыдущие 7 дней',
    },
    {
        label: 'Конверсия в оплату',
        value: '18.4',
        unit: '%',
        delta: { dir: 'up', text: '2.1pp' },
        sub: 'vs предыдущие 7 дней',
    },
    {
        label: 'Активные проекты',
        value: '8',
        unit: '/ 10',
        delta: { dir: 'neutral', text: '2 свободно' },
        sub: 'тариф «Команда»',
    },
];

const balance: Balance = {
    amount: '14 250',
    runwayDays: 4,
    runwayMax: 7,
    runwayLeads: 285,
};
</script>

<template>
    <v-container fluid class="dashboard pa-6">
        <DashboardPageHead v-model="range" />

        <div class="ld-meta mt-2">
            <span class="ld-pulse" aria-hidden="true"></span>
            <span>Live · обновлено только что</span>
        </div>

        <v-row dense class="kpi-row mt-4">
            <DashboardKpiRow :kpis="kpis" />
            <DashboardBalance :balance="balance" />
        </v-row>

        <v-row class="charts-row mt-4">
            <v-col cols="12" md="7">
                <ActivityChart />
            </v-col>
            <v-col cols="12" md="5">
                <FunnelChart />
            </v-col>
        </v-row>
    </v-container>
</template>

<style scoped>
.dashboard {
    max-width: 1440px;
}

.ld-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #66635c;
    letter-spacing: 0.02em;
}
</style>
