<script setup>
import { ref, watch } from 'vue';
import { store, sendKey, sendResolutionChange, toggleRecording } from '../store/controllerStore';

// Android KeyEvent 键值（与被控端 SystemInputUtils 注入一致）
const keys = [
  { label: '主页', code: 3 },     // KEYCODE_HOME
  { label: '返回', code: 4 },     // KEYCODE_BACK
  { label: '多任务', code: 187 }, // KEYCODE_APP_SWITCH
  { label: '菜单', code: 82 },    // KEYCODE_MENU
  { label: '音量 +', code: 24 },  // KEYCODE_VOLUME_UP
  { label: '音量 -', code: 25 },  // KEYCODE_VOLUME_DOWN
  { label: '电源', code: 26 },    // KEYCODE_POWER
];

// 分辨率预设：width 为长边像素；0 表示被控端原生分辨率；
// height 传 0（由被控端按屏幕宽高比自动计算），fps 传 0（沿用当前帧率）。
const resolutionPresets = [
  { label: '原始画质', width: 0, height: 0, fps: 0 },
  { label: '1080P', width: 1920, height: 0, fps: 0 },
  { label: '720P', width: 1280, height: 0, fps: 0 },
  { label: '480P', width: 854, height: 0, fps: 0 },
];
// 注意：<option :value="p.width"> 的 value 是数字，Vue 的 v-model 会按数字写入，
// 因此这里也必须用数字（不能用字符串 '0'），否则默认选中项与比较逻辑会类型不一致。
const selectedResolution = ref(0);

// 帧率档位：默认常用档位，收到被控端上报的 supported_fps 后以上报列表为准。
const fpsOptions = ref([15, 24, 30, 60]);
const selectedFps = ref(0); // 0 表示尚未同步到被控端当前帧率

function press(code) {
  if (!store.dataChannelOpen) return;
  sendKey(code);
}

function onResolutionChange() {
  if (!store.dataChannelOpen) return;
  // 统一按数值匹配：v-model 写入的是数字，不能用 String() 再与数字比较。
  const preset = resolutionPresets.find((p) => p.width === Number(selectedResolution.value));
  if (preset) {
    sendResolutionChange(preset.width, preset.height, preset.fps);
  }
}

function onFpsChange() {
  if (!store.dataChannelOpen) return;
  const fps = Number(selectedFps.value);
  if (fps <= 0) return;
  // 仅切换帧率：分辨率沿用被控端最近上报的实际采集尺寸（0 表示原生）。
  const res = store.currentResolution;
  sendResolutionChange(res ? res.width : 0, res ? res.height : 0, fps);
}

// 被控端上报当前实际采集分辨率/帧率时，同步下拉框（避免 UI 与实际不一致）。
watch(() => store.currentResolution, (res) => {
  if (!res) return;
  const longEdge = Math.max(res.width, res.height);
  const preset = resolutionPresets.find((p) => p.width === longEdge);
  if (preset) selectedResolution.value = preset.width;

  // 帧率档位以被控端上报为准（按屏幕刷新率筛选）
  if (Array.isArray(res.supportedFps) && res.supportedFps.length > 0) {
    fpsOptions.value = res.supportedFps;
  }
  if (res.fps > 0 && fpsOptions.value.includes(res.fps)) {
    selectedFps.value = res.fps;
  }
});
</script>

<template>
  <div class="control-bar">
    <div class="resolution-row">
      <label class="resolution-label">分辨率:</label>
      <select
        class="resolution-select"
        v-model="selectedResolution"
        :disabled="!store.dataChannelOpen"
        @change="onResolutionChange"
      >
        <option v-for="p in resolutionPresets" :key="p.label" :value="p.width">
          {{ p.label }}
        </option>
      </select>
      <label class="resolution-label">帧率:</label>
      <select
        class="resolution-select"
        v-model="selectedFps"
        :disabled="!store.dataChannelOpen"
        @change="onFpsChange"
      >
        <option v-if="selectedFps === 0" :value="0" disabled>--</option>
        <option v-for="f in fpsOptions" :key="f" :value="f">{{ f }}fps</option>
      </select>

      <span class="resolution-current" v-if="store.currentResolution">
        当前: {{ store.currentResolution.width }}×{{ store.currentResolution.height }}@{{ store.currentResolution.fps }}fps
      </span>

      <span class="record-sep"></span>

      <button
        class="record-btn"
        :class="{ recording: store.recording }"
        :disabled="!store.rtcConnected"
        @click="toggleRecording"
      >
        {{ store.recording ? '停止录制' : '录制' }}
      </button>
      <span class="record-status" v-if="store.recordStatus">{{ store.recordStatus }}</span>
    </div>

    <button
      v-for="k in keys"
      :key="k.code"
      class="key-btn"
      :disabled="!store.dataChannelOpen"
      @click="press(k.code)"
    >
      {{ k.label }}
    </button>
  </div>
</template>

<style scoped>
.record-sep {
  display: inline-block;
  width: 1px;
  height: 22px;
  margin: 0 10px;
  background: #3a3f4b;
  vertical-align: middle;
}

.record-btn {
  padding: 6px 14px;
  border: 1px solid #3a3f4b;
  border-radius: 6px;
  background: #2b6cff;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.record-btn:disabled {
  background: #3a3f4b;
  color: #888;
  cursor: not-allowed;
}

.record-btn.recording {
  background: #e5484d;
}

.record-status {
  margin-left: 8px;
  font-size: 13px;
  color: #ffb020;
  white-space: nowrap;
}
</style>
