import React from 'react';
import { ScoreBar } from './ScoreBar';
import { FieldResultList } from './FieldResultList';

interface ScoredResultCardProps {
  result: {
    evaluation_point_id: number;
    code: string;
    name: string;
    passed: boolean;
    machine_score: number;  // e.g., 3
    score: number;          // e.g., 5 (full score from evaluation_points)
    percentage: number;
    total_score: number;    // e.g., 60
    total_weight: number;   // e.g., 100
    field_results: Array<{
      field_path: string;
      evaluation_as: string;
      weight: number;
      scored: number;
      status: string;
      value: string;
      page?: string;
      ai_feedback?: string;
    }>;
    missing_fields?: string[];
    ai_suggestion?: string;
  };
}

export function ScoredResultCard({ result }: ScoredResultCardProps) {
  return (
    <div className="scored-result-card" data-passed={result.passed}>
      <div className="scored-result-card__header">
        <span className="scored-result-card__code">{result.code}</span>
        <span className="scored-result-card__name">{result.name}</span>
      </div>

      <ScoreBar
        score={result.machine_score}
        fullScore={result.score}
        percentage={result.percentage}
        passed={result.passed}
      />

      <FieldResultList items={result.field_results} />

      {result.ai_suggestion && (
        <div className="scored-result-card__suggestion">
          <strong>💡 建议：</strong>
          <span>{result.ai_suggestion}</span>
        </div>
      )}
    </div>
  );
}