import React from 'react';

interface DetailedKittyProps {
    isJumping: boolean;
    isNight: boolean;
    isGameOver: boolean;
}

export const DetailedKitty: React.FC<DetailedKittyProps> = ({ isJumping, isNight, isGameOver }) => {
    const mainColor = isGameOver ? (isNight ? '#475569' : '#cbd5e1') : (isNight ? '#f8fafc' : '#f472b6');
    const stripeColor = isNight ? '#cbd5e1' : '#ec4899';
    const earColor = isNight ? '#334155' : '#fbcfe8';

    return (
        <div className={`relative w-20 h-14 transition-all duration-200 ${isJumping ? '-rotate-6 scale-110' : ''}`}>

            {/* OGON (Merdający) */}
            <div
                className="absolute -left-4 top-4 w-8 h-3 rounded-full origin-right rotate-[-20deg]"
                style={{
                    backgroundColor: mainColor,
                    animation: !isGameOver ? 'tail-wag 0.8s ease-in-out infinite' : 'none'
                }}
            />

            {/* TUŁÓW */}
            <div className="absolute inset-0 rounded-[2rem] overflow-hidden" style={{ backgroundColor: mainColor }}>
                {/* Paski na grzbiecie */}
                <div className="absolute top-0 left-1/4 w-2 h-4 rounded-full opacity-30" style={{ backgroundColor: stripeColor }} />
                <div className="absolute top-0 left-1/2 w-2 h-4 rounded-full opacity-30" style={{ backgroundColor: stripeColor }} />
                <div className="absolute top-0 left-3/4 w-2 h-4 rounded-full opacity-30" style={{ backgroundColor: stripeColor }} />
            </div>

            {/* GŁOWA */}
            <div className="absolute -right-4 -top-6 w-14 h-13 rounded-full shadow-sm" style={{ backgroundColor: mainColor }}>
                {/* Uszy z wnętrzem */}
                <div className="absolute -top-2 left-1 w-5 h-6 rounded-t-full rotate-[-15deg]" style={{ backgroundColor: mainColor }}>
                    <div className="absolute inset-1 rounded-t-full" style={{ backgroundColor: earColor }} />
                </div>
                <div className="absolute -top-2 right-1 w-5 h-6 rounded-t-full rotate-[15deg]" style={{ backgroundColor: mainColor }}>
                    <div className="absolute inset-1 rounded-t-full" style={{ backgroundColor: earColor }} />
                </div>

                {/* Oczy z błyskiem */}
                <div className={`absolute top-5 left-3 w-2.5 h-2.5 rounded-full ${isGameOver ? 'bg-slate-400' : 'bg-slate-900'}`}>
                    {!isGameOver && <div className="absolute top-0.5 left-0.5 w-1 h-1 bg-white rounded-full opacity-70" />}
                </div>
                <div className={`absolute top-5 right-3 w-2.5 h-2.5 rounded-full ${isGameOver ? 'bg-slate-400' : 'bg-slate-900'}`}>
                    {!isGameOver && <div className="absolute top-0.5 left-0.5 w-1 h-1 bg-white rounded-full opacity-70" />}
                </div>

                {/* Wąsy */}
                <div className="absolute top-7 -left-3 w-4 h-[1px] bg-slate-300 rotate-[10deg] opacity-50" />
                <div className="absolute top-9 -left-3 w-4 h-[1px] bg-slate-300 rotate-[-5deg] opacity-50" />
                <div className="absolute top-7 -right-3 w-4 h-[1px] bg-slate-300 rotate-[-10deg] opacity-50" />
                <div className="absolute top-9 -right-3 w-4 h-[1px] bg-slate-300 rotate-[5deg] opacity-50" />

                {/* Nosek i Pyszczek */}
                <div className="absolute top-8 left-1/2 -translate-x-1/2 w-2 h-1.5 bg-pink-400 rounded-full" />
            </div>

            {/* ŁAPKI (Zintegrowane z animacją biegu) */}
            {/* Przednia lewa */}
            <div className="absolute bottom-[-10px] left-4 w-3 h-6 rounded-full origin-top"
                style={{
                    backgroundColor: mainColor,
                    animation: !isJumping && !isGameOver ? 'kitty-walk 0.2s infinite' : 'none',
                    transform: isJumping ? 'rotate(45deg)' : 'none'
                }}>
                <div className="absolute bottom-0 w-full h-2 bg-white rounded-full opacity-60" /> {/* Skarpetka */}
            </div>

            {/* Przednia prawa */}
            <div className="absolute bottom-[-10px] left-8 w-3 h-6 rounded-full origin-top"
                style={{
                    backgroundColor: mainColor,
                    animation: !isJumping && !isGameOver ? 'kitty-walk-alt 0.2s infinite' : 'none',
                    transform: isJumping ? 'rotate(45deg)' : 'none'
                }}>
                <div className="absolute bottom-0 w-full h-2 bg-white rounded-full opacity-60" />
            </div>

            {/* Tylna lewa */}
            <div className="absolute bottom-[-10px] right-4 w-3 h-6 rounded-full origin-top"
                style={{
                    backgroundColor: mainColor,
                    animation: !isJumping && !isGameOver ? 'kitty-walk 0.2s infinite' : 'none',
                    transform: isJumping ? 'rotate(-45deg)' : 'none'
                }}>
                <div className="absolute bottom-0 w-full h-2 bg-white rounded-full opacity-60" />
            </div>
        </div>
    );
};