<!--
|--------------------------------------------------------------------------
| DevEstruturaTab.vue — ESTRUTURA.md + mapa-sistema.html embarcados
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, onMounted, computed } from 'vue';
import estruturaRaw from '@/../development/01-visao-geral/ESTRUTURA.md?raw';
import mapaSistemaHtml from '@/../development/01-visao-geral/mapa-sistema.html?raw';

const viewMode = ref('tree'); // 'tree' | 'mapa'
const content = ref(estruturaRaw);

// Gerar blob URL do mapa-sistema.html pra embedar no iframe
const mapaUrl = computed(() => {
    const blob = new Blob([mapaSistemaHtml], { type: 'text/html' });
    return URL.createObjectURL(blob);
});
</script>

<template>
    <div class="estrutura">
        <div class="view-toggle">
            <button :class="['toggle-btn', { active: viewMode === 'tree' }]" @click="viewMode = 'tree'">
                <i class="pi pi-list" /> Árvore (ESTRUTURA.md)
            </button>
            <button :class="['toggle-btn', { active: viewMode === 'mapa' }]" @click="viewMode = 'mapa'">
                <i class="pi pi-sitemap" /> Mapa interativo
            </button>
            <a
                href="/development/01-visao-geral/mapa-sistema.html"
                target="_blank"
                class="external-link"
                title="Abrir em nova aba"
            >
                <i class="pi pi-external-link" />
            </a>
        </div>

        <div v-if="viewMode === 'tree'" class="md-container">
            <pre class="md-content">{{ content }}</pre>
        </div>

        <div v-else class="mapa-container">
            <iframe :src="mapaUrl" class="mapa-frame" frameborder="0"></iframe>
        </div>
    </div>
</template>

<style scoped>
.estrutura {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 600px;
}

.view-toggle {
    display: flex;
    gap: 6px;
    background: var(--surface-card, #fff);
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    padding: 6px;
    align-items: center;
}

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

.external-link {
    margin-left: auto;
    padding: 7px 10px;
    color: var(--text-color-secondary);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.15s;
}
.external-link:hover {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    color: var(--primary-color);
}

.md-container {
    background: #0b0d12;
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
}

.md-content {
    margin: 0;
    padding: 20px 24px;
    color: #e2e8f8;
    font-family: 'IBM Plex Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
    max-height: 75vh;
    overflow-y: auto;
}

.mapa-container {
    background: var(--surface-card, #fff);
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    overflow: hidden;
    min-height: 800px;
    height: 85vh;
}

.mapa-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
</style>
