import { History, ShieldCheck } from 'lucide-react';
import type { GatewayAuditLog } from '@easyai-ai-gateway/contracts';
import { Badge, Card, CardContent, CardHeader, CardTitle, Table, TableCell, TableHead, TableRow } from '../../components/ui';

export function AuditLogsPanel(props: { auditLogs: GatewayAuditLog[]; message?: string }) {
  return (
    <div className="pageStack">
      <Card>
        <CardHeader>
          <div className="identityHeaderTitle">
            <div className="iconBox"><ShieldCheck size={17} /></div>
            <div>
              <CardTitle>审计日志</CardTitle>
              <p className="mutedText">敏感管理动作独立记录，便于追踪操作者、对象和前后状态。</p>
            </div>
            <Badge variant="secondary">{props.auditLogs.length}</Badge>
          </div>
        </CardHeader>
        {props.message && <CardContent><p className="formMessage">{props.message}</p></CardContent>}
      </Card>
      {props.auditLogs.length ? (
        <Table className="identityDataTable auditLogTable">
          <TableRow>
            <TableHead>动作</TableHead>
            <TableHead>操作者</TableHead>
            <TableHead>目标</TableHead>
            <TableHead>摘要</TableHead>
            <TableHead>时间</TableHead>
          </TableRow>
          {props.auditLogs.map((item) => (
            <TableRow key={item.id}>
              <TableCell>
                <span className="identityTableName">
                  <strong>{actionLabel(item.action)}</strong>
                  <small>{item.category}</small>
                </span>
              </TableCell>
              <TableCell>{item.actorUsername || item.actorUserId || '系统'}</TableCell>
              <TableCell>
                <span className="identityTableName">
                  <strong>{targetLabel(item.targetType)}</strong>
                  <small>{shortId(item.targetId)}</small>
                </span>
              </TableCell>
              <TableCell>{auditSummary(item)}</TableCell>
              <TableCell>{formatDateTime(item.createdAt)}</TableCell>
            </TableRow>
          ))}
        </Table>
      ) : (
        <Card>
          <CardContent className="emptyState">
            <History size={18} />
            <strong>暂无审计日志</strong>
            <span>后台余额调整后会在这里留下独立记录。</span>
          </CardContent>
        </Card>
      )}
    </div>
  );
}

function actionLabel(action: string) {
  if (action === 'wallet.balance.set') return '余额调整';
  return action;
}

function targetLabel(targetType: string) {
  if (targetType === 'gateway_user') return '用户';
  return targetType;
}

function auditSummary(item: GatewayAuditLog) {
  const metadata = item.metadata ?? {};
  const direction = typeof metadata.direction === 'string' ? metadata.direction : '';
  const amount = typeof metadata.amount === 'number' ? metadata.amount : undefined;
  const currency = typeof metadata.currency === 'string' ? metadata.currency : 'resource';
  const reason = typeof metadata.reason === 'string' ? metadata.reason : '';
  const prefix = amount === undefined ? '' : `${direction === 'debit' ? '-' : '+'}${formatBalance(amount)} ${currency}`;
  return [prefix, reason].filter(Boolean).join(' · ') || '已记录';
}

function formatDateTime(value: string) {
  return value ? new Date(value).toLocaleString() : '-';
}

function formatBalance(value: number) {
  return new Intl.NumberFormat('zh-CN', { maximumFractionDigits: 6 }).format(value);
}

function shortId(value: string) {
  return value.length > 12 ? `${value.slice(0, 8)}...${value.slice(-4)}` : value;
}