<script setup>
import AppLayout from "../../Layouts/AppLayout.vue"
import { useAuthStore } from "../../Stores/auth.js"
import { NEl, NFlex, NText, NTag, NAvatar } from 'naive-ui'
import ActionTile from "../../Components/ActionTile.vue"
import { TbUsers, TbChartBar, TbLayoutDashboard, TbRefresh, TbReportAnalytics } from "vue-icons-plus/tb"
import { Link } from "@inertiajs/vue3"
import { computed } from "vue"
import { useThemeVars } from "naive-ui"

const authStore = useAuthStore()
const themeVars = useThemeVars()

const initials = computed(() => {
    const parts = (authStore.user?.name ?? '').trim().split(/\s+/)
    return parts.slice(0, 2).map(p => p[0]?.toUpperCase() ?? '').join('')
})

const cardColor    = computed(() => themeVars.value.cardColor)
const dividerColor = computed(() => themeVars.value.dividerColor)
</script>

<template>
    <AppLayout>
        <div class="flex flex-col justify-center items-center" style="min-height: calc(100vh - 48px);">
            <NFlex vertical :size="10" class="max-w-2xl w-full" style="padding: 0 16px 24px;">

                <!-- Шапка -->
                <NEl class="panel-card rounded-2xl" style="padding: 18px 22px;">
                    <NFlex align="center" :size="14" :wrap="false">
                        <NEl
                            style="
                                width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
                                display: flex; align-items: center; justify-content: center;
                                background: color-mix(in srgb, var(--primary-color) 18%, transparent);
                            "
                        >
                            <NTag
                                type="default"
                                :bordered="false"
                                style="background: transparent; padding: 0;"
                            >
                                <NAvatar
                                    round :size="40"
                                    style="
                                        background: transparent;
                                        color: var(--primary-color);
                                        font-size: 15px; font-weight: 700;
                                    "
                                >{{ initials }}</NAvatar>
                            </NTag>
                        </NEl>

                        <div style="min-width: 0;">
                            <NText style="font-size: 15px; font-weight: 700; display: block; line-height: 1.2;">
                                Панель администратора
                            </NText>
                            <NText depth="3" style="font-size: 12px; display: block; margin-top: 4px;">
                                {{ authStore.user?.name }}
                            </NText>
                        </div>
                    </NFlex>
                </NEl>

                <!-- Разделы -->
                <div class="bento-grid">
                    <ActionTile
                        :icon="TbUsers"
                        title="Учётные записи"
                        description="Создание и редактирование пользователей"
                        :tag="Link"
                        href="/admin/users"
                    />
                    <ActionTile
                        :icon="TbChartBar"
                        title="Метрики"
                        description="Группы и показатели измерений"
                        :tag="Link"
                        href="/admin/metrics"
                    />
                    <ActionTile
                        :icon="TbRefresh"
                        title="Репликация"
                        description="Запуск синхронизации и история вебхуков"
                        :tag="Link"
                        href="/admin/replication"
                    />
                    <ActionTile
                        :icon="TbReportAnalytics"
                        title="Шаблоны отчётов"
                        description="Конструктор пользовательских отчётов"
                        :tag="Link"
                        href="/admin/report-templates"
                    />
                </div>

                <!-- Назад -->
                <component :is="Link" href="/" class="exit-link">
                    <NFlex align="center" justify="center" :size="6">
                        <NText style="font-size: 13px;">← На главную</NText>
                    </NFlex>
                </component>

            </NFlex>
        </div>
    </AppLayout>
</template>

<style scoped>
.panel-card {
    background: v-bind(cardColor);
    border: 1px solid v-bind(dividerColor);
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.exit-link {
    text-decoration: none;
    opacity: 0.45;
    transition: opacity .15s;
}
.exit-link:hover {
    opacity: 0.85;
}
</style>
