<template>
  <div class="space-y-6">
    <!-- 通道状态概览 -->
    <div class="stats stats-horizontal bg-base-100 shadow flex justify-between">
      <div class="stat">
        <div class="stat-title">总通道数</div>
        <div class="stat-value text-primary">8</div>
        <div class="stat-desc">逻辑分析仪通道</div>
      </div>

      <div class="stat">
        <div class="stat-title">启用通道</div>
        <div class="stat-value text-success">{{ enabledChannelCount }}</div>
        <div class="stat-desc">当前激活通道</div>
      </div>

      <div class="stat">
        <div class="stat-title">采样率</div>
        <div class="stat-value text-info">5MHz</div>
        <div class="stat-desc">最大采样频率</div>
      </div>
    </div>

    <!-- 通道配置 -->
    <div class="form-control">
      <!-- 全局触发模式选择 -->
      <div class="flex flex-row justify-between my-4 mx-2">
        <div class="flex flex-row gap-4">
          <label class="label">
            <span class="label-text text-sm">全局触发逻辑</span>
          </label>
          <select
            v-model="currentGlobalMode"
            @change="setGlobalMode(currentGlobalMode)"
            class="select select-sm select-bordered w-full"
          >
            <option
              v-for="mode in globalModes"
              :key="mode.value"
              :value="mode.value"
            >
              {{ mode.label }} - {{ mode.description }}
            </option>
          </select>
        </div>

        <div class="flex flex-row gap-4">
          <button @click="toggleAllChannels" class="btn btn-primary btn-sm">
            {{ enabledChannelCount > 0 ? "全部禁用" : "全部启用" }}
          </button>
          <button
            @click="applyConfiguration"
            :disabled="isApplying"
            class="btn btn-primary btn-sm"
          >
            <span
              v-if="isApplying"
              class="loading loading-spinner loading-sm"
            ></span>
            应用配置
          </button>

          <button @click="resetConfiguration" class="btn btn-outline btn-sm">
            重置
          </button>
        </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 lg:hidden"
        >
          <span class="w-16">通道</span>
          <span class="w-20">启用/触发</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 gap-4">
          <!-- 左列 (CH0-CH3) -->
          <div class="space-y-2">
            <!-- 左列表头 - 大屏幕时显示 -->
            <div
              class="hidden lg:flex items-center gap-2 p-2 bg-base-300 rounded-lg text-sm font-medium"
            >
              <span class="w-16">通道</span>
              <span class="w-20">启用</span>
              <span class="w-32">标签</span>
              <span class="w-16">颜色</span>
              <span class="w-32">触发操作</span>
              <span class="w-32">触发值</span>
            </div>

            <!-- 左列通道 (0-3) -->
            <div
              v-for="(channel, index) in channels.slice(0, 4)"
              :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{{ index }}</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-20">
                <input
                  type="checkbox"
                  v-model="channel.enabled"
                  class="toggle toggle-sm toggle-primary"
                />
              </div>

              <!-- 通道标签 -->
              <div class="form-control w-32">
                <input
                  type="text"
                  v-model="channel.label"
                  :placeholder="`通道 ${index}`"
                  class="input input-sm input-bordered w-full"
                  :disabled="!channel.enabled"
                />
              </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"
                  :disabled="!channel.enabled"
                />
              </div>

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

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

          <!-- 右列 (CH4-CH7) - 仅在大屏幕显示 -->
          <div class="hidden lg:block 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-20">启用/触发</span>
              <span class="w-32">标签</span>
              <span class="w-16">颜色</span>
              <span class="w-32">触发操作</span>
              <span class="w-32">触发值</span>
            </div>

            <!-- 右列通道 (4-7) -->
            <div
              v-for="(channel, index) in channels.slice(4, 8)"
              :key="index + 4"
              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{{ index + 4 }}</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-20">
                <input
                  type="checkbox"
                  v-model="channel.enabled"
                  class="toggle toggle-sm toggle-primary"
                />
              </div>

              <!-- 通道标签 -->
              <div class="form-control w-32">
                <input
                  type="text"
                  v-model="channel.label"
                  :placeholder="`通道 ${index + 4}`"
                  class="input input-sm input-bordered w-full"
                  :disabled="!channel.enabled"
                />
              </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"
                  :disabled="!channel.enabled"
                />
              </div>

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

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

          <!-- 小屏幕时继续显示 CH4-CH7 -->
          <div class="lg:hidden space-y-2">
            <div
              v-for="(channel, index) in channels.slice(4, 8)"
              :key="index + 4"
              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{{ index + 4 }}</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-20">
                <input
                  type="checkbox"
                  v-model="channel.enabled"
                  class="toggle toggle-sm toggle-primary"
                />
              </div>

              <!-- 通道标签 -->
              <div class="form-control w-32">
                <input
                  type="text"
                  v-model="channel.label"
                  :placeholder="`通道 ${index + 4}`"
                  class="input input-sm input-bordered w-full"
                  :disabled="!channel.enabled"
                />
              </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"
                  :disabled="!channel.enabled"
                />
              </div>

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

              <!-- 触发信号值选择 -->
              <select
                v-model="signalConfigs[index + 4].value"
                class="select select-sm select-bordered w-32"
                :disabled="!channel.enabled"
              >
                <option
                  v-for="val in signalValues"
                  :key="val.value"
                  :value="val.value"
                >
                  {{ val.label }}
                </option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRequiredInjection } from "@/utils/Common";
import { useLogicAnalyzerState } from "./LogicAnalyzerManager";

const {
  currentGlobalMode,
  isApplying,
  channels,
  signalConfigs,
  enabledChannelCount,
  globalModes,
  operators,
  signalValues,
  enableAllChannels,
  disableAllChannels,
  setGlobalMode,
  applyConfiguration,
  resetConfiguration,
} = useRequiredInjection(useLogicAnalyzerState);

const toggleAllChannels = () => {
  if (enabledChannelCount.value > 0) {
    disableAllChannels();
  } else {
    enableAllChannels();
  }
};
</script>
