/**
 * ToolCallCard — 工具调用卡片
 */

import { Box, Typography, Stack, Chip } from '@mui/material';
import { Wrench, Clock, CheckCircle, XCircle, Ban, Loader2 } from 'lucide-react';
import type { ToolCallInfo } from '@renderer/stores/agent-store';
import { formatDuration } from '@renderer/lib/formatters';

interface ToolCallCardProps { toolCall: ToolCallInfo; }

const STATUS_ICONS = { pending: Clock, executing: Loader2, success: CheckCircle, error: XCircle, blocked: Ban };
const STATUS_LABELS = { pending: '等待中', executing: '执行中', success: '成功', error: '失败', blocked: '已阻止' };
const STATUS_COLORS: Record<string, string> = { pending: '#fbbf24', executing: '#a855f7', success: '#34d399', error: '#f87171', blocked: '#fb923c' };
const CHIP_VARIANTS: Record<string, 'outlined' | 'filled'> = { pending: 'outlined', executing: 'filled', success: 'filled', error: 'filled', blocked: 'outlined' };

export function ToolCallCard({ toolCall }: ToolCallCardProps): React.JSX.Element {
  const Icon = STATUS_ICONS[toolCall.status];
  const color = STATUS_COLORS[toolCall.status];
  const label = STATUS_LABELS[toolCall.status];

  return (
    <Box
      sx={{
        borderRadius: 1.5, border: '1px solid', borderColor: 'divider', borderLeft: '3px solid', borderLeftColor: color,
        bgcolor: 'secondary.main', px: 1.5, py: 1.25, mb: 1,
        animation: toolCall.status === 'executing' ? 'pulse 2s infinite' : 'fadeInUp 300ms ease-out',
      }}
    >
      <Stack direction="row" spacing={1} sx={{ mb: 0.75, alignItems: 'center' }}>
        <Wrench size={12} style={{ color: '#a855f7' }} />
        <Typography sx={{ fontSize: 12, fontWeight: 600, fontFamily: 'monospace', color: 'text.primary' }}>{toolCall.name}</Typography>
        <Chip
          icon={<Icon size={10} style={{ animation: toolCall.status === 'executing' ? 'spin 1s linear infinite' : 'none' }} />}
          label={label}
          size="small"
          variant={CHIP_VARIANTS[toolCall.status]}
          sx={{ height: 18, fontSize: 10, color, borderColor: color, '& .MuiChip-icon': { color } }}
        />
        {toolCall.durationMs != null && (
          <Typography variant="caption" sx={{ ml: 'auto', color: 'text.secondary' }}>{formatDuration(toolCall.durationMs)}</Typography>
        )}
      </Stack>

      {Object.keys(toolCall.args).length > 0 && (
        <Box component="pre" sx={{ fontSize: 11, borderRadius: 1, px: 1, py: 0.75, overflowX: 'auto', overflowY: 'auto', bgcolor: 'background.default', color: 'text.secondary', fontFamily: "'SF Mono',monospace", maxHeight: 80, m: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
          {JSON.stringify(toolCall.args, null, 2)}
        </Box>
      )}

      {toolCall.status === 'error' && toolCall.error && (
        <Typography variant="caption" sx={{ mt: 0.75, display: 'block', color: 'error.main' }}>{toolCall.error}</Typography>
      )}
    </Box>
  );
}