<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import Card from '@/components/ui/Card.vue'
import Badge from '@/components/ui/Badge.vue'
import GcsEntryForm from '@/components/patient/GcsEntryForm.vue'
import { useScoringStore } from '@/stores/scoring'

const scoring = useScoringStore()
const {
  news2,
  qsofa,
  gcsTotal,
  gcsComponents,
  gcsClassificationDisplay,
  sofaTotal,
  sofaDelta,
  sofaOrgans,
  news2Variant,
  qsofaVariant,
  submittingGcs,
} = storeToRefs(scoring)

const showGcsForm = ref(false)

function sofaOrganVariant(score) {
  if (score === 0) return 'success'
  if (score <= 2) return 'warning'
  return 'critical'
}

async function onGcsSubmit({ eye, verbal, motor }) {
  await scoring.submitGcs(eye, verbal, motor)
  showGcsForm.value = false
}
</script>

<template>
  <Card>
    <template #header>
      <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
        Clinical Scores
      </h2>
    </template>

    <div class="space-y-6">
      <!-- NEWS2 -->
      <section class="space-y-2">
        <div class="text-xs font-medium text-gray-500 dark:text-gray-400">NEWS2</div>
        <div class="flex flex-wrap items-center gap-2">
          <Badge :variant="news2Variant">{{ news2?.totalScore ?? '—' }}</Badge>
          <span v-if="news2?.riskLevel" class="text-xs text-gray-500 dark:text-gray-400">
            {{ news2.riskLevel }}
          </span>
        </div>
      </section>

      <!-- GCS -->
      <section class="space-y-2 border-t border-gray-100 pt-4 dark:border-gray-700">
        <div class="flex flex-wrap items-center justify-between gap-2">
          <div class="text-xs font-medium text-gray-500 dark:text-gray-400">GCS</div>
          <button
            type="button"
            class="text-xs text-blue-600 hover:underline dark:text-blue-400"
            @click="showGcsForm = !showGcsForm"
          >
            {{ showGcsForm ? 'Cancel' : 'Record GCS' }}
          </button>
        </div>
        <div v-if="gcsTotal != null" class="flex flex-wrap items-center gap-2">
          <Badge :variant="gcsClassificationDisplay?.variant ?? 'info'">
            {{ gcsTotal }}/15
          </Badge>
          <span v-if="gcsClassificationDisplay" class="text-xs text-gray-500 dark:text-gray-400">
            {{ gcsClassificationDisplay.label }}
          </span>
          <span v-if="gcsComponents" class="text-xs text-gray-500 dark:text-gray-400">
            E{{ gcsComponents.eye }} V{{ gcsComponents.verbal }} M{{ gcsComponents.motor }}
          </span>
        </div>
        <div v-else class="text-xs text-gray-400 dark:text-gray-500">No GCS recorded</div>
        <Transition name="fade">
          <GcsEntryForm
            v-if="showGcsForm"
            :submitting="submittingGcs"
            @submit="onGcsSubmit"
          />
        </Transition>
      </section>

      <!-- SOFA (compact) -->
      <section class="space-y-2 border-t border-gray-100 pt-4 dark:border-gray-700">
        <div class="text-xs font-medium text-gray-500 dark:text-gray-400">SOFA</div>
        <div v-if="sofaTotal != null" class="space-y-2">
          <div class="flex flex-wrap items-center gap-2">
            <Badge :variant="sofaDelta != null && sofaDelta >= 2 ? 'critical' : 'info'">
              {{ sofaTotal }}/24
            </Badge>
            <Badge v-if="sofaDelta != null && sofaDelta >= 2" variant="critical" size="xs">
              Δ +{{ sofaDelta }}
            </Badge>
            <Badge v-else-if="sofaDelta === 1" variant="warning" size="xs">Δ +1</Badge>
          </div>
          <div class="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
            <Badge
              v-for="organ in sofaOrgans"
              :key="organ.name"
              :variant="sofaOrganVariant(organ.score)"
              size="xs"
            >
              {{ organ.name }} {{ organ.score }}
            </Badge>
          </div>
        </div>
        <div v-else class="text-xs text-gray-400 dark:text-gray-500">Labs pending</div>
      </section>

      <!-- qSOFA Screen -->
      <section class="space-y-2 border-t border-gray-100 pt-4 dark:border-gray-700">
        <div class="text-xs font-medium text-gray-500 dark:text-gray-400">qSOFA Screen</div>
        <p class="text-xs text-gray-500 dark:text-gray-400">
          Bedside screening — qSOFA ≥ 2 suggests ordering SOFA labs
        </p>
        <div class="flex flex-wrap items-center gap-2">
          <Badge :variant="qsofaVariant">
            {{ qsofa?.activeCriteria ?? '—' }}
          </Badge>
          <span class="text-xs text-gray-500 dark:text-gray-400">/ 3 criteria</span>
        </div>
      </section>
    </div>
  </Card>
</template>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.15s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>