<template>
  <div class="video-monitor-page">
    <!-- 顶部导航栏 - 蓝色渐变 -->
    <div class="nav-bar">
      <div class="nav-left">
        <div class="back-btn" @click="goBack">
          <van-icon name="arrow-left" />
        </div>
        <h1 class="nav-title">视频监控</h1>
      </div>
      <div class="nav-right">
        <div class="action-btn" @click="goToMap">
          <van-icon name="location" />
        </div>
        <div class="action-btn" :class="{ active: showFilter }" @click="showFilter = !showFilter">
          <van-icon name="filter-o" />
        </div>
      </div>
    </div>

    <!-- 筛选面板 -->
    <div v-if="showFilter" class="filter-panel-container">
      <div  class="filter-panel">
      <div class="filter-section">
        <div class="filter-label">区域筛选</div>
        <div class="filter-tags">
          <button
            v-for="area in areas"
            :key="area"
            class="filter-tag"
            :class="{ active: filterArea === area }"
            @click="filterArea = area"
          >
            {{ area }}
          </button>
        </div>
      </div>
      <div class="filter-row">
        <span class="filter-row-label">仅显示收藏</span>
        <van-switch v-model="showFavoriteOnly" size="20" />
      </div>
    </div>
    </div>

    <!-- 视频预览区域 -->
    <div v-if="selectedMonitor" class="preview-section">
      <div class="preview-header">
        <div class="preview-info">
          <van-icon name="video" class="preview-icon" />
          <span class="preview-name">{{ selectedMonitor.name }}</span>
          <span v-if="selectedMonitor.status === 'online'" class="status-dot"></span>
        </div>
      </div>

      <!-- 视频网格 -->
      <div class="video-grid" :class="'grid-' + viewMode">
        <div
          v-for="i in parseInt(viewMode)"
          :key="i"
          class="video-item"
        >
          <div class="video-placeholder">
            <van-icon name="video" class="placeholder-icon" />
          </div>
          <div class="video-label">
            {{ i === 1 ? selectedMonitor.name : `监控点 ${i}` }}
          </div>
          <div v-if="selectedMonitor.status === 'online'" class="live-badge">
            <span class="live-dot"></span>
            直播中
          </div>
          <div class="time-label">{{ currentTime }}</div>
        </div>
      </div>

      <!-- 控制栏 -->
      <div class="control-bar">
        <div class="quality-select" @click="toggleQuality">
          <span>清晰度:</span>
          <span class="quality-value">{{ quality === 'standard' ? '标清' : '高清' }}</span>
          <van-icon name="arrow-down" />
        </div>
        <div class="expand-btn" @click="toggleFullscreen">
          <van-icon name="expand" />
        </div>
      </div>
    </div>

    <!-- 监控点列表 -->
    <div class="monitor-list-section">
      <div class="section-header">
        <h2 class="section-title">
          监控点
          <span class="count">({{ filteredMonitors.length }}个)</span>
        </h2>
      </div>

      <!-- 监控/关注切换 -->
      <div class="tab-buttons">
        <button
          class="tab-btn"
          :class="{ active: !showFavoriteOnly }"
          @click="showFavoriteOnly = false"
        >
          全部监控
        </button>
        <button
          class="tab-btn"
          :class="{ active: showFavoriteOnly }"
          @click="showFavoriteOnly = true"
        >
          我的关注
        </button>
      </div>

      <!-- 分组模式切换 -->
      <div class="group-mode-buttons">
        <button
          class="mode-btn"
          :class="{ active: groupMode === 'area' }"
          @click="groupMode = 'area'"
        >
          按区域
        </button>
        <button
          class="mode-btn"
          :class="{ active: groupMode === 'department' }"
          @click="groupMode = 'department'"
        >
          按部门
        </button>
      </div>

      <!-- 分组列表 -->
      <div v-for="(group, groupName) in groupedMonitors" :key="groupName" class="monitor-group">
        <div class="group-header">
          {{ groupName }} ({{ group.length }})
        </div>
        <div class="group-items">
          <div
            v-for="monitor in group"
            :key="monitor.id"
            class="monitor-card"
            :class="{ selected: selectedMonitor?.id === monitor.id }"
            @click="handleMonitorSelect(monitor)"
          >
            <div class="card-main">
              <div class="card-header">
                <h3 class="monitor-name">{{ monitor.name }}</h3>
                <span class="status-badge" :class="monitor.status">
                  {{ monitor.status === 'online' ? '在线' : '离线' }}
                </span>
              </div>
              <div class="monitor-location">
                <van-icon name="location" class="loc-icon" />
                <span>{{ monitor.location }}</span>
              </div>
              <div class="monitor-tags">
                <span class="type-tag">{{ monitor.type }}</span>
                <span class="id-tag">{{ monitor.id }}</span>
              </div>
            </div>
            <div class="favorite-btn" @click.stop="toggleFavorite(monitor)">
              <van-icon :name="monitor.isFavorite ? 'star' : 'star-o'" :class="{ active: monitor.isFavorite }" />
            </div>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="filteredMonitors.length === 0" class="empty-state">
        <van-icon name="video" class="empty-icon" />
        <p>暂无符合条件的监控点</p>
      </div>
    </div>

    <!-- 底部导航 -->
    <BottomTabs :active-tab="'video'" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import BottomTabs from "@/components/bottomTabs.vue";

const router = useRouter();

// 状态
const viewMode = ref("1");
const quality = ref("standard");
const showFilter = ref(false);
const filterArea = ref("全部");
const showFavoriteOnly = ref(false);
const groupMode = ref("area");
const selectedMonitor = ref(null);
const currentTime = ref("");

// 区域列表
const areas = ["全部", "江汉区", "江岸区", "洪山区", "武昌区"];

// 监控点数据
const monitors = ref([
  {
    id: "M001",
    name: "江汉路路口监控",
    location: "江汉路与中山大道交叉口",
    area: "江汉区",
    department: "一大队",
    status: "online",
    isFavorite: true,
    type: "路口监控"
  },
  {
    id: "M002",
    name: "长江大桥北监控",
    location: "长江大桥北桥头",
    area: "江岸区",
    department: "二大队",
    status: "online",
    isFavorite: true,
    type: "桥梁监控"
  },
  {
    id: "M003",
    name: "武汉大道光谷段",
    location: "武汉大道光谷广场",
    area: "洪山区",
    department: "三大队",
    status: "online",
    isFavorite: false,
    type: "路段监控"
  },
  {
    id: "M004",
    name: "中山路发展大道",
    location: "中山路与发展大道交叉口",
    area: "江汉区",
    department: "一大队",
    status: "online",
    isFavorite: false,
    type: "路口监控"
  },
  {
    id: "M005",
    name: "解放大道监控",
    location: "解放大道武广商圈",
    area: "江汉区",
    department: "二大队",
    status: "offline",
    isFavorite: false,
    type: "商圈监控"
  },
  {
    id: "M006",
    name: "汉口火车站广场",
    location: "汉口火车站东广场",
    area: "江汉区",
    department: "三大队",
    status: "online",
    isFavorite: true,
    type: "交通枢纽"
  }
]);

// 过滤后的监控点
const filteredMonitors = computed(() => {
  return monitors.value.filter(monitor => {
    const areaMatch = filterArea.value === "全部" || monitor.area === filterArea.value;
    const favoriteMatch = !showFavoriteOnly.value || monitor.isFavorite;
    return areaMatch && favoriteMatch;
  });
});

// 分组监控点
const groupedMonitors = computed(() => {
  const groups = {};
  filteredMonitors.value.forEach(monitor => {
    const key = groupMode.value === "area" ? monitor.area : monitor.department;
    if (!groups[key]) {
      groups[key] = [];
    }
    groups[key].push(monitor);
  });
  return groups;
});

// 返回
function goBack() {
  router.back();
}

// 前往地图
function goToMap() {
  router.push("/videoMonitorMap");
}

// 选择监控点
function handleMonitorSelect(monitor) {
  selectedMonitor.value = monitor;
}

// 切换收藏
function toggleFavorite(monitor) {
  monitor.isFavorite = !monitor.isFavorite;
}

// 切换清晰度
function toggleQuality() {
  quality.value = quality.value === "standard" ? "high" : "standard";
}

// 切换全屏
function toggleFullscreen() {
  const elem = document.documentElement;
  if (!document.fullscreenElement) {
    elem.requestFullscreen?.();
  } else {
    document.exitFullscreen?.();
  }
}

// 更新时间
function updateTime() {
  const now = new Date();
  currentTime.value = now.toLocaleTimeString("zh-CN", { hour12: false });
}

let timer;
onMounted(() => {
  updateTime();
  timer = setInterval(updateTime, 1000);
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style lang="scss" scoped>
.video-monitor-page {
  min-height: 100vh;
  background: #f1f5f9;
  padding-bottom: 60px;
}

.nav-bar {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;

  .nav-left {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .back-btn {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
  }

  .nav-title {
    font-size: 17px;
    font-weight: 600;
    color: white;
  }

  .nav-right {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .action-btn {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;

    &.active {
      background: white;
      color: #2563eb;
    }
  }
}
.filter-panel-container{
  padding: 12px 16px;
  box-sizing: border-box;
  background-color: #2563eb;
}
.filter-panel {
  background: rgb(94, 138, 233);
  border-radius: 16px;
  padding: 16px;

  .filter-section {
    margin-bottom: 12px;

    .filter-label {
      font-size: 14px;
      color: white;
      margin-bottom: 8px;
    }

    .filter-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .filter-tag {
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 13px;
      background: rgba(255, 255, 255, 0.2);
      color: white;
      border: none;

      &.active {
        background: white;
        color: #2563eb;
        font-weight: 500;
      }
    }
  }

  .filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .filter-row-label {
      font-size: 14px;
      color: white;
    }
  }
}

.preview-section {
  background: #1a1a1a;
  padding: 16px;

  .preview-header {
    margin-bottom: 12px;

    .preview-info {
      display: flex;
      align-items: center;
      gap: 8px;
      color: white;

      .preview-icon {
        font-size: 16px;
      }

      .preview-name {
        font-size: 14px;
        font-weight: 500;
      }

      .status-dot {
        width: 8px;
        height: 8px;
        background: #10b981;
        border-radius: 50%;
      }
    }
  }

  .video-grid {
    display: grid;
    gap: 4px;

    &.grid-1 {
      grid-template-columns: 1fr;
    }

    &.grid-4 {
      grid-template-columns: repeat(2, 1fr);
    }

    &.grid-9 {
      grid-template-columns: repeat(3, 1fr);
    }

    .video-item {
      aspect-ratio: 16/9;
      background: #262626;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      .video-placeholder {
        .placeholder-icon {
          font-size: 48px;
          color: #525252;
        }
      }

      .video-label {
        position: absolute;
        top: 8px;
        left: 8px;
        background: rgba(0, 0, 0, 0.5);
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        color: white;
      }

      .live-badge {
        position: absolute;
        top: 8px;
        right: 8px;
        background: #ef4444;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        color: white;
        display: flex;
        align-items: center;
        gap: 4px;

        .live-dot {
          width: 6px;
          height: 6px;
          background: white;
          border-radius: 50%;
          animation: pulse 1.5s infinite;
        }
      }

      .time-label {
        position: absolute;
        bottom: 8px;
        left: 8px;
        background: rgba(0, 0, 0, 0.5);
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        color: white;
      }
    }
  }

  .control-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;

    .quality-select {
      display: flex;
      align-items: center;
      gap: 4px;
      color: rgba(255, 255, 255, 0.7);
      font-size: 14px;

      .quality-value {
        color: white;
        font-weight: 500;
      }
    }

    .expand-btn {
      color: rgba(255, 255, 255, 0.7);
      font-size: 20px;
    }
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.monitor-list-section {
  padding: 16px;

  .section-header {
    margin-bottom: 12px;

    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: #1f2937;

      .count {
        color: #9ca3af;
        font-weight: normal;
        font-size: 14px;
      }
    }
  }
}

.tab-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;

  .tab-btn {
    flex: 1;
    height: 40px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #e5e7eb;
    background: white;
    color: #6b7280;

    &.active {
      background: #2563eb;
      border-color: #2563eb;
      color: white;
      box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    }
  }
}

.group-mode-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;

  .mode-btn {
    flex: 1;
    height: 32px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #e5e7eb;
    background: white;
    color: #6b7280;

    &.active {
      background: #1f2937;
      border-color: #1f2937;
      color: white;
    }
  }
}

.monitor-group {
  margin-bottom: 16px;

  .group-header {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
    margin-bottom: 8px;
    padding-left: 8px;
  }

  .group-items {
    .monitor-card {
      background: white;
      border-radius: 16px;
      padding: 14px;
      margin-bottom: 8px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      border: 1px solid #f3f4f6;
      transition: all 0.2s;

      &.selected {
        border-color: #2563eb;
        border-width: 2px;
      }

      .card-main {
        flex: 1;

        .card-header {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 6px;

          .monitor-name {
            font-size: 15px;
            font-weight: 500;
            color: #1f2937;
          }

          .status-badge {
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 11px;

            &.online {
              background: #dcfce7;
              color: #16a34a;
            }

            &.offline {
              background: #f3f4f6;
              color: #6b7280;
            }
          }
        }

        .monitor-location {
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: 13px;
          color: #6b7280;
          margin-bottom: 8px;

          .loc-icon {
            font-size: 14px;
          }
        }

        .monitor-tags {
          display: flex;
          align-items: center;
          gap: 8px;

          .type-tag {
            padding: 2px 8px;
            background: #eff6ff;
            color: #2563eb;
            border-radius: 4px;
            font-size: 12px;
          }

          .id-tag {
            font-size: 12px;
            color: #d1d5db;
          }
        }
      }

      .favorite-btn {
        padding: 4px;

        .van-icon-star-o,
        .van-icon-star {
          font-size: 20px;
          color: #d1d5db;
        }

        .van-icon-star.active {
          color: #fbbf24;
        }
      }
    }
  }
}

.empty-state {
  text-align: center;
  padding: 48px 0;
  color: #9ca3af;

  .empty-icon {
    font-size: 64px;
    margin-bottom: 12px;
  }

  p {
    font-size: 14px;
  }
}
</style>