import React from 'react';
import { formatNumber } from '../utils/formatters';

const EvidenceCard = ({ riskAssessment, onShowHelp }) => {
  if (!riskAssessment) {
    return (
      <div className="card">
        <h3>
          Evidence
          <button className="help-btn" onClick={onShowHelp} title="Help">?</button>
        </h3>
        <div className="content">
          <p className="muted">No data available</p>
        </div>
      </div>
    );
  }

  const formatEvidence = (evidence) => {
    const formatted = { ...evidence };
    
    // Format numbers to 2-3 decimal places
    if (typeof formatted.heuristicRisk === 'number') {
      formatted.heuristicRisk = formatNumber(formatted.heuristicRisk, 3);
    }
    
    if (typeof formatted.onnxScore === 'number') {
      formatted.onnxScore = formatNumber(formatted.onnxScore, 3);
    }
    
    // Format features object
    if (formatted.features) {
      const formattedFeatures = {};
      Object.entries(formatted.features).forEach(([key, value]) => {
        if (typeof value === 'number') {
          formattedFeatures[key] = formatNumber(value, 2);
        } else {
          formattedFeatures[key] = value;
        }
      });
      formatted.features = formattedFeatures;
    }
    
    return formatted;
  };

  const formattedEvidence = formatEvidence(riskAssessment.evidence);

  return (
    <div className="card">
      <h3>
        Evidence
        <button className="help-btn" onClick={onShowHelp} title="Help">?</button>
      </h3>
      <div className="content">
        <div className="evidence">
          {JSON.stringify(formattedEvidence, null, 2)}
        </div>
      </div>
    </div>
  );
};

export default EvidenceCard;