<script lang="ts" setup>
import { computed, ref } from "vue";
import { recentAlertPhotoSources } from "../shared/alertPhotos";

const monitorVideo = "https://wuhuimg.oss-cn-shanghai.aliyuncs.com/video/output.mp4";

type DriveMode = "阿克曼" | "旋转" | "横移";

interface DeviceItem {
  id: string;
  name: string;
  status: "空闲" | "离线" | "充电中";
  location: string;
  battery: string;
  task: string;
  linearSpeed: string;
  angularSpeed: string;
}

interface ProjectItem {
  id: number;
  name: string;
  devices: DeviceItem[];
}

interface NavPoint {
  x: number;
  y: number;
}

interface NavScenario {
  routePath: string;
  lanePath: string;
  upperEdgePath: string;
  lowerEdgePath: string;
  upperWallPoints: NavPoint[];
  lowerWallPoints: NavPoint[];
  checkPoints: Array<{ x: number; y: number; label: string }>;
}

interface AlertItem {
  id: string;
  title: string;
  level: "高" | "中" | "低";
  time: string;
  photo: string;
}

const projectDevices: ProjectItem[] = [
  {
    id: 1,
    name: "西江隧道",
    devices: [
      {
        id: "ROBOT-001",
        name: "巡检机器人 R1",
        status: "空闲",
        location: "东洞口至 K1+240",
        battery: "82%",
        task: "日常巡检",
        linearSpeed: "0.42m/s",
        angularSpeed: "0.08rad/s",
      },
      {
        id: "ROBOT-002",
        name: "巡检机器人 R2",
        status: "空闲",
        location: "K1+240 至 K2+120",
        battery: "76%",
        task: "设备复核",
        linearSpeed: "0.38m/s",
        angularSpeed: "0.06rad/s",
      },
      {
        id: "ROBOT-003",
        name: "巡检机器人 R3",
        status: "充电中",
        location: "中控区",
        battery: "48%",
        task: "回库维护",
        linearSpeed: "0.00m/s",
        angularSpeed: "0.00rad/s",
      },
      {
        id: "ROBOT-004",
        name: "巡检机器人 R4",
        status: "空闲",
        location: "K2+120 至西洞口",
        battery: "91%",
        task: "夜间待命",
        linearSpeed: "0.31m/s",
        angularSpeed: "0.04rad/s",
      },
    ],
  },
];

const recentAlerts: AlertItem[] = [
  {
    id: "AL-001",
    title: "线缆破损",
    level: "高",
    time: "2026-06-26 10:24:18",
    photo: recentAlertPhotoSources["线缆破损"],
  },
  {
    id: "AL-002",
    title: "局部高温",
    level: "中",
    time: "2026-06-26 10:18:42",
    photo: recentAlertPhotoSources["局部高温"],
  },
  {
    id: "AL-003",
    title: "墙体裂缝",
    level: "低",
    time: "2026-06-26 09:56:11",
    photo: recentAlertPhotoSources["墙体裂缝"],
  },
];

const alertTabs = ["全部", "线缆破损", "局部高温", "墙体裂缝"] as const;
const activeAlertTab = ref<(typeof alertTabs)[number]>("全部");
const activeCameraMode = ref<"white" | "infrared">("white");
const driveModeTabs: DriveMode[] = ["阿克曼", "旋转", "横移"];
const activeDriveMode = ref<DriveMode>("阿克曼");
const presetPointOptions = Array.from(
  { length: 10 },
  (_, index) => `预置点${index + 1}`,
);
const selectedPresetPoint = ref("预置点1");
const controlMode = ref<"人工接管" | "自主巡检">("人工接管");
const targetLiftHeight = ref("1200");
const liftRealtimeStatus = ref("待命");
const liftRealtimeHeight = ref("1180");

const navScenario: NavScenario = {
  routePath:
    "M 106 318 L 154 306 L 208 292 L 256 278 L 306 264 L 358 258 L 414 258 L 468 248 L 522 241 L 578 234 L 638 226",
  lanePath:
    "M 82 270 L 136 258 L 190 244 L 244 230 L 296 216 L 350 208 L 408 208 L 464 198 L 518 190 L 576 182 L 642 174 L 656 188 L 650 278 L 586 286 L 528 294 L 472 302 L 414 312 L 358 312 L 304 320 L 252 334 L 198 348 L 142 360 L 88 370 L 74 356 Z",
  upperEdgePath:
    "M 82 270 L 136 258 L 190 244 L 244 230 L 296 216 L 350 208 L 408 208 L 464 198 L 518 190 L 576 182 L 642 174",
  lowerEdgePath:
    "M 88 370 L 142 360 L 198 348 L 252 334 L 304 320 L 358 312 L 414 312 L 472 302 L 528 294 L 586 286 L 650 278",
  upperWallPoints: [
    { x: 64, y: 164 },
    { x: 84, y: 150 },
    { x: 104, y: 142 },
    { x: 126, y: 136 },
    { x: 148, y: 132 },
    { x: 172, y: 126 },
    { x: 196, y: 122 },
    { x: 224, y: 118 },
    { x: 252, y: 116 },
    { x: 280, y: 112 },
    { x: 312, y: 110 },
    { x: 344, y: 108 },
    { x: 378, y: 108 },
    { x: 412, y: 110 },
    { x: 448, y: 112 },
    { x: 484, y: 114 },
    { x: 520, y: 116 },
    { x: 556, y: 120 },
    { x: 590, y: 126 },
    { x: 622, y: 134 },
    { x: 650, y: 144 },
    { x: 676, y: 158 },
    { x: 116, y: 170 },
    { x: 214, y: 156 },
    { x: 326, y: 146 },
    { x: 446, y: 148 },
    { x: 566, y: 160 },
    { x: 638, y: 172 },
  ],
  lowerWallPoints: [
    { x: 72, y: 380 },
    { x: 96, y: 392 },
    { x: 122, y: 404 },
    { x: 150, y: 410 },
    { x: 180, y: 416 },
    { x: 214, y: 420 },
    { x: 248, y: 422 },
    { x: 284, y: 424 },
    { x: 322, y: 426 },
    { x: 360, y: 426 },
    { x: 400, y: 424 },
    { x: 440, y: 420 },
    { x: 480, y: 414 },
    { x: 520, y: 408 },
    { x: 558, y: 400 },
    { x: 594, y: 392 },
    { x: 628, y: 384 },
    { x: 660, y: 374 },
    { x: 700, y: 366 },
    { x: 126, y: 376 },
    { x: 238, y: 392 },
    { x: 354, y: 396 },
    { x: 474, y: 388 },
    { x: 590, y: 372 },
  ],
  checkPoints: [
    { x: 106, y: 318, label: "起点" },
    { x: 358, y: 258, label: "途经点" },
    { x: 638, y: 226, label: "终点" },
  ],
};

const currentProject = computed(() => projectDevices[0]);
const currentDevices = computed(() => currentProject.value.devices);
const currentRobot = computed(() => currentDevices.value[0]);
const currentScenario = computed(() => navScenario);

const filteredRecentAlerts = computed(() => {
  if (activeAlertTab.value === "全部") {
    return recentAlerts;
  }

  return recentAlerts.filter((alert) => alert.title === activeAlertTab.value);
});

function switchAlertTab(tab: (typeof alertTabs)[number]) {
  activeAlertTab.value = tab;
}

function switchCameraMode(mode: "white" | "infrared") {
  activeCameraMode.value = mode;
}

function switchDriveMode(mode: DriveMode) {
  activeDriveMode.value = mode;
}

function toggleControlMode() {
  controlMode.value =
    controlMode.value === "人工接管" ? "自主巡检" : "人工接管";
}

function jumpToPresetPoint() {
  selectedPresetPoint.value = selectedPresetPoint.value;
}

function runToTargetHeight() {
  const normalizedHeight = targetLiftHeight.value.replace(/[^\d]/g, "");

  targetLiftHeight.value = normalizedHeight || "0";
  liftRealtimeStatus.value = "运行中";
  liftRealtimeHeight.value = targetLiftHeight.value;
}

function getStatusClass(status: DeviceItem["status"]) {
  const classMap: Record<DeviceItem["status"], string> = {
    空闲: "status-idle",
    离线: "status-offline",
    充电中: "status-charging",
  };

  return classMap[status];
}
</script>

<template>
  <div class="center">
    <div class="left">
      <div class="card-1 device-card">
        <div class="title">设备列表</div>
        <div class="device-panel">
          <div class="project-name">{{ currentProject.name }}</div>
          <div class="device-list">
            <div v-for="device in currentDevices" :key="device.id" class="device-item">
              <div class="device-main">
                <div class="device-name">{{ device.name }}</div>
                <div :class="['device-status', getStatusClass(device.status)]">
                  {{ device.status }}
                </div>
              </div>
              <div class="device-meta">
                <span>{{ device.id }}</span>
                <span>{{ device.battery }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card-2 alert-card">
        <div class="title">近期告警</div>
        <div class="alert-panel">
          <div class="alert-tabs">
            <button
              v-for="tab in alertTabs"
              :key="tab"
              :class="['alert-tab', { active: activeAlertTab === tab }]"
              type="button"
              @click="switchAlertTab(tab)"
            >
              {{ tab }}
            </button>
          </div>
          <template v-if="filteredRecentAlerts.length">
            <div v-for="alert in filteredRecentAlerts" :key="alert.id" class="alert-item">
              <div class="alert-content">
                <img class="alert-thumbnail" :src="alert.photo" :alt="alert.title" />
                <div class="alert-info">
                  <div class="alert-summary">
                    <div class="alert-field">
                      <div class="alert-label">告警类型</div>
                      <div class="alert-title">{{ alert.title }}</div>
                    </div>
                    <div class="alert-field alert-field-right">
                      <div class="alert-label">告警等级</div>
                      <div :class="['alert-level', `level-${alert.level}`]">{{ alert.level }}级</div>
                    </div>
                  </div>
                  <div class="alert-time-row">
                    <span class="alert-label">告警时间</span>
                    <span class="alert-time">{{ alert.time }}</span>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <div v-else class="alert-empty">当前筛选下暂无告警</div>
        </div>
      </div>
    </div>

    <div class="middle">
      <div class="nav-map-panel">
        <div class="nav-map-stage">
          <svg class="nav-map-svg" viewBox="0 0 760 420" preserveAspectRatio="xMidYMid meet">
            <g class="grid-layer">
              <line v-for="line in 7" :key="`h-${line}`" :x1="40" :y1="line * 52" :x2="720" :y2="line * 52" />
              <line v-for="line in 12" :key="`v-${line}`" :x1="line * 56" :y1="40" :x2="line * 56" :y2="380" />
            </g>
            <path class="corridor-lane" :d="currentScenario.lanePath" />
            <path class="corridor-edge" :d="currentScenario.upperEdgePath" />
            <path class="corridor-edge" :d="currentScenario.lowerEdgePath" />
            <g class="wall-layer wall-upper">
              <circle
                v-for="(point, index) in currentScenario.upperWallPoints"
                :key="`upper-wall-${index}`"
                :cx="point.x"
                :cy="point.y"
                :r="index % 4 === 0 ? 3.4 : 2.4"
              />
            </g>
            <g class="wall-layer wall-lower">
              <circle
                v-for="(point, index) in currentScenario.lowerWallPoints"
                :key="`lower-wall-${index}`"
                :cx="point.x"
                :cy="point.y"
                :r="index % 5 === 0 ? 3.2 : 2.3"
              />
            </g>
            <path class="route-glow" :d="currentScenario.routePath" />
            <path class="route-line" :d="currentScenario.routePath" />
            <g class="checkpoint-layer">
              <g
                v-for="point in currentScenario.checkPoints"
                :key="point.label"
                class="checkpoint"
                :transform="`translate(${point.x}, ${point.y})`"
              >
                <circle r="7"></circle>
                <text x="12" y="4">{{ point.label }}</text>
              </g>
            </g>
            <g class="robot-layer">
              <circle class="robot-shadow" r="18">
                <animateMotion dur="18s" repeatCount="indefinite" :path="currentScenario.routePath" />
              </circle>
              <circle class="robot-body" r="10">
                <animateMotion dur="18s" repeatCount="indefinite" rotate="auto" :path="currentScenario.routePath" />
              </circle>
              <path class="robot-head" d="M -3 -9 L 8 0 L -3 9 Z">
                <animateMotion dur="18s" repeatCount="indefinite" rotate="auto" :path="currentScenario.routePath" />
              </path>
            </g>
          </svg>
          <div class="nav-map-overlay top-left">隧道点云走廊</div>
          <div class="nav-map-overlay top-right">窄通道路径跟踪</div>
          <div class="nav-map-overlay bottom-left">
            机器人编号：{{ currentRobot.id }} / {{ currentRobot.task }}
          </div>
          <div class="nav-map-overlay bottom-right">
            电量 {{ currentRobot.battery }} / 线速度 {{ currentRobot.linearSpeed }} / 角速度
            {{ currentRobot.angularSpeed }}
          </div>
        </div>
      </div>
    </div>

    <div class="right">
      <div class="card-1 video-card">
        <div class="card-header">
          <div class="title">视频监控</div>
          <div class="camera-switch header-switch">
            <button
              :class="['camera-btn', { active: activeCameraMode === 'white' }]"
              type="button"
              @click="switchCameraMode('white')"
            >
              白光
            </button>
            <button
              :class="['camera-btn', { active: activeCameraMode === 'infrared' }]"
              type="button"
              @click="switchCameraMode('infrared')"
            >
              红外
            </button>
          </div>
        </div>
        <div class="video-panel">
          <div class="video-screen">
            <video
              :class="['monitor-video', { infrared: activeCameraMode === 'infrared' }]"
              autoplay
              loop
              muted
              playsinline
              :src="monitorVideo"
            ></video>
            <div class="scan-line"></div>
            <div class="video-overlay top-left">实时视频流</div>
            <div class="video-overlay top-right">
              {{ activeCameraMode === "white" ? "白光镜头" : "红外镜头" }}
            </div>
            <div class="video-overlay bottom-left">{{ currentRobot.id }}</div>
          </div>
        </div>
      </div>

      <div class="card-2 control-card">
        <div class="card-header">
          <div class="title">远程控制</div>
          <button class="mode-toggle-btn" type="button" @click="toggleControlMode">
            <span :class="['mode-toggle-chip', { active: controlMode === '人工接管' }]">
              人工接管
            </span>
            <span :class="['mode-toggle-chip', { active: controlMode === '自主巡检' }]">
              自主巡检
            </span>
          </button>
        </div>
        <div class="control-panel">
          <div class="control-status">
            <div class="status-item">
              <span class="status-label">控制对象</span>
              <span class="status-value">{{ currentRobot.id }}</span>
            </div>
            <div class="status-item">
              <span class="status-label">当前模式</span>
              <span class="status-value">{{ controlMode }}</span>
            </div>
          </div>
          <div class="control-main">
            <div class="control-top-row">
              <div class="vehicle-section">
                <div class="section-title control-block-title">底盘驱动</div>
                <div class="drive-mode-tabs">
                  <button
                    v-for="mode in driveModeTabs"
                    :key="mode"
                    :class="['drive-mode-tab', { active: activeDriveMode === mode }]"
                    type="button"
                    @click="switchDriveMode(mode)"
                  >
                    {{ mode }}
                  </button>
                </div>
                <div class="vehicle-pad">
                  <button class="drive-btn drive-up" type="button">
                    <span class="drive-arrow">↑</span>
                    <span class="drive-label">前进</span>
                  </button>
                  <button class="drive-btn drive-left" type="button">
                    <span class="drive-arrow">←</span>
                    <span class="drive-label">左转</span>
                  </button>
                  <div class="drive-core" aria-hidden="true"></div>
                  <button class="drive-btn drive-right" type="button">
                    <span class="drive-arrow">→</span>
                    <span class="drive-label">右转</span>
                  </button>
                  <button class="drive-btn drive-down" type="button">
                    <span class="drive-arrow">↓</span>
                    <span class="drive-label">后退</span>
                  </button>
                </div>
              </div>
              <div class="control-section gimbal-section">
                <div class="section-title">云台控制</div>
                <div class="gimbal-preset-panel">
                  <label class="gimbal-preset-group">
                    <select v-model="selectedPresetPoint" class="gimbal-preset-select">
                      <option
                        v-for="preset in presetPointOptions"
                        :key="preset"
                        :value="preset"
                      >
                        {{ preset }}
                      </option>
                    </select>
                  </label>
                  <button class="gimbal-preset-btn" type="button" @click="jumpToPresetPoint">
                    跳转
                  </button>
                </div>
                <div class="vehicle-pad gimbal-wheel">
                  <button class="drive-btn drive-up" type="button">
                    <span class="drive-arrow">↑</span>
                    <span class="drive-label">上</span>
                  </button>
                  <button class="drive-btn drive-left" type="button">
                    <span class="drive-arrow">←</span>
                    <span class="drive-label">左</span>
                  </button>
                  <div class="drive-core" aria-hidden="true"></div>
                  <button class="drive-btn drive-right" type="button">
                    <span class="drive-arrow">→</span>
                    <span class="drive-label">右</span>
                  </button>
                  <button class="drive-btn drive-down" type="button">
                    <span class="drive-arrow">↓</span>
                    <span class="drive-label">下</span>
                  </button>
                </div>
              </div>
            </div>
            <div class="control-section lift-section">
              <div class="section-title">升降柱控制</div>
              <div class="lift-control-panel">
                <label class="lift-input-group">
                  <span class="lift-input-label">目标高度</span>
                  <div class="lift-input-shell">
                    <input
                      v-model="targetLiftHeight"
                      class="lift-input"
                      type="text"
                      inputmode="numeric"
                    />
                    <span class="lift-unit">mm</span>
                  </div>
                </label>
                <button class="lift-submit-btn" type="button" @click="runToTargetHeight">
                  运行到指定高度
                </button>
                <div class="lift-status-panel">
                  <div class="lift-status-item">
                    <span class="lift-status-label">实时状态</span>
                    <span class="lift-status-value">{{ liftRealtimeStatus }}</span>
                  </div>
                  <div class="lift-status-item">
                    <span class="lift-status-label">当前高度</span>
                    <span class="lift-status-value">{{ liftRealtimeHeight }} mm</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

