<template>
    <div class="guide-container">
      <div class="header-bar">
        <div class="title-container">
          <h1 class="view-title">{{ $t('手势操作指南') }}</h1>
          <div class="view-description">{{ $t('学习使用各种手势控制您的设备') }}</div>
        </div>
      </div>
  
      <div class="main-content">
        <n-card class="guide-card">
          <div class="gesture-grid">
            <!-- 卡片1: 光标控制 -->
            <div class="card">
              <div class="card-icon">
                <div class="icon-circle">
                  <span class="icon-symbol">👆</span>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">{{ $t('光标控制') }}</h3>
                <p class="card-description">{{ $t('竖起食指滑动控制光标位置') }}</p>
              </div>
            </div>
            
            <!-- 卡片2: 单击操作（双指） -->
            <div class="card">
              <div class="card-icon">
                <div class="icon-circle">
                  <span class="icon-symbol">✌️</span>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">{{ $t('单击操作') }}</h3>
                <p class="card-description">{{ $t('双指举起执行鼠标单击') }}</p>
              </div>
            </div>
            
            <!-- 卡片3: 单击操作（Rock手势） -->
            <div class="card">
              <div class="card-icon">
                <div class="icon-circle">
                  <span class="icon-symbol">🤘</span>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">{{ $t('单击操作') }}</h3>
                <p class="card-description">{{ $t('Rock手势执行鼠标单击') }}</p>
                <div class="card-extra">
                </div>
              </div>
            </div>
            
            <!-- 卡片4: 滚动控制 -->
            <div class="card">
              <div class="card-icon">
                <div class="icon-circle">
                  <span class="icon-symbol">👌</span>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">{{ $t('滚动控制') }}</h3>
                <p class="card-description">{{ $t('(okay手势)食指和拇指捏合滚动页面') }}</p>
                <div class="card-extra">
                  <div class="setting-control">
                    <span>{{ $t("食指和拇指距离小于") }}</span>
                    <n-input-number
                      v-model:value="app_store.config.scroll_gesture_2_thumb_and_index_threshold"
                      :min="0"
                      :step="0.01"
                      size="small"
                    />
                    <span>{{ $t("触发捏合") }}</span>
                  </div>
                  <div class="hint-tags">
                    <n-tag size="small" type="info">{{ $t("默认值0.02") }}</n-tag>
                    <n-tag size="small" type="info">{{ $t("右键->检查->控制台->查看当前距离") }}</n-tag>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 卡片5: 全屏控制 -->
            <div class="card">
              <div class="card-icon">
                <div class="icon-circle">
                  <span class="icon-symbol">🖐️</span>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">{{ $t('全屏控制') }}</h3>
                <p class="card-description">{{ $t('四指并拢发送按键') }}</p>
                <div class="card-extra">
                  <div class="keyboard-input">
                    <n-input
                      :value="app_store.config.four_fingers_up_send || 'f'"
                      readonly
                      :placeholder="$t('点击设置快捷键')"
                      @click="listenForKey"
                      :status="isListening ? 'warning' : undefined"
                      size="small"
                    >
                      <template #suffix>
                        <span>{{ isListening ? $t("请按下按键...") : $t("点击设置") }}</span>
                      </template>
                    </n-input>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 卡片6: 退格 -->
            <div class="card">
              <div class="card-icon">
                <div class="icon-circle">
                  <span class="icon-symbol">🔙</span>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">{{ $t('退格') }}</h3>
                <p class="card-description">{{ $t('发送退格键') }}</p>
              </div>
            </div>
            
            <!-- 卡片7: 开始语音识别 -->
            <div class="card">
              <div class="card-icon">
                <div class="icon-circle">
                  <span class="icon-symbol">🎤</span>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">{{ $t('开始语音识别') }}</h3>
                <p class="card-description">{{ $t('六指手势开始语音识别') }}</p>
              </div>
            </div>
            
            <!-- 卡片8: 结束语音识别 -->
            <div class="card">
              <div class="card-icon">
                <div class="icon-circle">
                  <span class="icon-symbol">👊</span>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">{{ $t('结束语音识别') }}</h3>
                <p class="card-description">{{ $t('拳头手势结束语音识别') }}</p>
              </div>
            </div>
            
            <!-- 卡片9: 暂停/继续 -->
            <div class="card">
              <div class="card-icon">
                <div class="icon-circle">
                  <span class="icon-symbol">✋</span>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">{{ $t('暂停/继续') }}</h3>
                <p class="card-description">{{ $t('单手张开1.5秒 暂停/继续 手势识别') }}</p>
              </div>
            </div>
          </div>
        </n-card>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { use_app_store } from "@/store/app";
  import { ref } from "vue";
  
  const app_store = use_app_store();
  const isListening = ref(false);
  
  const listenForKey = () => {
    isListening.value = true;
    // ...（原有监听键盘的代码）
  };
  </script>
  
  <style scoped lang="scss">
  .guide-container {
    padding: 16px;
    box-sizing: border-box;
  }
  
  .header-bar {
    margin-bottom: 24px;
  }
  
  .title-container {
    padding: 0 16px;
  }
  
  .view-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #333;
  }
  
  .view-description {
    font-size: 14px;
    color: #666;
    margin-top: 8px;
  }
  
  .main-content {
    display: flex;
    flex-direction: column;
  }
  
  .guide-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
  
  .gesture-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 16px;
  }
  
  .card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      transform: translateY(-2px);
    }
  }
  
  .card-icon {
    padding: 16px;
    display: flex;
    justify-content: center;
  }
  
  .icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #e6f7ff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .icon-symbol {
    font-size: 32px;
    color: #1890ff;
  }
  
  .card-content {
    padding: 0 16px 16px;
  }
  
  .card-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 8px 0 4px;
  }
  
  .card-description {
    font-size: 14px;
    color: #666;
    margin: 4px 0 8px;
    line-height: 1.4;
  }
  
  .card-extra {
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
    margin-top: 12px;
    
    a {
      color: #1890ff;
      text-decoration: none;
      margin-right: 12px;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
  
  .setting-control {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    
    .n-input-number {
      width: 100px;
    }
  }
  
  .hint-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    
    .n-tag {
      padding: 4px 8px;
      background: #f0f9ff;
      border-color: #91d5ff;
      color: #1890ff;
    }
  }
  
  .keyboard-input {
    width: 100%;
    
    .n-input {
      width: 100%;
    }
  }
  
  @media (max-width: 992px) {
    .gesture-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (max-width: 576px) {
    .gesture-grid {
      grid-template-columns: 1fr;
    }
    
    .setting-control {
      flex-direction: column;
      align-items: flex-start;
    }
  }
  </style>