aiops/frontend/src/components/system/SystemLogsTab.tsx

import { useState, useEffect } from 'react';
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 { Search, RefreshCw } from 'lucide-react';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { auditApi } from '@/api';
import type { OperationLog } from '@/types';
import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';

interface SystemLogsTabProps {
  searchQuery: string;
  setSearchQuery: (v: string) => void;
}

// 将后端审计日志规范化为前端 OperationLog 类型 // Logan.Li
function normalizeLog(raw: JsonData): OperationLog {
  return {
    id: String(raw.id ?? ''),
    userId: String(raw.user_id ?? raw.userId ?? ''),
    username: raw.username ?? '',
    module: raw.module ?? raw.resource ?? '',
    action: raw.action ?? '',
    resource: raw.resource ?? '',
    ip: raw.ip ?? '',
    userAgent: raw.user_agent ?? raw.userAgent ?? '',
    // 后端审计日志使用 status=1/0 表示成功/失败，同时兼容旧 result 字段。 // Logan.Li
    result: raw.result === 'failure' || raw.status === 0 || raw.status === 'failed' ? 'failure' : 'success',
    message: raw.message ?? raw.detail ?? raw.error,
    createdAt: raw.createdAt ?? raw.created_at ?? '',
  };
}

export function SystemLogsTab({ searchQuery, setSearchQuery }: SystemLogsTabProps) {
  const { t } = useTranslation();
  const [logs, setLogs] = useState<OperationLog[]>([]);
  const [loading, setLoading] = useState(true);

  const fetchLogs = async () => {
    setLoading(true);
    try {
      const resp = await auditApi.getLogs({ page: 1, page_size: 50 });
      const list = resp?.list ?? [];
      setLogs(list.map(normalizeLog));
    } catch {
      setLogs([]);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchLogs();
  }, []);

  const filteredLogs = logs.filter(
    (log) =>
      log.username.toLowerCase().includes(searchQuery.toLowerCase()) ||
      log.module.toLowerCase().includes(searchQuery.toLowerCase()) ||
      log.action.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const getLogResultBadge = (result: OperationLog['result']) => {
    return result === 'success' ? (
      <Badge variant="outline" className="border-emerald-500/30 dg-text-green bg-emerald-500/10">
        {t('system.auditSuccess')}
      </Badge>
    ) : (
      <Badge variant="outline" className="border-red-500/30 dg-text-red bg-red-500/10">
        {t('system.auditFailed')}
      </Badge>
    );
  };

  return (
    <>
      {/* Filters */}
      <div className="flex items-center gap-3">
        <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('audit.operations.searchPlaceholder')}
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-9 h-9 dg-input"
          />
        </div>
        <Button
          variant="outline"
          className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
          onClick={fetchLogs}
        >
          <RefreshCw className="h-4 w-4 mr-2" />
          {t('common.refresh')}
        </Button>
      </div>

      {/* Logs Table */}
      <Card className="dg-card">
        <CardContent className="p-0">
          <div className="border-t border-[var(--dg-border)]">
            {loading ? (
              <div className="flex items-center justify-center py-16">
                <div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
              </div>
            ) : filteredLogs.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-16 dg-text-muted">
                <Search className="h-8 w-8 mb-3 opacity-40" />
                <p className="text-sm">{t('audit.operations.noData')}</p>
              </div>
            ) : (
              <Table>
                <TableHeader>
                  <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
                    <TableHead className="dg-text-secondary">{t('system.auditTime')}</TableHead>
                    <TableHead className="dg-text-secondary">{t('system.roleUsers')}</TableHead>
                    <TableHead className="dg-text-secondary">{t('system.auditModule')}</TableHead>
                    <TableHead className="dg-text-secondary">{t('system.auditAction')}</TableHead>
                    <TableHead className="dg-text-secondary">{t('system.auditResource')}</TableHead>
                    <TableHead className="dg-text-secondary">{t('server.csv.ip')}</TableHead>
                    <TableHead className="dg-text-secondary">{t('system.auditResult')}</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredLogs.map((log) => (
                    <TableRow key={log.id} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
                      <TableCell>
                        <span className="text-sm dg-text-secondary">
                          {log.createdAt ? new Date(log.createdAt).toLocaleString() : '--'}
                        </span>
                      </TableCell>
                      <TableCell>
                        <span className="text-sm text-[var(--dg-text-primary)]">{log.username || '--'}</span>
                      </TableCell>
                      <TableCell>
                        <span className="text-sm text-[var(--dg-text-secondary)]">{log.module || '--'}</span>
                      </TableCell>
                      <TableCell>
                        <span className="text-sm text-[var(--dg-text-secondary)]">{log.action || '--'}</span>
                      </TableCell>
                      <TableCell>
                        <code className="text-xs dg-text-secondary bg-[var(--dg-bg-tertiary)] px-2 py-0.5 rounded">
                          {log.resource || '--'}
                        </code>
                      </TableCell>
                      <TableCell>
                        <span className="text-sm dg-text-secondary">{log.ip || '--'}</span>
                      </TableCell>
                      <TableCell>{getLogResultBadge(log.result)}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            )}
          </div>
        </CardContent>
      </Card>
    </>
  );
}