<template>
  <div class="bg-base-100 flex flex-col gap-10 mb-5">
    <!-- 逻辑信号展示 -->
    <div class="card bg-base-200 shadow-xl mx-5">
      <div class="card-body">
        <h2 class="card-title flex justify-between items-center">
          <div class="flex items-center gap-2">
            <Zap class="w-5 h-5" />
            逻辑信号分析
          </div>
          <div class="flex items-center gap-2">
            <!-- 空闲状态：只显示开始捕获按钮 -->
            <button 
              v-if="!analyzer.isCapturing.value"
              @click="analyzer.startCapture"
              :disabled="analyzer.isApplying.value"
              class="btn btn-sm btn-primary"
            >
              开始捕获
            </button>
            
            <!-- 捕获状态：显示停止捕获和强制捕获按钮 -->
            <button 
              v-if="analyzer.isCapturing.value"
              @click="analyzer.stopCapture"
              class="btn btn-sm btn-warning"
            >
              <span class="loading loading-spinner loading-sm"></span>
              停止捕获
            </button>
            <button 
              v-if="analyzer.isCapturing.value"
              @click="analyzer.forceCapture"
              class="btn btn-sm btn-secondary"
            >
              强制捕获
            </button>
            
            <!-- 其他按钮保持不变 -->
            <button 
              @click="analyzer.generateTestData"
              class="btn btn-sm btn-info"
            >
              测试数据
            </button>
            <button class="btn btn-sm btn-error" @click="handleDeleteData">
              清空数据
            </button>
          </div>
        </h2>
        <LogicalWaveFormDisplay />
      </div>
    </div>

    <!-- 触发设置 -->
    <div class="card bg-base-200 shadow-xl mx-5">
      <div class="card-body">
        <h2 class="card-title flex justify-between items-center">
          <div class="flex gap-8">
            <div class="flex items-center gap-2">
              <Settings class="w-5 h-5" />
              触发设置
            </div>
          </div>
          <div class="flex items-center gap-4">
            <!-- 状态指示 -->
            <div class="flex items-center gap-2 text-sm">
              <span 
                v-if="analyzer.isCapturing.value" 
                class="flex items-center gap-1 text-warning"
              >
                <span class="loading loading-spinner loading-xs"></span>
                捕获中
              </span>
              <span 
                v-else-if="analyzer.isApplying.value" 
                class="flex items-center gap-1 text-info"
              >
                <span class="loading loading-spinner loading-xs"></span>
                配置中
              </span>
              <span 
                v-else 
                class="text-success"
              >
                就绪
              </span>
            </div>
          </div>
        </h2>
        <TriggerSettings />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Zap, Settings, Layers } from "lucide-vue-next";
import { useEquipments } from "@/stores/equipments";
import {
  LogicalWaveFormDisplay,
  TriggerSettings,
  useLogicAnalyzerState,
} from "@/components/LogicAnalyzer";
import { useRequiredInjection } from "@/utils/Common";

const analyzer = useRequiredInjection(useLogicAnalyzerState);


function handleDeleteData() {
  analyzer.logicData.value = undefined;
}

// 使用全局设备配置
const equipments = useEquipments();
</script>
