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 = Config.colors.UI.INVENTORY.BACKGROUND;
        ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
        
        // Calculate positions ensuring integer values
        const padding = Config.ui.inventory.PADDING;
        const width = Config.ui.inventory.WIDTH;
        const height = Config.ui.inventory.HEIGHT;
        const x = Math.round((state.canvas.width - width) / 2);
        const y = Math.round((state.canvas.height - height) / 2);
        
        // Draw window background
        ctx.fillStyle = Config.colors.UI.INVENTORY.WINDOW;
        ctx.fillRect(x, y, width, height);
        
        // Set text rendering properties for sharper text
        ctx.textBaseline = 'top';
        ctx.textAlign = 'left';
        ctx.imageSmoothingEnabled = false;
        
        // Draw title
        ctx.fillStyle = Config.colors.UI.INVENTORY.TEXT;
        ctx.font = Config.ui.inventory.TITLE_FONT;
        const titleX = Math.round(x + padding);
        const titleY = Math.round(y + padding);
        ctx.fillText('Inventory', titleX, titleY);
        
        // Get item counts and draw items with quantities
        const itemCounts = this.getItemCounts();
        let index = 0;
        
        itemCounts.forEach((count, itemName) => {
            const itemX = Math.round(x + padding);
            const itemY = Math.round(y + Config.ui.inventory.ITEMS_START_OFFSET + 
                                   (index * Config.ui.inventory.ITEM_SPACING));
            ctx.font = Config.ui.inventory.ITEM_FONT;
            ctx.fillText(`${itemName} x${count}`, itemX, itemY);
            index++;
        });
    }
};