/**
 * StatusBar — 底部状态栏
 *
 * 显示 Agent 状态指示灯、Provider 名称、Token 统计、版本号。
 */

import { Box, Typography, Stack, Chip } from '@mui/material';
import { useAgentStore } from '@renderer/stores/agent-store';
import { AGENT_STATUS_COLORS, AGENT_STATUS_LABELS, PROVIDER_LABELS } from '@renderer/lib/constants';
import { formatTokens } from '@renderer/lib/formatters';

export function StatusBar(): React.JSX.Element {
  const agentStatus = useAgentStore((s) => s.agentStatus);
  const provider = useAgentStore((s) => s.provider);
  const model = useAgentStore((s) => s.model);
  const tokenUsage = useAgentStore((s) => s.tokenUsage);

  return (
    <Box
      component="footer"
      sx={{
        flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        px: 2, height: 24, bgcolor: 'background.paper', borderTop: 1, borderColor: 'divider', userSelect: 'none',
      }}
    >
      <Stack direction="row" spacing={1.5} alignItems="center">
        <Stack direction="row" spacing={0.75} alignItems="center">
          <Box
            sx={{
              width: 8, height: 8, borderRadius: '50%', flexShrink: 0,
              bgcolor: AGENT_STATUS_COLORS[agentStatus],
              animation: (agentStatus === 'thinking' || agentStatus === 'executing') ? 'pulse 2s infinite' : 'none',
            }}
          />
          <Typography variant="caption" sx={{ color: 'text.secondary', fontSize: 11, lineHeight: 1 }}>
            {AGENT_STATUS_LABELS[agentStatus]}
          </Typography>
        </Stack>
        <Typography variant="caption" sx={{ color: 'divider' }}>|</Typography>
        <Typography variant="caption" sx={{ color: 'text.secondary', fontSize: 11 }}>
          {PROVIDER_LABELS[provider] ?? provider} {model}
        </Typography>
      </Stack>

      <Stack direction="row" spacing={1.5} alignItems="center">
        {tokenUsage.totalTokens > 0 && (
          <Typography variant="caption" sx={{ color: 'text.secondary', fontSize: 11 }}>
            Tokens: {formatTokens(tokenUsage.inputTokens)}↓ {formatTokens(tokenUsage.outputTokens)}↑
          </Typography>
        )}
        <Typography variant="caption" sx={{ color: 'text.secondary', fontSize: 11 }}>MetonaAI v0.1.0</Typography>
      </Stack>
    </Box>
  );
}
