import { cn } from '../../../lib/cn';
// import { IconError, IconSuccess } from "../../../assets/icons/missions";
// import { useNavigate } from "react-router-dom";

export interface SubmissionItemProps {
    id: number;
    datetime: string;
    missionId: number;
    language: string;
    verdict: string;
    duration: number;
    memory: number;
    type: 'first' | 'second';
    status?: 'success' | 'wronganswer' | 'timelimit';
}

export function formatMilliseconds(ms: number): string {
    const rounded = Math.round(ms) / 1000;
    const formatted = rounded.toString().replace(/\.?0+$/, '');
    return `${formatted} c`;
}

export function formatBytesToMB(bytes: number): string {
    const megabytes = Math.floor(bytes / (1024 * 1024));
    return `${megabytes} МБ`;
}

function formatDate(dateString: string): string {
    const date = new Date(dateString);

    const day = date.getDate().toString().padStart(2, '0');
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const year = date.getFullYear();

    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');

    return `${day}/${month}/${year}\n${hours}:${minutes}`;
}

const SubmissionItem: React.FC<SubmissionItemProps> = ({
    id,
    datetime,
    missionId,
    language,
    verdict,
    duration,
    memory,
    type,
    status
}) => {
    // const navigate = useNavigate();

    return (
        <div
            className={cn(
                ' w-full relative rounded-[10px] text-liquid-white text-center text-bold text-[16px] py-[8px]',
                type == 'first' ? 'bg-liquid-lighter' : 'bg-liquid-background',
                'grid grid-cols-7 grid-flow-col gap-[20px] px-[20px] box-border items-center',
                status == 'wronganswer' &&
                    'border-l-[11px] border-l-liquid-red pl-[9px]',
                status == 'timelimit' &&
                    'border-l-[11px] border-l-liquid-orange pl-[9px]',
                status == 'success' &&
                    'border-l-[11px] border-l-liquid-green pl-[9px]',
                'cursor-pointer brightness-100 hover:brightness-125 transition-all duration-300',
            )}
            onClick={() => {}}
        >
            <div className="text-[18px] font-bold">#{id}</div>
            <div className="text-[18px] font-bold text-center">
                {formatDate(datetime)}
            </div>
            <div>{missionId}    </div>
            <div className="text-[18px] font-bold  text-center">{language}</div>
            <div
                className={cn(
                    'text-[18px] font-bold  text-center',
                    status == 'wronganswer' && 'text-liquid-red',
                    status == 'timelimit' && 'text-liquid-orange',
                    status == 'success' && 'text-liquid-green',
                )}
            >
                {verdict}
            </div>  
            <div>{formatMilliseconds(duration)}</div>
            <div>
                {formatBytesToMB(memory)}
            </div>
        </div>
    );
};

export default SubmissionItem;