<script setup>
import { ref } from 'vue';
import { store, connectSignaling, disconnectSignaling, refreshDevices, connectToDevice, disconnectDevice } from '../store/controllerStore';

const selected = ref('');
const authType = ref('NONE');
const authValue = ref('');

function onConnectDevice() {
  if (!selected.value) {
    store.error = '请选择要连接的设备';
    return;
  }
  if (authType.value !== 'NONE' && !authValue.value.trim()) {
    store.error = '请输入验证码或密码';
    return;
  }
  connectToDevice(selected.value, authType.value, authType.value === 'NONE' ? '' : authValue.value.trim());
}
</script>

<template>
  <div class="conn-panel">
    <div class="field">
      <label>信令服务器地址 (WebSocket)</label>
      <input class="input" v-model="store.serverUrl" placeholder="ws://host:port/ws/signal" />
    </div>

    <div class="field">
      <label>本机设备 ID (CONTROLLER)</label>
      <input class="input" v-model="store.deviceId" placeholder="例如 web-controller-001" />
    </div>

    <button class="btn danger" v-if="store.signalingConnected" @click="disconnectSignaling">断开信令服务器</button>
    <button class="btn" v-else :disabled="store.signalingConnecting" @click="connectSignaling">
      {{ store.signalingConnecting ? '正在连接...' : '连接信令服务器' }}
    </button>

    <div class="section-title">被控端设备 (CONTROLLED)</div>
    <button class="btn secondary" style="margin-bottom:12px" @click="refreshDevices" :disabled="!store.signalingConnected">
      刷新设备列表
    </button>

    <div v-if="store.controlledDevices.length === 0" class="hint">
      暂无在线被控端。请确认 Android 被控端 (WebRTCControlled) 已启动并连接到同一信令服务器。
    </div>

    <div
      v-for="id in store.controlledDevices"
      :key="id"
      class="device-item"
      :class="{ active: store.targetDeviceId === id }"
      @click="selected = id"
    >
      <span>{{ id }}</span>
      <span style="color:var(--accent-2)">在线</span>
    </div>

    <div class="field" style="margin-top:14px">
      <select class="select" v-model="selected">
        <option value="">选择目标设备…</option>
        <option v-for="id in store.controlledDevices" :key="id" :value="id">{{ id }}</option>
      </select>
    </div>

    <div class="section-title" style="margin-top:14px">连接鉴权</div>
    <div class="auth-row">
      <label class="auth-radio"><input type="radio" value="NONE" v-model="authType" /> 免密连接</label>
      <label class="auth-radio"><input type="radio" value="CODE" v-model="authType" /> 动态验证码</label>
      <label class="auth-radio"><input type="radio" value="PASSWORD" v-model="authType" /> 固定密码</label>
    </div>
    <div v-if="authType === 'NONE'" class="hint">
      免密连接：被控端将弹出手动确认对话框，无需输入验证码或密码。
    </div>
    <div class="field" v-else>
      <input class="input" v-model="authValue" :placeholder="authType === 'PASSWORD' ? '请输入固定密码' : '请输入动态验证码'" />
    </div>

    <button class="btn" @click="onConnectDevice" :disabled="!selected || store.rtcConnected">发起远程控制</button>
    <button class="btn danger" style="margin-top:12px" v-if="store.rtcConnected" @click="disconnectDevice">结束控制</button>

    <div v-if="store.error" class="error">{{ store.error }}</div>

    <div class="section-title">说明</div>
    <div class="hint">
      • 本页面作为 <b>控制端 (CONTROLLER)</b>，对应原 Android / Flutter 控制端。<br />
      • 连接后可在右侧屏幕区域触摸/滑动来操控被控设备。<br />
      • 控制指令以 protobuf 经 DataChannel 发送，与原 Android 被控端完全兼容。
    </div>
  </div>
</template>

<style scoped>
.auth-row { display: flex; gap: 16px; margin-bottom: 8px; align-items: center; }
.auth-radio { display: inline-flex; align-items: center; gap: 4px; }
</style>
