<script setup>
import { onMounted, ref } from 'vue'
import { fetchOrdner, projektHinzufuegen } from '../api.js'

const emit = defineEmits(['schliessen', 'hinzugefuegt'])

const pfad = ref('')
const eingabe = ref('')
const eltern = ref(null)
const ordner = ref([])
const fehler = ref('')

async function lade(ziel) {
  try {
    const d = await fetchOrdner(ziel)
    pfad.value = d.pfad
    eingabe.value = d.pfad
    eltern.value = d.eltern
    ordner.value = d.ordner
    fehler.value = ''
  } catch (e) {
    fehler.value = e.message
  }
}

async function uebernehmen() {
  try {
    await projektHinzufuegen(pfad.value)
    emit('hinzugefuegt')
  } catch (e) {
    fehler.value = e.message
  }
}

onMounted(() => lade(''))
</script>

<template>
  <div class="schleier" @click.self="$emit('schliessen')" @keydown.esc="$emit('schliessen')">
    <div class="dialog">
      <div class="kopf">
        <h3>Projekt-Ordner wählen</h3>
        <button class="zu" @click="$emit('schliessen')">✕</button>
      </div>
      <input v-model="eingabe" spellcheck="false"
             @keydown.enter="lade(eingabe)" title="Pfad eintippen, Enter lädt" />
      <div class="liste">
        <a v-if="eltern" href="#" class="eintrag" @click.prevent="lade(eltern)">↰ ..</a>
        <a v-for="o in ordner" :key="o.pfad" href="#" class="eintrag"
           @click.prevent="lade(o.pfad)">
          <span class="ordner-icon">▸</span>{{ o.name }}
          <span v-if="o.hat_planer" class="badge gruen">.planer</span>
        </a>
        <p v-if="!ordner.length" class="leer">keine Unterordner</p>
      </div>
      <p v-if="fehler" class="fehler">{{ fehler }}</p>
      <div class="fuss">
        <code class="gewaehlt">{{ pfad }}</code>
        <button class="primaer" @click="uebernehmen">Als Projekt übernehmen</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.schleier {
  position: fixed; inset: 0; background: rgb(0 0 0 / 0.4); z-index: 50;
  display: flex; align-items: center; justify-content: center;
}
.dialog {
  background: var(--panel); border: 1px solid var(--rand); border-radius: 12px;
  width: min(560px, 92vw); max-height: 80vh; padding: 1rem 1.2rem;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.kopf { display: flex; align-items: center; }
.kopf h3 { margin: 0; font-size: 1rem; flex: 1; }
.zu { border: none; background: none; color: var(--dezent); padding: 0.2rem; }
input {
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--rand); border-radius: 6px; padding: 0.4rem 0.6rem;
}
.liste { overflow-y: auto; min-height: 8rem; display: flex; flex-direction: column; }
.eintrag {
  display: flex; align-items: center; gap: 0.45rem;
  color: var(--text); text-decoration: none; font-size: 0.92rem;
  padding: 0.3rem 0.5rem; border-radius: 6px;
}
.eintrag:hover { background: var(--bg); }
.ordner-icon { color: var(--dezent); }
.leer { color: var(--dezent); font-size: 0.85rem; margin: 0.3rem 0.5rem; }
.fehler { color: var(--rot); font-size: 0.85rem; margin: 0; }
.fuss { display: flex; align-items: center; gap: 0.8rem; border-top: 1px solid var(--rand); padding-top: 0.7rem; }
.gewaehlt { flex: 1; font-size: 0.8rem; overflow-wrap: anywhere; color: var(--dezent); }
</style>
