class CustomProxyForm extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                }
                .form-container {
                    background-color: rgba(31, 41, 55, 0.8);
                    border-radius: 0.75rem;
                    padding: 1.5rem;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                }
                .form-title {
                    font-size: 1.125rem;
                    font-weight: 600;
                    margin-bottom: 1rem;
                    display: flex;
                    align-items: center;
                }
                .form-icon {
                    margin-right: 0.5rem;
                    color: #60a5fa;
                }
                .input-group {
                    display: flex;
                    gap: 0.5rem;
                }
                .url-input {
                    flex: 1;
                    padding: 0.75rem 1rem;
                    border-radius: 0.5rem;
                    background-color: rgba(55, 65, 81, 0.8);
                    border: 1px solid rgba(75, 85, 99, 0.5);
                    color: white;
                    outline: none;
                    transition: border-color 0.2s;
                }
                .url-input:focus {
                    border-color: #60a5fa;
                }
                .proxy-toggle {
                    display: flex;
                    align-items: center;
                    margin-top: 1rem;
                }
                .toggle-label {
                    margin-left: 0.5rem;
                    font-size: 0.875rem;
                    color: rgba(156, 163, 175, 1);
                }
                .submit-btn {
                    background-color: #3b82f6;
                    color: white;
                    padding: 0.75rem 1.5rem;
                    border-radius: 0.5rem;
                    font-weight: 600;
                    border: none;
                    cursor: pointer;
                    transition: background-color 0.2s;
                }
                .submit-btn:hover {
                    background-color: #2563eb;
                }
            </style>
            <div class="form-container">
                <h3 class="form-title">
                    <i data-feather="navigation" class="form-icon"></i>
                    Browse Anywhere
                </h3>
                
                <div class="input-group">
                    <input 
                        type="text" 
                        class="url-input" 
                        placeholder="Enter URL (e.g. https://example.com)" 
                        id="url-input"
                    >
                    <button class="submit-btn" id="submit-btn">
                        Go
                    </button>
                </div>
                
                <div class="proxy-toggle">
                    <input type="checkbox" id="proxy-toggle" class="rounded">
                    <label for="proxy-toggle" class="toggle-label">
                        Use Proxy Server
                    </label>
                </div>
            </div>
        `;
        
        // Add event listeners
        const submitBtn = this.shadowRoot.getElementById('submit-btn');
        const urlInput = this.shadowRoot.getElementById('url-input');
        const proxyToggle = this.shadowRoot.getElementById('proxy-toggle');
        
        const handleSubmit = () => {
            let url = urlInput.value.trim();
            
            // Add https:// if not present
            if (!url.startsWith('http://') && !url.startsWith('https://')) {
                url = 'https://' + url;
            }
            
            // Dispatch custom event
            this.dispatchEvent(new CustomEvent('proxy-submit', {
                detail: {
                    url: url,
                    useProxy: proxyToggle.checked
                },
                bubbles: true,
                composed: true
            }));
        };
        
        submitBtn.addEventListener('click', handleSubmit);
        urlInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                handleSubmit();
            }
        });
    }
}

customElements.define('custom-proxy-form', CustomProxyForm);