class CustomPreviewPanel extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .panel {
                    background: white;
                    border-left: 4px solid #3b82f6;
                }
                .panel-header {
                    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
                    color: white;
                    padding: 1rem;
                }
                .status-card {
                    border-radius: 0.5rem;
                    padding: 1rem;
                    margin-bottom: 0.75rem;
                }
                .status-card.blue {
                    background: linear-gradient(to bottom right, #eff6ff, #dbeafe);
                    border: 1px solid #bfdbfe;
                }
                .status-card.green {
                    background: linear-gradient(to bottom right, #ecfdf5, #d1fae5);
                    border: 1px solid #a7f3d0;
                }
            </style>
            <div class="panel w-96 flex flex-col overflow-hidden">
                <div class="panel-header">
                    <div class="flex items-center justify-between">
                        <h3 class="font-bold text-lg">👁️ Aperçu</h3>
                        <div class="flex gap-2">
                            <button class="px-3 py-1 bg-white bg-opacity-20 rounded hover:bg-opacity-30 text-sm">
                                Actualiser
                            </button>
                            <button class="px-3 py-1 bg-white bg-opacity-20 rounded hover:bg-opacity-30 text-sm">
                                Ouvrir
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="flex-1 overflow-y-auto p-4 space-y-3">
                    <div class="status-card blue">
                        <h4 class="font-semibold text-gray-800 mb-2">Projet en cours</h4>
                        <p class="text-sm text-gray-600">Module: <span class="font-medium" id="current-module">Génération Rapide</span></p>
                        <p class="text-sm text-gray-600 mt-1">Thème: <span class="font-medium">Brand Blue</span></p>
                        <p class="text-sm text-gray-600">Industrie: <span class="font-medium">App Hosting</span></p>
                    </div>
                    
                    <div class="status-card green">
                        <h4 class="font-semibold text-green-900 mb-2">✓ Statut</h4>
                        <p class="text-sm text-green-700">Interface prête pour génération</p>
                        <p class="text-xs text-green-600 mt-2">Attendant action utilisateur...</p>
                    </div>

                    <div class="status-card blue">
                        <h4 class="font-semibold text-blue-900 mb-2">🔧 Configuration</h4>
                        <p class="text-xs text-blue-700 space-y-1">
                            <div>• API Prêt: Oui</div>
                            <div>• Base de données: Configurée</div>
                            <div>• Déploiement: Disponible</div>
                        </p>
                    </div>
                </div>
            </div>
        `;
    }

    connectedCallback() {
        // Listen for module changes
        document.addEventListener('module-changed', (e) => {
            this.shadowRoot.getElementById('current-module').textContent = e.detail.moduleName;
        });
    }
}

customElements.define('custom-preview-panel', CustomPreviewPanel);