import React from 'react';
import Icon from './Icon';

/**
 * PlayerHud — HUD игрока в Play-режиме:
 *   - HP-полоска слева сверху с сегментами и подсветкой
 *   - Красный flash при получении урона
 *   - Счётчик патронов справа снизу с кольцом перезарядки
 */
function PlayerHud({ visible, hp, maxHp, ammo, damaged }) {
    if (!visible) return null;

    const hpPct = Math.max(0, Math.min(100, (hp / maxHp) * 100));
    const lowHp  = hp <= maxHp * 0.25;
    const midHp  = !lowHp && hp <= maxHp * 0.5;

    const hpGradient = lowHp
        ? 'linear-gradient(90deg, #ff6f7a 0%, #c0303f 100%)'
        : midHp
            ? 'linear-gradient(90deg, #ffc857 0%, #f59e0b 100%)'
            : 'linear-gradient(90deg, #22d97a 0%, #0f9d56 100%)';

    const hpGlow = lowHp
        ? '0 0 16px rgba(255, 111, 122, 0.55)'
        : midHp
            ? '0 0 12px rgba(255, 200, 87, 0.35)'
            : '0 0 12px rgba(34, 217, 122, 0.35)';

    return (
        <>
            <style>{HUD_KEYFRAMES}</style>

            {/* === HP-bar — ЛЕВЫЙ ВЕРХНИЙ УГОЛ === */}
            <div style={{
                position: 'absolute',
                left: 14,
                top: 14,
                width: 260,
                pointerEvents: 'none',
                zIndex: 30,
                background: 'rgba(20, 24, 45, 0.78)',
                border: '1px solid rgba(255, 255, 255, 0.10)',
                borderRadius: 14,
                padding: '10px 12px',
                backdropFilter: 'blur(20px)',
                WebkitBackdropFilter: 'blur(20px)',
                boxShadow:
                    '0 8px 24px rgba(0, 0, 0, 0.45), '
                    + '0 0 0 1px rgba(51, 87, 255, 0.10), '
                    + 'inset 0 1px 0 rgba(255, 255, 255, 0.06)',
            }}>
                <div style={{
                    display: 'flex', alignItems: 'center', gap: 8,
                    marginBottom: 6,
                }}>
                    <div style={{
                        fontSize: 18, lineHeight: 1,
                        animation: lowHp ? 'hudHeartBeat 0.8s ease-in-out infinite' : 'none',
                        filter: lowHp ? 'drop-shadow(0 0 8px rgba(255,111,122,0.7))' : 'none',
                    }}><Icon name="heart" size={14} /></div>
                    <div style={{
                        fontSize: 14, fontWeight: 800, color: '#f1f5fb',
                        textShadow: '0 1px 3px rgba(0,0,0,0.7)',
                        fontFamily: '"Roboto Condensed", system-ui, sans-serif',
                        letterSpacing: 0.3,
                        fontVariantNumeric: 'tabular-nums',
                    }}>
                        {Math.round(hp)}<span style={{
                            color: 'rgba(241, 245, 251, 0.42)',
                            fontWeight: 700, fontSize: 12, marginLeft: 2,
                        }}> / {maxHp}</span>
                    </div>
                    <div style={{
                        marginLeft: 'auto',
                        fontSize: 10, fontWeight: 800,
                        color: lowHp ? '#ff6f7a' : midHp ? '#ffc857' : '#22d97a',
                        textTransform: 'uppercase', letterSpacing: 1,
                        fontFamily: '"Roboto Condensed", system-ui, sans-serif',
                    }}>
                        {Math.round(hpPct)}%
                    </div>
                </div>

                {/* Полоска */}
                <div style={{
                    height: 10,
                    background: 'rgba(0, 0, 0, 0.45)',
                    border: '1px solid rgba(255, 255, 255, 0.08)',
                    borderRadius: 999,
                    overflow: 'hidden',
                    position: 'relative',
                    boxShadow: 'inset 0 2px 4px rgba(0, 0, 0, 0.4)',
                }}>
                    <div style={{
                        height: '100%',
                        width: `${hpPct}%`,
                        background: hpGradient,
                        borderRadius: 999,
                        transition: 'width 200ms ease, background 200ms ease, box-shadow 200ms ease',
                        boxShadow: hpGlow,
                        position: 'relative',
                    }}>
                        {/* Блик сверху */}
                        <div style={{
                            position: 'absolute', left: 0, right: 0, top: 0, height: '50%',
                            background: 'linear-gradient(180deg, rgba(255,255,255,0.28), transparent)',
                            borderRadius: '999px 999px 0 0',
                        }} />
                    </div>
                    {/* Сегментные риски (10 шт) */}
                    {Array.from({ length: 9 }).map((_, i) => (
                        <div key={i} style={{
                            position: 'absolute',
                            top: 0, bottom: 0,
                            left: `${(i + 1) * 10}%`,
                            width: 1,
                            background: 'rgba(0, 0, 0, 0.35)',
                            pointerEvents: 'none',
                        }} />
                    ))}
                </div>
            </div>

            {/* Красный flash при получении урона */}
            {damaged && (
                <div style={{
                    position: 'absolute',
                    inset: 0,
                    pointerEvents: 'none',
                    zIndex: 29,
                    background: 'radial-gradient(circle, transparent 25%, rgba(255, 60, 80, 0.55) 100%)',
                    animation: 'hudHurtFlash 0.4s ease-out',
                }} />
            )}

            {/* === Ammo — справа внизу, над hot-bar === */}
            {ammo && (
                <AmmoIndicator ammo={ammo} />
            )}
        </>
    );
}

const AmmoIndicator = ({ ammo }) => {
    const reloading = !!ammo.reloading;
    const magPct = ammo.magazineMax > 0
        ? (ammo.magazine / ammo.magazineMax) * 100
        : 0;
    const lowAmmo = !reloading && magPct < 25;

    // SVG-кольцо progress перезарядки
    const RING_R = 30;
    const RING_C = 2 * Math.PI * RING_R;

    return (
        <div style={{
            position: 'absolute',
            right: 18,
            bottom: 100,
            pointerEvents: 'none',
            zIndex: 30,
            background: 'rgba(20, 24, 45, 0.82)',
            border: '1px solid rgba(255, 255, 255, 0.10)',
            borderRadius: 16,
            padding: '14px 18px',
            color: '#f1f5fb',
            fontFamily: '"Roboto Condensed", system-ui, sans-serif',
            minWidth: 150,
            textAlign: 'center',
            backdropFilter: 'blur(20px)',
            WebkitBackdropFilter: 'blur(20px)',
            boxShadow:
                '0 12px 32px rgba(0, 0, 0, 0.50), '
                + '0 0 0 1px rgba(51, 87, 255, 0.12), '
                + 'inset 0 1px 0 rgba(255, 255, 255, 0.06)',
        }}>
            {reloading ? (
                <div style={{
                    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
                }}>
                    {/* Кольцо progress */}
                    <div style={{ position: 'relative', width: 72, height: 72 }}>
                        <svg width={72} height={72} style={{ transform: 'rotate(-90deg)' }}>
                            <circle
                                cx={36} cy={36} r={RING_R}
                                stroke="rgba(255,255,255,0.08)"
                                strokeWidth={5}
                                fill="none"
                            />
                            <circle
                                cx={36} cy={36} r={RING_R}
                                stroke="#3357ff"
                                strokeWidth={5}
                                fill="none"
                                strokeLinecap="round"
                                strokeDasharray={RING_C}
                                strokeDashoffset={RING_C * (1 - ammo.reloadProgress)}
                                style={{
                                    transition: 'stroke-dashoffset 0.05s linear',
                                    filter: 'drop-shadow(0 0 6px rgba(51, 87, 255, 0.65))',
                                }}
                            />
                        </svg>
                        <div style={{
                            position: 'absolute', inset: 0,
                            display: 'flex', alignItems: 'center', justifyContent: 'center',
                            fontSize: 22,
                            animation: 'hudSpin 1.2s linear infinite',
                        }}><Icon name="refresh" size={14} /></div>
                    </div>
                    <div style={{
                        fontSize: 11, fontWeight: 800, color: '#3357ff',
                        textTransform: 'uppercase', letterSpacing: 1.5,
                    }}>
                        Перезарядка
                    </div>
                </div>
            ) : (
                <>
                    {/* Magazine */}
                    <div style={{
                        display: 'flex', alignItems: 'baseline',
                        justifyContent: 'center', gap: 4,
                        fontVariantNumeric: 'tabular-nums',
                    }}>
                        <span style={{
                            fontSize: 32, fontWeight: 900, lineHeight: 1,
                            color: lowAmmo ? '#ff6f7a' : '#f1f5fb',
                            letterSpacing: -1,
                            textShadow: lowAmmo
                                ? '0 0 12px rgba(255, 111, 122, 0.55)'
                                : 'none',
                            animation: lowAmmo ? 'hudPulse 1s ease-in-out infinite' : 'none',
                        }}>
                            {ammo.magazine}
                        </span>
                        <span style={{
                            fontSize: 14, fontWeight: 700,
                            color: 'rgba(241, 245, 251, 0.42)',
                        }}>
                            / {ammo.magazineMax}
                        </span>
                    </div>

                    {/* Тонкая полоска текущей обоймы */}
                    <div style={{
                        height: 3,
                        background: 'rgba(0, 0, 0, 0.4)',
                        borderRadius: 999,
                        overflow: 'hidden',
                        marginTop: 6, marginBottom: 8,
                    }}>
                        <div style={{
                            height: '100%',
                            width: `${magPct}%`,
                            background: lowAmmo
                                ? 'linear-gradient(90deg, #ff6f7a, #c0303f)'
                                : 'linear-gradient(90deg, #3357ff, #1e2da5)',
                            borderRadius: 999,
                            transition: 'width 200ms ease',
                            boxShadow: lowAmmo
                                ? '0 0 8px rgba(255, 111, 122, 0.5)'
                                : '0 0 8px rgba(51, 87, 255, 0.4)',
                        }} />
                    </div>

                    {/* Reserve + R hint */}
                    <div style={{
                        display: 'flex', alignItems: 'center',
                        justifyContent: 'space-between', gap: 8,
                        fontSize: 11,
                    }}>
                        <span style={{
                            display: 'inline-flex', alignItems: 'center', gap: 4,
                            color: 'rgba(241, 245, 251, 0.62)', fontWeight: 700,
                        }}>
                            <Icon name="backpack" size={14} /> {ammo.reserve}
                        </span>
                        <span style={{
                            display: 'inline-flex', alignItems: 'center', gap: 4,
                            fontSize: 10, color: 'rgba(241, 245, 251, 0.42)',
                            fontWeight: 700, letterSpacing: 0.5,
                            textTransform: 'uppercase',
                        }}>
                            <kbd style={{
                                background: 'rgba(255, 255, 255, 0.08)',
                                border: '1px solid rgba(255, 255, 255, 0.15)',
                                borderRadius: 4,
                                padding: '1px 6px',
                                fontSize: 10, fontFamily: 'inherit', fontWeight: 800,
                                color: '#f1f5fb',
                            }}>R</kbd>
                            перезаряд
                        </span>
                    </div>
                </>
            )}
        </div>
    );
};

const HUD_KEYFRAMES = `
@keyframes hudHurtFlash {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes hudHeartBeat {
    0%, 100%  { transform: scale(1); }
    25%, 75%  { transform: scale(1.18); }
    50%       { transform: scale(0.95); }
}
@keyframes hudSpin { to { transform: rotate(360deg); } }
@keyframes hudPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}
`;

export default PlayerHud;