aiops/frontend/src/components/monitor/AlertRulesTab.tsx

import { useState } from 'react';
import { useConfirm } from '@/components/ui/confirm-dialog';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Switch } from '@/components/ui/switch';
import { Checkbox } from '@/components/ui/checkbox';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Settings, Trash2 } from 'lucide-react';
import { toast } from 'sonner';
import { alertApi } from '@/api';
import { renderRuleChannels } from './alertShared';
import type { AlertChannel, AlertRuleRecord } from '@/types';
import i18n from '@/i18n';

const COL_SPAN = 9; // 复选框 + 7 数据列 + 操作列 // Logan.Li

export function AlertRulesTab({
  rules,
  notifyChannels,
  onReload,
  onEditRule,
}: {
  rules: AlertRuleRecord[];
  notifyChannels: AlertChannel[];
  onReload: () => void;
  onEditRule: ( rule: AlertRuleRecord) => void;
}) {
  const confirm = useConfirm();
  const [selectedIds, setSelectedIds] = useState<number[]>([]);

  // 全选/取消全选 // Logan.Li
  const toggleSelectAll = () => {
    if (rules.length > 0 && selectedIds.length === rules.length) {
      setSelectedIds([]);
    } else {
      setSelectedIds(rules.map((r) => r.id));
    }
  };

  // 单行选择切换 // Logan.Li
  const toggleSelect = (id: number) => {
    setSelectedIds((prev) =>
      prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id]
    );
  };

  const handleDeleteRule = async ( id: number) => {
    const ok = await confirm({
      title: i18n.t('monitor.alertRulesTab.deleteRule'),
      description: i18n.t('monitor.alertRulesTab.deleteConfirm'),
      confirmText: i18n.t('kubernetes.storage.delete2'),
      variant: 'destructive',
    });
    if (!ok) return;
    try {
      await alertApi.deleteRule(id);
      toast.success(i18n.t('monitor.alertRulesTab.deleted'));
      onReload();
    } catch (error) {
      console.error('Failed to delete rule:', error);
      toast.error(i18n.t('kubernetes.msg.deleteFailed2'));
    }
  };

  // 批量删除 // Logan.Li
  const handleBatchDelete = async () => {
    if (selectedIds.length === 0) return;
    const ok = await confirm({
      title: i18n.t('monitor.alertRulesTab.deleteRule'),
      description: `确定删除选中的 ${selectedIds.length} 条告警规则吗？此操作不可撤销。`,
      confirmText: i18n.t('system.terminalBatchDelete'),
      variant: 'destructive',
    });
    if (!ok) return;
    try {
      await alertApi.batchDeleteRules(selectedIds);
      toast.success(i18n.t('monitor.deletedRules', { count: selectedIds.length }));
      setSelectedIds([]);
      onReload();
    } catch (error) {
      console.error('Failed to batch delete rules:', error);
      toast.error(i18n.t('system.batchDeleteFailed'));
    }
  };

  const handleToggleRule = async ( id: number) => {
    try {
      await alertApi.toggleRule(id);
      onReload();
    } catch (error) {
      console.error('Failed to toggle rule:', error);
    }
  };

  const allSelected = rules.length > 0 && selectedIds.length === rules.length;

  return (
    <div className="mt-4">
      {/* 批量操作栏 // Logan.Li */}
      {selectedIds.length > 0 && (
        <div className="flex items-center gap-2 mb-3">
          <span className="text-sm dg-text-secondary">已选择 {selectedIds.length} 项</span>
          <Button
            variant="outline"
            size="sm"
            className="border-red-500/30 dg-text-red hover:bg-red-500/10"
            onClick={handleBatchDelete}
          >
            <Trash2 className="h-4 w-4 mr-2" />
            批量删除
          </Button>
        </div>
      )}

      <Card className="dg-card">
        <CardContent className="p-0">
          <div className="border-t border-[var(--dg-border)]">
            <Table>
              <TableHeader>
                <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
                  <TableHead className="w-12">
                    <Checkbox
                      checked={allSelected}
                      onCheckedChange={toggleSelectAll}
                      className="border-[var(--dg-border-hover)]"
                    />
                  </TableHead>
                  <TableHead className="dg-text-secondary"> {i18n.t('monitor.ruleName')} </TableHead>
                  <TableHead className="dg-text-secondary"> {i18n.t('monitor.dashboard.custom.datasource')} </TableHead>
                  <TableHead className="dg-text-secondary"> {i18n.t('monitor.alertRulesTab.condition')} </TableHead>
                  <TableHead className="dg-text-secondary"> {i18n.t('kubernetes.event.eventLevel')} </TableHead>
                  <TableHead className="dg-text-secondary"> {i18n.t('monitor.alertDuration')} </TableHead>
                  <TableHead className="dg-text-secondary"> {i18n.t('monitor.notificationChannel')} </TableHead>
                  <TableHead className="dg-text-secondary"> {i18n.t('system.terminalStatus')} </TableHead>
                  <TableHead className="dg-text-secondary text-right"> {i18n.t('system.auditAction')} </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {rules.length === 0 ? (
                  <TableRow className="border-[var(--dg-border)]">
                    <TableCell colSpan={COL_SPAN} className="text-center dg-text-muted py-12">
                      暂无告警规则
                    </TableCell>
                  </TableRow>
                ) : (
                  rules.map((rule) => (
                    <TableRow key={rule.id} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
                      <TableCell>
                        <Checkbox
                          checked={selectedIds.includes(rule.id)}
                          onCheckedChange={() => toggleSelect(rule.id)}
                          className="border-[var(--dg-border-hover)]"
                        />
                      </TableCell>
                      <TableCell>
                        <div>
                          <span className="text-sm font-medium text-[var(--dg-text-primary)]">{rule.name}</span>
                          {rule.description && (
                            <p className="text-xs dg-text-muted">{rule.description}</p>
                          )}
                        </div>
                      </TableCell>
                      <TableCell>
                        <code className="text-xs text-[var(--dg-text-secondary)] bg-[var(--dg-bg-tertiary)] px-2 py-0.5 rounded">
                          {rule.source || '--'}
                        </code>
                      </TableCell>
                      <TableCell className="max-w-[180px]">
                        <code className="text-xs text-blue-300 block truncate" title={rule.expression}>
                          {rule.expression || '--'}
                        </code>
                      </TableCell>
                      <TableCell>
                        {rule.severity === 'critical' ? (
                          <Badge variant="outline" className="border-red-500/30 dg-text-red bg-red-500/10">
                            严重
                          </Badge>
                        ) : rule.severity === 'warning' ? (
                          <Badge variant="outline" className="border-amber-500/30 dg-text-yellow bg-amber-500/10">
                            警告
                          </Badge>
                        ) : (
                          <Badge variant="outline" className="border-blue-500/30 dg-text-blue bg-blue-500/10">
                            提示
                          </Badge>
                        )}
                      </TableCell>
                      <TableCell>
                        <span className="text-sm text-[var(--dg-text-secondary)]">{(rule.duration || 0) / 60}分钟</span>
                      </TableCell>
                      <TableCell>
                        {renderRuleChannels(rule, notifyChannels)}
                      </TableCell>
                      <TableCell>
                        <Switch
                          checked={!!rule.enabled}
                          className="data-[state=checked]:bg-blue-600"
                          onCheckedChange={() => handleToggleRule(rule.id)}
                        />
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex items-center justify-end gap-1">
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-8 w-8 dg-text-secondary hover:text-[var(--dg-text-primary)]"
                            onClick={() => onEditRule(rule)}
                          >
                            <Settings className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-8 w-8 dg-text-secondary hover:dg-text-red"
                            onClick={() => handleDeleteRule(rule.id)}
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}