import { useState, useEffect } from 'react';
import { cn } from '@/lib/utils';
import { getItemIconUrl, getItemData } from '@/services/item-database';

interface ItemIconProps {
    itemId: number;
    count?: number;
    size?: 'sm' | 'md' | 'lg';
    className?: string;
    onClick?: () => void;
}

// Match inventory.html: 38x38px for lg, smaller for others
const sizeClasses = {
    sm: 'w-6 h-6',
    md: 'w-8 h-8',
    lg: 'w-[38px] h-[38px]',
};

// Game-like slot styling matching inventory.html
const slotBaseStyle = {
    background: 'linear-gradient(135deg, #2a2820 0%, #1a1810 100%)',
    borderColor: '#4a4030',
};

const slotHoverStyle = {
    borderColor: '#8a7a50',
};

export function ItemIcon({
    itemId,
    count = 1,
    size = 'md',
    className,
    onClick
}: ItemIconProps) {
    const [imgError, setImgError] = useState(false);
    const [isHovered, setIsHovered] = useState(false);

    // Reset error when itemId changes
    useEffect(() => {
        setImgError(false);
    }, [itemId]);

    const itemData = getItemData(itemId);
    const iconUrl = getItemIconUrl(itemId);

    return (
        <div
            className={cn(
                'relative border flex items-center justify-center overflow-hidden box-border',
                onClick && 'cursor-pointer',
                sizeClasses[size],
                className
            )}
            onClick={onClick}
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
            style={{
                ...slotBaseStyle,
                borderColor: isHovered ? slotHoverStyle.borderColor : slotBaseStyle.borderColor,
                borderWidth: '1px',
                borderStyle: 'solid',
            }}
        >
            {!imgError ? (
                <img
                    src={iconUrl}
                    alt={itemData?.name || `Item ${itemId}`}
                    className="w-8 h-8 object-contain"
                    onError={() => setImgError(true)}
                    loading="lazy"
                />
            ) : (
                <span className="text-[10px] font-mono text-[#fceacc]/60">{itemId}</span>
            )}
            {count > 1 && (
                <span
                    className="absolute bottom-0.5 right-0.5 text-[9px] font-bold text-white"
                    style={{ textShadow: '1px 1px 1px #000, -1px -1px 1px #000' }}
                >
                    {count > 999 ? '999+' : count}
                </span>
            )}
        </div>
    );
}

interface ItemSlotEmptyProps {
    index: number;
    size?: 'sm' | 'md' | 'lg';
    slotName?: string;
    onClick?: () => void;
    className?: string;
}

export function ItemSlotEmpty({ index, size = 'md', slotName, onClick, className }: ItemSlotEmptyProps) {
    const [isHovered, setIsHovered] = useState(false);

    return (
        <div
            className={cn(
                'border flex items-center justify-center box-border',
                onClick && 'cursor-pointer',
                sizeClasses[size],
                className
            )}
            onClick={onClick}
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
            title={slotName || `Slot ${index}`}
            style={{
                ...slotBaseStyle,
                borderColor: isHovered ? slotHoverStyle.borderColor : slotBaseStyle.borderColor,
                borderWidth: '1px',
                borderStyle: 'solid',
            }}
        >
        </div>
    );
}

export default ItemIcon;