<template>
  <div class="space-y-6">
    <!-- 通道配置 -->
    <div class="form-control">
      <!-- 全局触发模式选择和通道组配置 -->
      <div class="flex flex-col gap-6 my-4 mx-2">
        <div class="flex flex-col lg:flex-row gap-6">
          <div class="flex flex-col gap-2">
            <label class="block text-sm font-semibold antialiased">
              全局触发逻辑
            </label>
            <div class="relative w-[200px]">
              <button 
                tabindex="0" 
                type="button" 
                class="flex items-center gap-4 justify-between h-max outline-none focus:outline-none bg-transparent ring-transparent border border-slate-200 transition-all duration-300 ease-in disabled:opacity-50 disabled:pointer-events-none select-none text-start text-sm rounded-md py-2 px-2.5 ring shadow-sm hover:border-slate-800 hover:ring-slate-800/10 focus:border-slate-800 focus:ring-slate-800/10 w-full"
                @click="toggleGlobalModeDropdown"
                :aria-expanded="showGlobalModeDropdown"
                aria-haspopup="listbox" 
                role="combobox"
              >
                <span>{{ currentGlobalModeLabel }}</span>
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-[1em] w-[1em] translate-x-0.5 stroke-[1.5]">
                  <path d="M17 8L12 3L7 8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M17 16L12 21L7 16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
              <input readonly style="display:none" :value="currentGlobalMode" />
              <!-- 下拉菜单 -->
              <div v-if="showGlobalModeDropdown" class="absolute top-full left-0 right-0 mt-1 bg-white border border-slate-200 rounded-md shadow-lg z-50">
                <div
                  v-for="mode in globalModes"
                  :key="mode.value"
                  @click="selectGlobalMode(mode.value)"
                  class="px-3 py-2 text-sm text-slate-700 hover:bg-slate-100 cursor-pointer"
                  :class="{ 'bg-slate-100': mode.value === currentGlobalMode }"
                >
                  {{ mode.label }}
                </div>
              </div>
            </div>
            <p class="flex items-center text-xs text-slate-400">
              {{ currentGlobalModeDescription }}
            </p>
          </div>
          <div class="flex flex-col gap-2">
            <label class="block text-sm font-semibold antialiased">
              通道组
            </label>
            <div class="relative w-[200px]">
              <button 
                tabindex="0" 
                type="button" 
                class="flex items-center gap-4 justify-between h-max outline-none focus:outline-none bg-transparent ring-transparent border border-slate-200 transition-all duration-300 ease-in disabled:opacity-50 disabled:pointer-events-none select-none text-start text-sm rounded-md py-2 px-2.5 ring shadow-sm hover:border-slate-800 hover:ring-slate-800/10 focus:border-slate-800 focus:ring-slate-800/10 w-full"
                @click="toggleChannelDivDropdown"
                :aria-expanded="showChannelDivDropdown"
                aria-haspopup="listbox" 
                role="combobox"
              >
                <span>{{ currentChannelDivLabel }}</span>
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-[1em] w-[1em] translate-x-0.5 stroke-[1.5]">
                  <path d="M17 8L12 3L7 8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M17 16L12 21L7 16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
              <input readonly style="display:none" :value="currentChannelDiv" />
              <!-- 下拉菜单 -->
              <div v-if="showChannelDivDropdown" class="absolute top-full left-0 right-0 mt-1 bg-white border border-slate-200 rounded-md shadow-lg z-50">
                <div
                  v-for="option in channelDivOptions"
                  :key="option.value"
                  @click="selectChannelDiv(option.value)"
                  class="px-3 py-2 text-sm text-slate-700 hover:bg-slate-100 cursor-pointer"
                  :class="{ 'bg-slate-100': option.value === currentChannelDiv }"
                >
                  {{ option.label }}
                </div>
              </div>
            </div>
            <p class="flex items-center text-xs text-slate-400">
              {{ currentChannelDivDescription }}
            </p>
          </div>
          <div class="flex flex-col gap-2">
            <label class="block text-sm font-semibold antialiased text-slate-800">
              采样频率
            </label>
            <div class="relative w-[200px]">
              <button 
                tabindex="0" 
                type="button" 
                class="flex items-center gap-4 justify-between h-max outline-none focus:outline-none text-slate-600 bg-transparent ring-transparent border border-slate-200 transition-all duration-300 ease-in disabled:opacity-50 disabled:pointer-events-none select-none text-start text-sm rounded-md py-2 px-2.5 ring shadow-sm hover:border-slate-800 hover:ring-slate-800/10 focus:border-slate-800 focus:ring-slate-800/10 w-full"
                @click="toggleClockDivDropdown"
                :aria-expanded="showClockDivDropdown"
                aria-haspopup="listbox" 
                role="combobox"
              >
                <span>{{ currentClockDivLabel }}</span>
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-[1em] w-[1em] translate-x-0.5 stroke-[1.5]">
                  <path d="M17 8L12 3L7 8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M17 16L12 21L7 16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
              <input readonly style="display:none" :value="currentclockDiv" />
              <!-- 下拉菜单 -->
              <div v-if="showClockDivDropdown" class="absolute top-full left-0 right-0 mt-1 bg-white border border-slate-200 rounded-md shadow-lg z-50">
                <div
                  v-for="option in ClockDivOptions"
                  :key="option.value"
                  @click="selectClockDiv(option.value)"
                  class="px-3 py-2 text-sm text-slate-700 hover:bg-slate-100 cursor-pointer"
                  :class="{ 'bg-slate-100': option.value === currentclockDiv }"
                >
                  {{ option.label }}
                </div>
              </div>
            </div>
            <p class="flex items-center text-xs text-slate-400">
              {{ currentClockDivDescription }}
            </p>
          </div>
          <div class="flex flex-col gap-2">
            <label class="block text-sm font-semibold antialiased">
              捕获深度
            </label>
            <div class="relative w-[200px]">
              <button 
                @click="decreaseCaptureLength"
                class="absolute right-9 top-1 rounded-md border border-transparent p-1.5 text-center text-sm transition-all hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" 
                type="button"
                :disabled="captureLength <= CAPTURE_LENGTH_MIN"
              >
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
                  <path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
                </svg>
              </button>
              <input 
                v-model.number="captureLength"
                @change="handleCaptureLengthChange"
                type="number" 
                :min="CAPTURE_LENGTH_MIN"
                :max="CAPTURE_LENGTH_MAX"
                class="w-full bg-transparent placeholder:text-sm border border-slate-200 rounded-md pl-3 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" 
                :placeholder="CAPTURE_LENGTH_MIN.toString()"
              />
              <button 
                @click="increaseCaptureLength"
                class="absolute right-1 top-1 rounded-md border border-transparent p-1.5 text-center text-sm transition-all hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" 
                type="button"
                :disabled="captureLength >= CAPTURE_LENGTH_MAX"
              >
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
                  <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
                </svg>
              </button>
            </div>
            <p class="flex items-center text-xs text-slate-400">
              范围: {{ CAPTURE_LENGTH_MIN.toLocaleString() }} - {{ CAPTURE_LENGTH_MAX.toLocaleString() }}
            </p>
          </div>
          <div class="flex flex-col gap-2">
            <label class="block text-sm font-semibold antialiased">
              预捕获深度
            </label>
            <div class="relative w-[200px]">
              <button 
                @click="decreasePreCaptureLength"
                class="absolute right-9 top-1 rounded-md border border-transparent p-1.5 text-center text-sm transition-all hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" 
                type="button"
                :disabled="preCaptureLength <= PRE_CAPTURE_LENGTH_MIN"
              >
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
                  <path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
                </svg>
              </button>
              <input 
                v-model.number="preCaptureLength"
                @change="handlePreCaptureLengthChange"
                type="number" 
                :min="PRE_CAPTURE_LENGTH_MIN"
                :max="Math.max(0, captureLength - 1)"
                class="w-full bg-transparent placeholder:text-sm border border-slate-200 rounded-md pl-3 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" 
                :placeholder="PRE_CAPTURE_LENGTH_MIN.toString()"
              />
              <button 
                @click="increasePreCaptureLength"
                class="absolute right-1 top-1 rounded-md border border-transparent p-1.5 text-center text-sm transition-all hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" 
                type="button"
                :disabled="preCaptureLength >= Math.max(0, captureLength - 1)"
              >
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
                  <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
                </svg>
              </button>
            </div>
            <p class="flex items-center text-xs text-slate-400">
              范围: {{ PRE_CAPTURE_LENGTH_MIN }} - {{ Math.max(0, captureLength - 1) }}
            </p>
          </div>
          <div class="flex flex-col gap-2">
            <label class="block text-sm font-semibold antialiased">
              重置配置
            </label>
            <div class="relative w-[200px]">
              <button 
                @click="resetConfiguration"
                class="w-10 h-10 bg-transparent text-red-600 text-sm border border-red-200 rounded-md py-2 px-2.5 transition duration-300 ease ring ring-transparent hover:ring-red-600/10 focus:ring-red-600/10 hover:border-red-600 shadow-sm focus:shadow flex items-center justify-center"
                type="button"
                title="重置配置"
              >
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-4 h-4">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
              </button>
            </div>
            <p class="flex items-center text-xs text-slate-400">
              恢复所有设置到默认值
            </p>
          </div>
        </div>
      </div>
      <!-- 通道列表 -->
      <div class="space-y-2">
        <!-- 表头 -->
        <div
          class="flex items-center gap-2 p-2 bg-base-300 rounded-lg text-sm font-medium"
        >
          <span class="w-16">通道</span>
          <span class="w-32">标签</span>
          <span class="w-16">颜色</span>
          <span class="w-32">触发操作</span>
          <span class="w-32">触发值</span>
        </div>

        <!-- 通道配置网格 - 根据当前通道组动态显示 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4">
          <div
            v-for="(channel, index) in channels.filter(ch => ch.enabled)"
            :key="index"
            class="flex items-center gap-2 p-3 bg-base-200 rounded-lg hover:bg-base-300 transition-colors"
          >
            <!-- 通道编号和颜色指示 -->
            <div class="flex items-center gap-2 w-16">
              <span class="font-mono font-medium">CH{{ channels.indexOf(channel) }}</span>
              <div
                class="w-3 h-3 rounded-full border-2 border-white shadow-sm"
                :style="{ backgroundColor: channel.color }"
              ></div>
            </div>

            <!-- 通道标签 -->
            <div class="form-control w-32">
              <input
                type="text"
                v-model="channel.label"
                :placeholder="`通道 ${channels.indexOf(channel)}`"
                class="input input-sm input-bordered w-full"
              />
            </div>

            <!-- 颜色选择 -->
            <div class="form-control w-16">
              <input
                type="color"
                v-model="channel.color"
                class="w-8 h-8 rounded border-2 border-base-300 cursor-pointer"
              />
            </div>

            <!-- 触发操作符选择 -->
            <select
              v-model="signalConfigs[channels.indexOf(channel)].operator"
              class="select select-sm select-bordered w-32"
            >
              <option
                v-for="op in operators"
                :key="op.value"
                :value="op.value"
              >
                {{ op.label }}
              </option>
            </select>

            <!-- 触发信号值选择 -->
            <select
              v-model="signalConfigs[channels.indexOf(channel)].value"
              class="select select-sm select-bordered w-32"
            >
              <option
                v-for="val in signalValues"
                :key="val.value"
                :value="val.value"
              >
                {{ val.label }}
              </option>
            </select>
          </div>
        </div>

        <!-- 当没有启用通道时的提示 -->
        <div v-if="enabledChannelCount === 0" class="text-center py-8 text-base-content/60">
          <p class="text-lg font-medium">未启用任何通道</p>
          <p class="text-sm">请选择通道组来配置逻辑分析仪</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, onMounted, onUnmounted } from "vue";
import { useRequiredInjection } from "@/utils/Common";
import { useLogicAnalyzerState } from "./LogicAnalyzerManager";

const {
  currentGlobalMode,
  currentChannelDiv,
  currentclockDiv,
  captureLength,
  preCaptureLength,
  isApplying,
  channels,
  signalConfigs,
  enabledChannelCount,
  globalModes,
  operators,
  signalValues,
  channelDivOptions,
  ClockDivOptions,
  CAPTURE_LENGTH_MIN,
  CAPTURE_LENGTH_MAX,
  PRE_CAPTURE_LENGTH_MIN,
  validateCaptureLength,
  validatePreCaptureLength,
  setCaptureLength,
  setPreCaptureLength,
  setChannelDiv,
  setGlobalMode,
  setClockDiv,
  resetConfiguration,
} = useRequiredInjection(useLogicAnalyzerState);

// 下拉菜单状态
const showGlobalModeDropdown = ref(false);
const showChannelDivDropdown = ref(false);
const showClockDivDropdown = ref(false);

// 处理捕获深度变化
const handleCaptureLengthChange = () => {
  setCaptureLength(captureLength.value);
};

// 处理预捕获深度变化
const handlePreCaptureLengthChange = () => {
  setPreCaptureLength(preCaptureLength.value);
};

// 增加捕获深度
const increaseCaptureLength = () => {
  const newValue = Math.min(captureLength.value + 1024, CAPTURE_LENGTH_MAX);
  setCaptureLength(newValue);
};

// 减少捕获深度
const decreaseCaptureLength = () => {
  const newValue = Math.max(captureLength.value - 1024, CAPTURE_LENGTH_MIN);
  setCaptureLength(newValue);
};

// 增加预捕获深度
const increasePreCaptureLength = () => {
  const maxValue = Math.max(0, captureLength.value - 1);
  const newValue = Math.min(preCaptureLength.value + 64, maxValue);
  setPreCaptureLength(newValue);
};

// 减少预捕获深度
const decreasePreCaptureLength = () => {
  const newValue = Math.max(preCaptureLength.value - 64, PRE_CAPTURE_LENGTH_MIN);
  setPreCaptureLength(newValue);
};

// 计算属性：获取当前全局模式的标签
const currentGlobalModeLabel = computed(() => {
  const mode = globalModes.find(m => m.value === currentGlobalMode.value);
  return mode ? mode.label : '';
});

// 计算属性：获取当前全局模式的描述
const currentGlobalModeDescription = computed(() => {
  const mode = globalModes.find(m => m.value === currentGlobalMode.value);
  return mode ? mode.description : '';
});

// 计算属性：获取当前通道组的标签
const currentChannelDivLabel = computed(() => {
  const option = channelDivOptions.find(opt => opt.value === currentChannelDiv.value);
  return option ? option.label : '';
});

// 计算属性：获取当前通道组的描述
const currentChannelDivDescription = computed(() => {
  const option = channelDivOptions.find(opt => opt.value === currentChannelDiv.value);
  return option ? option.description : '';
});

// 计算属性：获取当前采样频率的标签
const currentClockDivLabel = computed(() => {
  const option = ClockDivOptions.find(opt => opt.value === currentclockDiv.value);
  return option ? option.label : '';
});

// 计算属性：获取当前采样频率的描述
const currentClockDivDescription = computed(() => {
  const option = ClockDivOptions.find(opt => opt.value === currentclockDiv.value);
  return option ? option.description : '';
});

// 全局模式下拉菜单相关函数
const toggleGlobalModeDropdown = () => {
  showGlobalModeDropdown.value = !showGlobalModeDropdown.value;
  if (showGlobalModeDropdown.value) {
    showChannelDivDropdown.value = false;
    showClockDivDropdown.value = false;
  }
};

const selectGlobalMode = (mode: any) => {
  setGlobalMode(mode);
  showGlobalModeDropdown.value = false;
};

// 通道组下拉菜单相关函数
const toggleChannelDivDropdown = () => {
  showChannelDivDropdown.value = !showChannelDivDropdown.value;
  if (showChannelDivDropdown.value) {
    showGlobalModeDropdown.value = false;
    showClockDivDropdown.value = false;
  }
};

const selectChannelDiv = (value: number) => {
  setChannelDiv(value);
  showChannelDivDropdown.value = false;
};

// 采样频率下拉菜单相关函数
const toggleClockDivDropdown = () => {
  showClockDivDropdown.value = !showClockDivDropdown.value;
  if (showClockDivDropdown.value) {
    showGlobalModeDropdown.value = false;
    showChannelDivDropdown.value = false;
  }
};

const selectClockDiv = (value: any) => {
  setClockDiv(value);
  showClockDivDropdown.value = false;
};

// 点击其他地方关闭下拉菜单
const handleClickOutside = (event: MouseEvent) => {
  const target = event.target as HTMLElement;
  if (!target.closest('.relative')) {
    showGlobalModeDropdown.value = false;
    showChannelDivDropdown.value = false;
    showClockDivDropdown.value = false;
  }
};

onMounted(() => {
  document.addEventListener('click', handleClickOutside);
});

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
});
</script>
