import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import RubricBuilder from './RubricBuilder';
import './GradingSystem.css';
import { getRubric } from './SubmissionsPage';

export function GradingSystem() {
  const [isBuilding, setIsBuilding] = useState(false);
  const [currentRubric, setCurrentRubric] = useState(null);
  const navigate = useNavigate();

  const parseRubricToString = (rubric) => {
    let rubricString = "RUBRIC:\n\n";

    rubric.questions.forEach((question, qIndex) => {
      rubricString += `QUESTION ${qIndex + 1} (${question.points} points):\n`;
      rubricString += `${question.text}\n\n`;
      rubricString += "Grading Criteria:\n";

      question.criteria.forEach((criterion, cIndex) => {
        const pointSign = criterion.points >= 0 ? '+' : '';
        rubricString += `${cIndex + 1}. [${pointSign}${criterion.points} points] ${criterion.description}\n`;
      });

      rubricString += "\n---\n\n";
      
    });
    



    getRubric(rubricString);
    return rubricString;
  };


  
  const handleRubricComplete = (rubric) => {
    const rubricString = parseRubricToString(rubric);
    console.log(rubricString); // For testing - you can see the output in console
    setCurrentRubric(rubric);
    setIsBuilding(false);
  };
  return (
    <div className="grading-system content-container">
      {!isBuilding && !currentRubric && (
        <div className="welcome-screen">
          <div className="welcome-content">
            <div className="welcome-icon">
              <i className="fas fa-clipboard-check"></i>
            </div>
            <h1>Welcome to TAI</h1>
            <p className="welcome-description">
An advanced AI-powered assessment engine that leverages cutting-edge large language models (LLMs) to decipher and evaluate handwritten tests and homework with human-like precision. Utilizing a custom-designed grading rubric and intelligent analysis, TAI ensures fair, consistent, and insightful feedback, transforming the academic evaluation process with unparalleled efficiency.             </p>
            <button 
              className="create-rubric-btn"
              onClick={() => setIsBuilding(true)}
            >
              <i className="fas fa-plus-circle"></i>
              <span>Create New Rubric</span>
            </button>
            <div className="feature-grid">
              <div className="feature-item">
                <i className="fas fa-pencil-ruler"></i>
                <h3>Custom Rubrics</h3>
                <p>Create detailed grading criteria</p>
              </div>
              <div className="feature-item">
                <i className="fas fa-bolt"></i>
                <h3>Fast Grading</h3>
                <p>Grade multiple submissions quickly</p>
              </div>
              <div className="feature-item">
                <i className="fas fa-chart-bar"></i>
                <h3>Detailed Analytics</h3>
                <p>Get comprehensive grading insights</p>
              </div>
              <div className="feature-item">
                <i className="fas fa-cloud-upload-alt"></i>
                <h3>Easy Upload</h3>
                <p>Support for PDF and images</p>
              </div>
            </div>
          </div>
        </div>
      )}

      {isBuilding && (
        <RubricBuilder
          onRubricComplete={handleRubricComplete}
          onCancel={() => setIsBuilding(false)}
        />
      )}

      {currentRubric && (
        <div className="completed-rubric-view">
          <h2>Completed Rubric</h2>
          <div className="rubric-content">
            {currentRubric.questions.map((question, index) => (
              <div key={index} className="rubric-question">
                <div className="question-header">
                  <h3>Question {index + 1}</h3>
                  <span className="points">{question.points} Points</span>
                </div>
                <p className="question-text">{question.text}</p>
                <div className="criteria-list">
                  {question.criteria.map((criterion, cIndex) => (
                    <div key={cIndex} className="criterion-item">
                      <span className={criterion.points >= 0 ? 'points-positive' : 'points-negative'}>
                        {criterion.points >= 0 ? '+' : ''}{criterion.points} pts
                      </span>
                      <span>{criterion.description}</span>
                    </div>
                  ))}
                </div>
                
              </div>
            ))}
          </div>
          <button 
            className="grade-submissions-btn"
            onClick={() => navigate('/submissions', { state: { rubric: currentRubric } })}
          >
            <i className="fas fa-upload"></i>
            Grade Submissions
          </button>
        </div>
      )}
    </div>
  );
}



export default GradingSystem;