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 '@/services/api';
import type { OperationLog } from '@/types';

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

// 将后端审计日志规范化为前端 OperationLog 类型 // Logan.Li
function normalizeLog(raw: any): 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 ?? '',
    result: raw.result === 'failure' ? 'failure' : 'success',
    message: raw.message ?? raw.detail,
    createdAt: raw.createdAt ?? raw.created_at ?? '',
  };
}

export function SystemLogsTab({ searchQuery, setSearchQuery }: SystemLogsTabProps) {
  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 text-emerald-400 bg-emerald-500/10">
        成功
      </Badge>
    ) : (
      <Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10">
        失败
      </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 text-slate-500" />
          <Input
            placeholder="搜索操作日志..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
          />
        </div>
        <Button
          variant="outline"
          className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800"
          onClick={fetchLogs}
        >
          <RefreshCw className="h-4 w-4 mr-2" />
          刷新
        </Button>
      </div>

      {/* Logs Table */}
      <Card className="bg-slate-900 border-slate-800">
        <CardContent className="p-0">
          <div className="border-t border-slate-800">
            {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 text-slate-500">
                <Search className="h-8 w-8 mb-3 opacity-40" />
                <p className="text-sm">暂无操作日志</p>
              </div>
            ) : (
              <Table>
                <TableHeader>
                  <TableRow className="border-slate-800 hover:bg-transparent">
                    <TableHead className="text-slate-400">时间</TableHead>
                    <TableHead className="text-slate-400">用户</TableHead>
                    <TableHead className="text-slate-400">模块</TableHead>
                    <TableHead className="text-slate-400">操作</TableHead>
                    <TableHead className="text-slate-400">资源</TableHead>
                    <TableHead className="text-slate-400">IP地址</TableHead>
                    <TableHead className="text-slate-400">结果</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredLogs.map((log) => (
                    <TableRow key={log.id} className="border-slate-800 hover:bg-slate-800/50">
                      <TableCell>
                        <span className="text-sm text-slate-400">
                          {log.createdAt ? new Date(log.createdAt).toLocaleString() : '--'}
                        </span>
                      </TableCell>
                      <TableCell>
                        <span className="text-sm text-slate-200">{log.username || '--'}</span>
                      </TableCell>
                      <TableCell>
                        <span className="text-sm text-slate-300">{log.module || '--'}</span>
                      </TableCell>
                      <TableCell>
                        <span className="text-sm text-slate-300">{log.action || '--'}</span>
                      </TableCell>
                      <TableCell>
                        <code className="text-xs text-slate-400 bg-slate-800 px-2 py-0.5 rounded">
                          {log.resource || '--'}
                        </code>
                      </TableCell>
                      <TableCell>
                        <span className="text-sm text-slate-400">{log.ip || '--'}</span>
                      </TableCell>
                      <TableCell>{getLogResultBadge(log.result)}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            )}
          </div>
        </CardContent>
      </Card>
    </>
  );
}