// import React from 'react';
// import { Link, useParams, useLocation } from 'react-router-dom';
// import { Container, Row, Col, Button } from 'react-bootstrap';
// import staydown from '../../assets/images/user/resultStay.png'
// import jump from '../../assets/images/user/resultJump.png'
// import finish from '../../assets/images/user/resultFinish.png'

// const ExerciseResult = () => {
//   const { section, topic } = useParams();
//   const location = useLocation();
//   localStorage.removeItem('answers');

//   return (
//     <Container className="result-page">
//         <Row>

//             {/* nilai sudah diatas KKM  */}
//             <Col xs={12} className='p-4 bg-white rounded-4 d-flex flex-column align-items-center'>
//                 <h4>Your Result!</h4>
//                 <img src={jump} alt="/" className='h-50'/>
//                 <p className='my-3 text-muted'>
//                     You scored <span className='text-blue fw-bold'> 60/100</span>. Great job! You can jump to...
//                 </p>
//                 <h1 className='mb-3 display-5 text-blue fw-bold'>LEVEL 3</h1>
//                 <Button as={Link} to={`/learning/${section}/${topic}`} variant='warning' className='py-2 px-5 rounded-35'>Continue</Button>
//             </Col>

//             {/* jika nilai dibawah KKM  */}
//             <Col xs={12} className='p-4 bg-white rounded-4 d-flex flex-column align-items-center'>
//                 <h4>Your Result!</h4>
//                 <img src={staydown} alt="/" className='h-50'/>
//                 <p className='my-3 text-muted'>
//                     You scored <span className='text-danger fw-bold'> 30/100</span>. Good effort! To improve, you can focus on...
//                 </p>
//                 <h1 className='mb-3 display-5 text-danger fw-bold'>LEVEL 3</h1>
//                 <Button as={Link} to={`/learning/${section}/${topic}`} variant='warning' className='py-2 px-5 rounded-35'>Continue</Button>
//             </Col>

//             {/* jika nilai sudah bagus tetapi belum cukup untuk ke level selanjutnya  */}
//             <Col xs={12} className='p-4 bg-white rounded-4 d-flex flex-column align-items-center'>
//                 <h4>Your Result!</h4>
//                 <img src={staydown} alt="/" className='h-50'/>
//                 <p className='my-3 text-muted text-center'>
//                     You scored <span className='text-blue fw-bold'> 30/100</span>. Learning is a journey. <br />
//                     Let's explore this level further to deepen your knowledge.
//                 </p>
//                 <h1 className='mb-3 display-5 fw-bold'>LEVEL 2</h1>
//                 <Button as={Link} to={`/learning/${section}/${topic}`} variant='warning' className='py-2 px-5 rounded-35'>Continue</Button>
//             </Col>
            
//             {/* jika yang telah dikerjakan adalah level 5 */}
//             <Col xs={12} className='p-4 bg-white rounded-4 d-flex flex-column align-items-center'>
//                 <h4>Your Result!</h4>
//                 <img src={finish} alt="/" className='h-50'/>
//                 <p className='my-3 text-muted'>
//                     Way to go! You conquered <span className='text-blue fw-bold'> LEVEL 5</span> with a <span className='text-blue fw-bold'> 90/100</span>! You're a rock star!
//                 </p>
//                 <h1 className='mb-3 display-5 fw-bold'>LEVEL 2</h1>
//                 <Button as={Link} to={`/learning/${section}/${topic}`} variant='warning' className='py-2 px-5 rounded-35'>Continue</Button>
//             </Col>
//         </Row>
//     </Container>
//   );
// };

// export default ExerciseResult;




import React from 'react';
import { Link, useParams, useLocation } from 'react-router-dom';
import { Container, Row, Col, Button } from 'react-bootstrap';
import staydown from '../../../../assets/images/illustration/resultStay.png';
import jump from '../../../../assets/images/illustration/resultJump.png';
import finish from '../../../../assets/images/illustration/resultFinish.png';
import useResults from '../hooks/useResults';

const ExerciseResult = () => {
  const { section, topic, level } = useParams();
  const location = useLocation();
  const { answers } = location.state || { answers: [] };

  const { score, nextLevel } = useResults(answers);

  let resultImage;
  let resultText;
  let resultColor;

  if (nextLevel === 0) {
    resultImage = finish;
    resultColor = 'text-blue';
    resultText = ( 
        <> Way to go! You conquered <span className='text-blue fw-bold'>LEVEL 5</span> with a <span className='text-blue fw-bold'>{score}/100</span>! You're a rock star!</>
    );
  } else if (score >= 60) {
    resultImage = jump;
    resultColor = 'text-blue';
    resultText = ( 
        <> You scored <span className='text-blue fw-bold'>{score}/100</span>. Great job! You can jump to...</>
    );
  } else if (score >= 40) {
    resultImage = staydown;
    resultColor = '';
    resultText = ( 
        <> You scored <span className='text-blue fw-bold'>{score}/100</span>. Learning is a journey. <br/> Let's explore this level further to deepen your knowledge.</>
    );
  } else {
    resultImage = staydown;
    resultColor = 'text-red';
    resultText = ( 
        <> You scored <span className='text-red fw-bold'>{score}/100</span>. Good effort! To improve, you can focus on...</>
    );
  }

  return (
    <Container className="result-page">
      <Row>
        <Col xs={12} className='p-4 bg-white rounded-4 d-flex flex-column align-items-center'>
          <h4>Your Result!</h4>
          <img src={resultImage} alt="/" className='h-50'/>
          <p className='my-3 text-muted text-center'>
            {resultText}
          </p>
          <h1 className={`mb-3 display-5 fw-bold ${resultColor}`}>{nextLevel === 0 ? '' : `LEVEL ${nextLevel}`}</h1>
          <Button as={Link} to={`/learning/${section}/${topic}`} variant='warning' className='py-2 px-5 rounded-35'>Continue</Button>
        </Col>
      </Row>
    </Container>
  );
};

export default ExerciseResult;