<script setup>
import { ref, computed } from 'vue'
import Badge from '@/components/ui/Badge.vue'

defineProps({
  submitting: { type: Boolean, default: false },
})

const emit = defineEmits(['submit'])

const eye = ref(4)
const verbal = ref(5)
const motor = ref(6)

const total = computed(() => eye.value + verbal.value + motor.value)
const classification = computed(() => {
  if (total.value <= 8) return { label: 'Severe', variant: 'critical' }
  if (total.value <= 12) return { label: 'Moderate', variant: 'warning' }
  return { label: 'Mild', variant: 'success' }
})

const eyeOptions = [
  { value: 1, label: '1 — No opening' },
  { value: 2, label: '2 — To pressure' },
  { value: 3, label: '3 — To voice' },
  { value: 4, label: '4 — Spontaneous' },
]
const verbalOptions = [
  { value: 1, label: '1 — None' },
  { value: 2, label: '2 — Incomprehensible' },
  { value: 3, label: '3 — Inappropriate' },
  { value: 4, label: '4 — Confused' },
  { value: 5, label: '5 — Oriented' },
]
const motorOptions = [
  { value: 1, label: '1 — None' },
  { value: 2, label: '2 — Extension' },
  { value: 3, label: '3 — Abnormal flexion' },
  { value: 4, label: '4 — Withdrawal' },
  { value: 5, label: '5 — Localizing' },
  { value: 6, label: '6 — Obeys commands' },
]

function submit() {
  emit('submit', { eye: eye.value, verbal: verbal.value, motor: motor.value })
}
</script>

<template>
  <div class="space-y-4">
    <h3 class="text-sm font-semibold dark:text-white">Record Glasgow Coma Scale</h3>

    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
      <div class="min-w-0">
        <label class="mb-2 block text-xs text-gray-500 dark:text-gray-400">Eye (E)</label>
        <select
          v-model.number="eye"
          class="w-full rounded border border-gray-300 px-4 py-2 text-sm focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
        >
          <option v-for="opt in eyeOptions" :key="opt.value" :value="opt.value">
            {{ opt.label }}
          </option>
        </select>
      </div>

      <div class="min-w-0">
        <label class="mb-2 block text-xs text-gray-500 dark:text-gray-400">Verbal (V)</label>
        <select
          v-model.number="verbal"
          class="w-full rounded border border-gray-300 px-4 py-2 text-sm focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
        >
          <option v-for="opt in verbalOptions" :key="opt.value" :value="opt.value">
            {{ opt.label }}
          </option>
        </select>
      </div>

      <div class="min-w-0">
        <label class="mb-2 block text-xs text-gray-500 dark:text-gray-400">Motor (M)</label>
        <select
          v-model.number="motor"
          class="w-full rounded border border-gray-300 px-4 py-2 text-sm focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
        >
          <option v-for="opt in motorOptions" :key="opt.value" :value="opt.value">
            {{ opt.label }}
          </option>
        </select>
      </div>
    </div>

    <div class="flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
      <div class="flex flex-wrap items-center gap-2">
        <span class="text-lg font-bold dark:text-white">GCS {{ total }}/15</span>
        <Badge :variant="classification.variant" size="xs">{{ classification.label }}</Badge>
        <span class="text-xs text-gray-500 dark:text-gray-400">E{{ eye }} V{{ verbal }} M{{ motor }}</span>
      </div>
      <button
        type="button"
        class="w-full rounded bg-blue-500 px-6 py-2 text-sm font-medium text-white hover:bg-blue-600 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 sm:w-auto"
        :disabled="submitting"
        @click="submit"
      >
        {{ submitting ? 'Saving…' : 'Record GCS' }}
      </button>
    </div>
  </div>
</template>