<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import BooleanChoice from '../components/BooleanChoice.vue'
import { useTriageSession } from '../composables/useTriageSession'

const router = useRouter()
const { chiefComplaint, flowQuestions, getAnswer, setAnswer } = useTriageSession()

const isReady = computed(() =>
  flowQuestions.value.every((q) => getAnswer(q.code) !== null && getAnswer(q.code) !== undefined),
)

onMounted(() => {
  if (!chiefComplaint.value) {
    router.replace('/complaint')
  }
})

function goNext() {
  if (isReady.value) {
    router.push('/pain')
  }
}
</script>

<template>
  <section>
    <div class="stack" v-if="flowQuestions.length > 0">
      <template v-for="question in flowQuestions" :key="question.code">
        <BooleanChoice
          v-if="question.type === 'boolean'"
          :title="question.title"
          :model-value="(getAnswer(question.code) as boolean | null)"
          @update:model-value="(value) => setAnswer(question.code, value)"
        />
      </template>
    </div>

    <p v-else class="status">Für diesen Pfad sind noch keine Zusatzfragen konfiguriert.</p>

    <div class="actions">
      <button class="primary" type="button" :disabled="!isReady && flowQuestions.length > 0" @click="goNext">
        Weiter
      </button>
    </div>
  </section>
</template>

<style scoped>
.stack {
  display: grid;
  gap: 1rem;
}

.actions {
  margin-top: 1.5rem;
}

.status {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #4b5563;
}
</style>
