<script setup>
import { onMounted, ref } from 'vue'
import { fetchProjekte } from './api.js'
import { usePolling } from './composables/usePolling.js'
import StartSeite from './components/StartSeite.vue'
import ProjektAnsicht from './components/ProjektAnsicht.vue'
import OrdnerBrowser from './components/OrdnerBrowser.vue'

const projekte = ref([])
const aktivesProjekt = ref(null) // null = Übersicht
const ansicht = ref('features')
const zeigeBrowser = ref(false)
const listeVersion = ref(0) // remountet StartSeite nach Hinzufügen

function hinzugefuegt() {
  zeigeBrowser.value = false
  listeVersion.value++
  laden()
}

const ANSICHTEN = [
  ['features', 'Features', '▦'],
  ['architektur', 'Architektur', '⬡'],
  ['flows', 'Abläufe', '⇉'],
  ['doku', 'Doku', '☰'],
  ['pruefung', 'Prüfung', '✓'],
]

async function laden() {
  try {
    projekte.value = await fetchProjekte()
  } catch { /* Sidebar degradiert still, Inhalt zeigt Fehler */ }
}
usePolling(laden, () => projekte.value.some((p) => p.scan_laeuft), 5000)
onMounted(laden)

function oeffne(name) {
  aktivesProjekt.value = name
  ansicht.value = 'features'
}

const darkMode = ref(document.documentElement.classList.contains('dark'))
function toggleDark() {
  darkMode.value = !darkMode.value
  document.documentElement.classList.toggle('dark', darkMode.value)
  localStorage.setItem('darkMode', String(darkMode.value))
}
</script>

<template>
  <div class="shell">
    <aside class="sidebar">
      <h1 @click="aktivesProjekt = null">Planer</h1>
      <nav class="projekte">
        <span class="gruppe">Projekte</span>
        <a href="#" :class="{ aktiv: !aktivesProjekt }" @click.prevent="aktivesProjekt = null">
          ⌂ Übersicht
        </a>
        <a v-for="p in projekte" :key="p.name" href="#"
           :class="{ aktiv: aktivesProjekt === p.name,
                     gestoert: p.fehler || (!p.hat_planer && !p.scan_laeuft) }"
           @click.prevent="(p.hat_planer || p.scan_laeuft) && oeffne(p.name)">
          {{ p.name }}
          <span v-if="p.scan_laeuft" class="punkt gelb" title="Scan läuft"></span>
          <span v-else-if="p.drift?.length" class="punkt gelb" title="Drift"></span>
          <span v-else-if="p.hat_planer" class="punkt gruen" title="aktuell"></span>
        </a>
        <a href="#" class="hinzu" @click.prevent="zeigeBrowser = true">＋ Projekt hinzufügen</a>
      </nav>
      <nav v-if="aktivesProjekt" class="ansichten">
        <span class="gruppe">{{ aktivesProjekt }}</span>
        <a v-for="[id, titel, icon] in ANSICHTEN" :key="id" href="#"
           :class="{ aktiv: ansicht === id }" @click.prevent="ansicht = id">
          <span class="icon">{{ icon }}</span>{{ titel }}
        </a>
      </nav>
      <button class="dark-knopf" @click="toggleDark">{{ darkMode ? '☀ Hell' : '☾ Dunkel' }}</button>
    </aside>
    <main>
      <StartSeite v-if="!aktivesProjekt" :key="listeVersion" @oeffne="oeffne" @geaendert="laden" />
      <ProjektAnsicht v-else :name="aktivesProjekt" :ansicht="ansicht" />
    </main>
    <OrdnerBrowser v-if="zeigeBrowser" @schliessen="zeigeBrowser = false"
                   @hinzugefuegt="hinzugefuegt" />
  </div>
</template>

<style scoped>
.shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--panel); border-right: 1px solid var(--rand);
  padding: 1rem 0.8rem; display: flex; flex-direction: column; gap: 1.2rem;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar h1 { font-size: 1.1rem; margin: 0 0 0.2rem 0.4rem; cursor: pointer; }
.gruppe {
  display: block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--dezent); margin: 0 0 0.3rem 0.4rem;
}
nav { display: flex; flex-direction: column; gap: 0.1rem; }
nav a {
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--text); text-decoration: none; font-size: 0.92rem;
  padding: 0.4rem 0.6rem; border-radius: 7px;
}
nav a:hover { background: var(--bg); }
nav a.aktiv { background: var(--akzent); color: var(--akzent-text); }
nav a.gestoert { color: var(--dezent); cursor: default; }
nav a.hinzu { color: var(--dezent); font-size: 0.85rem; }
nav a.hinzu:hover { color: var(--text); }
.icon { width: 1.1rem; text-align: center; color: inherit; opacity: 0.75; }
.punkt { width: 8px; height: 8px; border-radius: 99px; margin-left: auto; }
.punkt.gruen { background: var(--gruen); }
.punkt.gelb { background: var(--gelb); }
.dark-knopf { margin-top: auto; }
main { padding: 1.4rem 1.8rem; }
</style>
