<script setup>
import { onMounted, ref, watch } from 'vue'
import { fetchProjekte } from './api.js'
import SeitenLeiste from './components/SeitenLeiste.vue'
import FeatureListe from './components/FeatureListe.vue'
import KontextMenue from './components/KontextMenue.vue'

const projekte = ref([])
const aktivesProjekt = ref(null)
const meldung = ref('')
const dunkel = ref(document.documentElement.classList.contains('dark'))

async function ladeProjekte() {
  meldung.value = ''
  try {
    projekte.value = await fetchProjekte()
  } catch (e) {
    meldung.value = e.message
    return
  }
  // Auswahl verwerfen, wenn das Projekt (z. B. nach Löschen) weg ist
  if (aktivesProjekt.value && !projekte.value.some(p => p.name === aktivesProjekt.value)) {
    aktivesProjekt.value = null
  }
}

function umbenannt(alt, neu) {
  if (aktivesProjekt.value === alt) aktivesProjekt.value = neu
  ladeProjekte()
}

// Zuletzt aktives Projekt überlebt das Neuladen
watch(aktivesProjekt, name => {
  if (name) localStorage.setItem('aktivesProjekt', name)
  else localStorage.removeItem('aktivesProjekt')
})

function wechsleDarkMode() {
  dunkel.value = !dunkel.value
  document.documentElement.classList.toggle('dark', dunkel.value)
  localStorage.setItem('darkMode', dunkel.value)
}

onMounted(async () => {
  await ladeProjekte()
  const gemerkt = localStorage.getItem('aktivesProjekt')
  if (gemerkt && projekte.value.some(p => p.name === gemerkt)) {
    aktivesProjekt.value = gemerkt
  }
})
</script>

<template>
  <div class="raster">
    <SeitenLeiste
      :projekte="projekte"
      :aktiv="aktivesProjekt"
      @auswaehlen="aktivesProjekt = $event"
      @geaendert="ladeProjekte"
      @umbenannt="umbenannt"
    >
      <button class="icon-knopf" :title="dunkel ? 'Hellmodus' : 'Dunkelmodus'" @click="wechsleDarkMode">
        {{ dunkel ? '☀' : '☾' }}
      </button>
    </SeitenLeiste>

    <main>
      <p v-if="meldung" class="meldung">{{ meldung }}</p>
      <FeatureListe v-if="aktivesProjekt" :projekt="aktivesProjekt" />
      <p v-else-if="!meldung" class="leer">Projekt wählen oder anlegen.</p>
    </main>

    <KontextMenue />
  </div>
</template>

<style scoped>
.raster {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}
main {
  padding: 1.2rem 1.5rem;
  min-width: 0;
}
.leer {
  color: var(--dezent);
  margin-top: 3rem;
  text-align: center;
}
</style>
