import { RefreshCw } from 'lucide-react';
import { useState } from 'react';

export function HistoryPanel({ history, onReset, maxNumber, onMaxNumberChange }) {
    // Reverse to show newest first (#1 at top)
    const reversedHistory = [...history].reverse();

    // Local state for input value
    const [inputValue, setInputValue] = useState(maxNumber);

    return (
        <div
            className="w-full backdrop-blur-xl rounded-3xl p-6 md:p-8 lg:p-10 shadow-2xl relative overflow-hidden"
            style={{
                background: 'linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(20, 20, 20, 0.5) 50%, rgba(0, 0, 0, 0.7) 100%)',
                border: '3px solid transparent',
                backgroundClip: 'padding-box',
                boxShadow: '0 0 40px rgba(212, 175, 55, 0.4), 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1)'
            }}
        >
            {/* Metallic border effect */}
            <div className="absolute inset-0 rounded-3xl pointer-events-none" style={{
                background: 'linear-gradient(135deg, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%)',
                padding: '3px',
                WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
                WebkitMaskComposite: 'xor',
                maskComposite: 'exclude',
            }}></div>
            {/* Header with Title and Controls */}
            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-8 relative z-10">
                <h3
                    className="text-3xl md:text-4xl font-black tracking-wide flex items-center gap-3"
                    style={{
                        background: 'linear-gradient(to bottom, #bf953f 0%, #fcf6ba 40%, #b38728 55%, #fbf5b7 100%)',
                        WebkitBackgroundClip: 'text',
                        WebkitTextFillColor: 'transparent',
                        backgroundClip: 'text',
                        filter: 'drop-shadow(0 3px 6px rgba(212, 175, 55, 0.6))'
                    }}
                >
                    🏆 Winners Board
                </h3>

                {/* Controls */}
                <div className="flex flex-wrap items-center gap-4">
                    <div className="flex items-center gap-3 text-white font-semibold text-base">
                        <label htmlFor="max-num" className="whitespace-nowrap" style={{
                            background: 'linear-gradient(to bottom, #bf953f 0%, #fcf6ba 50%, #b38728 100%)',
                            WebkitBackgroundClip: 'text',
                            WebkitTextFillColor: 'transparent',
                        }}>Max:</label>
                        <input
                            id="max-num"
                            type="number"
                            min="1"
                            value={inputValue}
                            onChange={(e) => setInputValue(e.target.value)}
                            onKeyDown={(e) => {
                                if (e.key === 'Enter') {
                                    const newValue = parseInt(inputValue) || 0;
                                    if (newValue > 0) {
                                        onMaxNumberChange(newValue);
                                    }
                                }
                            }}
                            onBlur={() => setInputValue(maxNumber)}
                            className="w-24 bg-white/10 border-2 border-gold-400/30 rounded-xl px-4 py-2 text-center text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-gold-400/50 focus:border-gold-400/50 backdrop-blur-sm transition-all font-bold"
                        />
                    </div>

                    <button
                        onClick={onReset}
                        className="flex items-center justify-center gap-2 bg-white/10 hover:bg-gold-400/20 text-white px-5 py-2 rounded-xl transition-all duration-300 border-2 border-gold-400/30 hover:border-gold-400/50 font-semibold group text-base whitespace-nowrap hover:shadow-lg hover:shadow-gold-400/20"
                    >
                        <RefreshCw size={18} className="group-hover:rotate-180 transition-transform duration-500" />
                        Reset
                    </button>
                </div>
            </div>

            {/* Winners Table - Vertical Rows */}
            {history.length === 0 ? (
                <div className="text-yellow-200/60 text-center italic py-16 text-xl relative z-10">
                    No winners yet - click the lottery machine to start!
                </div>
            ) : (
                <div className="space-y-4 relative z-10">
                    {reversedHistory.map((num, idx) => {
                        const rank = idx + 1;
                        const isTop3 = rank <= 3;
                        return (
                            <div
                                key={idx}
                                className="flex items-center gap-6 p-5 md:p-6 rounded-2xl transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl relative overflow-hidden group"
                                style={{
                                    background: isTop3
                                        ? 'linear-gradient(90deg, rgba(191, 149, 63, 0.15) 0%, rgba(179, 135, 40, 0.1) 50%, rgba(170, 119, 28, 0.05) 100%)'
                                        : 'rgba(255, 255, 255, 0.03)',
                                    border: isTop3
                                        ? '2px solid rgba(212, 175, 55, 0.5)'
                                        : '1px solid rgba(255, 255, 255, 0.08)',
                                    boxShadow: isTop3
                                        ? '0 4px 20px rgba(212, 175, 55, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1)'
                                        : '0 2px 10px rgba(0, 0, 0, 0.2)',
                                }}
                            >
                                {/* Shimmer effect on hover */}
                                {isTop3 && (
                                    <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" style={{
                                        background: 'linear-gradient(90deg, transparent 0%, rgba(252, 246, 186, 0.2) 50%, transparent 100%)',
                                        backgroundSize: '200% 100%',
                                        animation: 'shimmer 2s infinite',
                                    }}></div>
                                )}

                                {/* Rank badge - left */}
                                <div className="text-2xl md:text-3xl font-black w-20 text-center flex-shrink-0" style={{
                                    background: isTop3
                                        ? 'linear-gradient(to bottom, #bf953f 0%, #fcf6ba 40%, #b38728 55%, #fbf5b7 100%)'
                                        : 'linear-gradient(to bottom, #9CA3AF 0%, #D1D5DB 50%, #9CA3AF 100%)',
                                    WebkitBackgroundClip: 'text',
                                    WebkitTextFillColor: 'transparent',
                                    filter: isTop3 ? 'drop-shadow(0 2px 4px rgba(212, 175, 55, 0.5))' : 'none'
                                }}>
                                    {rank === 1 && '🥇'}
                                    {rank === 2 && '🥈'}
                                    {rank === 3 && '🥉'}
                                    {rank > 3 && `#${rank}`}
                                </div>

                                {/* Decorative separator */}
                                <div className="w-px h-16 bg-gradient-to-b from-transparent via-gold-400/30 to-transparent flex-shrink-0"></div>

                                {/* Number - center, LARGE with metallic effect */}
                                <div
                                    className="text-5xl md:text-6xl lg:text-7xl font-black flex-1 tabular-nums"
                                    style={{
                                        background: 'linear-gradient(to bottom, #bf953f 0%, #fcf6ba 40%, #b38728 55%, #fbf5b7 100%)',
                                        WebkitBackgroundClip: 'text',
                                        WebkitTextFillColor: 'transparent',
                                        filter: 'drop-shadow(0 4px 8px rgba(212, 175, 55, 0.4))',
                                    }}
                                >
                                    {num.toString().padStart(3, '0')}
                                </div>
                            </div>
                        );
                    })}
                </div>
            )}

            {/* Show count if there are more winners */}
            {history.length > 0 && (
                <div className="mt-6 pt-6 border-t border-gold-400/20 text-center relative z-10">
                    <div className="text-base font-medium" style={{
                        background: 'linear-gradient(to bottom, #bf953f 0%, #fcf6ba 50%, #b38728 100%)',
                        WebkitBackgroundClip: 'text',
                        WebkitTextFillColor: 'transparent',
                    }}>
                        Total Winners: {history.length} • Remaining: {maxNumber - history.length}
                    </div>
                </div>
            )}

            <style>{`
                @keyframes shimmer {
                    0% { background-position: -200% 0; }
                    100% { background-position: 200% 0; }
                }
            `}</style>
        </div>
    );
}
