<script setup>
import { computed } from 'vue'
import { marked } from 'marked'
import FeatureBaum from './FeatureBaum.vue'
import ArchitekturTab from './ArchitekturTab.vue'
import FlowsTab from './FlowsTab.vue'

const props = defineProps({ projekt: { type: Object, required: true } })

// Lesemodus: Kern → Architektur → Bereiche in Abhängigkeitsordnung → Flows.
// Reine Sicht auf vorhandene Daten — keine eigenen Inhalte, kann nie veralten.
const bereicheGeordnet = computed(() => {
  const nachName = Object.fromEntries(props.projekt.bereiche.map((b) => [b.name, b]))
  return props.projekt.doku_ordnung.map((n) => nachName[n]).filter(Boolean)
})
const kernHtml = computed(() => marked.parse(props.projekt.kern.text || ''))
</script>

<template>
  <article class="doku">
    <h2>1. Kern</h2>
    <div v-html="kernHtml"></div>
    <h2>2. Architektur</h2>
    <ArchitekturTab :projekt="projekt" />
    <h2>3. Funktionsbereiche (in Einlese-Reihenfolge)</h2>
    <FeatureBaum :projekt="{ ...projekt, bereiche: bereicheGeordnet }" />
    <h2>4. Abläufe</h2>
    <FlowsTab :projekt="projekt" />
  </article>
</template>

<style scoped>
.doku h2 { font-size: 1.05rem; margin: 1.4rem 0 0.6rem; color: var(--dezent); }
.doku h2:first-child { margin-top: 0; }
</style>
