<template>
    <div class="home-container">
      <!-- 顶部统计数据卡片 -->
      <div class="stats-row">
        <div class="stat-card">
          <div class="stat-icon">👋</div>
          <div class="stat-data">
            <div class="value">92%</div>
            <div class="label">识别准确率</div>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">⚡</div>
          <div class="stat-data">
            <div class="value">38ms</div>
            <div class="label">平均响应时间</div>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">🔍</div>
          <div class="stat-data">
            <div class="value">312</div>
            <div class="label">今日识别次数</div>
          </div>
        </div>
      </div>
      
      <!-- 主内容区域 -->
      <div class="main-content">
        <!-- 左侧摄像头预览区域 -->
        <div class="preview-card">
          <div class="preview-header">
            <h3>手势识别预览</h3>
            <!-- 运行开关移到预览区域顶部 -->
            <n-switch 
              v-model:value="app_store.mission_running" 
              size="large"
              :rail-style="railStyle"
            >
              <template #checked>{{ $t("运行中") }}</template>
              <template #unchecked>{{ $t("已停止") }}</template>
            </n-switch>
          </div>
          <!-- 摄像头预览组件 -->
          <VideoDetector />
        </div>
        
        <!-- 右侧控制面板 -->
        <div class="control-panel">
          <!-- 系统设置 -->
          <div class="settings-section">
            <h3 class="section-title">手势识别控制</h3>
            
            <div class="setting-item">
              <div class="setting-label">
                <n-icon size="20">
                  <Browser />
                </n-icon>
                <span>{{ $t("显示识别窗口") }}</span>
              </div>
              <n-switch v-model:value="app_store.config.show_window" />
            </div>
            
            <div class="setting-item">
              <div class="setting-label">
                <AutoStart />
              </div>
            </div>
            
            <div class="setting-item">
              <div class="setting-label">
                <n-icon size="20">
                  <Camera />
                </n-icon>
                <span>{{ $t("摄像头选择") }}</span>
              </div>
              <n-select
                v-model:value="app_store.config.selected_camera_id"
                :options="camera_options"
                :disabled="app_store.mission_running"
                style="width: 100%"
              />
            </div>
          </div>
          
          <!-- 手势库展示 -->
          <div class="gesture-gallery">
            <div class="gallery-header">
              <div>手势库</div>
              <button class="add-btn">+ 添加手势</button>
            </div>
            <div class="gesture-grid">
              <div class="gesture-item" v-for="i in 6" :key="i">
                <div class="gesture-icon">👌</div>
                <div class="gesture-name">OK手势</div>
                <div class="gesture-action">暂停媒体</div>
              </div>
            </div>
          </div>
          
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import AutoStart from "@/components/AutoStart.vue";
  import VideoDetector from "@/hand_landmark/VideoDetector.vue";
  import { use_app_store } from "@/store/app";
  import { Browser, Camera } from "@icon-park/vue-next";
  import { computed, onMounted } from "vue";
  
  const is_dev = computed(() => import.meta.env.DEV);
  const app_store = use_app_store();
  // 计算属性：摄像头选项
  const camera_options = computed(() => {
    return app_store.cameras.map((camera) => ({
      label: camera.label || `摄像头 ${camera.deviceId.slice(0, 4)}`,
      value: camera.deviceId,
    }));
  });
  
  const getCameras = async () => {
    try {
      // 申请获取摄像头权限
      const stream = await navigator.mediaDevices.getUserMedia({
        video: true,
      });
      stream.getTracks().forEach((track) => track.stop());
  
      const devices = await navigator.mediaDevices.enumerateDevices();
      app_store.cameras = devices.filter(
        (device) => device.kind === "videoinput"
      );
    } catch (error) {
      console.error("获取摄像头列表失败:", error);
    }
  };
  
  onMounted(async () => {
    await getCameras();
  });
  </script>
  
  <style scoped lang="scss">
  .home-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
  }
  
  .stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  
  .stat-card {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--border-color);
    transition: transform 0.2s, box-shadow 0.2s;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px var(--shadow-color);
    }
  }
  
  .stat-icon {
    width: 56px;
    height: 56px;
    background: rgba(14, 165, 233, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--accent-primary);
  }
  
  .stat-data {
    flex: 1;
  }
  
  .value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
  }
  
  .label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 4px;
  }
  
  .main-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    height: calc(100% - 120px);
  }
  
  .preview-card {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    h3 {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0;
    }
  }
  
  .control-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  
  .settings-section {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--border-color);
  }
  
  .section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: 20px;
  }
  
  .setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    
    &:last-child {
      border-bottom: none;
    }
  }
  
  .setting-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-primary);
  }
  
  .gesture-gallery {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--border-color);
  }
  
  .gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    div {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
    }
  }
  
  .add-btn {
    background: rgba(14, 165, 233, 0.15);
    border: none;
    border-radius: 8px;
    padding: 8px 15px;
    color: var(--accent-primary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    
    &:hover {
      background: rgba(14, 165, 233, 0.25);
    }
  }
  
  .gesture-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 10px;
  }
  
  .gesture-item {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.2s;
    
    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 10px var(--shadow-color);
    }
  }
  
  .gesture-icon {
    font-size: 32px;
    margin-bottom: 10px;
  }
  
  .gesture-name {
    font-weight: 500;
    color: var(--text-primary);
  }
  
  .gesture-action {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 5px;
  }
  
  .ad-container {
    height: 200px;
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    overflow: hidden;
    
    iframe {
      border: none;
      background-color: var(--bg-secondary);
      border-radius: 16px;
    }
  }
  </style>