class CustomToolGrid extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .tool-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
                    gap: 0.5rem;
                }
                
                .tool-cartridge {
                    background: linear-gradient(135deg, rgba(15,17,21,0.9) 0%, rgba(10,12,16,0.9) 100%);
                    border: 1px solid #4a5568;
                    padding: 1rem 0.5rem;
                    text-align: center;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    position: relative;
                }
                
                .tool-cartridge:hover {
                    border-color: #ff9f1c;
                    box-shadow: 0 0 10px rgba(255, 159, 28, 0.3);
                }
                
                .tool-cartridge i {
                    color: #4a5568;
                    transition: color 0.3s ease;
                }
                
                .tool-cartridge:hover i {
                    color: #ff9f1c;
                }
                
                .tool-name {
                    font-size: 0.75rem;
                    margin-top: 0.5rem;
                    color: #4a5568;
                }
                
                .tool-cartridge:hover .tool-name {
                    color: #ff9f1c;
                }
                
                .tool-cartridge::before {
                    content: '';
                    position: absolute;
                    top: -1px;
                    left: -1px;
                    right: -1px;
                    bottom: -1px;
                    border: 1px solid rgba(255, 159, 28, 0.1);
                    pointer-events: none;
                }
                
                @media (max-width: 768px) {
                    .tool-grid {
                        grid-template-columns: repeat(3, 1fr);
                    }
                }
            </style>
            <div class="tool-grid">
                <div class="tool-cartridge" data-tool="build">
                    <i data-feather="package"></i>
                    <div class="tool-name">BUILD</div>
                </div>
                
                <div class="tool-cartridge" data-tool="deploy">
                    <i data-feather="upload-cloud"></i>
                    <div class="tool-name">DEPLOY</div>
                </div>
                
                <div class="tool-cartridge" data-tool="scan">
                    <i data-feather="eye"></i>
                    <div class="tool-name">SCAN</div>
                </div>
                
                <div class="tool-cartridge" data-tool="monitor">
                    <i data-feather="activity"></i>
                    <div class="tool-name">MONITOR</div>
                </div>
                
                <div class="tool-cartridge" data-tool="backup">
                    <i data-feather="save"></i>
                    <div class="tool-name">BACKUP</div>
                </div>
                
                <div class="tool-cartridge" data-tool="clean">
                    <i data-feather="trash-2"></i>
                    <div class="tool-name">CLEAN</div>
                </div>
            </div>
        `;
        
        // Add click handlers for tools
        setTimeout(() => {
            const cartridges = this.shadowRoot.querySelectorAll('.tool-cartridge');
            cartridges.forEach(cartridge => {
                cartridge.addEventListener('click', () => {
                    const tool = cartridge.getAttribute('data-tool');
                    this.executeTool(tool);
                });
            });
        }, 100);
    }

    executeTool(tool) {
        // Simulate tool execution
        const modal = document.createElement('div');
        modal.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            color: #ff9f1c;
            font-family: 'JetBrains Mono', monospace;
            padding: 2rem;
            z-index: 1000;
            overflow-y: auto;
        `;

        modal.innerHTML = `
            <div style="border: 1px solid #4a5568; padding: 1rem;">
                <div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
                <h3 style="font-family: 'Chakra Petch', monospace; text-transform: uppercase; letter-spacing: 0.1em;">EXECUTING: ${tool.toUpperCase()}</h3>
                <button onclick="this.parentElement.parentElement.parentElement.remove()" style="background: transparent; border: 1px solid #4a5568; color: #4a5568; padding: 0.25rem 0.5rem; cursor: pointer;">CLOSE</button>
            </div>
            <div style="background: #0a0c10; border: 1px solid #4a5568; padding: 1rem; font-size: 0.875rem;">
                > Initializing ${tool} protocol...<br>
                > Loading dependencies...<br>
                > Executing command sequence...<br>
                > ${tool.toUpperCase()} COMPLETE<br>
                > Systems nominal<br>
            </div>
        `;

        document.body.appendChild(modal);
    }
}

customElements.define('custom-tool-grid', CustomToolGrid);