import { cn } from '../../../../lib/cn';
import { Account } from '../../../../assets/icons/auth';
import { useNavigate } from 'react-router-dom';
import { Edit } from '../../../../assets/icons/input';

export interface ContestItemProps {
    id: number;
    name: string;
    startAt: string;
    duration: number;
    members: number;
    type: 'first' | 'second';
}

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

function formatWaitTime(ms: number): string {
    const minutes = Math.floor(ms / 60000);
    const hours = Math.floor(minutes / 60);
    const days = Math.floor(hours / 24);

    if (days > 0) {
        const remainder = days % 10;
        let suffix = 'дней';
        if (remainder === 1 && days !== 11) suffix = 'день';
        else if (remainder >= 2 && remainder <= 4 && (days < 10 || days > 20))
            suffix = 'дня';
        return `${days} ${suffix}`;
    } else if (hours > 0) {
        const mins = minutes % 60;
        return mins > 0 ? `${hours} ч ${mins} мин` : `${hours} ч`;
    } else {
        return `${minutes} мин`;
    }
}

const ContestItem: React.FC<ContestItemProps> = ({
    id,
    name,
    startAt,
    duration,
    members,
    type,
}) => {
    const navigate = useNavigate();

    return (
        <div
            className={cn(
                'w-full box-border relative rounded-[10px] px-[20px] py-[10px] text-liquid-white  text-[16px] leading-[20px] cursor-pointer grid grid-cols-[1fr,1fr,110px,110px,110px,24px] items-center font-bold',
                type == 'first'
                    ? ' bg-liquid-lighter'
                    : ' bg-liquid-background',
            )}
            onClick={() => {
                navigate(`/contest/${id}`);
            }}
        >
            <div className="text-left font-bold text-[18px]">{name}</div>
            <div className="text-center text-liquid-brightmain font-normal ">
                {/* {authors.map((v, i) => <p key={i}>{v}</p>)} */}
                valavshonok
            </div>
            <div className="text-center  text-nowrap whitespace-pre-line">
                {formatDate(startAt)}
            </div>
            <div className="text-center">{formatWaitTime(duration)}</div>
            <div className="items-center justify-center flex gap-[10px] flex-row w-full">
                <div>{members}</div>
                <img src={Account} className="h-[24px] w-[24px]" />
            </div>

            <img
                className="  h-[24px] w-[24px] hover:bg-liquid-light rounded-[5px] transition-all duration-300"
                src={Edit}
                onClick={(e) => {
                    e.stopPropagation();
                    navigate(
                        `/contest/create?back=/home/account/contests&contestId=${id}`,
                    );
                }}
            />
        </div>
    );
};

export default ContestItem;