<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/views/pages/editor/EditorDashboard.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
-->
<script setup>
import NotificationsWidget from '@/components/dashboard/NotificationsWidget.vue';
</script>

<template>
    <div
        class="sticky mx-3 md:mx-4 mt-4 mb-4 z-20 overflow-hidden rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5"
        :style="{ top: 'var(--layout-sticky-top, 56px)' }"
    >
        <div class="absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
            <div class="absolute rounded-full blur-[70px] w-72 h-72 -top-16 -right-20 bg-orange-400/10" />
            <div class="absolute rounded-full blur-[70px] w-80 h-80 top-10 -left-24 bg-amber-400/10" />
        </div>
        <div class="relative z-10 flex items-center justify-between gap-3 flex-wrap">
            <div class="flex items-center gap-3 flex-1 min-w-0">
                <div class="grid place-items-center w-10 h-10 rounded-md shrink-0 bg-orange-500/10 text-orange-600 dark:text-orange-400">
                    <i class="pi pi-pencil text-lg" />
                </div>
                <div class="min-w-0">
                    <div class="text-[1rem] font-bold tracking-tight text-[var(--text-color)]">Área do Editor</div>
                    <div class="text-[0.78rem] text-[var(--text-color-secondary)] mt-0.5">Crie e gerencie cursos, módulos e conteúdos da plataforma de microlearning.</div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-12 gap-8">
        <!-- Estatísticas de conteúdo -->
        <div class="col-span-12">
            <div class="card">
                <div class="flex items-center gap-3 mb-4">
                    <i class="pi pi-book text-orange-500 text-2xl"></i>
                    <span class="font-semibold text-lg">Conteúdo da Plataforma</span>
                </div>
                <div class="grid grid-cols-12 gap-4">
                    <div class="col-span-12 md:col-span-4">
                        <div class="surface-100 dark:surface-700 rounded-xl p-4 text-center">
                            <div class="text-3xl font-bold text-orange-500 mb-1">0</div>
                            <div class="text-muted-color text-sm">Cursos publicados</div>
                        </div>
                    </div>
                    <div class="col-span-12 md:col-span-4">
                        <div class="surface-100 dark:surface-700 rounded-xl p-4 text-center">
                            <div class="text-3xl font-bold text-orange-500 mb-1">0</div>
                            <div class="text-muted-color text-sm">Módulos criados</div>
                        </div>
                    </div>
                    <div class="col-span-12 md:col-span-4">
                        <div class="surface-100 dark:surface-700 rounded-xl p-4 text-center">
                            <div class="text-3xl font-bold text-orange-500 mb-1">0</div>
                            <div class="text-muted-color text-sm">Alunos inscritos</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-span-12 xl:col-span-6">
            <NotificationsWidget />
        </div>
    </div>
</template>
