import React, { useState } from 'react';
import './GradingResults.css';


export let gradedData = null;

export const getData = (newData) => {
  gradedData = newData;
}



export let questions = null;
export const getQuestions = (newQuestions) => {
   questions = newQuestions;
}






function GradingResults() {
  const [selectedSubmission, setSelectedSubmission] = useState(gradedData?.[0]);

  return (
    <div className="grading-container">
      {/* Sidebar */}
      <div className="sidebar">
        <h2>Submissions</h2>
        <div className="submission-list">
          {gradedData.map((submission) => (
            <div
              key={submission.id}
              className={`submission-item ${selectedSubmission?.id === submission.id ? 'active' : ''}`}
              onClick={() => setSelectedSubmission(submission)}
            >
              <div className="submission-id">ID: {submission.id}</div>
              <div className="submission-score">
                     Score: {submission.total_student_score}/{submission.total_possible_points}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Main Content */}
      <div className="main-content">
        <div className="results-header">
          <h2 className='id-text'>
            Submission {selectedSubmission.id}     -        
            <span className="total-score">
             -        Score: {selectedSubmission.total_student_score}/{selectedSubmission.total_possible_points}
            </span>
          </h2>
        </div>

        <div className="questions-list">
          {selectedSubmission.graded.map((question, qIndex) => (
            <div key={qIndex} className="question-card">
              <h3>Question {qIndex + 1}</h3>
              <div className="grader-feedback">
                <h4>Grader's Comments:</h4>
                <p>{question.explanation}</p>
              </div>
              <p className="question-score">
                Score: {question.student_question_score}/{question.question_point_total}
              </p>
              <div className="criteria-list">
                {question.sub_questions.length === 0 ? (
                  <p>No criteria available for this question.</p>
                ) : (
                  question.sub_questions.map((criteria, cIndex) => (
                    <div key={cIndex} className="criteria-item">
                      <p className="criteria-explanation">{criteria.explanation}</p>
                      <p className="criteria-score">
                        Score: {criteria.student_criteria_score}/{criteria.criteria_point_total}
                      </p>
                    </div>
                  ))
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default GradingResults;