/**
 * TraceViewer — Trace 时间轴查看器
 */

import { Box, Typography, Stack } from '@mui/material';
import { Activity } from 'lucide-react';
import { useAgentStore } from '@renderer/stores/agent-store';
import { TraceStep } from './TraceStep';

export function TraceViewer(): React.JSX.Element {
  const traceSteps = useAgentStore((s) => s.traceSteps);
  const agentStatus = useAgentStore((s) => s.agentStatus);

  return (
    <Box sx={{ flexShrink: 0, display: 'flex', flexDirection: 'column' }}>
      <Stack direction="row" spacing={1} alignItems="center" sx={{ mb: 1.5 }}>
        <Activity size={14} style={{ color: '#818cf8' }} />
        <Typography variant="caption" sx={{ fontWeight: 600, textTransform: 'uppercase', letterSpacing: 1, color: 'text.secondary' }}>
          Trace Viewer
        </Typography>
      </Stack>

      <Box sx={{ overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 0.5, maxHeight: 200 }}>
        {traceSteps.length === 0 ? (
          <Typography variant="caption" sx={{ textAlign: 'center', py: 2, color: 'text.secondary' }}>等待 Agent 活动...</Typography>
        ) : traceSteps.map((step, i) => (
          <TraceStep key={`${step.iteration}-${step.state}-${i}`} step={step} isCurrent={i === traceSteps.length - 1 && agentStatus !== 'idle'} />
        ))}
      </Box>
    </Box>
  );
}
