const InventoryUI = {
    isOpen: false,
    
    toggleInventory() {
        this.isOpen = !this.isOpen;
    },
    
    // Helper function to count items by type
    getItemCounts() {
        const counts = new Map();
        
        player.inventory.forEach(item => {
            const itemName = item.type.name;
            counts.set(itemName, (counts.get(itemName) || 0) + 1);
        });
        
        return counts;
    },
    
    draw(ctx) {
        if (!this.isOpen) return;
        
        // Draw semi-transparent background
        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
        ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
        
        // Draw inventory window
        const padding = 20;
        const width = 300;
        const height = 400;
        const x = (state.canvas.width - width) / 2;
        const y = (state.canvas.height - height) / 2;
        
        // Draw window background
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(x, y, width, height);
        
        // Draw title
        ctx.fillStyle = '#000000';
        ctx.font = '20px Arial';
        ctx.fillText('Inventory', x + padding, y + padding + 20);
        
        // Get item counts and draw items with quantities
        const itemCounts = this.getItemCounts();
        let index = 0;
        
        itemCounts.forEach((count, itemName) => {
            const itemY = y + padding + 60 + (index * 30);
            ctx.font = '16px Arial';
            ctx.fillText(`${itemName} x${count}`, x + padding, itemY);
            index++;
        });
    }
};