<script lang="ts" setup>
import { computed, ref } from "vue";
import monitorVideo from "../assets/循环背景动画.mp4";

type GridMode = 1 | 4 | 9;

interface CameraItem {
  id: string;
  name: string;
  type: string;
  status: string;
}

interface DeviceNode {
  id: string;
  name: string;
  cameras: CameraItem[];
}

interface ProjectNode {
  id: string;
  name: string;
  devices: DeviceNode[];
}

interface ProjectCameraItem extends CameraItem {
  deviceId: string;
  deviceName: string;
}

const projectData: ProjectNode = {
  id: "project-1",
  name: "西江隧道",
  devices: [
    {
      id: "ROBOT-001",
      name: "巡检机器人 R1",
      cameras: [
        { id: "CAM-001", name: "白光镜头", type: "白光", status: "在线" },
        { id: "CAM-002", name: "红外镜头", type: "红外", status: "在线" },
        { id: "CAM-003", name: "云台辅镜头", type: "辅助", status: "在线" },
      ],
    },
    {
      id: "ROBOT-002",
      name: "巡检机器人 R2",
      cameras: [
        { id: "CAM-004", name: "白光镜头", type: "白光", status: "在线" },
        { id: "CAM-005", name: "红外镜头", type: "红外", status: "在线" },
      ],
    },
  ],
};

const gridMode = ref<GridMode>(4);
const playbackProgress = ref(42);
const playbackDate = ref("2026-06-23");
const playbackTime = ref("14:20:00");
const activeCameraId = ref(projectData.devices[0].cameras[0].id);

const currentProject = computed(() => projectData);

const projectCameras = computed<ProjectCameraItem[]>(() =>
  currentProject.value.devices.flatMap((device) =>
    device.cameras.map((camera) => ({
      ...camera,
      deviceId: device.id,
      deviceName: device.name,
    })),
  ),
);

const activeCamera = computed(
  () => projectCameras.value.find((camera) => camera.id === activeCameraId.value) ?? projectCameras.value[0],
);

const orderedCameras = computed(() => {
  const selected = activeCamera.value;

  return projectCameras.value
    .filter((camera) => camera.id !== selected.id)
    .reduce<ProjectCameraItem[]>((list, camera) => {
      list.push(camera);
      return list;
    }, [selected]);
});

const visibleCameras = computed(() => {
  const countMap: Record<GridMode, number> = {
    1: 1,
    4: 4,
    9: 9,
  };
  const targetCount = countMap[gridMode.value];
  const cameras = orderedCameras.value;

  return Array.from({ length: targetCount }, (_, index) => cameras[index] ?? null);
});

function selectCamera(cameraId: string) {
  activeCameraId.value = cameraId;
}

function setGridMode(mode: GridMode) {
  gridMode.value = mode;
}
</script>

<template>
  <div class="page-shell video-center-page video-center-shell">
    <div class="video-center-layout">
      <aside class="page-card video-tree-card">
        <div class="page-card-title">摄像头列表</div>
        <div class="tree-panel">
          <div class="tree-panel-project">
            <div class="tree-panel-project-name">{{ currentProject.name }}</div>
            <div class="tree-panel-project-meta">共 {{ projectCameras.length }} 路摄像头</div>
          </div>
          <div class="tree-device-list">
            <button
              v-for="camera in projectCameras"
              :key="camera.id"
              :class="['tree-device-btn', { active: activeCameraId === camera.id }]"
              type="button"
              @click="selectCamera(camera.id)"
            >
              <span class="tree-device-name">{{ camera.name }}</span>
              <span class="tree-device-id">{{ camera.deviceName }} / {{ camera.id }}</span>
            </button>
          </div>
        </div>
      </aside>

      <section class="page-card video-wall-card">
        <div class="video-wall-header">
          <div>
            <div class="page-card-title">视频播放</div>
            <div class="video-wall-meta">
              {{ currentProject.name }} / {{ activeCamera.name }}
            </div>
          </div>
          <div class="grid-switch">
            <button
              v-for="mode in [1, 4, 9]"
              :key="mode"
              :class="['grid-switch-btn', { active: gridMode === mode }]"
              type="button"
              @click="setGridMode(mode as GridMode)"
            >
              {{ mode }} 宫格
            </button>
          </div>
        </div>

        <div :class="['video-grid-board', `grid-${gridMode}`]">
          <div
            v-for="(camera, index) in visibleCameras"
            :key="camera?.id ?? `empty-${index}`"
            class="video-grid-cell"
          >
            <template v-if="camera">
              <video autoplay loop muted playsinline :src="monitorVideo"></video>
              <div class="video-cell-top">
                <span class="cell-badge">LIVE</span>
                <span class="cell-type">{{ camera.type }}</span>
              </div>
              <div class="video-cell-bottom">
                <div class="cell-name">{{ camera.name }}</div>
                <div class="cell-meta">{{ camera.deviceName }} / {{ camera.status }}</div>
              </div>
            </template>
            <template v-else>
              <div class="video-empty">
                <span>未分配画面</span>
              </div>
            </template>
          </div>
        </div>

        <div class="playback-panel">
          <div class="playback-header">
            <div class="playback-title">录像回放</div>
            <div class="playback-filter">
              <input v-model="playbackDate" type="date" />
              <input v-model="playbackTime" type="time" step="1" />
            </div>
          </div>
          <div class="playback-controls">
            <button class="playback-btn" type="button">回放</button>
            <button class="playback-btn" type="button">暂停</button>
            <button class="playback-btn" type="button">快退</button>
            <button class="playback-btn" type="button">快进</button>
            <div class="playback-track">
              <div class="playback-track-line">
                <span :style="{ width: `${playbackProgress}%` }"></span>
              </div>
              <input
                v-model="playbackProgress"
                class="playback-range"
                max="100"
                min="0"
                type="range"
              />
            </div>
            <div class="playback-time">{{ playbackDate }} {{ playbackTime }}</div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>
