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

export interface MissionItemProps {
    id: number;
    authorId: number;
    name: string;
    difficulty: "Easy" | "Medium" | "Hard";
    tags: string[];
    timeLimit: number;
    memoryLimit: number;
    createdAt: string;
    updatedAt: string;
    type: "first" | "second";
    status: "empty" | "success" | "error";
}

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, memoryLimit, type, status
}) => {
    const navigate = useNavigate();

    return (
        <div className={cn("h-[44px] w-full relative rounded-[10px] text-liquid-white",
            type == "first" ? "bg-liquid-lighter" : "bg-liquid-background",
            "grid grid-cols-[80px,1fr,1fr,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}`)}}
        >
            <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]",
                difficulty == "Hard" && "text-liquid-red",
                difficulty == "Medium" && "text-liquid-orange",
                difficulty == "Easy" && "text-liquid-green",
            )}>
                {difficulty}
            </div>
            <div className="h-[24px] w-[24px]">
                {
                    status == "error" && <img src={IconError}/>
                }
                {
                    status == "success" && <img src={IconSuccess}/>
                }
            </div>
        </div>
    );
};

export default MissionItem;