// 告警配置页面 - 改造为全页表格布局

<template>
  <div class="alarm-config page-container">
    <a-card class="general-card" title="告警规则管理">
      <a-row style="margin-bottom: 16px">
        <a-col :span="16">
          <a-space>
            <a-input-search
              v-model="searchRuleText"
              placeholder="搜索规则名称..."
              style="width: 200px"
              allow-clear
              @search="loadRules"
              @press-enter="loadRules"
            />
            <a-button type="primary" @click="handleAdd">
              <template #icon><icon-plus /></template> 新建规则
            </a-button>
            <a-button status="danger" :disabled="selectedRowKeys.length === 0" @click="handleBatchDelete">
              <template #icon><icon-delete /></template> 批量删除
            </a-button>
          </a-space>
        </a-col>
        <a-col :span="8" style="text-align: right">
          <a-button @click="loadRules">
            <template #icon><icon-refresh /></template> 刷新
          </a-button>
        </a-col>
      </a-row>

      <a-table
        row-key="id"
        :data="rules"
        :loading="loading"
        :pagination="pagination"
        :row-selection="rowSelection"
        v-model:selectedKeys="selectedRowKeys"
        @page-change="handlePageChange"
      >
        <template #columns>
          <a-table-column title="规则名称" data-index="name" />
          <a-table-column title="监控指标" data-index="metric">
            <template #cell="{ record }">
              <a-tag color="arcoblue">{{ record.metric }}</a-tag>
            </template>
          </a-table-column>
          <a-table-column title="触发条件">
            <template #cell="{ record }">
              {{ record.operator }} {{ record.threshold }}
            </template>
          </a-table-column>
          <a-table-column title="防抖/静默">
            <template #cell="{ record }">
              {{ record.duration }}s / {{ record.silence_period }}s
            </template>
          </a-table-column>
          <a-table-column title="告警等级" data-index="priority">
            <template #cell="{ record }">
              <a-tag :color="record.priority === 'CRITICAL' ? 'red' : 'orange'">
                {{ record.priority }}
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column title="状态" :width="100">
            <template #cell="{ record }">
              <a-switch v-model="record.enabled" size="small" @change="(val)=>handleToggleEnable(record, val as boolean)" />
            </template>
          </a-table-column>
          <a-table-column title="操作" :width="150" align="center">
            <template #cell="{ record }">
              <a-button type="text" size="small" @click="handleEdit(record)">
                编辑
              </a-button>
              <a-popconfirm content="确认删除该规则?" @ok="handleDelete(record.id)">
                <a-button type="text" status="danger" size="small">
                  删除
                </a-button>
              </a-popconfirm>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>

    <!-- Rule Modal (Create/Edit) -->
    <a-modal v-model:visible="visible" :title="form.id ? '编辑规则' : '新建规则'" @ok="handleSubmit" width="800px">
      <a-form :model="form" layout="vertical">
        <a-row :gutter="16">
            <a-col :span="12">
                <a-form-item field="name" label="规则名称" required>
                    <a-input v-model="form.name" placeholder="例如：电压过高报警" />
                </a-form-item>
            </a-col>
             <a-col :span="12">
                <a-form-item field="enabled" label="启用状态">
                    <a-switch v-model="form.enabled" />
                </a-form-item>
            </a-col>
        </a-row>

        <a-divider orientation="left">监控策略</a-divider>
        
        <a-row :gutter="16">
          <a-col :span="8">
            <a-form-item field="metric" label="监控指标" required>
              <a-select v-model="form.metric" placeholder="选择或输入指标" allow-create filterable>
                <a-option value="voltage">电压 (voltage)</a-option>
                <a-option value="current">电流 (current)</a-option>
                <a-option value="power">功率 (power)</a-option>
                <a-option value="energy">能耗 (energy)</a-option>
                <a-option value="temperature">温度 (temperature)</a-option>
                
                <!-- 水务设备 -->
                <a-option value="flow_rate">流量 (flow_rate)</a-option>
                <a-option value="pressure">压力 (pressure)</a-option>
                <a-option value="total_volume">累计水量 (total_volume)</a-option>
                <a-option value="level">液位 (level)</a-option>

                <!-- 燃气设备 -->
                <a-option value="gas_concentration">燃气浓度 (gas_concentration)</a-option>
                
                <!-- 环境/其他 -->
                <a-option value="humidity">湿度 (humidity)</a-option>
                <a-option value="co2">二氧化碳 (co2)</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
             <a-form-item field="priority" label="告警等级" required>
              <a-select v-model="form.priority">
                <a-option value="INFO">提示 (INFO)</a-option>
                <a-option value="WARNING">警告 (WARNING)</a-option>
                <a-option value="CRITICAL">严重 (CRITICAL)</a-option>
              </a-select>
            </a-form-item>
          </a-col>
           <a-col :span="8">
             <a-form-item field="operator" label="比较符" required>
              <a-select v-model="form.operator">
                <a-option value=">">大于 (>)</a-option>
                <a-option value=">=">大于等于 (>=)</a-option>
                <a-option value="<">小于 (<)</a-option>
                <a-option value="<=">小于等于 (<=)</a-option>
                <a-option value="=">等于 (=)</a-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="8">
            <a-form-item field="threshold" label="阈值" required>
              <a-input-number v-model="form.threshold" :precision="2" style="width: 100%" />
            </a-form-item>
          </a-col>
           <a-col :span="8">
             <a-form-item field="duration" label="持续时间(秒)" tooltip="条件持续满足多少秒才触发">
               <a-input-number v-model="form.duration" :min="0" />
             </a-form-item>
           </a-col>
           <a-col :span="8">
             <a-form-item field="silence_period" label="静默周期(秒)" tooltip="告警触发后多少秒内不再重复发送">
               <a-input-number v-model="form.silence_period" :min="0" />
             </a-form-item>
           </a-col>
        </a-row>

        <a-form-item field="message" label="告警内容模板" tooltip="可用 {val} 代表当前值, {dev} 代表设备名称">
          <a-textarea v-model="form.message" placeholder="例如：{dev} 电压异常，当前值 {val}V" />
        </a-form-item>

        <a-divider orientation="left">应用对象 (绑定)</a-divider>
        
        <div class="binding-selector" style="background: var(--color-fill-2); padding: 15px; border-radius: 4px;">
              <a-tabs type="rounded" size="small">
                <a-tab-pane key="space" title="按空间选择">
                    <div style="margin-bottom: 10px; display: flex; gap: 10px;">
                      <a-select v-model="filterSpaceId" placeholder="选择空间" allow-clear style="flex: 1">
                         <a-option v-for="loc in formattedLocations" :key="loc.ID" :value="loc.ID">{{ loc.FullName }}</a-option>
                      </a-select>
                      <a-button type="outline" size="small" @click="handleSelectAllInSpace">全选当前</a-button>
                    </div>
                    <div style="height: 150px; overflow-y: auto; background: var(--color-bg-1); padding: 5px; border-radius: 2px;">
                        <a-checkbox-group v-model="batchDeviceIds" direction="vertical">
                            <a-checkbox v-for="dev in spaceBatchDevices" :key="dev.ID" :value="dev.ID">{{ dev.Name }}</a-checkbox>
                        </a-checkbox-group>
                         <div v-if="spaceBatchDevices.length === 0" style="text-align: center; color: var(--color-text-4); padding-top: 20px;">
                          暂无设备或未选择空间
                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="search" title="按名称检索">
                    <div style="margin-bottom: 10px;">
                      <a-input-search v-model="batchSearchKeyword" placeholder="输入设备名称搜索" allow-clear />
                    </div>
                    <div style="height: 150px; overflow-y: auto; background: var(--color-bg-1); padding: 5px; border-radius: 2px;">
                        <a-checkbox-group v-model="batchDeviceIds" direction="vertical">
                            <a-checkbox v-for="dev in searchBatchDevices" :key="dev.ID" :value="dev.ID">{{ dev.Name }}</a-checkbox>
                        </a-checkbox-group>
                         <div v-if="searchBatchDevices.length === 0" style="text-align: center; color: var(--color-text-4); padding-top: 20px;">
                          无匹配设备
                        </div>
                    </div>
                </a-tab-pane>
              </a-tabs>
              
              <div style="margin-top: 15px; border-top: 1px dashed var(--color-border-3); padding-top: 10px;">
                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                   <span style="font-weight: bold;">已关联设备 ({{ batchDeviceIds.length }})</span>
                   <a-link @click="batchDeviceIds = []" status="danger" size="small">清空</a-link>
                </div>
                <div style="max-height: 80px; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 5px;">
                   <a-tag v-for="dev in selectedBatchDevices" :key="dev.ID" closable @close="handleRemoveBatchDevice(dev.ID)">
                     {{ dev.Name }}
                   </a-tag>
                </div>
              </div>
          </div>

      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, reactive } from 'vue';
import { getDevices, getLocations, type Location } from '../../api/resource';
import { getAlarmRules, createAlarmRule, updateAlarmRule, deleteAlarmRule, batchDeleteAlarmRules, type AlarmRule } from '../../api/monitor';
import { Message, type TableRowSelection } from '@arco-design/web-vue';
import { IconPlus, IconRefresh, IconDelete } from '@arco-design/web-vue/es/icon';

// --- Data ---
const rules = ref<AlarmRule[]>([]);
const searchRuleText = ref('');
const loading = ref(false);
const selectedRowKeys = ref<string[]>([]);

const devices = ref<any[]>([]);
const locations = ref<Location[]>([]);

const visible = ref(false);
const form = ref<Partial<AlarmRule> & { binding_ids?: string[], binding_type?: string }>({
  name: '',
  metric: 'voltage',
  operator: '>',
  threshold: 0,
  duration: 5,
  silence_period: 300,
  priority: 'WARNING',
  message: '',
  enabled: true,
  binding_ids: [],
  binding_type: 'DEVICE'
});

// Selector State
const filterSpaceId = ref('');
const batchSearchKeyword = ref('');
const batchDeviceIds = ref<string[]>([]);

// --- Pagination ---
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: true,
  showPageSize: true,
});

const rowSelection: TableRowSelection = {
  type: 'checkbox',
  showCheckedAll: true,
};

// --- Computed ---
const formattedLocations = computed(() => {
  const map = new Map<string, Location>();
  locations.value.forEach(l => map.set(l.ID, l));
  
  return locations.value.map(l => {
    const names = [l.Name];
    let current = l;
    while (current.ParentID && map.has(current.ParentID)) {
      current = map.get(current.ParentID)!;
      names.unshift(current.Name);
    }
    return {
      ...l,
      FullName: names.join(' > ')
    };
  }).sort((a, b) => a.FullName.localeCompare(b.FullName));
});

const spaceBatchDevices = computed(() => {
  if (!filterSpaceId.value) return [];
  const allLocationIds = new Set<string>();
  const queue = [filterSpaceId.value];
  while (queue.length > 0) {
    const currentId = queue.shift()!;
    allLocationIds.add(currentId);
    const children = locations.value.filter(l => l.ParentID === currentId);
    children.forEach(c => queue.push(c.ID));
  }
  return devices.value.filter(d => allLocationIds.has(d.LocationID));
});

const searchBatchDevices = computed(() => {
  if (!batchSearchKeyword.value) return [];
  return devices.value.filter(d => d.Name.toLowerCase().includes(batchSearchKeyword.value.toLowerCase()));
});

const selectedBatchDevices = computed(() => {
  return devices.value.filter(d => batchDeviceIds.value.includes(d.ID));
});

// --- Methods ---

const loadDevices = async () => {
    try { devices.value = await getDevices(); } catch(e) { console.error(e); }
};

const loadLocations = async () => {
    try { locations.value = await getLocations(); } catch(e) { console.error(e); }
};

const loadRules = async () => {
    loading.value = true;
    try {
        const res = await getAlarmRules({ name: searchRuleText.value });
        // Handle response format change (array vs {data, total})
        if (Array.isArray(res)) {
             rules.value = res;
             pagination.total = res.length;
        } else if (res && (res as any).data) {
             rules.value = (res as any).data;
             pagination.total = (res as any).total;
        }
    } catch (error) {
        Message.error('加载规则列表失败');
    } finally {
        loading.value = false;
    }
};

const handlePageChange = (page: number) => {
  pagination.current = page;
  // If backend supports pagination params, pass them here. 
  // Currently backend ignores pagination params in query but we simulated total.
  // For client-side pagination if backend returns all:
  // Since we modified backend to return all for now (simulated pagination), 
  // we might need to slice manually if backend returns all.
  // However, user asked for pagination. Let's assume we implement full cycle later.
  // For now, reload.
  loadRules();
};

const handleAdd = () => {
    form.value = {
        name: '',
        metric: 'voltage',
        operator: '>',
        threshold: 220,
        duration: 5,
        silence_period: 300,
        priority: 'WARNING',
        message: '{dev} 电压异常，当前 {val}V',
        enabled: true,
        binding_ids: [], // Reset bindings
        binding_type: 'DEVICE'
    };
    batchDeviceIds.value = []; // Reset UI selection
    visible.value = true;
};

const handleEdit = (rule: AlarmRule) => {
    if (!rule) return;
    // Fix: Backend returns 'bindings' (lowercase)
    const bindings = (rule as any).bindings || (rule as any).Bindings || [];
    
    form.value = { 
        ...rule, 
        binding_ids: bindings.map((b: any) => b.TargetID),
        binding_type: 'DEVICE'
    };
    batchDeviceIds.value = form.value.binding_ids || [];
    visible.value = true;
};

const handleDelete = async (id: string) => {
    try {
        await deleteAlarmRule(id);
        Message.success('删除成功');
        loadRules();
    } catch (error) {
        Message.error('删除失败');
    }
};

const handleBatchDelete = async () => {
  if (selectedRowKeys.value.length === 0) return;
  try {
    await batchDeleteAlarmRules(selectedRowKeys.value);
    Message.success('批量删除成功');
    selectedRowKeys.value = [];
    loadRules();
  } catch (error) {
    Message.error('批量删除失败');
  }
};

const handleToggleEnable = async (rule: AlarmRule, val: boolean) => {
    try {
        await updateAlarmRule(rule.id, { enabled: val }); 
        rule.enabled = val;
        Message.success(val ? '规则已启用' : '规则已禁用');
    } catch (error) {
        rule.enabled = !val; // revert
        Message.error('更新失败');
    }
};

const handleSelectAllInSpace = () => {
  const ids = spaceBatchDevices.value.map(d => d.ID);
  batchDeviceIds.value = [...new Set([...batchDeviceIds.value, ...ids])];
};

const handleRemoveBatchDevice = (id: string) => {
  batchDeviceIds.value = batchDeviceIds.value.filter(did => did !== id);
};

const handleSubmit = async () => {
    if (!form.value.name) {
        Message.warning('请输入规则名称');
        return;
    }

    const payload = {
        ...form.value,
        binding_ids: batchDeviceIds.value,
        binding_type: 'DEVICE'
    };

    try {
        if (form.value.id) {
            await updateAlarmRule(form.value.id, payload);
            Message.success('更新成功');
        } else {
            await createAlarmRule(payload);
            Message.success('创建成功');
        }
        visible.value = false;
        loadRules();
    } catch (error) {
        Message.error('保存失败: ' + error);
    }
};

onMounted(() => {
    loadDevices();
    loadLocations();
    loadRules();
});
</script>

<style scoped>
.page-container {
  padding: 20px;
}
.general-card {
  min-height: calc(100vh - 140px);
}
.binding-selector {
    border: 1px solid var(--color-border-2);
}
</style>
