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

const router = useRouter()
const { pain, painQuestion, chiefComplaint, startSession, isSubmitting, submitError } = useTriageSession()

const isReady = computed(() => !!chiefComplaint.value && !!painQuestion.value)

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

async function goNext() {
  await startSession()
  router.push('/summary')
}
</script>

<template>
  <section v-if="painQuestion">
    <PainSlider
      v-model="pain"
      :title="painQuestion.title"
      :min="painQuestion.min ?? 0"
      :max="painQuestion.max ?? 10"
    />

    <p v-if="submitError" class="status error">{{ submitError }}</p>

    <div class="actions">
      <button class="primary" type="button" :disabled="!isReady || isSubmitting" @click="goNext">
        <span v-if="!isSubmitting">Weiter</span>
        <span v-else>Wird gesendet ...</span>
      </button>
    </div>
  </section>

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

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

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

.status.error {
  color: #b91c1c;
}
</style>
