<template>
  <v-card>
    <v-card-title class="d-flex justify-space-between align-center">
      <div class="d-flex align-center gap-2">
        <span class="text-h6">SKALA RISIKO JATUH (OPSIONAL)</span>
        <v-icon color="warning" size="small">mdi-alert-box</v-icon>
      </div>
      <v-btn variant="text" color="primary" size="small" @click="resetSection">
        Atur Ulang
      </v-btn>
    </v-card-title>

    <v-expansion-panels v-model="panel" class="mt-2">
      <v-expansion-panel>
        <v-expansion-panel-title>
          <span class="font-weight-medium"
            >SKALA RISIKO JATUH - GET UP AND GO</span
          >
        </v-expansion-panel-title>
        <v-expansion-panel-text>
          <v-card flat>
            <v-card-text>
              <!-- Walking Ability Question -->
              <div class="mb-6">
                <div class="mb-3">
                  <p class="text-subtitle-1 font-weight-medium mb-1">
                    Cara berjalan pasien:
                  </p>
                  <ul class="ml-4">
                    <li>Jalan tidak seimbang, sempoyongan, atau limbung</li>
                    <li>
                      Menggunakan alat bantu (kruk, tripot, kursi roda, orang
                      lain)
                    </li>
                  </ul>
                </div>
                <v-radio-group
                  v-model="localData.walkingAbility"
                  inline
                  @update:modelValue="calculateScore"
                >
                  <v-radio label="Ya" :value="true" />
                  <v-radio label="Tidak" :value="false" />
                </v-radio-group>
              </div>

              <!-- Sitting Support Question -->
              <div class="mb-6">
                <div class="mb-3">
                  <p class="text-subtitle-1 font-weight-medium mb-1">
                    Menopang saat akan duduk
                  </p>
                  <p class="text-body-2 text-grey-darken-1">
                    Tampak memegang sandaran kursi atau meja / benda lain
                    sebagai penopang saat akan duduk
                  </p>
                </div>
                <v-radio-group
                  v-model="localData.supportWhileSitting"
                  inline
                  @update:modelValue="calculateScore"
                >
                  <v-radio label="Ya" :value="true" />
                  <v-radio label="Tidak" :value="false" />
                </v-radio-group>
              </div>

              <!-- Score Display -->
              <v-divider class="my-4" />
              <div class="d-flex justify-space-between align-center">
                <span class="text-subtitle-1 font-weight-medium">Skor</span>
                <v-chip :color="scoreColor" variant="tonal" size="large">
                  {{ localData.score }}
                </v-chip>
              </div>

              <!-- Risk Level Alert -->
              <v-alert
                v-if="riskLevel"
                :type="riskLevel.type"
                variant="tonal"
                density="compact"
                class="mt-4"
              >
                {{ riskLevel.message }}
              </v-alert>
            </v-card-text>
          </v-card>
        </v-expansion-panel-text>
      </v-expansion-panel>
    </v-expansion-panels>
  </v-card>
</template>

<script setup>
import { ref, watch, computed } from "vue";

const props = defineProps({
  riskData: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(["update:riskData", "update"]);

const localData = ref({ ...props.riskData });
const panel = ref(0);

const calculateScore = () => {
  let score = 0;
  if (localData.value.walkingAbility === true) score += 1;
  if (localData.value.supportWhileSitting === true) score += 1;
  localData.value.score = score;
};

const scoreColor = computed(() => {
  if (localData.value.score === 0) return "success";
  if (localData.value.score === 1) return "warning";
  return "error";
});

const riskLevel = computed(() => {
  if (localData.value.score === 0) {
    return {
      type: "success",
      message: "Risiko Rendah: Tidak berisiko jatuh"
    };
  } else if (localData.value.score === 1) {
    return {
      type: "warning",
      message: "Risiko Sedang: Memerlukan pengawasan"
    };
  } else if (localData.value.score === 2) {
    return {
      type: "error",
      message: "Risiko Tinggi: Memerlukan bantuan dan pengawasan ketat"
    };
  }
  return null;
});

const resetSection = () => {
  localData.value = {
    walkingAbility: null,
    supportWhileSitting: null,
    score: 0
  };
};

watch(
  localData,
  (newVal) => {
    emit("update:riskData", newVal);
    emit("update");
  },
  { deep: true }
);
</script>
