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

const router = useRouter()
const { result, priorityClass, priorityLabel } = useTriageSession()

const hasResult = computed(() => !!result.value)

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

<template>
  <section v-if="hasResult" class="result" :class="priorityClass">
    <div class="result-header">
      <div>
        <h2>Vorbereitung für MTS</h2>
        <p class="result-subtitle">Automatisierte Einschätzung anhand der Antworten</p>
      </div>
      <p v-if="priorityLabel" class="priority-pill">
        {{ priorityLabel }}
      </p>
    </div>

    <div class="result-body">
      <p class="result-line">
        <span class="label">Sitzungs-ID</span>
        <span class="value">{{ result!.session_id }}</span>
      </p>
      <p v-if="result!.proposed_presenting_flowchart" class="result-line">
        <span class="label">Flussdiagramm</span>
        <span class="value">{{ result!.proposed_presenting_flowchart }}</span>
      </p>
      <p v-if="result!.red_flag_indicators.length" class="result-line">
        <span class="label">Red Flags</span>
        <span class="value">{{ result!.red_flag_indicators.join(', ') }}</span>
      </p>
    </div>

    <div class="actions">
      <button class="primary" type="button" @click="router.push('/language')">
        Neue Erfassung starten
      </button>
    </div>
  </section>

  <p v-else class="status">Kein Ergebnis vorhanden.</p>
</template>

<style scoped>
.result {
  padding: 1.2rem 1rem 1rem;
  border-radius: 20px;
  background: #f9fafb;
  border-left: 4px solid #e5e7eb;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.result h2 {
  font-size: 1.05rem;
  margin-bottom: 0.15rem;
}

.result-subtitle {
  font-size: 0.8rem;
  color: #6b7280;
}

.priority-pill {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #fee2e2;
  color: #b91c1c;
}

.result-body {
  margin-top: 0.25rem;
}

.result-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.result-line .label {
  color: #6b7280;
}

.result-line .value {
  font-weight: 500;
}

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

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