import type { TraceMetadata } from '../types/engine';

interface OutputInfoBarProps {
  metadata: TraceMetadata | null;
}

type StatColor = 'green' | 'yellow' | 'red';

function getNodeCountColor(count: number): StatColor {
  if (count > 5000) return 'yellow';
  return 'green';
}

function getOpenPathsColor(count: number): StatColor {
  if (count > 0) return 'red';
  return 'green';
}

export default function OutputInfoBar({ metadata }: OutputInfoBarProps) {
  if (!metadata) {
    return (
      <div className="output-info-bar output-info-bar--empty">
        <span className="output-info-placeholder">
          Trace an image to see output stats
        </span>
      </div>
    );
  }

  const nodeColor = getNodeCountColor(metadata.node_count_total);
  const openPathsColor = getOpenPathsColor(metadata.open_paths);

  return (
    <div className="output-info-bar">
      <div className="output-info-stats">
        <span className="output-stat output-stat--green" data-testid="stat-paths">
          <span className="output-stat-label">Paths</span>
          <span className="output-stat-value">{metadata.path_count}</span>
        </span>
        <span
          className={`output-stat output-stat--${nodeColor}`}
          data-testid="stat-nodes"
        >
          <span className="output-stat-label">Nodes</span>
          <span className="output-stat-value">{metadata.node_count_total.toLocaleString()}</span>
        </span>
        <span
          className={`output-stat output-stat--${openPathsColor}`}
          data-testid="stat-open-paths"
        >
          <span className="output-stat-label">Open Paths</span>
          <span className="output-stat-value">{metadata.open_paths}</span>
        </span>
        <span className="output-stat output-stat--green" data-testid="stat-time">
          <span className="output-stat-label">Time</span>
          <span className="output-stat-value">{metadata.processing_ms}ms</span>
        </span>
      </div>
      {metadata.warnings.length > 0 && (
        <div className="output-info-warnings" data-testid="warnings">
          {metadata.warnings.map((w, i) => (
            <span key={i} className="output-info-warning">⚠ {w}</span>
          ))}
        </div>
      )}
    </div>
  );
}
