@extends('layout.app')

@section('content')
    <!-- Laravel génère le lien Jitsi et on passe le nom de la réunion au JavaScript -->
    @php
        $roomName = 'reunion-' . round(microtime(true) * 1000);
    @endphp
    <script src="https://meet.jit.si/external_api.js"></script>
    <style>
        .form-body, textarea, input, select{
            font-size: 0.9rem !important;
        }
        .form-control-textarea{
            height: 30px !important;
        }
        .tox-tinymce{
            height: 250px !important;
        }
        .mce-content-body{
            font-size: 0.9rem !important;
        }
        /* Animation bounce pour le bouton minuteur */
        @keyframes bounceButton {
            0%, 100% {
                transform: translateY(0) scale(1);
            }
            25% {
                transform: translateY(-5px) scale(1.05);
            }
            50% {
                transform: translateY(0) scale(1);
            }
            75% {
                transform: translateY(-3px) scale(1.02);
            }
        }
        #liveTimerBtn.timer-bounce-active {
            animation: bounceButton 1.5s infinite;
        }
        #liveTimerBtn {
            position: relative;
            transition: transform 0.2s ease;
        }
        /* Style pour le tooltip avec animation bounce */
        @keyframes bounceTooltip {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-8px);
            }
        }
        .tooltip.timer-tooltip-bounce .tooltip-inner {
            animation: bounceTooltip 1s infinite;
        }
        .tooltip.timer-tooltip-bounce {
            pointer-events: none;
        }
    </style>
    <div class="page-content">
        <div class="page-bar">
            <div class="page-title-breadcrumb">
                <div class=" pull-left">
                    <div class="page-title">
                    <button id="liveTimerBtn" class="btn btn-danger">
                    <i id="liveTimerIcon" class="fa fa-play"></i> Minuteur 00:00
</button>                        Téléconsultation · Hôte : <b>{{auth()->user()->proName()}}</b>, Patient : <b id="patient_name"></b></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-sm-12">
                <div class="card card-box">
                    <div class="card-head">
                        <button id = "panel-button"
                                class = "mdl-button mdl-js-button mdl-button--icon pull-right"
                                data-upgraded = ",MaterialButton">
                            <i class = "material-icons">more_vert</i>
                        </button>
                        {{--                        <ul class = "mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"--}}
                        {{--                            data-mdl-for = "panel-button">--}}
                        {{--                            <li class = "mdl-menu__item"><i class="material-icons">assistant_photo</i>Action</li>--}}
                        {{--                            <li class = "mdl-menu__item"><i class="material-icons">print</i>Another action</li>--}}
                        {{--                            <li class = "mdl-menu__item"><i class="material-icons">favorite</i>Something else here</li>--}}
                        {{--                        </ul>--}}
                    </div>
                    <form action="{{ route('teleconsultations.store') }}" id="mainForm" method="POST" id="form_sample_1" enctype="multipart/form-data">

                    <div class="card-body row" id="bar-parent">
                            @csrf
                            <div class="col-8">
                                <div class="form-body">
                                <div class="">


                                    <div class="row">
                                        <select class="form-control col-4" name="patient_id" id="patientSelect" required>
                                            <option value="">Selectionnez le Patient</option>
                                            @foreach($patients as $patient)
                                                <option value="{{ $patient->id }}"
                                                        @if(isset($patientX) AND $patientX->id == $patient->id) selected @endif
                                                        data-id="{{ $patient->id }}"
                                                        data-custom_id="{{ $patient->custom_id }}"
                                                        data-assured="{{ $patient->assured }}"
                                                        data-name="{{ $patient->name }}"
                                                        data-lastname="{{ $patient->lastname() }}"
                                                        data-firstname="{{ $patient->firstname() }}"
                                                        data-email="{{ $patient->email }}"
                                                        data-birth="{{ $patient->birth }}"
                                                        data-sex="{{ $patient->sex }}"
                                                        data-tel="{{ $patient->tel }}"
                                                        data-job="{{ $patient->job }}"
                                                        data-antecedent="{{ $patient->antecedent }}"
                                                        data-pathology="{{ $patient->pathology }}"
                                                        data-weight="{{ $patient->weight }}"
                                                        data-size="{{ $patient->size }}"
                                                        data-group_id="{{ $patient->group_id }}"
                                                        data-address="{{ $patient->address }}"
                                                        data-assured_social_percent="{{ $patient->assured_social_percent }}"
                                                        data-assured_completed_percent="{{ $patient->assured_completed_percent }}"
                                                >
                                                    {{ $patient->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <div class="mb-2 ml-2 col">
                                            <a href="#" class="btn btn-light btn-sm editPatientBtn" id="openEditModal" style="font-size: 1rem" data-toggle="tooltip" data-placement="top" title="Modifier les infos du patient">
                                                <i class="hgi-stroke hgi-edit-02"></i>
                                            </a>

                                            <a href="#" data-target="#patientModal" data-toggle="modal" class="btn btn-light btn-sm" style="font-size: 1.2rem" data-placement="top" title="Ajouter un nouveau patient">+</a>
                                            <a href="#" id="copyEmailBtn" class="btn btn-light btn-sm small"  data-toggle="tooltip" data-placement="top" title="Copier l'email du patient" style="padding-top: 8px; padding-bottom: 8px;">
                                                <i id="copyIcon" class="fa fa-copy"></i>
                                                <span id="patient_email" class="small">Sélectionnez un patient</span>
                                            </a>
                                        </div>

                                    </div>
                                </div>
                                </div>
                                <div id="live-container" style="position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 20px">
                                    <div id="jitsiContainer" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: 20px"></div>
                                </div>
                            </div>
                            <div class="col-4">
                                    <div class="form-body">
                                        <input type="hidden" name="user_id" value="{{auth()->user()->id}}">
                                        <input type="hidden" name="duration" value="0">
                                        {{--                                @endif--}}

                                        <div class="row">
                                            <div class="col">
                                                <label class="control-label ">Température (C)</label>
                                                <div class="row">
                                                    <input type="text" name="temperature" placeholder="39" class="form-control" />
                                                </div>
                                            </div>
                                            <div class="col ml-2">
                                                <label class="control-label ">Montant Total ({!! htmlentities(auth()->user()->company->currency_symbol, ENT_NOQUOTES, 'UTF-8') !!})
                                                    <span class="required"> * </span>
                                                </label>
                                                <div class="row">
                                                    <input type="text" name="amount" placeholder="3500" class="form-control" required/>
                                                </div>
                                            </div>
                                        </div>
                                        <br>
                                        <div class="">
                                            <div class="row">
                                                <label class="control-label">Diagnostic
                                                    <i class="fa fa-info-circle text-secondary" data-toggle="tooltip" data-title="Vous pouvez y préciser le diagnostic, le verdict, des éléments clés, etc"></i>
                                                    <span class="required"> * </span>
                                                </label>
                                                @if(auth()->user()->subGold())
                                                    <div class="ml-3">
                                                        <span class="nav-link btn btn-sm btn-light font-weight-bolder font-size-20 countdown" style="display: none; font-size: 11px !important;"></span>
                                                        <i class="fa fa-microphone btn btn-sm btn-light" id="start-btn" style="font-size: 11px !important;"></i>
                                                        <i class="fa fa-microphone fa-beat btn btn-sm btn-light text-danger" id="stop-btn" style="display: none; font-size: 11px !important;"></i>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>

                                        <div class="row mt-2">
                                            <textarea name="description" class="form-control-textarea" id="description" cols="30" rows="10" style="height: 20%"></textarea>
                                        </div>

                                        <br>
                                        <div class="">
                                            <div class="row">
                                                <label class="control-label ">Ordonnance
                                                    <i class="fa fa-info-circle text-secondary" data-toggle="tooltip" data-title="Décrivez en détails l'ordonnance du patient"></i>
                                                </label>
                                                <div class="ml-3">
                                                <a href="javascript:void(0)" class="btn ai btn-light ai-button" style="font-size: 9px" id="generate-prescription">
                                                <span class="ai-orb"></span>
                                                <span class="ai-label">
                                                    <i class="fa fa-user-nurse ai-icon" style="font-size: 12px"></i>
                                                    Docteur IA
                                                </span>
                                                @if(auth()->user()->subStandard() AND !auth()->user()->subGold())
                                                    <span class="ai-credits">(<span id="ai-credits">{{auth()->user()->company->ai_credits}}</span> crédits restants)</span>
                                                @endif
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-light ai ai-loading disabled" style="display: none; font-size: 10px" id="generate-prescription-loading" disabled>
                                                <span class="ai-loader">
                                                    <span class="ai-loader-dot"></span>
                                                    <span class="ai-loader-dot"></span>
                                                    <span class="ai-loader-dot"></span>
                                                </span>
                                                <span class="ai-thinking">Docteur IA réfléchit<span class="ai-dots"></span></span>
                                            </a>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row mt-2">
                                            <textarea name="prescription" class="form-control-textarea" id="prescription" cols="30" rows="10"></textarea>
                                        </div>



                                        {{--                                    <span class="text-primary font-weight-bolder font-size-20 countdown"></span>--}}
                                            {{--                                    <a href="javascript:void(0)" id="start-btn"><i class="fa fa-microphone text-warning"></i></a>--}}
                                            {{--                                    <a href="javascript:void(0)" id="stop-btn" class="display-none"><i class="fa fa-microphone text-danger fa-beat"></i></a>--}}
                                        </div>

                                        {{--                                <div class=" row">--}}
                                        {{--                                    <label class="control-label ">Produits--}}

                                        {{--                                    </label>--}}
                                        {{--                                    <div class="">--}}
                                        {{--                                        <select class="form-control " name="product_id[]" style="width: 78%; display: inline-block">--}}
                                        {{--                                            <option value="">Selectionnez</option>--}}
                                        {{--                                            @foreach($products as $product)--}}
                                        {{--                                                <option value="{{ $product->id }}">{{ $product->name }}</option>--}}
                                        {{--                                            @endforeach--}}
                                        {{--                                        </select>--}}
                                        {{--                                        <input type="number" class="form-control " name="qte[]" value="1"  style="width: 20%;  display: inline-block">--}}
                                        {{--                                    </div>--}}
                                        {{--                                    <a href="#" id="btn-command" class="nav-link btn btn-light btn-sm">+</a>--}}
                                        {{--                                </div>--}}
                                        <div id="command-bloc">

                                        </div>
                                        <template id="command">
                                            <div class=" row">
                                                <label class="control-label "></label>
                                                <div class="">
                                                    <select class="form-control " name="product_id[]" style="width: 78% ; display: inline-block">
                                                        <option value="">Selectionnez</option>
                                                        @foreach($products as $product)
                                                            <option value="{{ $product->id }}">{{ $product->name }}</option>
                                                        @endforeach
                                                    </select>
                                                    <input type="number" class="form-control " name="qte[]" value="1"  style="width: 20%;  display: inline-block">
                                                </div>
                                                <a href="#" class="delete-command nav-link btn btn-primary btn-sm" style="padding: 7px 18px !important; font-size: 20px;">-</a>
                                            </div>
                                        </template>


                                    </div>

                        <div class="form-actions col-12 d-flex flex-column justify-content-center align-items-center" style="font-size: 0.9rem;">
                            <div class="form-group row d-flex justify-content-center align-items-center">
                                <span>
                                    <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="stayToggle">
                                        <input type="checkbox" id="stayToggle" class="mdl-switch__input" name="send_mail" checked>
                                    </label>
                                </span>
                                <span class="ml-3">
                                    Envoyer au patient l'email de rapport cette téléconsultation
                                </span>
                            </div>
                            <div class="row mt-3">
                                <div>
                                    <button type="submit" id="save" class="btn btn-primary">Enregistrer</button>
                                    <a href="{{ url()->previous() }}" type="button" class="btn btn-default">Annuler</a>
                                </div>
                            </div>
                        </div>



                    </div>
                    </form>

                   </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>

        let subStandardOnly = {!! json_encode(auth()->user()->subStandard() && !auth()->user()->subGold()) !!}
        let meetingStartTime = null;
        let meetingDuration = 0;
        let jitsiApi = null;
        let timerInterval = null;
        let isMeetingActive = false;
        let timerState = 'stopped'; // stopped | running | paused

        if(subStandardOnly)
            checkAiCredits()

        // Initialisation de Jitsi Meet avec l'API
        const domain = 'meet.jit.si';
        const options = {
            roomName: '{{ $roomName }}',
            width: '100%',
            height: '100%',
            parentNode: document.querySelector('#jitsiContainer'),
            configOverwrite: {
                startWithAudioMuted: false,
                startWithVideoMuted: false,
                prejoinPageEnabled: false
            },
            interfaceConfigOverwrite: {
                TOOLBAR_BUTTONS: [
                    'microphone', 'camera', 'closedcaptions', 'desktop', 'fullscreen',
                    'fodeviceselection', 'hangup', 'chat', 'recording',
                    'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
                    'videoquality', 'filmstrip', 'feedback', 'stats', 'shortcuts',
                    'tileview', 'videobackgroundblur', 'download', 'help', 'mute-everyone', 'security', 'invite', 'addpeople',
                ],
                SHOW_JITSI_WATERMARK: false,
                SHOW_WATERMARK_FOR_GUESTS: false,
                SHOW_POWERED_BY: false
            }
        };

        jitsiApi = new JitsiMeetExternalAPI(domain, options);

        // Variables pour suivre les participants
        let participantCount = 0;
        let previousParticipantCount = 0;
        let isHostJoined = false;
        let tooltipShown = false;
        let tooltipTimeout = null;
        let hasAutoStarted = false; // Pour éviter de redémarrer plusieurs fois
        let pollingInterval = null; // Intervalle pour le polling des participants

        // Fonction pour obtenir le nombre réel de participants - Méthode 1: getNumberOfParticipants
        function getParticipantsMethod1() {
            try {
                // Essayer getNumberOfParticipants si disponible
                if (typeof jitsiApi.getNumberOfParticipants === 'function') {
                    const count = jitsiApi.getNumberOfParticipants();
                    if (count !== null && count !== undefined && count > 0) {
                        return count;
                    }
                }
                return null;
            } catch (e) {
                console.log('Méthode 1 (getNumberOfParticipants) échouée:', e);
                return null;
            }
        }

        // Fonction pour obtenir le nombre réel de participants - Méthode 2: getParticipantsInfo
        function getParticipantsMethod2() {
            try {
                const participants = jitsiApi.getParticipantsInfo();
                // Vérifier si le tableau n'est pas vide
                if (participants && Array.isArray(participants) && participants.length > 0) {
                    return participants.length + 1; // +1 pour l'hôte
                }
                // Si le tableau est vide mais que l'API existe, on retourne null pour essayer d'autres méthodes
                return null;
            } catch (e) {
                console.log('Méthode 2 (getParticipantsInfo) échouée:', e);
                return null;
            }
        }

        // Fonction pour obtenir le nombre réel de participants - Méthode 3: executeCommand avec différentes commandes
        function getParticipantsMethod3() {
            try {
                if (typeof jitsiApi.executeCommand === 'function') {
                    // Essayer différentes commandes
                    const commands = ['getParticipantsInfo', 'getNumberOfParticipants', 'getParticipants'];
                    for (let cmd of commands) {
                        try {
                            const result = jitsiApi.executeCommand(cmd);
                            if (result !== null && result !== undefined) {
                                if (Array.isArray(result) && result.length > 0) {
                                    return result.length + 1;
                                } else if (typeof result === 'number' && result > 0) {
                                    return result;
                                }
                            }
                        } catch (e) {
                            // Continuer avec la commande suivante
                        }
                    }
                }
                return null;
            } catch (e) {
                console.log('Méthode 3 (executeCommand) échouée:', e);
                return null;
            }
        }

        // Fonction pour obtenir le nombre réel de participants - Méthode 4: Accès direct à l'iframe
        function getParticipantsMethod4() {
            try {
                // Essayer d'accéder à l'iframe créé par Jitsi
                const container = document.querySelector('#jitsiContainer');
                const iframe = container ? container.querySelector('iframe') : null;
                
                if (iframe && iframe.contentWindow) {
                    // Essayer d'accéder à l'objet Jitsi dans l'iframe
                    // Note: Cela peut ne pas fonctionner à cause de la politique de même origine
                    try {
                        const jitsiWindow = iframe.contentWindow;
                        if (jitsiWindow.APP && jitsiWindow.APP.conference) {
                            const participants = jitsiWindow.APP.conference.getParticipants();
                            if (participants && participants.length > 0) {
                                return participants.length + 1;
                            }
                        }
                    } catch (e) {
                        // Politique de même origine - on ne peut pas accéder
                        console.log('Méthode 4 (accès iframe) bloquée par CORS');
                    }
                }
                return null;
            } catch (e) {
                console.log('Méthode 4 (accès iframe) échouée:', e);
                return null;
            }
        }

        // Fonction pour obtenir le nombre réel de participants - Méthode 5: Compter les éléments vidéo dans l'iframe
        function getParticipantsMethod5() {
            try {
                const container = document.querySelector('#jitsiContainer');
                const iframe = container ? container.querySelector('iframe') : null;
                
                if (iframe && iframe.contentDocument) {
                    try {
                        // Essayer de compter les éléments vidéo actifs dans l'iframe
                        const videos = iframe.contentDocument.querySelectorAll('video');
                        if (videos && videos.length > 0) {
                            // Chaque participant a généralement un élément vidéo
                            return videos.length;
                        }
                    } catch (e) {
                        console.log('Méthode 5 (comptage vidéos) bloquée par CORS');
                    }
                }
                return null;
            } catch (e) {
                console.log('Méthode 5 (comptage vidéos) échouée:', e);
                return null;
            }
        }

        // Fonction principale pour obtenir le nombre réel de participants
        function updateParticipantCount() {
            let newCount = null;
            let methodUsed = '';
            
            // Essayer toutes les méthodes dans l'ordre
            const methods = [
                { name: 'getNumberOfParticipants', func: getParticipantsMethod1 },
                { name: 'getParticipantsInfo', func: getParticipantsMethod2 },
                { name: 'executeCommand', func: getParticipantsMethod3 },
                { name: 'accès iframe', func: getParticipantsMethod4 },
                { name: 'comptage vidéos', func: getParticipantsMethod5 }
            ];
            
            for (let method of methods) {
                try {
                    newCount = method.func();
                    if (newCount !== null && newCount > 0) {
                        methodUsed = method.name;
                        console.log(`✅ Méthode ${method.name} a fonctionné: ${newCount} participants`);
                        break;
                    }
                } catch (e) {
                    console.log(`Erreur avec ${method.name}:`, e);
                }
            }
            
            // Si aucune méthode n'a fonctionné, on utilise le suivi manuel basé sur les événements
            if (newCount === null || newCount === 1) {
                // Utiliser le compteur manuel basé sur les événements
                // Si le compteur manuel est à 0, on considère qu'il y a au moins l'hôte
                newCount = participantCount > 0 ? participantCount : 1;
                methodUsed = 'suivi manuel (événements)';
                console.log(`⚠️ Aucune méthode API n'a fonctionné, utilisation du suivi manuel: ${newCount}`);
            }
            
            // Mettre à jour le compteur manuel si on a détecté plus de participants
            if (newCount > participantCount) {
                participantCount = newCount;
                console.log(`📈 Compteur manuel mis à jour: ${participantCount}`);
            }
            
            console.log(`📊 Participants détectés via ${methodUsed}: ${newCount} (compteur manuel: ${participantCount})`);
            
            // Détecter les changements
            if (newCount !== previousParticipantCount) {
                const diff = newCount - previousParticipantCount;
                
                    if (diff > 0) {
                        // Nouveau participant arrivé
                        console.log(`🆕 Nouveau participant détecté via polling (${methodUsed})! Total: ${newCount}`);
                        
                        // Si c'est le premier visiteur et le minuteur n'est pas démarré
                        if (newCount >= 2 && timerState === 'stopped' && !hasAutoStarted) {
                            checkIfShouldStartTimer();
                        }
                    } else if (diff < 0) {
                        // Participant parti
                        console.log(`👋 Participant parti détecté via polling (${methodUsed})! Total: ${newCount}`);
                    }
                
                previousParticipantCount = newCount;
            }
            
            participantCount = newCount;
        }

        // Démarrer le polling périodique pour détecter les participants
        function startParticipantPolling() {
            if (pollingInterval) {
                clearInterval(pollingInterval);
            }
            
            // Vérifier toutes les 2 secondes - NE PAS ATTENDRE isHostJoined car l'événement ne se déclenche peut-être jamais
            pollingInterval = setInterval(() => {
                if (jitsiApi) {
                    updateParticipantCount();
                }
            }, 2000);
            
            console.log('✅ Polling des participants démarré (vérification toutes les 2 secondes)');
        }

        // Arrêter le polling
        function stopParticipantPolling() {
            if (pollingInterval) {
                clearInterval(pollingInterval);
                pollingInterval = null;
                console.log('⏹️ Polling des participants arrêté');
            }
        }

        // Démarrer le polling immédiatement après l'initialisation (sans attendre l'événement)
        // Car l'événement videoConferenceJoined ne se déclenche peut-être jamais avec l'iframe
        setTimeout(() => {
            console.log('🚀 Démarrage automatique du polling (sans attendre l\'événement)');
            startParticipantPolling();
            // Faire une première vérification
            updateParticipantCount();
            
            // Afficher un rappel visuel (tooltip) après 5 secondes si le minuteur n'est pas démarré
            setTimeout(() => {
                if (timerState === 'stopped' && !hasAutoStarted) {
                    showTimerTooltip();
                    console.log('💡 Rappel visuel (tooltip) affiché - Le minuteur peut être démarré manuellement');
                }
            }, 5000);
        }, 3000); // Attendre 3 secondes que Jitsi soit chargé

        // Écouter l'événement quand l'hôte rejoint la conférence (si jamais il se déclenche)
        jitsiApi.addListener('videoConferenceJoined', () => {
            console.log('Hôte a rejoint la conférence');
            isHostJoined = true;
            participantCount = 1;
            previousParticipantCount = 1;
            
            // Le polling est déjà démarré, juste mettre à jour
            updateParticipantCount();
            checkIfShouldStartTimer();
        });

        // Écouter l'événement quand un participant rejoint
        jitsiApi.addListener('participantJoined', (participant) => {
            console.log('Participant rejoint (événement):', participant);
            const participantName = participant.displayName || participant.name || participant.participantId || 'Inconnu';
            const participantId = participant.id || participant.participantId || 'N/A';
            
            // Incrémenter le compteur manuel
            participantCount++;
            previousParticipantCount = participantCount;
            
            // Vérifier si on doit démarrer le minuteur ou afficher le tooltip
            checkIfShouldStartTimer();
        });

        // Écouter l'événement quand un participant quitte
        jitsiApi.addListener('participantLeft', (participant) => {
            console.log('Participant quitté (événement):', participant);
            const participantName = participant.displayName || participant.name || participant.participantId || 'Inconnu';
            const participantId = participant.id || participant.participantId || 'N/A';
            
            // Décrémenter le compteur manuel
            participantCount = Math.max(1, participantCount - 1); // Minimum 1 (l'hôte)
            previousParticipantCount = participantCount;
            
            // Si plus de participants (sauf l'hôte), masquer le tooltip
            if (participantCount <= 1) {
                hideTimerTooltip();
            }
        });

        // Écouter d'autres événements utiles pour le débogage
        jitsiApi.addListener('readyToClose', () => {
            console.log('Jitsi prêt à fermer');
            stopParticipantPolling();
        });

        // Écouter les erreurs
        jitsiApi.addListener('error', (error) => {
            console.error('Erreur Jitsi:', error);
        });

        // Écouter l'événement de fin de conférence
        jitsiApi.addListener('videoConferenceLeft', () => {
            console.log('Hôte a quitté la conférence');
            stopParticipantPolling();
        });

        // Essayer aussi d'écouter tous les événements disponibles pour le débogage
        const allEvents = [
            'participantJoined', 
            'participantLeft', 
            'videoConferenceJoined', 
            'videoConferenceLeft',
            'participantRoleChanged',
            'displayNameChange',
            'audioMuteStatusChanged',
            'videoMuteStatusChanged',
            'conferenceJoined', // Alternative à videoConferenceJoined
            'conferenceLeft',
            'participantKickedOut',
            'endpointTextMessageReceived'
        ];

        allEvents.forEach(eventName => {
            try {
                jitsiApi.addListener(eventName, (data) => {
                    console.log(`📡 Événement ${eventName}:`, data);
                    // Alerter pour les événements importants
                    if (eventName === 'conferenceJoined' || eventName === 'videoConferenceJoined') {
                        isHostJoined = true;
                    }
                });
            } catch (e) {
                console.log(`⚠️ Impossible d'écouter l'événement ${eventName}:`, e);
            }
        });

        // Écouter aussi les messages postMessage de l'iframe (si possible)
        window.addEventListener('message', (event) => {
            // Filtrer les messages de Jitsi
            if (event.origin.includes('meet.jit.si') || event.origin.includes('jitsi')) {
                console.log('📨 Message reçu de Jitsi:', event.data);
                // Essayer d'extraire des informations sur les participants
                if (event.data && typeof event.data === 'object') {
                    if (event.data.type === 'participant-joined' || event.data.participantJoined) {
                        updateParticipantCount();
                    }
                }
            }
        });

        // Fonction pour vérifier si on doit démarrer le minuteur
        function checkIfShouldStartTimer() {
            // Si le minuteur est déjà en cours, ne rien faire
            if (timerState !== 'stopped') {
                return;
            }
            
            // Si c'est le premier visiteur (après l'hôte) et qu'on n'a pas encore démarré automatiquement
            if (participantCount >= 2 && !hasAutoStarted) {
                // Déclencher automatiquement le minuteur
                console.log('Déclenchement automatique du minuteur - Premier visiteur arrivé');
                meetingStartTime = new Date();
                timerState = 'running';
                isMeetingActive = true;
                hasAutoStarted = true;
                startTimer();
                
                // Masquer le tooltip et l'animation bounce dès que le minuteur démarre
                hideTimerTooltip();
            } else if (participantCount > 1 && !hasAutoStarted) {
                // Afficher un tooltip animé pour rappeler de démarrer le minuteur
                showTimerTooltip();
            }
        }

        // Fonction pour afficher le tooltip animé
        function showTimerTooltip() {
            if (tooltipShown) return; // Éviter les doublons
            
            tooltipShown = true;
            const $btn = $('#liveTimerBtn');
            
            // Ajouter l'animation bounce au bouton
            $btn.addClass('timer-bounce-active');
            
            // Initialiser le tooltip Bootstrap s'il n'existe pas déjà
            if (!$btn.data('bs.tooltip') && typeof $.fn.tooltip !== 'undefined') {
                $btn.tooltip({
                    placement: 'top',
                    title: 'Veuillez démarrer le minuteur dès que votre patient rejoint la réunion',
                    trigger: 'manual',
                    animation: true,
                    html: false
                });
            } else if ($btn.data('bs.tooltip')) {
                // Mettre à jour le message si le tooltip existe déjà
                $btn.attr('data-original-title', 'Veuillez démarrer le minuteur dès que votre patient rejoint la réunion');
            }
            
            // Afficher le tooltip si Bootstrap est disponible
            if (typeof $.fn.tooltip !== 'undefined') {
                $btn.tooltip('show');
                
                // Ajouter la classe bounce au tooltip après qu'il soit affiché
                setTimeout(() => {
                    const $tooltip = $('.tooltip');
                    if ($tooltip.length) {
                        $tooltip.addClass('timer-tooltip-bounce');
                    }
                }, 100);
            } else {
                // Fallback : ajouter un attribut title pour un tooltip natif
                $btn.attr('title', 'Veuillez démarrer le minuteur dès que votre patient rejoint la réunion');
            }
            
            // Masquer automatiquement après 20 secondes
            tooltipTimeout = setTimeout(() => {
                hideTimerTooltip();
            }, 20000);
        }

        // Fonction pour masquer le tooltip
        function hideTimerTooltip() {
            const $btn = $('#liveTimerBtn');
            
            // Retirer l'animation bounce du bouton
            $btn.removeClass('timer-bounce-active');
            
            // Retirer la classe bounce du tooltip
            $('.tooltip').removeClass('timer-tooltip-bounce');
            
            // Masquer le tooltip Bootstrap si disponible
            if (typeof $.fn.tooltip !== 'undefined' && $btn.data('bs.tooltip')) {
                $btn.tooltip('hide');
            } else {
                // Fallback : retirer l'attribut title
                $btn.removeAttr('title');
            }
            
            tooltipShown = false;
            
            if (tooltipTimeout) {
                clearTimeout(tooltipTimeout);
                tooltipTimeout = null;
            }
        }

        function startTimer(){
    if(timerInterval) clearInterval(timerInterval);
    timerInterval = setInterval(() => {
        if(meetingStartTime){
            const elapsedSeconds = Math.round((new Date() - meetingStartTime)/1000);
            updateTimerDisplay(elapsedSeconds);
        }
    }, 1000);
}

function pauseTimer(){
    if(timerInterval){
        clearInterval(timerInterval);
        timerInterval = null;
    }
}

function stopTimer(){
    pauseTimer();
    meetingStartTime = null;
    updateTimerDisplay(0);
    timerState = 'stopped';
    hasAutoStarted = false; // Réinitialiser pour permettre un nouveau démarrage auto
    $('#liveTimerBtn').html('<i class="fa fa-play"></i> Minuteur 00:00');
}

function updateTimerDisplay(seconds){
    const minutes = Math.floor(seconds / 60);
    const sec = seconds % 60;
    const iconClass = timerState === 'running' ? 'fa-pause' : 'fa-play';
    $('#liveTimerBtn').html(`<i class="fa ${iconClass}"></i> Minuteur ${minutes.toString().padStart(2,'0')}:${sec.toString().padStart(2,'0')}`);
    $('input[name="duration"]').val(seconds);
}

// Clic sur le badge
$('#liveTimerBtn').click(() => {
    // Masquer le tooltip et l'animation bounce dès que le minuteur démarre
    if(timerState === 'stopped'){
        // Masquer le tooltip avant de démarrer
        hideTimerTooltip();
        
        meetingStartTime = new Date();
        timerState = 'running';
        isMeetingActive = true;
        hasAutoStarted = true; // Marquer comme démarré manuellement
        startTimer();
        console.log('⏱️ Minuteur démarré manuellement');
    } else if(timerState === 'running'){
        timerState = 'paused';
        pauseTimer();
        updateTimerDisplay(Math.round((new Date() - meetingStartTime)/1000)); // affiche le temps actuel avec icône play
    } else if(timerState === 'paused'){
        timerState = 'running';
        meetingStartTime = new Date(new Date() - $('input[name="duration"]').val() * 1000); // reprendre depuis pause
        startTimer();
    }
});

        function updateDurationField(duration) {
            $('input[name="duration"]').val(duration);
            console.log('Duration field updated:', duration);
        }

        $('#btn-command').click(function(e){
            e.preventDefault()
            $('#command-bloc').append($('#command').html())
        })

        $('.form-body').on('click', '.delete-command', function(e){
            e.preventDefault()
            $(this).parent().remove()
        })

        $('#confirmCreateModal #submit').click(function(){
            $('#mainForm').submit()
        })


        $('#generate-prescription').click(async function() {
            const description = tinymce.get('description').getContent()
            const prescription = tinymce.get('prescription')
            const pplxId = await getPPLXID();

            if(!description)
                return alert('Veuillez renseigner d\'abord le diagnostic du patient')
            // return $('#generate-error').text('Veuillez renseigner d\'abord le diagnostic du patient')
            else
                $('#generate-error').text('')

            $('#generate-prescription').hide()
            $('#generate-prescription-loading').show()

            $.ajax({
                url: 'https://api.perplexity.ai/chat/completions', // URL de l'API
                type: 'POST',
                contentType: 'application/json',
                headers: {
                    'Authorization': 'Bearer ' + pplxId, // Remplacez par votre clé API
                    'Accept': 'application/json'
                },
                data: JSON.stringify({
                    model: 'sonar', // Modèle à utiliser
                    messages: [
                        { role: 'user', content: formatDescription(description) }
                    ]
                }),
                success: function(response) {
                    // Traitez la réponse ici
                    prescription.setContent(marked.parse(response.choices[0].message.content))
                    $('#generate-prescription-loading').hide()
                    $('#generate-prescription').show()
                    if(subStandardOnly){
                        updateAiCredits()
                        checkAiCredits()
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Erreur:', error);
                    $('#response').text('Une erreur est survenue.');
                    $('#generate-prescription-loading').hide()
                    $('#generate-prescription').show()
                }
            });
        })


        function formatDescription(message){
            const basicPrompt = 'Ordonnance médicale rédigée comme par un médecin pour un diagnostic que je vais décrire en dessous.\n' +
                'Je veux liste de médicaments (avec leur posologie respectifs) et de conseils.\n' +
                'Ne pas mentionner une consultation médicale (ne pas mentionner "il est important de consulter un médecin etc acr le but est d avoir une ordonnance rédigée comme un médecin").\n' +
                'La réponse ne contiendra que les medicaments prescrits et les conseils comme titre pas de d\'intro ni de conlusion ni de résumé en fin. ' +
                'La réponse ne dépassera pas 1000 caractères (très important) et réduis l\'espacement entre les interlignes et paragraphes. ' +
                'Substituer la réponse en 3 grands paragraphes: Diagnostic, Médicaments & Posologies et Conseils. ' +
                'Diagnostic: '

            return basicPrompt + message
        }

        function updateAiCredits(){
            $.post('{{route('companies.updateAiCredits')}}', {_token : "{{ csrf_token() }}"}, function(rsp){
                $('#ai-credits').text(rsp)
            })
        }

        function checkAiCredits(){
            if(subStandardOnly)
                setTimeout(()=>{
                    if($('#ai-credits').text() <= 0){
                        $('#doctor-ai').addClass('disabled')
                    }
                }, 1000)
        }



        $('#mainForm').on('submit', function(e) {
            e.preventDefault(); // Empêche l'envoi automatique du formulaire
            
            // Validation manuelle avant affichage de la modale
            let isValid = true;
            
            // Vérifier le patient
            if (!$('#patientSelect').val()) {
                alert('Veuillez sélectionner un patient');
                $('#patientSelect').focus();
                isValid = false;
            }
            
            // Vérifier le montant
            if (!$('input[name="amount"]').val()) {
                alert('Veuillez saisir le montant total');
                $('input[name="amount"]').focus();
                isValid = false;
            }
            
            // Vérifier la description (TinyMCE)
            if (typeof tinymce !== 'undefined' && tinymce.get('description')) {
                const descriptionContent = tinymce.get('description').getContent().trim();
                if (!descriptionContent) {
                    alert('Veuillez saisir le diagnostic');
                    tinymce.get('description').focus();
                    isValid = false;
                }
            } else {
                // Fallback si TinyMCE n'est pas initialisé
                if (!$('#description').val().trim()) {
                    alert('Veuillez saisir le diagnostic');
                    $('#description').focus();
                    isValid = false;
                }
            }
            
            if (isValid) {
                $('#confirmModal').modal('show'); // Affiche la modale de confirmation
            }
        });

        $('#confirmModal #submit').on('click', function() {
            // S'assurer que le contenu TinyMCE est synchronisé avec le champ caché
            if (typeof tinymce !== 'undefined' && tinymce.get('description')) {
                tinymce.get('description').save();
            }
            
            // Calculer la durée finale si la réunion est encore en cours
            if (meetingStartTime && isMeetingActive) {
                const endTime = new Date();
                meetingDuration = Math.round((endTime - meetingStartTime) / 1000);
                updateDurationField(meetingDuration);
                stopTimer();
            }
            
            $('#mainForm').off('submit').submit(); // Soumet le formulaire après confirmation
        });

        async function getPPLXID() {
            try {
                const response = await fetch('/admin/pplx-id');

                if (!response.ok) {
                    console.error('Erreur dans la réponse:', response.status);
                    return null;
                }

                const data = await response.json();

                if (data.pplx_id) {
                    return data.pplx_id;
                } else {
                    console.error('PPLX ID introuvable.');
                    return null;
                }

            } catch (error) {
                console.error('Erreur lors de la requête:', error);
                return null;
            }
        }

        // Fonction de test manuelle accessible depuis la console
        // Utilisez: testJitsiDetection() dans la console du navigateur
        window.testJitsiDetection = function() {
            try {
                const participants = jitsiApi.getParticipantsInfo();
                const info = {
                    'API Jitsi': jitsiApi ? '✅ Initialisée' : '❌ Non initialisée',
                    'Hôte rejoint': isHostJoined ? '✅ Oui' : '❌ Non',
                    'Nombre de participants': participantCount,
                    'Participants précédents': previousParticipantCount,
                    'Participants détectés': participants ? participants.length : 0,
                    'État du minuteur': timerState,
                    'Minuteur démarré auto': hasAutoStarted ? '✅ Oui' : '❌ Non',
                    'Réunion active': isMeetingActive ? '✅ Oui' : '❌ Non',
                    'Polling actif': pollingInterval ? '✅ Oui' : '❌ Non',
                    'Détails participants': participants ? participants.map(p => ({
                        id: p.participantId,
                        name: p.displayName || 'Sans nom'
                    })) : []
                };
                
                console.table(info);
                console.log('Participants détaillés:', participants);
                console.log('🧪 TEST MANUEL - État de la détection:', info);
            } catch (e) {
                console.error('Erreur lors du test:', e);
            }
        };

        // Fonction pour forcer la vérification manuelle
        window.forceCheckParticipants = function() {
            console.log('🔄 Vérification manuelle des participants...');
            updateParticipantCount();
        };

        // Afficher un message dans la console pour indiquer que les tests sont actifs
        console.log('%c🧪 MODE TEST ACTIVÉ', 'color: red; font-size: 16px; font-weight: bold;');
        console.log('Les alertes de test sont activées pour détecter les visiteurs.');
        console.log('Utilisez testJitsiDetection() dans la console pour vérifier l\'état actuel.');

    </script>
@endpush