# Création d'un module de visioconférence intégrable pour site web

import os
import json

# Structure simplifiée pour intégration web
web_integration = {
    "videoconf-widget/": {
        "videoconf-widget.js": """// Module de visioconférence intégrable
(function() {
    'use strict';

    class VideoConfWidget {
        constructor(config) {
            this.config = {
                containerId: config.containerId || 'videoconf-container',
                serverUrl: config.serverUrl || 'https://your-server.com',
                maxParticipants: config.maxParticipants || 100,
                enableRecording: config.enableRecording !== false,
                enableScreenShare: config.enableScreenShare !== false,
                theme: config.theme || 'dark',
                ...config
            };
            
            this.socket = null;
            this.localStream = null;
            this.peers = new Map();
            this.roomId = null;
            this.userId = this.generateId();
            this.isInitialized = false;
        }

        // Initialiser le widget
        async init() {
            if (this.isInitialized) return;
            
            // Créer l'interface
            this.createUI();
            
            // Connecter au serveur
            await this.connectToServer();
            
            this.isInitialized = true;
        }

        createUI() {
            const container = document.getElementById(this.config.containerId);
            if (!container) {
                console.error('Container not found:', this.config.containerId);
                return;
            }

            container.innerHTML = `
                <div class="vc-widget ${this.config.theme}">
                    <div class="vc-header">
                        <h3 class="vc-title">Visioconférence</h3>
                        <button class="vc-close" onclick="videoConf.close()">✕</button>
                    </div>
                    
                    <div class="vc-content">
                        <!-- Écran de connexion -->
                        <div class="vc-join-screen vc-screen active">
                            <input type="text" class="vc-input" id="vc-username" placeholder="Votre nom">
                            <input type="text" class="vc-input" id="vc-roomid" placeholder="Code de la réunion">
                            <button class="vc-btn vc-btn-primary" onclick="videoConf.joinRoom()">
                                Rejoindre la réunion
                            </button>
                            <button class="vc-btn vc-btn-secondary" onclick="videoConf.createRoom()">
                                Créer une réunion
                            </button>
                        </div>
                        
                        <!-- Écran de réunion -->
                        <div class="vc-meeting-screen vc-screen">
                            <div class="vc-video-grid" id="vc-video-grid">
                                <!-- Les vidéos seront ajoutées ici -->
                            </div>
                            
                            <div class="vc-controls">
                                <button class="vc-control-btn" id="vc-toggle-audio" onclick="videoConf.toggleAudio()">
                                    🎤
                                </button>
                                <button class="vc-control-btn" id="vc-toggle-video" onclick="videoConf.toggleVideo()">
                                    📹
                                </button>
                                ${this.config.enableScreenShare ? `
                                <button class="vc-control-btn" id="vc-share-screen" onclick="videoConf.toggleScreenShare()">
                                    🖥️
                                </button>` : ''}
                                ${this.config.enableRecording ? `
                                <button class="vc-control-btn" id="vc-record" onclick="videoConf.toggleRecording()">
                                    ⏺️
                                </button>` : ''}
                                <button class="vc-control-btn vc-leave" onclick="videoConf.leaveRoom()">
                                    📞
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `;

            // Injecter les styles si pas déjà présents
            if (!document.getElementById('vc-styles')) {
                const style = document.createElement('style');
                style.id = 'vc-styles';
                style.textContent = this.getStyles();
                document.head.appendChild(style);
            }
        }

        getStyles() {
            return `
                .vc-widget {
                    position: fixed;
                    bottom: 20px;
                    right: 20px;
                    width: 400px;
                    height: 600px;
                    background: #1a1a1a;
                    border-radius: 12px;
                    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
                    display: flex;
                    flex-direction: column;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                    z-index: 9999;
                    transition: all 0.3s ease;
                }

                .vc-widget.fullscreen {
                    width: 100vw;
                    height: 100vh;
                    bottom: 0;
                    right: 0;
                    border-radius: 0;
                }

                .vc-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 1rem;
                    border-bottom: 1px solid #2a2a2a;
                }

                .vc-title {
                    margin: 0;
                    color: #fff;
                    font-size: 1.2rem;
                }

                .vc-close {
                    background: none;
                    border: none;
                    color: #fff;
                    font-size: 1.5rem;
                    cursor: pointer;
                    padding: 0;
                    width: 30px;
                    height: 30px;
                }

                .vc-content {
                    flex: 1;
                    overflow: hidden;
                    position: relative;
                }

                .vc-screen {
                    display: none;
                    width: 100%;
                    height: 100%;
                    padding: 1rem;
                }

                .vc-screen.active {
                    display: flex;
                    flex-direction: column;
                }

                .vc-join-screen {
                    justify-content: center;
                    align-items: center;
                }

                .vc-input {
                    width: 100%;
                    max-width: 300px;
                    padding: 0.75rem;
                    margin-bottom: 1rem;
                    background: #2a2a2a;
                    border: 1px solid #3a3a3a;
                    border-radius: 8px;
                    color: #fff;
                    font-size: 1rem;
                }

                .vc-btn {
                    width: 100%;
                    max-width: 300px;
                    padding: 0.75rem;
                    margin-bottom: 0.5rem;
                    border: none;
                    border-radius: 8px;
                    font-size: 1rem;
                    cursor: pointer;
                    transition: all 0.3s;
                }

                .vc-btn-primary {
                    background: #4a90e2;
                    color: white;
                }

                .vc-btn-primary:hover {
                    background: #357abd;
                }

                .vc-btn-secondary {
                    background: transparent;
                    color: #4a90e2;
                    border: 1px solid #4a90e2;
                }

                .vc-meeting-screen {
                    padding: 0;
                }

                .vc-video-grid {
                    flex: 1;
                    display: grid;
                    gap: 10px;
                    padding: 10px;
                    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                    overflow-y: auto;
                }

                .vc-video-container {
                    position: relative;
                    background: #0a0a0a;
                    border-radius: 8px;
                    overflow: hidden;
                    aspect-ratio: 16/9;
                }

                .vc-video-container video {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

                .vc-video-container .vc-name-tag {
                    position: absolute;
                    bottom: 5px;
                    left: 5px;
                    background: rgba(0,0,0,0.7);
                    padding: 2px 8px;
                    border-radius: 4px;
                    font-size: 12px;
                    color: #fff;
                }

                .vc-controls {
                    display: flex;
                    justify-content: center;
                    gap: 10px;
                    padding: 15px;
                    background: #1a1a1a;
                    border-top: 1px solid #2a2a2a;
                }

                .vc-control-btn {
                    width: 45px;
                    height: 45px;
                    border-radius: 50%;
                    border: none;
                    background: #2a2a2a;
                    color: #fff;
                    cursor: pointer;
                    font-size: 20px;
                    transition: all 0.3s;
                }

                .vc-control-btn:hover {
                    background: #3a3a3a;
                }

                .vc-control-btn.active {
                    background: #4a90e2;
                }

                .vc-control-btn.vc-leave {
                    background: #e74c3c;
                }

                /* Mode responsive */
                @media (max-width: 768px) {
                    .vc-widget {
                        width: 100vw;
                        height: 100vh;
                        bottom: 0;
                        right: 0;
                        border-radius: 0;
                    }
                }
            `;
        }

        async connectToServer() {
            return new Promise((resolve) => {
                const script = document.createElement('script');
                script.src = this.config.serverUrl + '/socket.io/socket.io.js';
                script.onload = () => {
                    this.socket = io(this.config.serverUrl);
                    this.setupSocketListeners();
                    resolve();
                };
                document.head.appendChild(script);
            });
        }

        setupSocketListeners() {
            this.socket.on('user-connected', (userId, userName) => {
                this.createPeerConnection(userId, true);
            });

            this.socket.on('offer', async (offer, fromUserId) => {
                const pc = await this.createPeerConnection(fromUserId, false);
                await pc.setRemoteDescription(offer);
                const answer = await pc.createAnswer();
                await pc.setLocalDescription(answer);
                this.socket.emit('answer', answer, fromUserId, this.roomId);
            });

            this.socket.on('answer', async (answer, fromUserId) => {
                const pc = this.peers.get(fromUserId);
                if (pc) {
                    await pc.setRemoteDescription(answer);
                }
            });

            this.socket.on('ice-candidate', async (candidate, fromUserId) => {
                const pc = this.peers.get(fromUserId);
                if (pc) {
                    await pc.addIceCandidate(candidate);
                }
            });

            this.socket.on('user-disconnected', (userId) => {
                this.removeVideoElement(userId);
                const pc = this.peers.get(userId);
                if (pc) {
                    pc.close();
                    this.peers.delete(userId);
                }
            });
        }

        async createPeerConnection(userId, createOffer) {
            const pc = new RTCPeerConnection({
                iceServers: [
                    { urls: 'stun:stun.l.google.com:19302' }
                ]
            });

            this.peers.set(userId, pc);

            // Ajouter les tracks locaux
            if (this.localStream) {
                this.localStream.getTracks().forEach(track => {
                    pc.addTrack(track, this.localStream);
                });
            }

            pc.onicecandidate = (event) => {
                if (event.candidate) {
                    this.socket.emit('ice-candidate', event.candidate, userId, this.roomId);
                }
            };

            pc.ontrack = (event) => {
                this.addVideoElement(userId, event.streams[0], 'Participant');
            };

            if (createOffer) {
                const offer = await pc.createOffer();
                await pc.setLocalDescription(offer);
                this.socket.emit('offer', offer, userId, this.roomId);
            }

            return pc;
        }

        async joinRoom() {
            const username = document.getElementById('vc-username').value;
            const roomId = document.getElementById('vc-roomid').value;

            if (!username || !roomId) {
                alert('Veuillez remplir tous les champs');
                return;
            }

            this.roomId = roomId;

            try {
                // Obtenir l'accès à la caméra et au micro
                this.localStream = await navigator.mediaDevices.getUserMedia({
                    video: true,
                    audio: true
                });

                // Afficher l'écran de réunion
                document.querySelector('.vc-join-screen').classList.remove('active');
                document.querySelector('.vc-meeting-screen').classList.add('active');

                // Ajouter la vidéo locale
                this.addVideoElement(this.userId, this.localStream, username + ' (Vous)', true);

                // Rejoindre la salle
                this.socket.emit('join-room', roomId, this.userId, username);

            } catch (error) {
                console.error('Erreur:', error);
                alert('Impossible d\'accéder à la caméra/micro');
            }
        }

        createRoom() {
            const roomId = 'room-' + Math.random().toString(36).substr(2, 9);
            document.getElementById('vc-roomid').value = roomId;
            
            // Copier dans le presse-papier
            navigator.clipboard.writeText(roomId).then(() => {
                alert('Code de réunion copié: ' + roomId);
            });
        }

        addVideoElement(userId, stream, name, isLocal = false) {
            const container = document.createElement('div');
            container.className = 'vc-video-container';
            container.id = `vc-video-${userId}`;

            const video = document.createElement('video');
            video.srcObject = stream;
            video.autoplay = true;
            video.playsInline = true;
            if (isLocal) video.muted = true;

            const nameTag = document.createElement('div');
            nameTag.className = 'vc-name-tag';
            nameTag.textContent = name;

            container.appendChild(video);
            container.appendChild(nameTag);

            document.getElementById('vc-video-grid').appendChild(container);
        }

        removeVideoElement(userId) {
            const element = document.getElementById(`vc-video-${userId}`);
            if (element) {
                element.remove();
            }
        }

        toggleAudio() {
            if (this.localStream) {
                const audioTrack = this.localStream.getAudioTracks()[0];
                audioTrack.enabled = !audioTrack.enabled;
                
                const btn = document.getElementById('vc-toggle-audio');
                btn.classList.toggle('active', audioTrack.enabled);
                btn.textContent = audioTrack.enabled ? '🎤' : '🔇';
            }
        }

        toggleVideo() {
            if (this.localStream) {
                const videoTrack = this.localStream.getVideoTracks()[0];
                videoTrack.enabled = !videoTrack.enabled;
                
                const btn = document.getElementById('vc-toggle-video');
                btn.classList.toggle('active', videoTrack.enabled);
                btn.textContent = videoTrack.enabled ? '📹' : '📷';
            }
        }

        async toggleScreenShare() {
            // Implémenter le partage d'écran
            try {
                const screenStream = await navigator.mediaDevices.getDisplayMedia({
                    video: true
                });
                
                const videoTrack = screenStream.getVideoTracks()[0];
                const sender = this.peers.values().next().value?.getSenders()
                    .find(s => s.track?.kind === 'video');
                
                if (sender) {
                    sender.replaceTrack(videoTrack);
                }
                
                videoTrack.onended = () => {
                    this.stopScreenShare();
                };
                
                document.getElementById('vc-share-screen').classList.add('active');
            } catch (error) {
                console.error('Erreur partage écran:', error);
            }
        }

        stopScreenShare() {
            const videoTrack = this.localStream.getVideoTracks()[0];
            this.peers.forEach(pc => {
                const sender = pc.getSenders().find(s => s.track?.kind === 'video');
                if (sender) {
                    sender.replaceTrack(videoTrack);
                }
            });
            document.getElementById('vc-share-screen').classList.remove('active');
        }

        toggleRecording() {
            // Implémenter l'enregistrement
            const btn = document.getElementById('vc-record');
            btn.classList.toggle('active');
            btn.textContent = btn.classList.contains('active') ? '⏹️' : '⏺️';
        }

        leaveRoom() {
            // Nettoyer les connexions
            this.peers.forEach(pc => pc.close());
            this.peers.clear();
            
            if (this.localStream) {
                this.localStream.getTracks().forEach(track => track.stop());
            }
            
            // Retour à l'écran de connexion
            document.getElementById('vc-video-grid').innerHTML = '';
            document.querySelector('.vc-meeting-screen').classList.remove('active');
            document.querySelector('.vc-join-screen').classList.add('active');
            
            // Déconnecter du serveur
            if (this.socket) {
                this.socket.disconnect();
            }
        }

        close() {
            this.leaveRoom();
            const container = document.getElementById(this.config.containerId);
            if (container) {
                container.innerHTML = '';
            }
        }

        generateId() {
            return 'user-' + Math.random().toString(36).substr(2, 9);
        }
    }

    // Exposer globalement
    window.VideoConfWidget = VideoConfWidget;
})();""",

        "integration-example.html": """<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Site Web avec Visioconférence</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: #f5f5f5;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        h1 {
            color: #333;
        }
        
        .demo-buttons {
            margin-top: 30px;
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .demo-btn {
            padding: 15px 30px;
            background: #4a90e2;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .demo-btn:hover {
            background: #357abd;
        }
        
        .info-box {
            background: #f0f7ff;
            border: 1px solid #4a90e2;
            border-radius: 8px;
            padding: 20px;
            margin-top: 30px;
        }
        
        code {
            background: #f4f4f4;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎥 Visioconférence Intégrée</h1>
        
        <p>Bienvenue sur votre site web avec visioconférence intégrée ! Cette page démontre comment intégrer facilement la fonctionnalité de visioconférence.</p>
        
        <div class="demo-buttons">
            <button class="demo-btn" onclick="openVideoConf()">
                Ouvrir la Visioconférence
            </button>
            
            <button class="demo-btn" onclick="openVideoConfFullscreen()">
                Visioconférence Plein Écran
            </button>
            
            <button class="demo-btn" onclick="createMeeting()">
                Créer une Réunion Instantanée
            </button>
        </div>
        
        <div class="info-box">
            <h3>💡 Comment ça marche ?</h3>
            <p>La visioconférence est intégrée directement dans votre site web. Vos utilisateurs peuvent :</p>
            <ul>
                <li>Créer ou rejoindre des réunions sans quitter votre site</li>
                <li>Partager leur écran</li>
                <li>Enregistrer les réunions</li>
                <li>Inviter jusqu'à 100 participants</li>
            </ul>
            
            <h3>🔧 Intégration Simple</h3>
            <p>Ajoutez simplement ces lignes à votre site :</p>
            <pre><code>&lt;div id="videoconf-container"&gt;&lt;/div&gt;
&lt;script src="videoconf-widget.js"&gt;&lt;/script&gt;
&lt;script&gt;
    const videoConf = new VideoConfWidget({
        containerId: 'videoconf-container',
        serverUrl: 'https://your-server.com'
    });
&lt;/script&gt;</code></pre>
        </div>
    </div>

    <!-- Container pour la visioconférence -->
    <div id="videoconf-container"></div>

    <!-- Script du widget -->
    <script src="videoconf-widget.js"></script>
    
    <script>
        let videoConf = null;

        function openVideoConf() {
            if (!videoConf) {
                videoConf = new VideoConfWidget({
                    containerId: 'videoconf-container',
                    serverUrl: 'https://localhost:3000', // Remplacer par votre serveur
                    theme: 'dark'
                });
                videoConf.init();
            }
        }

        function openVideoConfFullscreen() {
            if (!videoConf) {
                videoConf = new VideoConfWidget({
                    containerId: 'videoconf-container',
                    serverUrl: 'https://localhost:3000',
                    theme: 'dark'
                });
                videoConf.init();
            }
            
            // Ajouter la classe fullscreen
            setTimeout(() => {
                document.querySelector('.vc-widget').classList.add('fullscreen');
            }, 100);
        }

        function createMeeting() {
            openVideoConf();
            setTimeout(() => {
                videoConf.createRoom();
            }, 500);
        }
    </script>
</body>
</html>""",

        "README-INTEGRATION.md": """# 📹 Guide d'Intégration - Widget Visioconférence

## 🚀 Installation Rapide

### 1. Inclure le Widget

Ajoutez ces lignes dans votre page HTML :

```html
<!-- Container pour la visioconférence -->
<div id="videoconf-container"></div>

<!-- Script du widget -->
<script src="path/to/videoconf-widget.js"></script>