<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/views/pages/saas/development/SaasDevelopmentPage.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, computed } from 'vue';
import DevOverviewTab from './DevOverviewTab.vue';
import DevRoadmapTab from './DevRoadmapTab.vue';
import DevEstruturaTab from './DevEstruturaTab.vue';
import DevAuditoriaTab from './DevAuditoriaTab.vue';
import DevVerificacoesTab from './DevVerificacoesTab.vue';
import DevTestsTab from './DevTestsTab.vue';
import DevCompetitorsTab from './DevCompetitorsTab.vue';
import DevDatabaseTab from './DevDatabaseTab.vue';
import DevExportTab from './DevExportTab.vue';

const activeTab = ref(0);

const tabs = [
    { key: 'overview',   label: 'Visão Geral',   icon: 'pi-home',       component: DevOverviewTab },
    { key: 'roadmap',    label: 'Roadmap',       icon: 'pi-flag',       component: DevRoadmapTab },
    { key: 'estrutura',  label: 'Estrutura',     icon: 'pi-sitemap',    component: DevEstruturaTab },
    { key: 'auditoria',  label: 'Auditoria',     icon: 'pi-verified',   component: DevAuditoriaTab },
    { key: 'verificacoes', label: 'Verificações',icon: 'pi-search',     component: DevVerificacoesTab },
    { key: 'testes',     label: 'Testes',        icon: 'pi-check-square',component: DevTestsTab },
    { key: 'concorrentes', label: 'Concorrentes',icon: 'pi-globe',      component: DevCompetitorsTab },
    { key: 'banco',      label: 'Banco de Dados',icon: 'pi-database',   component: DevDatabaseTab },
    { key: 'export',     label: 'Exportar',      icon: 'pi-download',   component: DevExportTab }
];

const activeComponent = computed(() => tabs[activeTab.value]?.component);
</script>

<template>
    <div class="dev-page">
        <!-- Header -->
        <div class="cfg-subheader mb-3.5">
            <div class="cfg-subheader__icon"><i class="pi pi-code" /></div>
            <div class="min-w-0 flex-1">
                <div class="cfg-subheader__title">Desenvolvimento</div>
                <div class="cfg-subheader__sub">Área interna de trabalho — roadmap, auditoria, concorrentes, banco.</div>
            </div>
        </div>

        <!-- Tabs -->
        <nav class="dev-tabs">
            <button
                v-for="(tab, idx) in tabs"
                :key="tab.key"
                :class="['dev-tab', { active: idx === activeTab }]"
                @click="activeTab = idx"
            >
                <i :class="['pi', tab.icon]" />
                <span>{{ tab.label }}</span>
            </button>
        </nav>

        <!-- Conteúdo da aba -->
        <section class="dev-content">
            <component :is="activeComponent" />
        </section>
    </div>
</template>

<style scoped>
.dev-page {
    padding: 16px 20px 40px;
    max-width: 1600px;
    margin: 0 auto;
}

.dev-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    background: var(--surface-card, #fff);
    border: 1px solid var(--surface-border, #e2e8f0);
    border-radius: 10px;
    padding: 6px;
    margin-bottom: 14px;
}

.dev-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: none;
    background: transparent;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.dev-tab:hover {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    color: var(--text-color);
}
.dev-tab.active {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
}
.dev-tab i {
    font-size: 13px;
}

.dev-content {
    min-height: 400px;
}
</style>
