import React from 'react';
import { RiArrowRightUpLine, RiArrowLeftDownLine } from 'react-icons/ri';
import { FaChartLine } from 'react-icons/fa';
import { GiLightBulb } from 'react-icons/gi';
import clsx from 'clsx';
import { ITrainingContent } from './TrainingInterfaces';

interface TrainingScoreProps {
    trainingContent: ITrainingContent
    gridView: boolean;
}

const TrainingScore: React.FC<TrainingScoreProps> = ({
    trainingContent,
    gridView
}) => {
    const scores = trainingContent.exams.map(exam => exam.score);
    const highestScore = Math.max(...scores);
    const lowestScore = Math.min(...scores);
    let averageScore = scores.length > 0
        ? scores.reduce((sum, score) => sum + score, 0) / scores.length
        : 0;
    averageScore = Math.round(averageScore);

    const containerClasses = clsx(
        "flex flex-row mb-4",
        gridView ? "gap-4 justify-between" : "gap-8"
    );

    const columnClasses = clsx(
        "flex flex-col",
        gridView ? "gap-4" : "gap-8"
    ); 

    return (
        <div className={containerClasses}>
            <div className={columnClasses}>
                <div className="flex flex-row items-center gap-4">
                    <div className="flex w-14 h-14 bg-[#F5F5F5] items-center justify-center rounded-xl border border-[#DBDBDB]">
                        <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.7083 3.16669C11.4166 3.16669 11.1701 3.06599 10.9687 2.8646C10.7673 2.66321 10.6666 2.41669 10.6666 2.12502C10.6666 1.83335 10.7673 1.58683 10.9687 1.38544C11.1701 1.18405 11.4166 1.08335 11.7083 1.08335C12 1.08335 12.2465 1.18405 12.4479 1.38544C12.6493 1.58683 12.75 1.83335 12.75 2.12502C12.75 2.41669 12.6493 2.66321 12.4479 2.8646C12.2465 3.06599 12 3.16669 11.7083 3.16669ZM11.7083 16.9167C11.4166 16.9167 11.1701 16.816 10.9687 16.6146C10.7673 16.4132 10.6666 16.1667 10.6666 15.875C10.6666 15.5834 10.7673 15.3368 10.9687 15.1354C11.1701 14.934 11.4166 14.8334 11.7083 14.8334C12 14.8334 12.2465 14.934 12.4479 15.1354C12.6493 15.3368 12.75 15.5834 12.75 15.875C12.75 16.1667 12.6493 16.4132 12.4479 16.6146C12.2465 16.816 12 16.9167 11.7083 16.9167ZM15.0416 6.08335C14.75 6.08335 14.5034 5.98266 14.302 5.78127C14.1007 5.57988 14 5.33335 14 5.04169C14 4.75002 14.1007 4.50349 14.302 4.3021C14.5034 4.10071 14.75 4.00002 15.0416 4.00002C15.3333 4.00002 15.5798 4.10071 15.7812 4.3021C15.9826 4.50349 16.0833 4.75002 16.0833 5.04169C16.0833 5.33335 15.9826 5.57988 15.7812 5.78127C15.5798 5.98266 15.3333 6.08335 15.0416 6.08335ZM15.0416 14C14.75 14 14.5034 13.8993 14.302 13.6979C14.1007 13.4965 14 13.25 14 12.9584C14 12.6667 14.1007 12.4202 14.302 12.2188C14.5034 12.0174 14.75 11.9167 15.0416 11.9167C15.3333 11.9167 15.5798 12.0174 15.7812 12.2188C15.9826 12.4202 16.0833 12.6667 16.0833 12.9584C16.0833 13.25 15.9826 13.4965 15.7812 13.6979C15.5798 13.8993 15.3333 14 15.0416 14ZM16.2916 10.0417C16 10.0417 15.7534 9.94099 15.552 9.7396C15.3507 9.53821 15.25 9.29169 15.25 9.00002C15.25 8.70835 15.3507 8.46183 15.552 8.26044C15.7534 8.05905 16 7.95835 16.2916 7.95835C16.5833 7.95835 16.8298 8.05905 17.0312 8.26044C17.2326 8.46183 17.3333 8.70835 17.3333 9.00002C17.3333 9.29169 17.2326 9.53821 17.0312 9.7396C16.8298 9.94099 16.5833 10.0417 16.2916 10.0417ZM8.99996 17.3334C7.84718 17.3334 6.76385 17.1146 5.74996 16.6771C4.73607 16.2396 3.85413 15.6459 3.10413 14.8959C2.35413 14.1459 1.76038 13.2639 1.32288 12.25C0.885376 11.2361 0.666626 10.1528 0.666626 9.00002C0.666626 7.84724 0.885376 6.76391 1.32288 5.75002C1.76038 4.73613 2.35413 3.85419 3.10413 3.10419C3.85413 2.35419 4.73607 1.76044 5.74996 1.32294C6.76385 0.885437 7.84718 0.666687 8.99996 0.666687V2.33335C7.13885 2.33335 5.56246 2.97919 4.27079 4.27085C2.97913 5.56252 2.33329 7.13891 2.33329 9.00002C2.33329 10.8611 2.97913 12.4375 4.27079 13.7292C5.56246 15.0209 7.13885 15.6667 8.99996 15.6667V17.3334ZM8.99996 10.6667C8.54163 10.6667 8.14927 10.5035 7.82288 10.1771C7.49649 9.85071 7.33329 9.45835 7.33329 9.00002C7.33329 8.93058 7.33676 8.85766 7.34371 8.78127C7.35065 8.70488 7.36801 8.63196 7.39579 8.56252L5.66663 6.83335L6.83329 5.66669L8.56246 7.39585C8.61801 7.38196 8.76385 7.36113 8.99996 7.33335C9.45829 7.33335 9.85065 7.49655 10.177 7.82294C10.5034 8.14933 10.6666 8.54169 10.6666 9.00002C10.6666 9.45835 10.5034 9.85071 10.177 10.1771C9.85065 10.5035 9.45829 10.6667 8.99996 10.6667Z" fill="#40A1EA" />
                        </svg>
                    </div>
                    <div className="flex flex-col">
                        <p className="font-bold">{trainingContent.exams.length}</p>
                        <p>Exams Selected</p>
                    </div>
                </div>
                <div className="flex flex-row items-center gap-4">
                    <div className="flex w-14 h-14 bg-[#F5F5F5] items-center justify-center rounded-xl border border-[#DBDBDB]">
                        <RiArrowRightUpLine color={"#22E1B3"} size={gridView ? 28 : 26} />
                    </div>
                    <div className="flex flex-col">
                        <p className="font-bold">{highestScore}%</p>
                        <p>Highest Score</p>
                    </div>
                </div>
            </div>
            <div className={columnClasses}>
                <div className="flex flex-row items-center gap-4">
                    <div className="flex w-14 h-14 bg-[#F5F5F5] items-center justify-center rounded-xl border border-[#DBDBDB]">
                        <FaChartLine color={"#40A1EA"} size={gridView ? 24 : 26} />
                    </div>
                    <div className="flex flex-col">
                        <p className="font-bold">{averageScore}%</p>
                        <p>Average Score</p>
                    </div>
                </div>
                <div className="flex flex-row items-center gap-4">
                    <div className="flex w-14 h-14 bg-[#F5F5F5] items-center justify-center rounded-xl border border-[#DBDBDB]">
                        <RiArrowLeftDownLine color={"#E13922"} size={gridView ? 28 : 26} />
                    </div>
                    <div className="flex flex-col">
                        <p className="font-bold">{lowestScore}%</p>
                        <p>Lowest Score</p>
                    </div>
                </div>
            </div>
            {gridView && (
                <div className="flex flex-col items-center justify-center gap-2 -lg:hidden">
                    <div className="flex w-14 h-14 bg-[#F5F5F5] items-center justify-center rounded-xl border border-[#DBDBDB]">
                        <GiLightBulb color={"#FFCC00"} size={28} />
                    </div>
                    <p><span className="font-bold">{trainingContent.tip_ids.length}</span> Tips</p>
                </div>
            )}
        </div>
    );
};

export default TrainingScore;