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

import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useConfirm } from '@/components/ui/confirm-dialog';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Search, AlertTriangle, Bell, CheckCircle, Loader2 } from 'lucide-react';
import { alertApi } from '@/api';
import type { AlertEventRecord } from '@/types';

export function AlertEventsTab({
  alerts,
  loading,
  onReload,
}: {
  alerts: AlertEventRecord[];
  loading: boolean;
  onReload: () => void;
}) {
  const { t } = useTranslation();
  const _confirm = useConfirm();
  const [searchQuery, setSearchQuery] = useState('');
  const [severityFilter, setSeverityFilter] = useState<string>('all');
  const [statusFilter, setStatusFilter] = useState<string>('all');

  const filteredEvents = alerts.filter((event) => {
    const matchesSearch =
      ((event.rule && event.rule.name) || event.message || '').toLowerCase().includes(searchQuery.toLowerCase()) ||
      (event.target || '').toLowerCase().includes(searchQuery.toLowerCase());
    const matchesSeverity = severityFilter === 'all' || event.severity === severityFilter;
    const matchesStatus = statusFilter === 'all' || event.status === statusFilter;
    return matchesSearch && matchesSeverity && matchesStatus;
  });

  const getSeverityBadge = ( severity: string) => {
    switch (severity) {
      case 'critical':
        return (
          <Badge variant="outline" className="border-red-500/30 dg-text-red bg-red-500/10">
            <AlertTriangle className="h-3 w-3 mr-1" />
            {t('monitor.alertEvents.severity.critical')}
          </Badge>
        );
      case 'warning':
        return (
          <Badge variant="outline" className="border-amber-500/30 dg-text-yellow bg-amber-500/10">
            <AlertTriangle className="h-3 w-3 mr-1" />
            {t('monitor.alertEvents.severity.warning')}
          </Badge>
        );
      case 'info':
        return (
          <Badge variant="outline" className="border-blue-500/30 dg-text-blue bg-blue-500/10">
            <Bell className="h-3 w-3 mr-1" />
            {t('monitor.alertEvents.severity.info')}
          </Badge>
        );
      default:
        return null;
    }
  };

  const getStatusBadge = ( status: string) => {
    switch (status) {
      case 'firing':
        return (
          <Badge variant="outline" className="border-red-500/30 dg-text-red bg-red-500/10 animate-pulse">
            {t('monitor.alertEvents.status.firing')}
          </Badge>
        );
      case 'resolved':
        return (
          <Badge variant="outline" className="border-emerald-500/30 dg-text-green bg-emerald-500/10">
            {t('monitor.alertEvents.status.resolved')}
          </Badge>
        );
      default:
        return null;
    }
  };

  const handleAcknowledge = async ( id: number) => {
    try {
      await alertApi.acknowledge(id);
      onReload();
    } catch (error) {
      console.error('Failed to acknowledge alert:', error);
    }
  };

  return (
    <div className="mt-4 space-y-4">
      {/* Filters */}
      <div className="flex items-center gap-3 flex-wrap">
        <div className="relative w-64">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
          <Input
            placeholder={t('monitor.alertEvents.searchPlaceholder')}
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-9 h-9 dg-input"
          />
        </div>
        <select
          value={severityFilter}
          onChange={(e) => setSeverityFilter(e.target.value)}
          className="h-9 px-3 rounded-md bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)] text-[var(--dg-text-primary)] text-sm"
        >
          <option value="all">{t('monitor.alertEvents.filter.allSeverity')}</option>
          <option value="critical">{t('monitor.alertEvents.severity.critical')}</option>
          <option value="warning">{t('monitor.alertEvents.severity.warning')}</option>
          <option value="info">{t('monitor.alertEvents.severity.info')}</option>
        </select>
        <select
          value={statusFilter}
          onChange={(e) => setStatusFilter(e.target.value)}
          className="h-9 px-3 rounded-md bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)] text-[var(--dg-text-primary)] text-sm"
        >
          <option value="all">{t('monitor.alertEvents.filter.allStatus')}</option>
          <option value="firing">{t('monitor.alertEvents.status.firing')}</option>
          <option value="resolved">{t('monitor.alertEvents.status.resolved')}</option>
        </select>
      </div>

      {/* Events Table */}
      <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="dg-text-secondary">{t('monitor.alertEvents.col.severity')}</TableHead>
                  <TableHead className="dg-text-secondary">{t('monitor.alertEvents.col.alertName')}</TableHead>
                  <TableHead className="dg-text-secondary">{t('monitor.alertEvents.col.status')}</TableHead>
                  <TableHead className="dg-text-secondary">{t('monitor.alertEvents.col.target')}</TableHead>
                  <TableHead className="dg-text-secondary">{t('monitor.alertEvents.col.currentValue')}</TableHead>
                  <TableHead className="dg-text-secondary">{t('monitor.alertEvents.col.threshold')}</TableHead>
                  <TableHead className="dg-text-secondary">{t('monitor.alertEvents.col.startTime')}</TableHead>
                  <TableHead className="dg-text-secondary text-right">{t('monitor.alertEvents.col.actions')}</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {loading ? (
                  <TableRow className="border-[var(--dg-border)]">
                    <TableCell colSpan={8} className="text-center dg-text-muted py-8">
                      <Loader2 className="h-5 w-5 animate-spin inline mr-2" />
                      {t('monitor.alertEvents.loading')}
                    </TableCell>
                  </TableRow>
                ) : filteredEvents.map((event) => (
                  <TableRow key={event.id} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
                    <TableCell>{getSeverityBadge(event.severity)}</TableCell>
                    <TableCell>
                      <span className="text-sm font-medium text-[var(--dg-text-primary)]">
                        {(event.rule && event.rule.name) || event.message}
                      </span>
                    </TableCell>
                    <TableCell>{getStatusBadge(event.status)}</TableCell>
                    <TableCell className="max-w-[160px]">
                      <span className="text-sm text-[var(--dg-text-secondary)] block truncate" title={event.target}>{event.target}</span>
                    </TableCell>
                    <TableCell>
                      <span className="text-sm text-[var(--dg-text-secondary)]">{typeof event.value === 'number' ? event.value.toFixed(1) : event.value}</span>
                    </TableCell>
                    <TableCell>
                      <span className="text-sm dg-text-muted">{event.threshold}</span>
                    </TableCell>
                    <TableCell>
                      <span className="text-sm dg-text-secondary">
                        {event.created_at ? new Date(event.created_at).toLocaleString() : '--'}
                      </span>
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex items-center justify-end gap-1">
                        {event.status === 'firing' && (
                          <Button
                            variant="ghost"
                            size="sm"
                            className="h-8 dg-text-secondary hover:dg-text-green"
                            onClick={() => handleAcknowledge(event.id)}
                          >
                            <CheckCircle className="h-4 w-4 mr-1" />
                            {t('monitor.alertEvents.acknowledge')}
                          </Button>
                        )}
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}