@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);
        $jitsiAppId = env('JITSI_APP_ID');
    @endphp
    <script src="https://8x8.vc/{{ $jitsiAppId }}/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;
        }
        .tc-live-clinical-row .tox-tinymce {
            height: 200px !important;
        }
        .tc-live-clinical-col {
            padding-left: 8px;
            padding-right: 8px;
        }
        .tc-live-clinical-col:first-child {
            padding-left: 0;
        }
        .tc-live-clinical-col:last-child {
            padding-right: 0;
        }
        .tc-live-clinical-row .control-label {
            font-size: 0.85rem;
        }
        .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;
        }
        /* Assistant IA · Téléconsultation avancée */
        .tc-ai-card {
            border: 1px solid #e8ecf4;
            border-radius: 16px;
            background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
            padding: 1rem 1.1rem;
            box-shadow: 0 4px 24px rgba(79, 70, 229, 0.08);
        }
        .tc-ai-card.tc-ai-listening {
            border-color: #818cf8;
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
        }
        .tc-ai-header {
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            gap: 0.35rem;
            margin-bottom: 0.75rem;
        }
        @media (min-width: 1400px) {
            .tc-ai-header {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
            }
        }
        .tc-ai-title {
            font-weight: 700;
            font-size: 0.95rem;
            color: #312e81;
            margin: 0;
        }
        .tc-ai-title .fa-robot { color: #6366f1; margin-right: 6px; }
        .tc-ai-badge-plan {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            background: #4f46e5;
            color: #fff;
            padding: 2px 8px;
            border-radius: 20px;
            font-weight: 600;
        }
        .tc-speaker-btn {
            font-size: 0.75rem;
            padding: 4px 12px;
            border-radius: 20px;
        }
        .tc-speaker-btn.active {
            background: #333 !important;
            color: #fff !important;
            /* border-color: #4f46e5 !important; */
        }
        .tc-live-top-row {
            display: flex;
            flex-wrap: nowrap;
            align-items: flex-start;
            margin-left: -15px;
            margin-right: -15px;
            overflow: visible;
        }
        .tc-live-top-row > .tc-live-video-col,
        .tc-live-top-row > .tc-live-ai-col {
            padding-left: 15px;
            padding-right: 15px;
            flex-shrink: 0;
        }
        @media (min-width: 768px) {
            .tc-live-top-row > .tc-live-video-col {
                flex: 0 0 66.666667%;
                max-width: 66.666667%;
                width: 66.666667%;
            }
            .tc-live-top-row > .tc-live-ai-col {
                flex: 0 0 33.333333%;
                max-width: 33.333333%;
                width: 33.333333%;
            }
        }
        @media (max-width: 767.98px) {
            .tc-live-top-row {
                flex-wrap: wrap;
            }
            .tc-live-top-row > .tc-live-video-col,
            .tc-live-top-row > .tc-live-ai-col {
                flex: 0 0 100%;
                max-width: 100%;
                width: 100%;
            }
        }
        .tc-live-ai-col {
            position: relative;
            overflow: visible;
        }
        #bar-parent {
            overflow: visible;
        }
        .tc-live-header-row {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            margin-left: -15px;
            margin-right: -15px;
        }
        .tc-live-header-row > [class*="col"] {
            padding-left: 15px;
            padding-right: 15px;
        }
        .tc-live-header-row .control-label {
            font-size: 0.8rem;
            margin-bottom: 2px;
            white-space: nowrap;
        }
        .tc-live-header-row .tc-live-patient-actions {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 4px;
            padding-bottom: 2px;
        }
        .tc-live-header-row .tc-live-patient-actions .btn {
            margin-bottom: 0;
        }
        @media (max-width: 991.98px) {
            .tc-live-header-row .tc-live-metric-field {
                margin-top: 0.5rem;
            }
        }
        .tc-live-ai-col #tc-ai-transcript {
            max-height: 220px;
        }
        #tc-ai-transcript {
            max-height: 160px;
            overflow-y: auto;
            background: #fff;
            border-radius: 12px;
            padding: 0.65rem;
            border: 1px solid #e2e8f0;
            font-size: 0.8rem;
        }
        .tc-transcript-line {
            margin-bottom: 0.5rem;
            padding: 0.35rem 0.5rem;
            border-radius: 8px;
            border-left: 3px solid #6366f1;
        }
        .tc-transcript-line.tc-speaker-patient {
            border-left-color: #10b981;
            background: #f0fdf4;
        }
        .tc-transcript-line.tc-preview { opacity: 0.65; font-style: italic; }
        .tc-transcript-badge {
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            margin-right: 6px;
            color: #4f46e5;
        }
        .tc-speaker-patient .tc-transcript-badge { color: #059669; }
        .tc-transcript-time {
            font-size: 0.65rem;
            color: #94a3b8;
            float: right;
        }
        .tc-ai-results {
            background: #fff;
            border-radius: 12px;
            padding: 0.75rem;
            border: 1px solid #c7d2fe;
            margin-top: 0.75rem;
        }
        .tc-ai-results h6 {
            font-size: 0.8rem;
            font-weight: 700;
            color: #312e81;
            margin-bottom: 0.35rem;
        }
    </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>                        <i class="fa fa-video"></i> 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" id="bar-parent">
                            @csrf
                            <input type="hidden" name="user_id" value="{{auth()->user()->id}}">
                            <input type="hidden" name="duration" value="0">
                            <input type="hidden" name="ai_transcript" id="ai_transcript_field" value="">
                            <input type="hidden" name="ai_description" id="ai_description_field" value="">

                            <div class="row mb-2 tc-live-header-row">
                                <div class="col-lg-4 col-md-5 col-12">
                                    <select class="form-control" 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>
                                <div class="col-auto tc-live-patient-actions">
                                    <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 class="col-lg-2 col-md-2 col-6 tc-live-metric-field ml-md-auto">
                                    <label class="control-label d-block">Température (C)</label>
                                    <input type="text" name="temperature" placeholder="39" class="form-control" />
                                </div>
                                <div class="col-lg-2 col-md-3 col-6 tc-live-metric-field">
                                    <label class="control-label d-block">Montant ({!! htmlentities(auth()->user()->company->currency_symbol, ENT_NOQUOTES, 'UTF-8') !!}) <span class="required">*</span></label>
                                    <input type="text" name="amount" placeholder="30" class="form-control" required/>
                                </div>
                            </div>

                            <div class="row tc-live-top-row">
                                <div class="tc-live-video-col">
                                <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 class="tc-live-clinical-row mt-3">
                                    <div class="row">
                                        <div class="col-6 tc-live-clinical-col">
                                            <div class="mb-1">
                                                <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())
                                                    <span class="ml-1 d-inline-block">
                                                        <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>
                                                    </span>
                                                @endif
                                            </div>
                                            <textarea name="description" class="form-control-textarea" id="description" cols="30" rows="8"></textarea>
                                        </div>
                                        <div class="col-6 tc-live-clinical-col">
                                            <div class="mb-1 d-flex flex-wrap align-items-center" style="gap: 6px;">
                                                <label class="control-label mb-0">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>
                                                <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()->subGold())
                                                        <span class="ai-credits">(<span id="ai-credits">{{auth()->user()->company->ai_credits}}</span> crédits)</span>
                                                    @endif
                                                </a>
                                                <a href="javascript:void(0)" class="btn btn-light ai ai-loading disabled ml-1" 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>
                                            <textarea name="prescription" class="form-control-textarea" id="prescription" cols="30" rows="8"></textarea>
                                        </div>
                                    </div>
                                    <div id="command-bloc"></div>
                                    <template id="command">
                                        <div class="row">
                                            <div class="col-12">
                                                <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">
                                                <a href="#" class="delete-command nav-link btn btn-primary btn-sm" style="padding: 7px 18px !important; font-size: 20px;">-</a>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                                </div>
                                <div class="tc-live-ai-col">
                                    @include('teleconsultation.partials.ai-assistant')
                                </div>
                            </div>

                        <div class="row">
                        <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-outlined-default">Annuler</a>
                                </div>
                            </div>
                        </div>
                        </div>

                    </div>
                    </form>

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

@push('scripts')
    <script>
        window.TC_AI_CONFIG = {
            analyzeUrl: @json(route('teleconsultations.ai.analyze')),
            csrf: @json(csrf_token())
        };
    </script>
    <script src="{{ asset('medical/assets/js/teleconsultation-ai.js') }}?v=1"></script>
    <script>

        let subStandardOnly = {!! json_encode((auth()->user()->subBasic() || 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 JaaS
        const domain = '8x8.vc';
        const options = {
            roomName: '{{ $jitsiAppId }}/{{ $roomName }}',
            width: '100%',
            height: '100%',
            parentNode: document.querySelector('#jitsiContainer'),
            userInfo: {
                displayName: @json(auth()->user()->proName())
            },
            configOverwrite: {
                startWithAudioMuted: false,
                startWithVideoMuted: false,
                prejoinPageEnabled: false,
                lang: 'fr'
            },
            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,
                DEFAULT_LANGUAGE: 'fr'
            }
        };

        @if($jitsiJwt)
        options.jwt = '{{ $jitsiJwt }}';
        @endif

        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
        // Autorise le démarrage automatique uniquement après qu'un vrai participant rejoint
        let allowAutoStart = false;

        // Affiche un tooltip animé pour rappeler de démarrer le minuteur
        function showTimerTooltip() {
            try {
                if (tooltipShown) return;
                const $btn = $('#liveTimerBtn');
                // Ajouter animation bounce sur le bouton
                $btn.addClass('timer-bounce-active');

                // Initialiser et afficher le tooltip en manuel (Bootstrap)
                $btn.tooltip({
                    title: 'Démarrer le minuteur',
                    placement: 'top',
                    trigger: 'manual',
                    template: '<div class="tooltip timer-tooltip-bounce" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
                });
                $btn.tooltip('show');
                tooltipShown = true;

                // Masquer automatiquement après 10s si non cliqué
                if (tooltipTimeout) clearTimeout(tooltipTimeout);
                tooltipTimeout = setTimeout(() => {
                    hideTimerTooltip();
                }, 10000);
            } catch (e) {
                console.warn('showTimerTooltip error', e);
            }
        }

        // Masque et détruit le tooltip, enlève l'animation
        function hideTimerTooltip() {
            try {
                const $btn = $('#liveTimerBtn');
                if (tooltipTimeout) { clearTimeout(tooltipTimeout); tooltipTimeout = null; }
                if (tooltipShown) {
                    $btn.tooltip('hide');
                    try { $btn.tooltip('dispose'); } catch(e){}
                    tooltipShown = false;
                }
                $btn.removeClass('timer-bounce-active');
            } catch (e) {
                console.warn('hideTimerTooltip error', e);
            }
        }

        // Met à jour l'affichage du minuteur (icône + texte) et le champ hidden
        function updateTimerDisplay(seconds) {
            try {
                seconds = parseInt(seconds) || 0;
                const mm = String(Math.floor(seconds / 60)).padStart(2, '0');
                const ss = String(seconds % 60).padStart(2, '0');
                const $btn = $('#liveTimerBtn');
                const $icon = $('#liveTimerIcon');

                // Mettre à jour le texte et l'icône selon l'état
                $btn.html(`<i id="liveTimerIcon" class="fa ${timerState === 'running' ? 'fa-pause' : 'fa-play'}"></i> Minuteur ${mm}:${ss}`);

                // Mettre à jour le champ caché duration
                updateDurationField(seconds);
            } catch (e) {
                console.warn('updateTimerDisplay error', e);
            }
        }

        // Démarre le timer (intervalle 1s)
        function startTimer() {
            try {
                if (timerInterval) clearInterval(timerInterval);
                // Mettre l'icône en pause
                timerState = 'running';
                isMeetingActive = true;
                updateTimerDisplay(Math.round((new Date() - meetingStartTime)/1000));
                timerInterval = setInterval(() => {
                    const elapsed = Math.round((new Date() - meetingStartTime)/1000);
                    updateTimerDisplay(elapsed);
                }, 1000);
            } catch (e) {
                console.warn('startTimer error', e);
            }
        }

        // Met en pause le timer
        function pauseTimer() {
            try {
                if (timerInterval) { clearInterval(timerInterval); timerInterval = null; }
                if (meetingStartTime) {
                    const elapsed = Math.round((new Date() - meetingStartTime)/1000);
                    updateDurationField(elapsed);
                    updateTimerDisplay(elapsed);
                }
                isMeetingActive = false;
            } catch (e) {
                console.warn('pauseTimer error', e);
            }
        }

        // Vérifie si le minuteur doit démarrer automatiquement selon le nombre de participants
        function checkIfShouldStartTimer() {
            try {
                // Ne pas démarrer automatiquement au chargement : require allowAutoStart
                if (allowAutoStart && participantCount >= 2 && timerState === 'stopped' && !hasAutoStarted) {
                    hideTimerTooltip();
                    meetingStartTime = new Date();
                    timerState = 'running';
                    isMeetingActive = true;
                    hasAutoStarted = true;
                    startTimer();
                } else {
                    // Si toujours à l'arrêt et personne n'a démarré, afficher un rappel
                    if (timerState === 'stopped' && !tooltipShown) {
                        showTimerTooltip();
                    }
                }
            } catch (e) {
                console.warn('checkIfShouldStartTimer error', e);
            }
        }

        // 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;
            
            // Autoriser l'auto-start suite à un vrai événement de jointure
            allowAutoStart = true;

            // 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',
            '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();
                    }
                }
            }
        });

        // 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
                    let content = response.choices[0].message.content
                    // Supprimer les références de style [1], [2], etc
                    content = content.replace(/\[\d+\]/g, '')
                    prescription.setContent(marked.parse(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 JAMAIS mentionner que tu ne peux pas imiter un médecin, ne jamais dire "je ne peux pas", ne jamais inclure de disclaimer ou d\'avertissement.\n' +
                'La réponse DOIT commencer directement par "**Diagnostic**" en gras, suivi de "**Médicaments & Posologie**" en gras, puis "**Conseils**" en gras.\n' +
                'La réponse ne contiendra que les médicaments prescrits et les conseils comme titre, PAS d\'intro, PAS de conclusion, PAS de résumé en fin, PAS de disclaimer.\n' +
                'La réponse ne dépassera pas 1000 caractères (très important) et réduis l\'espacement entre les interlignes et paragraphes.\n' +
                'Mettre "-" quand une info est absente.\n\n' +
                '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 (isMeetingActive) {
                if (timerState === 'running' && meetingStartTime) {
                    const endTime = new Date();
                    meetingDuration = Math.round((endTime - meetingStartTime) / 1000);
                    updateDurationField(meetingDuration);
                } else {
                    // Si en pause ou arrêté, on prend la valeur actuelle du champ (déjà à jour)
                    meetingDuration = parseInt($('input[name="duration"]').val()) || 0;
                }
                // On ne stoppe pas le minuteur avec reset ici pour éviter de remettre à 0 avant le submit
                pauseTimer(); 
            }
            
            $('#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