class ArchAppIcon extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        this.render();
        this.setupInteraction();
    }

    static get observedAttributes() {
        return ['name', 'icon', 'package'];
    }

    render() {
        const name = this.getAttribute('name') || 'App';
        const icon = this.getAttribute('icon') || 'box';
        
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 8px;
                    cursor: pointer;
                    user-select: none;
                    -webkit-tap-highlight-color: transparent;
                }
                .icon-container {
                    width: 56px;
                    height: 56px;
                    background: rgba(51, 65, 85, 0.6);
                    border: 1px solid rgba(100, 116, 139, 0.5);
                    border-radius: 16px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: all 0.2s ease;
                    position: relative;
                    overflow: hidden;
                }
                .icon-container::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 1px;
                    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.5), transparent);
                }
                :host(:active) .icon-container {
                    transform: scale(0.92);
                    background: rgba(6, 182, 212, 0.2);
                    border-color: rgba(6, 182, 212, 0.8);
                    box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
                }
                svg {
                    width: 24px;
                    height: 24px;
                    color: #e2e8f0;
                    stroke-width: 2;
                    transition: color 0.2s;
                }
                :host(:active) svg {
                    color: #22d3ee;
                }
                .label {
                    font-size: 11px;
                    color: #94a3b8;
                    text-align: center;
                    max-width: 70px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-family: 'JetBrains Mono', monospace;
                }
                .launching {
                    animation: launch 0.4s ease-out forwards;
                }
                @keyframes launch {
                    to {
                        transform: scale(3);
                        opacity: 0;
                    }
                }
            </style>
            <div class="icon-container">
                <i data-feather="${icon}"></i>
            </div>
            <span class="label">${name}</span>
        `;
        
        // Re-initialize feather icons for shadow DOM
        if (window.feather) {
            feather.replace({ 
                parent: this.shadowRoot,
                width: 24,
                height: 24
            });
        }
    }

    setupInteraction() {
        this.addEventListener('click', () => {
            const name = this.getAttribute('name');
            const package = this.getAttribute('package');
            
            this.dispatchEvent(new CustomEvent('launch-app', {
                bubbles: true,
                composed: true,
                detail: { name, package }
            }));
            
            // Visual feedback
            this.classList.add('launching');
            setTimeout(() => this.classList.remove('launching'), 400);
        });
    }
}

customElements.define('arch-app-icon', ArchAppIcon);