<template>
  <Layout>
    <template #main>
      <!-- 頂部導航 -->
      <v-btn
        class="mb-4 font-weight-bold px-0"
        color="primary"
        prepend-icon="mdi-arrow-left"
        to="/checkin"
        variant="text"
      >
        返回量測站清單
      </v-btn>

      <!-- 關卡詳細卡片 -->
      <v-card
        v-if="station"
        class="rounded-xl elevation-3 border-accent-light mb-6"
        color="surface"
      >
        <v-card-item class="bg-primary text-white py-4">
          <div class="d-flex align-center">
            <v-avatar class="mr-3 text-white elevation-1" color="accent" size="48">
              <v-icon :icon="station.icon" size="24" />
            </v-avatar>

            <div>
              <h1 class="text-h6 font-weight-black">{{ station.name }}</h1>

              <span class="text-caption text-white-70">第 {{ currentStationIndex }} 站 / 共 11 站</span>
            </div>
          </div>
        </v-card-item>

        <v-card-text class="pa-5">
          <!-- 關卡簡介 -->
          <div class="bg-teal-lighten-5 rounded-lg pa-4 mb-6 text-body-2 text-primary-darken-1">
            <div class="font-weight-bold mb-1 d-flex align-center">
              <v-icon class="mr-1" icon="mdi-information-outline" size="18" />
              檢測說明：
            </div>
            {{ station.description }}
          </div>

          <!-- 數據輸入表單 -->
          <v-form @submit.prevent="handleSave">
            <h3 class="text-subtitle-2 font-weight-bold text-grey-darken-3 mb-3">數據錄入：</h3>

            <v-row>
              <v-col v-for="field in station.fields" :key="field.key" class="mb-4" cols="12">
                <div class="text-body-2 font-weight-bold text-grey-darken-3 mb-1">
                  {{ field.label }} <span class="text-caption text-grey">({{ field.unit }})</span>
                </div>

                <v-text-field
                  v-model.number="formValues[field.key]"
                  color="primary"
                  density="comfortable"
                  hide-details="auto"
                  :placeholder="field.placeholder"
                  required
                  rounded="lg"
                  :rules="[(v) => (v !== null && v !== undefined) || '此欄位不可為空']"
                  step="any"
                  type="number"
                  variant="outlined"
                />
              </v-col>
            </v-row>

            <v-btn
              block
              class="rounded-lg font-weight-bold text-white elevation-2 mt-2"
              color="secondary"
              size="large"
              type="submit"
            >
              儲存並進入下一站
            </v-btn>
          </v-form>
        </v-card-text>
      </v-card>

      <!-- 參考值與說明卡片 -->
      <v-card v-if="station" class="rounded-xl elevation-2 pa-4" color="surface">
        <div class="d-flex align-center mb-3 text-primary font-weight-bold text-subtitle-2">
          <v-icon class="mr-1" icon="mdi-heart-plus-outline" />
          65 歲以上高齡正常參考標準
        </div>

        <v-divider class="mb-3" />

        <div class="text-body-2 text-grey-darken-3 whitespace-pre-line">
          {{ station.reference }}
        </div>
      </v-card>
    </template>
  </Layout>
</template>

<script setup lang="ts">
import { computed, reactive, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import Layout from '@/components/layout/DefaultLayout.vue'
import { useAppStore } from '@/stores/app'

const route = useRoute()
const router = useRouter()
const store = useAppStore()

const code = computed(() => route.params.code as string)

// 各個測量站點的詳細規格定義
const stationsSpec: Record<
  string,
  {
    name: string
    icon: string
    description: string
    reference: string
    fields: Array<{
      key: string
      label: string
      unit: string
      placeholder: string
      defaultValue: number
    }>
  }
> = {
  BloodPressure: {
    name: '血壓與心率量測',
    icon: 'mdi-heart-flash',
    description:
      '請在放鬆狀態下靜坐 5 分鐘，手臂平放於桌面上，將袖帶綁在手肘上方兩公分處，按下測量鈕。檢測員請錄入血壓儀數值。',
    reference:
      '• 收縮壓 (高壓): 120-139 mmHg (正常偏高)，超過 140 mmHg 為高血壓警告。\n• 舒張壓 (低壓): 80-89 mmHg，超過 90 mmHg 為高血壓警告。\n• 靜止心率: 60-100 bpm。',
    fields: [
      {
        key: 'systolic',
        label: '收縮壓 (高壓)',
        unit: 'mmHg',
        placeholder: '如: 125',
        defaultValue: 120,
      },
      {
        key: 'diastolic',
        label: '舒張壓 (低壓)',
        unit: 'mmHg',
        placeholder: '如: 80',
        defaultValue: 80,
      },
      { key: 'heartRate', label: '安靜心率', unit: 'bpm', placeholder: '如: 72', defaultValue: 70 },
    ],
  },
  BodyFat: {
    name: '體組成分析 (BMI & 體脂)',
    icon: 'mdi-scale-bathroom',
    description: '請脫鞋站在體脂計上，雙手握緊金屬把手。本站測量體重、BMI 與體脂肪率。',
    reference:
      '• 高齡者 BMI 正常區間: 20.0 - 26.9 (高齡適度豐腴有助於功能儲備)。\n• 體脂肪率正常區間:\n  - 男性: 15% - 25% (超過 25% 為肥胖)\n  - 女性: 20% - 30% (超過 30% 為肥胖)',
    fields: [
      {
        key: 'bmi',
        label: 'BMI 身體質量指數',
        unit: 'kg/m²',
        placeholder: '如: 22.5',
        defaultValue: 22,
      },
      {
        key: 'bodyFatPct',
        label: '體脂肪率',
        unit: '%',
        placeholder: '如: 24.0',
        defaultValue: 25,
      },
    ],
  },
  GripStrength: {
    name: '左右手握力測驗 (肌力)',
    icon: 'mdi-hand-back-left',
    description:
      '受測者自然站立，手持握力器呈 90 度或自然下垂，全力緊握。左右手各測兩次，取最大值錄入。評估上肢最大肌力。',
    reference:
      '• 高齡男性正常標準: 大於 28 公斤。\n• 高齡女性正常標準: 大於 18 公斤。\n• 數值過低可能代表肌少症前期，需加強抗阻力運動。',
    fields: [
      {
        key: 'leftHand',
        label: '左手最大握力',
        unit: 'kg',
        placeholder: '如: 30',
        defaultValue: 0,
      },
      {
        key: 'rightHand',
        label: '右手最大握力',
        unit: 'kg',
        placeholder: '如: 32',
        defaultValue: 0,
      },
    ],
  },
  Sit5x: {
    name: '5次坐站測試 (下肢肌力)',
    icon: 'mdi-human-male-height',
    description:
      '受測者雙手抱胸，坐在無扶手椅子上。聽到口令後，以最快速度完成「站起-坐下」5 次。記錄完成的秒數。',
    reference:
      '• 65 歲以上長者正常標準: 小於 12 秒完成。\n• 若超過 15 秒，表示下肢肌力明顯不足，跌倒風險增高，建議加入股四頭肌訓練。',
    fields: [
      {
        key: 'durationSeconds',
        label: '5次坐站完成時間',
        unit: '秒',
        placeholder: '如: 9.8',
        defaultValue: 0,
      },
    ],
  },
  Sit30s: {
    name: '30秒椅子坐立 (肌肉耐力)',
    icon: 'mdi-chair-school',
    description:
      '雙手抱胸交叉於肩前，坐在高度約 43 公分的椅子中間。聽到開始口令後，30 秒內全力完成「完全站立且直立-坐回椅子」的次數。',
    reference:
      '• 65-69 歲正常標準:\n  - 男性: 12 - 18 次\n  - 女性: 11 - 17 次\n• 此項目量測長者下肢肌肉耐力，是日常行走和樓梯攀爬的基礎。',
    fields: [
      { key: 'count', label: '30秒內坐立次數', unit: '次', placeholder: '如: 14', defaultValue: 0 },
    ],
  },
  StepTest: {
    name: '2分鐘原地抬膝踏步 (心肺耐力)',
    icon: 'mdi-run-fast',
    description:
      '量測大轉子與髕骨中點高度，在牆上做記號。受測者聽到開始後，原地踏步，大腿必須抬高至記號高度。計算 2 分鐘內「右膝」抬起的次數。',
    reference:
      '• 65-69 歲正常標準:\n  - 男性: 86 - 116 次\n  - 女性: 73 - 107 次\n• 評估長者有氧心肺適能，是維持長途行走體力的指標。',
    fields: [
      {
        key: 'count',
        label: '2分鐘右膝抬起次數',
        unit: '次',
        placeholder: '如: 80',
        defaultValue: 0,
      },
    ],
  },
  ArmTest: {
    name: '30秒肱二頭肌手臂屈舉 (上肢肌耐力)',
    icon: 'mdi-arm-flex',
    description:
      '坐在椅子上，優勢手持啞鈴 (男性 8 磅 / 女性 5 磅) 自然下垂。聽到開始後，30 秒內以最快速度完成前臂彎舉與放下的次數。',
    reference:
      '• 65-69 歲正常標準:\n  - 男性 (8磅): 15 - 21 次\n  - 女性 (5磅): 13 - 19 次\n• 評估上肢日常拿取重物、做家事所需的肌肉耐力。',
    fields: [
      {
        key: 'count',
        label: '30秒手臂屈舉次數',
        unit: '次',
        placeholder: '如: 16',
        defaultValue: 0,
      },
    ],
  },
  BackTest: {
    name: '抓背測驗 (上肢關節柔軟度)',
    icon: 'mdi-human-stretching',
    description:
      '一隻手從肩上向後下方伸，另一隻手從腰部往後上方伸，雙手中指儘量靠近並重疊。量測兩中指間距離 (重疊為正，未觸碰為負)。',
    reference:
      '• 65-69 歲正常標準:\n  - 男性: -16 至 -2 公分\n  - 女性: -8 至 +3 公分\n• 用於評估肩膀關節的靈活性，攸關穿衣、梳頭等日常自理動作。',
    fields: [
      {
        key: 'leftDistanceCm',
        label: '左手在上時兩指間距 (可為負值)',
        unit: '公分',
        placeholder: '如: -5 或 2',
        defaultValue: 0,
      },
      {
        key: 'rightDistanceCm',
        label: '右手在上時兩指間距 (可為負值)',
        unit: '公分',
        placeholder: '如: -3 或 4',
        defaultValue: 0,
      },
    ],
  },
  SitReachTest: {
    name: '坐姿體前彎 (下肢與腰部柔軟度)',
    icon: 'mdi-human-stretching',
    description:
      '坐在椅子邊緣，一腳伸直，腳尖勾起，另一腳彎曲平放。吸氣後呼氣，雙手重疊慢慢向前伸觸碰腳尖。測量中指端與腳尖距離。',
    reference:
      '• 65-69 歲正常標準:\n  - 男性: -8 至 +8 公分\n  - 女性: -3 至 +12 公分\n• 用於評估大腿後側肌群與腰部的柔軟度，柔軟度佳可有效減緩腰酸背痛並預防拉傷。',
    fields: [
      {
        key: 'distanceCm',
        label: '前彎中指與腳尖距離',
        unit: '公分',
        placeholder: '如: 5 (超過腳尖為正)',
        defaultValue: 0,
      },
    ],
  },
  UpGo8ft: {
    name: '2.44公尺起立繞物 (動態平衡與敏捷)',
    icon: 'mdi-navigation',
    description:
      '坐在椅子上，前方 2.44 公尺 (8英尺) 處放置角錐。聽到開始口令後，起身快步繞過角錐並走回椅子坐下。記錄完成秒數。',
    reference:
      '• 65 歲以上長者正常標準: 小於 8.5 秒完成。\n• 若大於 9.0 秒，代表敏捷度與動態平衡功能衰退，日常過馬路或避開障礙物時跌倒風險顯著升高。',
    fields: [
      {
        key: 'durationSeconds',
        label: '起立繞物完成時間',
        unit: '秒',
        placeholder: '如: 6.2',
        defaultValue: 0,
      },
    ],
  },
  OneLegTest: {
    name: '開眼單足立 (靜態平衡力)',
    icon: 'mdi-scale-balance',
    description:
      '受測者雙手叉腰，一腳抬離地面，開始計時。當支撐腳移動、雙手離開腰部或懸空腳觸地時停止。左右腳各測一次，取最大秒數。',
    reference:
      '• 65 歲以上正常標準: 大於 15 秒。\n• 低於 10 秒代表靜態平衡力嚴重退化，在日常站立、穿褲子或滑倒時缺乏瞬間反應力。',
    fields: [
      {
        key: 'leftSeconds',
        label: '左腳站立時間',
        unit: '秒',
        placeholder: '如: 18',
        defaultValue: 0,
      },
      {
        key: 'rightSeconds',
        label: '右腳站立時間',
        unit: '秒',
        placeholder: '如: 20',
        defaultValue: 0,
      },
    ],
  },
}

const station = computed(() => stationsSpec[code.value])

// 計算當前關卡在 11 關中的順序
const currentStationIndex = computed(() => {
  const keys = Object.keys(stationsSpec)
  return keys.indexOf(code.value) + 1
})

// 表單綁定的動態狀態
const formValues = reactive<Record<string, any>>({})

// 監聽 code 改變，初始化表單預設值
watch(
  code,
  newCode => {
    if (stationsSpec[newCode]) {
      // 優先從 store 中讀取已有的測量數據
      const existing = store.measurements[newCode]
      for (const field of stationsSpec[newCode].fields) {
        formValues[field.key]
          = existing && existing.completed && existing.values[field.key] !== undefined
            ? existing.values[field.key]
            : field.defaultValue
      }
    }
  },
  { immediate: true },
)

function handleSave () {
  // 將數據儲存到 store
  store.saveMeasurement(code.value, { ...formValues })

  // 尋找下一站
  const keys = Object.keys(stationsSpec)
  const currentIndex = keys.indexOf(code.value)

  if (currentIndex !== -1 && currentIndex < keys.length - 1) {
    // 導向下一站
    const nextCode = keys[currentIndex + 1]
    router.push(`/checkin/${nextCode}`)
  } else {
    // 已完成最後一站，返回量測清單
    router.push('/checkin')
  }
}
</script>

<style scoped>
.border-accent-light {
  border: 1px solid rgba(71, 194, 166, 0.2) !important;
}

.whitespace-pre-line {
  white-space: pre-line;
  line-height: 1.6;
}
</style>
