<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import LanguageSelect from './components/LanguageSelect.vue'
import SymptomSelector from './components/SymptomSelector.vue'
import PainSlider from './components/PainSlider.vue'

const API_BASE_URL = import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:8000'

interface QuestionOption {
  value: string
  label: string
}

interface Question {
  code: string
  type: string
  title: string
  options?: QuestionOption[]
  min?: number
  max?: number
}

interface MtsPreparation {
  session_id: string
  proposed_presenting_flowchart?: string | null
  red_flag_indicators: string[]
  suggested_priority_level?: string | null
}

const language = ref<'de' | 'en' | 'ar'>('de')
const questions = ref<Question[]>([])
const isLoadingConfig = ref(false)
const loadError = ref<string | null>(null)

const chiefComplaint = ref<string | null>(null)
const pain = ref<number>(0)

const isSubmitting = ref(false)
const submitError = ref<string | null>(null)
const result = ref<MtsPreparation | null>(null)

const chiefComplaintQuestion = computed(() =>
  questions.value.find((q) => q.code === 'chief_complaint') ?? null,
)

const painQuestion = computed(() =>
  questions.value.find((q) => q.code === 'pain_intensity') ?? null,
)

const priorityClass = computed(() => {
  const level = result.value?.suggested_priority_level
  if (!level) return ''
  if (level === 'RED_OR_ORANGE') return 'priority-high'
  return 'priority-default'
})

const priorityLabel = computed(() => {
  const level = result.value?.suggested_priority_level
  if (!level) return ''
  if (level === 'RED_OR_ORANGE') return 'Hohe Dringlichkeit'
  return 'Priorität'
})

async function loadQuestions() {
  isLoadingConfig.value = true
  loadError.value = null
  questions.value = []
  chiefComplaint.value = null
  pain.value = 0
  result.value = null

  try {
    const res = await fetch(`${API_BASE_URL}/questions/${language.value}`)
    if (!res.ok) {
      throw new Error(`HTTP ${res.status}`)
    }
    const data = (await res.json()) as { language: string; questions: Question[] }
    questions.value = data.questions
  } catch (err) {
    console.error('Failed to load questions', err)
    loadError.value = 'Konfiguration konnte nicht geladen werden. Bitte prüfen, ob der Server läuft.'
  } finally {
    isLoadingConfig.value = false
  }
}

watch(
  () => language.value,
  () => {
    void loadQuestions()
  },
  { immediate: true },
)

async function startSession() {
  if (!chiefComplaint.value) return

  isSubmitting.value = true
  submitError.value = null
  result.value = null

  const payload = {
    language: language.value,
    answers: [
      { question_code: 'chief_complaint', value: chiefComplaint.value },
      { question_code: 'pain_intensity', value: pain.value },
    ],
  }

  try {
    const res = await fetch(`${API_BASE_URL}/sessions`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    })

    if (!res.ok) {
      throw new Error(`HTTP ${res.status}`)
    }

    result.value = (await res.json()) as MtsPreparation
  } catch (err) {
    console.error('Failed to start session', err)
    submitError.value = 'Sitzung konnte nicht angelegt werden.'
  } finally {
    isSubmitting.value = false
  }
}
</script>

<template>
  <main class="app">
    <section class="shell">
      <header class="header">
        <div class="header-icon">✚</div>
        <div>
          <h1>Triage-Fragen</h1>
          <p class="subtitle">Vorab-Erfassung für die Notaufnahme</p>
        </div>
      </header>

      <section class="block">
        <LanguageSelect v-model="language" />
      </section>

      <section v-if="isLoadingConfig" class="status">
        Konfiguration wird geladen ...
      </section>

      <section v-if="loadError" class="status error">
        {{ loadError }}
      </section>

      <template v-if="!isLoadingConfig && !loadError">
        <section v-if="chiefComplaintQuestion" class="block card">
          <SymptomSelector
            v-model="chiefComplaint"
            :title="chiefComplaintQuestion.title"
            :options="chiefComplaintQuestion.options ?? []"
          />
        </section>

        <section v-if="chiefComplaint && painQuestion" class="block card">
          <PainSlider
            v-model="pain"
            :title="painQuestion.title"
            :min="painQuestion.min ?? 0"
            :max="painQuestion.max ?? 10"
          />
        </section>

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

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

        <section v-if="result" class="result block" :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>
        </section>
      </template>
    </section>
  </main>
</template>

<style scoped>
.app {
  min-height: 100vh;
  margin: 0;
  padding: 1.5rem 1.25rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: #f2f2f7;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  color: #111827;
}

.shell {
  width: 100%;
  max-width: 480px;
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  padding: 1.75rem 1.5rem 2.1rem;
}

.header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}

.header-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #ff3b30, #ff6b5b);
  color: #ffffff;
  font-size: 1.2rem;
}

h1 {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.1rem;
}

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

.block {
  margin-top: 1.4rem;
}

.card {
  padding: 1.1rem 1rem 1rem;
  border-radius: 20px;
  background: #f9fafb;
}

.actions {
  margin-top: 1.9rem;
}

button.primary {
  width: 100%;
  padding: 0.9rem 1rem;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #007aff, #0b84ff);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(0, 122, 255, 0.35);
  cursor: pointer;
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, opacity 0.15s ease-out;
}

button.primary:hover:enabled {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0, 122, 255, 0.45);
}

button.primary:active:enabled {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0, 122, 255, 0.3);
}

button.primary:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}

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

.status.error {
  color: #b91c1c;
}

.result {
  margin-top: 1.8rem;
  padding: 1.2rem 1rem 1rem;
  border-radius: 20px;
  background: #f9fafb;
  border-left: 4px solid #e5e7eb;
}

.result.priority-high {
  background: #fef2f2;
  border-left-color: #ff3b30;
}

.result.priority-default {
  background: #eff6ff;
  border-left-color: #3b82f6;
}

.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;
}
</style>
