<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { marked } from 'marked'
import { fetchProjekt, fetchScanStatus } from '../api.js'
import { usePolling } from '../composables/usePolling.js'
import FeatureBaum from './FeatureBaum.vue'
import ArchitekturTab from './ArchitekturTab.vue'
import FlowsTab from './FlowsTab.vue'
import PruefungTab from './PruefungTab.vue'
import DokuTab from './DokuTab.vue'
import ScanSeitenleiste from './ScanSeitenleiste.vue'

const props = defineProps({
  name: { type: String, required: true },
  ansicht: { type: String, default: 'features' },
})

const projekt = ref(null)
const fehler = ref('')
const scanLaeuft = ref(false)

async function laden() {
  try {
    projekt.value = await fetchProjekt(props.name)
    fehler.value = ''
  } catch (e) {
    fehler.value = e.message
  }
}

async function statusTick() {
  try {
    const s = await fetchScanStatus(props.name)
    const vorher = scanLaeuft.value
    scanLaeuft.value = s.laeuft
    if (vorher && !s.laeuft) await laden()
  } catch { /* nie fatal */ }
}

const poll = usePolling(statusTick, () => scanLaeuft.value, 2000)
async function init() {
  projekt.value = null
  fehler.value = ''
  await statusTick()
  await laden()
  if (scanLaeuft.value) poll.start()
}
onMounted(init)
watch(() => props.name, init)

const kernHtml = computed(() =>
  projekt.value ? marked.parse(projekt.value.kern.text || '') : '')
</script>

<template>
  <!-- Erst-Scan: noch kein .planer/, aber Lauf aktiv → nur Fortschritt zeigen -->
  <div v-if="!projekt && scanLaeuft" class="erstscan">
    <h2>{{ name }}</h2>
    <p class="laden">Erster Scan läuft — die Ansicht lädt automatisch, sobald er fertig ist.</p>
    <ScanSeitenleiste :name="name" />
  </div>
  <p v-else-if="fehler" class="fehler">{{ fehler }}</p>
  <div v-else-if="projekt" class="rahmen" :class="{ mitLeiste: scanLaeuft }">
    <div>
      <section class="kern karte">
        <h2>{{ projekt.kern.titel || name }}</h2>
        <div class="kern-text" v-html="kernHtml"></div>
        <p v-if="projekt.drift.veraltet.length" class="drift-hinweis">
          ⚠ {{ projekt.drift.veraltet.length }} Datei(en) seit dem letzten Scan geändert — Re-Scan empfohlen.
        </p>
      </section>
      <FeatureBaum v-if="ansicht === 'features'" :projekt="projekt" />
      <ArchitekturTab v-else-if="ansicht === 'architektur'" :projekt="projekt" />
      <FlowsTab v-else-if="ansicht === 'flows'" :projekt="projekt" />
      <DokuTab v-else-if="ansicht === 'doku'" :projekt="projekt" />
      <PruefungTab v-else :projekt="projekt" />
    </div>
    <ScanSeitenleiste v-if="scanLaeuft" :name="name" />
  </div>
  <p v-else class="laden">lädt…</p>
</template>

<style scoped>
.rahmen.mitLeiste { display: grid; grid-template-columns: 1fr 300px; gap: 1.2rem; }
.erstscan { max-width: 420px; }
.erstscan h2 { margin: 0 0 0.4rem; font-size: 1.2rem; }
.erstscan .laden { margin-bottom: 1rem; }
.kern { margin-bottom: 1.2rem; }
.kern h2 { margin: 0 0 0.4rem; font-size: 1.2rem; }
.kern-text :deep(p) { margin: 0.3rem 0; color: var(--dezent); }
.drift-hinweis { color: var(--gelb); font-size: 0.88rem; margin: 0.6rem 0 0; }
.fehler { color: var(--rot); }
.laden { color: var(--dezent); }
</style>
