import { cn } from '../../../../lib/cn';
import { useNavigate } from 'react-router-dom';
import { Edit } from '../../../../assets/icons/input';
import { useAppSelector } from '../../../../redux/hooks';

export interface MissionItemProps {
    id: number;
    authorId?: number;
    name: string;
    difficulty: number;
    tags?: string[];
    timeLimit?: number;
    memoryLimit?: number;
    createdAt?: string;
    updatedAt?: string;
    type?: 'first' | 'second';
    status?: 'empty' | 'success' | 'error';
    setTastDeleteId: (v: number) => void;
    setDeleteModalActive: (v: boolean) => void;
}

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} МБ`;
}

const MissionItem: React.FC<MissionItemProps> = ({
    id,
    name,
    difficulty,
    timeLimit = 1000,
    memoryLimit = 256 * 1024 * 1024,
    type,
    status,
    setTastDeleteId,
    setDeleteModalActive,
}) => {
    const navigate = useNavigate();
    const difficultyItems = ['Easy', 'Medium', 'Hard'];
    const difficultyString =
        difficultyItems[Math.min(Math.max(0, difficulty - 1), 2)];
    const deleteStatus = useAppSelector(
        (state) => state.missions.statuses.delete,
    );

    return (
        <div
            className={cn(
                'min-h-[44px] w-full relative rounded-[10px] text-liquid-white py-[8px]',
                type == 'first' ? 'bg-liquid-lighter' : 'bg-liquid-background',
                'grid grid-cols-[80px,2fr,3fr,60px,24px] grid-flow-col gap-[20px] px-[20px] box-border items-center',
                status == 'error' &&
                    'border-l-[11px] border-l-liquid-red 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={() => {
                navigate(`/mission/${id}?back=/home/account/missions`);
            }}
        >
            <div className="text-[18px] font-bold">#{id}</div>
            <div className="text-[18px] font-bold">{name}</div>
            <div className="text-[12px] text-right">
                стандартный ввод/вывод {formatMilliseconds(timeLimit)},{' '}
                {formatBytesToMB(memoryLimit)}
            </div>
            <div
                className={cn(
                    'text-center text-[18px]',
                    difficultyString == 'Hard' && 'text-liquid-red',
                    difficultyString == 'Medium' && 'text-liquid-orange',
                    difficultyString == 'Easy' && 'text-liquid-green',
                )}
            >
                {difficultyString}
            </div>
            <div className="h-[24px] w-[24px]">
                <img
                    src={Edit}
                    className={cn(
                        'hover:bg-liquid-light rounded-[8px] transition-all duration-300',
                        deleteStatus == 'loading' &&
                            'cursor-default pointer-events-none hover:bg-transparent opacity-35',
                    )}
                    onClick={(e) => {
                        e.stopPropagation();
                        if (deleteStatus != 'loading') {
                            setTastDeleteId(id);
                            setDeleteModalActive(true);
                        }
                    }}
                />
            </div>
        </div>
    );
};

export default MissionItem;