class CustomImageEditor extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: none;
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: rgba(0,0,0,0.8);
                    z-index: 1000;
                    align-items: center;
                    justify-content: center;
                }
                
                .editor-container {
                    background-color: white;
                    border-radius: 1rem;
                    width: 90%;
                    max-width: 1000px;
                    max-height: 90vh;
                    overflow: auto;
                }
                
                .tool-button {
                    width: 40px;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 0.5rem;
                    cursor: pointer;
                    transition: all 0.2s;
                }
                
                .tool-button:hover {
                    background-color: #f3f4f6;
                }
                
                .tool-button.active {
                    background-color: #e5e7eb;
                }
            </style>
            <div class="editor-container p-6">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-xl font-bold">Image Editor</h3>
                    <div class="flex space-x-4">
                <button id="close-editor" class="text-gray-500 hover:text-gray-700 flex items-center p-2">
                    <i data-feather="x" class="mr-2"></i>
                    Exit Editor
                </button>
</div>
                </div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <div class="lg:col-span-2 bg-gray-100 rounded-lg overflow-hidden">
                        <canvas id="editor-canvas" class="w-full h-full"></canvas>
                    </div>
                    
                    <div>
                        <h4 class="font-semibold mb-4">Tools</h4>
                        
                        <div class="grid grid-cols-4 gap-2 mb-6">
                            <div class="tool-button" data-tool="select">
                                <i data-feather="move"></i>
                            </div>
                            <div class="tool-button" data-tool="crop">
                                <i data-feather="crop"></i>
                            </div>
                            <div class="tool-button" data-tool="brush">
                                <i data-feather="edit-3"></i>
                            </div>
                            <div class="tool-button" data-tool="text">
                                <i data-feather="type"></i>
                            </div>
                            <div class="tool-button" data-tool="filter">
                                <i data-feather="sliders"></i>
                            </div>
                            <div class="tool-button" data-tool="face">
                                <i data-feather="smile"></i>
                            </div>
                            <div class="tool-button" data-tool="undo">
                                <i data-feather="rotate-ccw"></i>
                            </div>
                            <div class="tool-button" data-tool="redo">
                                <i data-feather="rotate-cw"></i>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <label class="block text-gray-700 mb-2">Adjustments</label>
                            <div class="space-y-4">
                                <div>
                                    <label class="text-sm text-gray-500">Brightness</label>
                                    <input type="range" class="w-full">
                                </div>
                                <div>
                                    <label class="text-sm text-gray-500">Contrast</label>
                                    <input type="range" class="w-full">
                                </div>
                                <div>
                                    <label class="text-sm text-gray-500">Saturation</label>
                                    <input type="range" class="w-full">
                                </div>
                            </div>
                        </div>
                        
                        <button class="w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition">
                            Apply Changes
                        </button>
                    </div>
                </div>
            </div>
        `;
        
        // Add event listeners
        this.shadowRoot.getElementById('close-editor').addEventListener('click', () => {
            this.style.display = 'none';
        });
        
        // Tool selection
        const toolButtons = this.shadowRoot.querySelectorAll('.tool-button');
        toolButtons.forEach(button => {
            button.addEventListener('click', () => {
                toolButtons.forEach(btn => btn.classList.remove('active'));
                button.classList.add('active');
                // In a real app, this would activate the selected tool
            });
        });
    }
}

customElements.define('custom-image-editor', CustomImageEditor);