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

const router = useRouter()
const { chiefComplaint, chiefComplaintQuestion, questions } = useTriageSession()

const hasConfig = computed(() => questions.length > 0)

onMounted(() => {
  if (!hasConfig.value) {
    router.replace('/language')
  }
})

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

<template>
  <section v-if="chiefComplaintQuestion">
    <SymptomSelector
      v-model="chiefComplaint"
      :title="chiefComplaintQuestion.title"
      :options="chiefComplaintQuestion.options ?? []"
    />

    <div class="actions">
      <button class="primary" type="button" :disabled="!chiefComplaint" @click="goNext">
        Weiter
      </button>
    </div>
  </section>

  <p v-else class="status">Keine Konfiguration für Beschwerden gefunden.</p>
</template>

<style scoped>
.actions {
  margin-top: 1.5rem;
}

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