@extends('layouts.meeting')

@section('content-meeting')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.6.0/js/bootstrap.min.js"></script>
    <link href="/assets/plugins/chosen/chosen.min.css" rel="stylesheet">

    <div class="container-fluid">
        {{-- para pegar o valor direto do input --}}
        <input type="hidden" name="meeting_id_toggle" id="meeting_id_toggle" value="{{ $meeting->id }}">
        <h2>ATA DA SESSÃO</h2>
        <div class="the-box rounded">
            <div class="col-md-8">
                <p><i class="fa fa-check-circle"></i> Tipo de Sessão: {!! $meeting->SessionType->name !!}</p>
                <p><i class="fa fa-check-circle"></i> Sessão Nº: {!! $meeting->number !!}</p>
                <p><i class="fa fa-check-circle"></i> Data: {!! $meeting->date_start !!}</p>
            </div>

            <div class="col-md-2" id="add-video-container">
                <button type="button" class="btn btn-info btn-rounded-lg" data-toggle="modal" data-target="#youtubeModal">
                    <i class="fa">&#xf16a;</i> VÍDEO
                </button>
            </div>

            <div class="col-md-2">
                <a href="/meeting/ata/{{ $meeting->id }}/pdf" target="_blank">
                    <button class="pull-right btn btn-info btn-rounded-lg">
                        <i class="fa fa-file-pdf-o"></i> GERAR PDF
                    </button>
                </a>
            </div>

            @php
                $type = $type ?? 'ata';
                $signer = \App\Models\SignatureSigners::where('id_document', $meeting->id)
                    ->where('document_type', '!=', 'pauta')
                    ->first();

                $checkStatus = null;
                if ($signer) {
                    $checkStatus = $signer->status === 'SIGNED' ? 'SIGNED' : 'PENDING';
                }
            @endphp

            @shield('list.signers')
            <div class="col-md-12 text-right">
                @if ($checkStatus === 'PENDING')
                    <div class="d-flex align-items-center gap-2">
                        <span class="btn btn-warning btn-sm">
                            <i class="fas fa-hourglass-half"></i> Aguardando assinaturas
                        </span>
                        <button type="button" class="btn btn-danger btn-sm"
                            onclick="window.location.href='{{ url('/document/start/signature/delete/' . $meeting->id) }}'">
                            Cancelar pedido de assinatura
                        </button>
                    </div>
                @elseif($checkStatus === 'SIGNED')
                    <span class="badge badge-success p-2">
                        <i class="fas fa-check"></i> Documento assinado
                    </span>
                    <a href="{!! route('signature.pdf.download', [$meeting->id, $type]) !!}" target="_blank"
                        class="badge badge-danger p-2 icon-btn shadow-sm" title="Download">
                        <i class="fas fa-download"> Download </i>
                    </a>
                @else
                    <button type="button" class="btn btn-success btn-rounded-lg" data-toggle="modal"
                        data-target="#modalSignature">
                        <i class="fas fa-pen-alt"></i> ASSINAR
                    </button>
                @endif
            </div>
            @endshield
            <div class="clearfix"></div>
        </div>


        {{-- Formulário da ata --}}
        <form action="/meetings/ata" method="post">
            {!! csrf_field() !!}
            <input type="hidden" name="meeting_id" value="{{ $meeting->id }}">

            @php
                $aiModuleEnabled = \App\Models\Module::isActive('IA');
                $aiPermissionGranted = \Artesaos\Defender\Facades\Defender::hasPermission('ai.use');
                $aiEnabled = $aiModuleEnabled && $aiPermissionGranted;
            @endphp
            @if ($aiEnabled)
                <div class="the-box rounded ata-ai-panel" style="margin: 10px 0; position: relative;">
                    <div class="ata-ai-panel-header">
                        <div>
                            <div class="ata-ai-panel-title">Transcrever ata por áudio/vídeo</div>
                            <div class="ata-ai-panel-subtitle">Use um arquivo ou link do YouTube e deixe a IA organizar a ata.
                            </div>
                        </div>
                    </div>
                    <div class="row ata-ai-grid">
                        <div class="col-md-7">
                            <div class="ata-ai-section">
                                <label class="ata-ai-label">Prompt de formatação</label>
                                <div class="ata-ai-helper">Descreva o estilo final desejado antes de aplicar a formatação.</div>
                            </div>
                            <div class="ata-chat">
                                <div class="ata-chat-header">Prompt de formatação (estilo ChatGPT)</div>
                                <div id="ataChatHistory" class="ata-chat-history"></div>
                                <div class="ata-chat-input">
                                    <textarea id="ataAiPrompt" class="form-control" rows="2"
                                        placeholder="Diga como quer formatar. Ex: 'deixe mais formal e remova repetições'"></textarea>
                                    <div class="ata-chat-actions">
                                        <button type="button" id="ataChatSend" class="btn btn-sm btn-default">Enviar</button>
                                        <button type="button" id="ataChatApply" class="btn btn-sm btn-primary">Formatar com
                                            IA</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="ata-ai-uploader">
                                <div class="ata-ai-section">
                                    <label class="ata-ai-label">Fonte do áudio</label>
                                    <div class="ata-ai-helper">Escolha uma das opções abaixo para iniciar a transcrição.</div>
                                </div>
                                <div class="ata-ai-field">
                                    <label class="ata-ai-label-sm">Link do YouTube</label>
                                    <input type="url" id="ataYoutubeUrl" class="form-control"
                                        placeholder="Opcional: cole o link do YouTube para transcrever">
                                </div>
                                <div class="ata-ai-field">
                                    <label class="ata-ai-label-sm">Upload de áudio/vídeo</label>
                                    <input type="file" id="ataTranscribeFile" class="form-control"
                                        accept=".mp3,.mp4,.m4a,.wav,.ogg,.webm">
                                </div>
                                <div class="ata-ai-field">
                                    <label class="ata-ai-label-sm">Modelo de ata</label>
                                    <input type="file" id="ataModelFile" class="form-control"
                                        accept=".txt,.html,.htm,.pdf,application/pdf">
                                    <small class="text-muted">Se enviado, este modelo substitui os exemplos do banco.</small>
                                </div>
                                <button type="button" id="ataTranscribeBtn"
                                    class="btn btn-primary btn-block ata-transcribe-btn">
                                    <i class="fa fa-upload"></i> Transcrever ATA
                                </button>
                                <div class="ata-ai-footnote">
                                    A transcrição é processada em segundo plano e um texto limpo ficará disponível para revisão.
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 ata-ai-status-wrap">
                            <div id="ataTranscribePreview" class="ata-transcribe-preview" style="display: none;"></div>
                        </div>
                        <div class="col-md-12">
                            <div id="ataTranscribeNotice" class="alert alert-info" style="display: none;">
                                <strong>Transcrição pronta.</strong> Revise o texto limpo e clique em "Aplicar".
                                <button type="button" id="ataApplyTranscriptBtn" class="btn btn-sm btn-success"
                                    style="margin-left: 8px;">Aplicar texto limpo</button>
                            </div>
                            <div id="ataTranscribeError" class="alert alert-danger" style="display: none;"></div>
                        </div>
                    </div>
                    <div id="ataTranscribeOverlay" class="ata-transcribe-overlay" style="display: none;"></div>
                </div>
            @else
                <div class="the-box rounded" style="margin: 10px 0;">
                    <div class="alert alert-warning" style="margin-bottom: 0;">
                        <strong>Transcrição da ata com IA indisponível.</strong>
                        @if (!$aiModuleEnabled)
                            Ative o módulo <strong>IA</strong> para exibir os campos de upload, YouTube e formatação automática.
                        @elseif (!$aiPermissionGranted)
                            O usuário atual não possui a permissão <strong>ai.use</strong>.
                        @endif
                    </div>
                </div>
            @endif

            @if ($aiEnabled)
                <h2>Texto Formatado (IA)</h2>
                <textarea name="ata_formatted" id="ata_formatted"
                    class="ckeditor">{{ $meeting->ata_transcript_formatted ?? '' }}</textarea>
            @endif
            <h2>Texto da Ata</h2>
            <textarea name="ata" id="ata" class="ckeditor">{{ $meeting->ata }}</textarea>

            <h3>Vídeos Adicionados</h3>
            <div class="video-thumbnails">
                @if ($meeting->videos && $meeting->videos->isNotEmpty())
                    @foreach ($meeting->videos as $video)
                        @if ($video->type_video == 1)
                            <div class="video-container" id="youtube-video-{{ $video->id }}">
                                <iframe width="100%" height="400" src="https://www.youtube.com/embed/{{ $video->url }}" frameborder="0"
                                    allowfullscreen></iframe>
                                <a href="#" class="btn btn-danger remove-video" data-id="{{ $video->id }}">
                                    Remover
                                </a>
                            </div>
                        @endif
                    @endforeach
                @endif
            </div>

            <hr class="hr">
            <button class="btn btn-success pull-right">
                <i class="fa fa-save"></i> Salvar
            </button>
        </form>
        <div class="clearfix"></div>
    </div>

    <div class="col-md-12 the-box rounded">
        <a href="/meetings">
            <button class="btn btn-default">Voltar</button>
        </a>
    </div>



    <!-- Modal Signature Lot-->
    <div class="modal fade" id="modalSignature" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <img src="{{ asset('assets/images/assinatura-digital-image.png') }}" style="width: 100px;">
                    <h5 class="modal-title" id="lot-modal-title">Configurações de Assinatura</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <form>
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <input type="hidden" name="meeting_id" value="{{ $meeting->id }}" />
                                <input type="hidden" name="type" value="ata" />

                                <!-- Parlamentares Assinando -->
                                <div class="form-group">
                                    <label for="assemblymen" class="d-block">
                                        <i class="fa fa-user-plus"></i> Parlamentares Assinando
                                    </label>
                                    {!! Form::select('assemblymensList[]', $assemblymensList, null, [
        'class' => 'form-control assemblymenChosen',
        'id' => 'multiple-select-clear-field',
        'multiple' => true,
        'style' => 'width: 100%;',
        'data-placeholder' => 'Selecione o parlamentar...',
    ]) !!}
                                </div>

                                <!-- Modo de Assinatura -->
                                <div class="form-group">
                                    {!! Form::label('module', 'Modo de assinatura', ['class' => 'required']) !!}
                                    {!! Form::select(
        'module',
        [
            'SIMPLE' => 'Simples',
            'ADVANCED' => 'Avançada',
            'QUALIFIED' => 'Qualificada',
        ],
        null,
        [
            'class' => 'form-control',
            'id' => 'select-state',
        ],
    ) !!}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Modal Footer -->
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button id="btnAssinar" class="btn btn-success">
                            <i class="fas fa-pen-alt"></i> ASSINAR
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Modal para adicionar vídeo --}}
    <div class="modal fade" id="youtubeModal" tabindex="-1" role="dialog" aria-labelledby="youtubeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="youtubeModalLabel">Adicionar Vídeo</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="form-video-ata">
                        {!! csrf_field() !!}
                        <input type="hidden" name="meeting_id" value="{{ $meeting->id }}">
                        <div class="form-group">
                            <label for="youtubeLinkInput">URL do Vídeo</label>
                            <input type="url" class="form-control" id="youtubeLinkInput" name="url"
                                placeholder="Insira o link do vídeo do YouTube" required>
                        </div>
                        <button type="submit" class="btn btn-info btn-rounded-lg">Salvar</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal de Confirmação para Remover Vídeo --}}
    <div class="modal fade" id="confirmRemoveModal" tabindex="-1" role="dialog" aria-labelledby="confirmRemoveLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmRemoveLabel">Confirmar Remoção</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Tem certeza de que deseja remover este vídeo?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-danger" id="confirmRemoveBtn">Remover</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="{!! asset('chosen_v1.8.7/chosen.jquery.js') !!}" type="text/javascript"></script>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $('#btnAssinar').on('click', function (e) {
            e.preventDefault();

            let meeting_id = $("input[name='meeting_id']").val();
            let type = $("input[name='type']").val();
            let module = $("#select-state").val();
            let assemblymensList = $("#multiple-select-clear-field").val();

            Swal.fire({
                title: 'Enviando assinatura...',
                text: 'Aguarde enquanto processamos o documento.',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            $.ajax({
                url: "{{ route('meetings.signature') }}",
                method: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    meeting_id: meeting_id,
                    type: type,
                    module: module,
                    assemblymensList: assemblymensList
                },
                success: function (res) {
                    Swal.close();
                    if (res.success) {
                        Swal.fire('Sucesso!', res.message, 'success').then(() => {
                            window.location.href = res.redirect;
                        });
                    } else {
                        Swal.fire('Erro', res.message, 'error');
                    }
                },
                error: function (xhr) {
                    Swal.close();
                    Swal.fire('Erro', xhr.responseJSON?.message || 'Erro inesperado.', 'error');
                }
            });
        });
    </script>

    <script>
        const normalizeAtaTranscribeError = (message) => {
            const text = (message || '').trim();
            const lower = text.toLowerCase();

            if (
                lower.includes('youtube bloqueou o download neste servidor') ||
                lower.includes("sign in to confirm you're not a bot") ||
                lower.includes('sign in to confirm you’re not a bot')
            ) {
                return 'O YouTube bloqueou o download automatico deste video no servidor. Use o campo de upload para enviar o audio/video da sessao.';
            }

            return text || 'Erro ao transcrever ata.';
        };

        const extractAtaTranscribeError = (data, status = 0) => {
            if (data && typeof data.error === 'string' && data.error.trim() !== '') {
                return data.error;
            }

            if (data && typeof data.message === 'string' && data.message.trim() !== '') {
                return data.message;
            }

            if (data && data.errors && typeof data.errors === 'object') {
                const firstError = Object.values(data.errors).flat().find(Boolean);
                if (firstError) {
                    return firstError;
                }
            }

            if (status === 413) {
                return 'O arquivo enviado excede o limite aceito pelo servidor. Ajuste os limites de upload do servidor ou envie um arquivo menor.';
            }

            if (status === 422) {
                return 'O arquivo enviado nao passou na validacao. Verifique o formato e o tamanho do audio/video.';
            }

            return 'Erro ao transcrever ata.';
        };

        const showAtaTranscribeError = (errorBox, message) => {
            const normalized = normalizeAtaTranscribeError(message);

            if (errorBox) {
                errorBox.textContent = normalized;
                errorBox.style.display = 'block';
                return;
            }

            alert(normalized);
        };

        $('#ataTranscribeBtn').on('click', async function () {
            const fileInput = document.getElementById('ataTranscribeFile');
            const youtubeUrl = document.getElementById('ataYoutubeUrl').value.trim();

            if ((!fileInput.files || !fileInput.files.length) && !youtubeUrl) {
                alert('Selecione um arquivo de áudio/vídeo ou cole um link do YouTube.');
                return;
            }

            const btn = this;
            btn.disabled = true;
            const oldText = btn.innerHTML;
            btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Transcrevendo...';
            const overlay = document.getElementById('ataTranscribeOverlay');
            const preview = document.getElementById('ataTranscribePreview');
            const notice = document.getElementById('ataTranscribeNotice');
            const errorBox = document.getElementById('ataTranscribeError');
            const applyBtn = document.getElementById('ataApplyTranscriptBtn');
            let pollTimer = null;
            let cleanText = '';
            const resetBtn = () => {
                btn.disabled = false;
                btn.innerHTML = oldText;
            };
            if (overlay) {
                overlay.style.display = 'none';
            }
            if (preview) {
                preview.style.display = 'block';
                preview.textContent = '';
            }
            if (notice) notice.style.display = 'none';
            if (errorBox) errorBox.style.display = 'none';

            try {
                const formData = new FormData();
                formData.append('prompt', document.getElementById('ataAiPrompt').value || '');
                const modelFile = document.getElementById('ataModelFile');
                if (modelFile && modelFile.files && modelFile.files.length) {
                    formData.append('model_file', modelFile.files[0]);
                }

                let url = "{{ route('meetings.ata.transcribe.queue', ['meeting_id' => $meeting->id]) }}";

                if (youtubeUrl) {
                    formData.append('url', youtubeUrl);
                    url = "{{ route('meetings.ata.transcribe.queue.youtube', ['meeting_id' => $meeting->id]) }}";
                } else {
                    formData.append('file', fileInput.files[0]);
                }

                const response = await fetch(url, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name=\"csrf-token\"]')
                            .getAttribute('content'),
                    },
                    body: formData,
                });

                if (!response.ok) {
                    const data = await response.json().catch(() => ({}));
                    showAtaTranscribeError(errorBox, extractAtaTranscribeError(data, response.status));
                    resetBtn();
                    return;
                }

                const statusUrl = "{{ route('meetings.ata.transcribe.status', ['meeting_id' => $meeting->id]) }}";
                const resultUrl = "{{ route('meetings.ata.transcribe.result', ['meeting_id' => $meeting->id]) }}";

                const fetchStatus = async () => {
                    const res = await fetch(statusUrl, { headers: { 'Accept': 'application/json' } });
                    if (!res.ok) {
                        return;
                    }
                    const data = await res.json().catch(() => ({}));
                    const status = data.status || 'idle';
                    const progress = typeof data.progress === 'number' ? data.progress : null;

                    if (preview) {
                        const progressText = progress !== null ? `Progresso: ${progress}%` : 'Aguardando ata...';
                        preview.textContent = progressText;
                    }

                    if (status === 'idle') {
                        if (errorBox) {
                            errorBox.style.display = 'none';
                            errorBox.textContent = '';
                        }
                        return;
                    }

                    if (status === 'queued') {
                        return;
                    }
                    if (status === 'processing') {
                        return;
                    }
                    if (status === 'ready') {
                        clearInterval(pollTimer);
                        pollTimer = null;
                        resetBtn();

                        const resultRes = await fetch(resultUrl, { headers: { 'Accept': 'application/json' } });
                        const result = await resultRes.json().catch(() => ({}));
                        cleanText = result.clean || '';
                        const formattedText = result.formatted || '';

                        if (notice) {
                            notice.style.display = 'block';
                        }
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                toast: true,
                                position: 'top-end',
                                icon: 'success',
                                title: 'Transcrição pronta',
                                showConfirmButton: false,
                                timer: 4000
                            });
                        }
                        if (overlay) overlay.style.display = 'none';
                        if (formattedText) {
                            if (typeof CKEDITOR !== 'undefined' && CKEDITOR.instances['ata_formatted']) {
                                CKEDITOR.instances['ata_formatted'].setData(formattedText);
                            } else {
                                const formattedEl = document.getElementById('ata_formatted');
                                if (formattedEl) formattedEl.value = formattedText;
                            }
                        }
                        return;
                    }
                    if (status === 'error') {
                        clearInterval(pollTimer);
                        pollTimer = null;
                        resetBtn();
                        showAtaTranscribeError(errorBox, data.error || 'Erro ao transcrever ata.');
                        if (overlay) overlay.style.display = 'none';
                    }
                };

                pollTimer = setInterval(fetchStatus, 5000);
                await fetchStatus();

                if (applyBtn) {
                    applyBtn.onclick = function () {
                        if (!cleanText) {
                            alert('Nenhum texto disponível para aplicar.');
                            return;
                        }
                        if (typeof CKEDITOR !== 'undefined' && CKEDITOR.instances['ata']) {
                            CKEDITOR.instances['ata'].setData(cleanText);
                        } else {
                            document.getElementById('ata').value = cleanText;
                        }
                    };
                }
            } catch (error) {
                showAtaTranscribeError(errorBox, 'Erro na requisicao: ' + error.message);
                resetBtn();
            } finally {
                if (preview) preview.style.display = 'block';
            }
        });

        const ataChatHistory = [];
        const ataChatHistoryEl = document.getElementById('ataChatHistory');
        const renderChat = () => {
            if (!ataChatHistoryEl) return;
            ataChatHistoryEl.innerHTML = '';
            ataChatHistory.forEach((msg) => {
                const row = document.createElement('div');
                row.className = 'ata-chat-row ' + (msg.role === 'user' ? 'user' : 'assistant');
                const bubble = document.createElement('div');
                bubble.className = 'ata-chat-bubble';
                bubble.textContent = msg.text;
                row.appendChild(bubble);
                ataChatHistoryEl.appendChild(row);
            });
            ataChatHistoryEl.scrollTop = ataChatHistoryEl.scrollHeight;
        };

        const addChatMessage = (role, text) => {
            ataChatHistory.push({ role, text });
            renderChat();
        };

        const getAtaText = () => {
            if (typeof CKEDITOR !== 'undefined' && CKEDITOR.instances['ata']) {
                return CKEDITOR.instances['ata'].getData() || '';
            }
            const el = document.getElementById('ata');
            return el ? el.value : '';
        };

        const applyAtaText = (html) => {
            if (typeof CKEDITOR !== 'undefined' && CKEDITOR.instances['ata']) {
                CKEDITOR.instances['ata'].setData(html);
            } else {
                document.getElementById('ata').value = html;
            }
        };

        const formatWithAi = async (promptText) => {
            const text = getAtaText();
            if (!text || text.trim().length < 5) {
                alert('Nenhum texto na ata para formatar.');
                return;
            }
            const res = await fetch("{{ route('meetings.ata.format', ['meeting_id' => $meeting->id]) }}", {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content'),
                },
                body: JSON.stringify({ text, prompt: promptText }),
            });
            if (!res.ok) {
                const data = await res.json().catch(() => ({}));
                alert(data.error || 'Erro ao formatar.');
                return;
            }
            const data = await res.json().catch(() => ({}));
            if (data.ata_html) {
                applyAtaText(data.ata_html);
                addChatMessage('assistant', 'Formatação aplicada.');
            } else {
                addChatMessage('assistant', 'Não houve retorno formatado.');
            }
        };

        const chatSendBtn = document.getElementById('ataChatSend');
        const chatApplyBtn = document.getElementById('ataChatApply');
        if (chatSendBtn) {
            chatSendBtn.addEventListener('click', async () => {
                const input = document.getElementById('ataAiPrompt');
                const promptText = (input.value || '').trim();
                if (!promptText) return;
                addChatMessage('user', promptText);
                input.value = '';
            });
        }
        if (chatApplyBtn) {
            chatApplyBtn.addEventListener('click', async () => {
                const input = document.getElementById('ataAiPrompt');
                const promptText = (input.value || '').trim();
                if (promptText) {
                    addChatMessage('user', promptText);
                    input.value = '';
                }
                const lastUser = [...ataChatHistory].reverse().find((m) => m.role === 'user');
                const usePrompt = lastUser ? lastUser.text : '';
                addChatMessage('assistant', 'Formatando...');
                await formatWithAi(usePrompt);
            });
        }

        window.addEventListener('load', async function () {
            const statusUrl = "{{ route('meetings.ata.transcribe.status', ['meeting_id' => $meeting->id]) }}";
            const resultUrl = "{{ route('meetings.ata.transcribe.result', ['meeting_id' => $meeting->id]) }}";
            const overlay = document.getElementById('ataTranscribeOverlay');
            const preview = document.getElementById('ataTranscribePreview');
            const notice = document.getElementById('ataTranscribeNotice');
            const errorBox = document.getElementById('ataTranscribeError');
            const applyBtn = document.getElementById('ataApplyTranscriptBtn');
            let pollTimer = null;
            let cleanText = '';

            const showReady = async () => {
                const resultRes = await fetch(resultUrl, { headers: { 'Accept': 'application/json' } });
                const result = await resultRes.json().catch(() => ({}));
                cleanText = result.clean || '';

                if (notice) {
                    notice.style.display = 'block';
                }
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'success',
                        title: 'Transcrição pronta',
                        showConfirmButton: false,
                        timer: 4000
                    });
                }
                if (overlay) overlay.style.display = 'none';
                if (applyBtn) {
                    applyBtn.onclick = function () {
                        if (!cleanText) {
                            alert('Nenhum texto disponível para aplicar.');
                            return;
                        }
                        if (typeof CKEDITOR !== 'undefined' && CKEDITOR.instances['ata']) {
                            CKEDITOR.instances['ata'].setData(cleanText);
                        } else {
                            document.getElementById('ata').value = cleanText;
                        }
                    };
                }
            };

            const fetchStatus = async () => {
                const res = await fetch(statusUrl, { headers: { 'Accept': 'application/json' } });
                if (!res.ok) {
                    return;
                }
                const data = await res.json().catch(() => ({}));
                const status = data.status || 'idle';
                const progress = typeof data.progress === 'number' ? data.progress : null;

                if (preview) {
                    preview.style.display = 'block';
                    const progressText = progress !== null ? `Progresso: ${progress}%` : 'Processando...';
                    preview.textContent = progressText;
                }

                if (status === 'idle') {
                    if (errorBox) {
                        errorBox.style.display = 'none';
                        errorBox.textContent = '';
                    }
                    return;
                }

                if (status === 'queued') {
                    if (overlay) overlay.style.display = 'none';
                    return;
                }
                if (status === 'processing') {
                    if (overlay) overlay.style.display = 'none';
                    return;
                }
                if (status === 'ready') {
                    clearInterval(pollTimer);
                    pollTimer = null;
                    await showReady();
                    return;
                }
                if (status === 'error') {
                    clearInterval(pollTimer);
                    pollTimer = null;
                    showAtaTranscribeError(errorBox, data.error || 'Erro ao transcrever ata.');
                    if (overlay) overlay.style.display = 'none';
                }
            };

            await fetchStatus();
            if (!pollTimer) {
                pollTimer = setInterval(fetchStatus, 5000);
            }
        });
    </script>

    <style>
        .ata-ai-panel {
            border: 1px solid #d7e2ec;
            background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
        }

        .ata-ai-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid #e2e8f0;
        }

        .ata-ai-panel-title {
            font-size: 22px;
            font-weight: 700;
            color: #23415f;
            line-height: 1.2;
        }

        .ata-ai-panel-subtitle {
            font-size: 13px;
            color: #6b7280;
            margin-top: 4px;
        }

        .ata-ai-grid {
            display: flex;
            flex-wrap: wrap;
            row-gap: 14px;
        }

        .ata-ai-section {
            margin-bottom: 10px;
        }

        .ata-ai-label {
            display: block;
            margin-bottom: 4px;
            font-size: 15px;
            font-weight: 700;
            color: #334155;
        }

        .ata-ai-label-sm {
            display: block;
            margin-bottom: 6px;
            font-size: 13px;
            font-weight: 600;
            color: #475569;
        }

        .ata-ai-helper {
            color: #64748b;
            font-size: 12px;
            line-height: 1.4;
        }

        .ata-ai-uploader {
            border: 1px solid #dbe5ef;
            border-radius: 12px;
            background: #fff;
            padding: 14px;
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
        }

        .ata-ai-field+.ata-ai-field {
            margin-top: 12px;
        }

        .ata-transcribe-btn {
            margin-top: 14px;
            height: 46px;
            border: 0;
            border-radius: 10px;
            background: linear-gradient(135deg, #1fbf98 0%, #32c5a4 100%);
            font-size: 15px;
            font-weight: 700;
            box-shadow: 0 12px 24px rgba(50, 197, 164, 0.22);
        }

        .ata-transcribe-btn:hover,
        .ata-transcribe-btn:focus {
            background: linear-gradient(135deg, #17b08b 0%, #28b895 100%);
        }

        .ata-ai-footnote {
            margin-top: 12px;
            font-size: 12px;
            line-height: 1.5;
            color: #64748b;
        }

        .ata-ai-status-wrap {
            margin-top: 6px;
        }

        .ata-transcribe-overlay {
            display: none;
        }

        .ata-transcribe-card {
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 18px 22px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            text-align: center;
            max-width: 420px;
        }

        .ata-transcribe-card .title {
            font-weight: 700;
            font-size: 16px;
            margin-top: 10px;
        }

        .ata-transcribe-card .subtitle {
            color: #6b7280;
            margin-top: 6px;
            font-size: 13px;
        }

        .ata-transcribe-card .hint {
            color: #9ca3af;
            margin-top: 6px;
            font-size: 12px;
        }

        .ata-transcribe-card .spinner {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: 3px solid #e5e7eb;
            border-top-color: #2563eb;
            animation: ata-spin 0.8s linear infinite;
            margin: 0 auto;
        }

        .ata-transcribe-card .steps {
            margin-top: 12px;
            text-align: left;
            font-size: 12px;
            color: #6b7280;
        }

        .ata-transcribe-card .step-item {
            padding: 4px 0;
            position: relative;
        }

        .ata-transcribe-card .step-item.active {
            color: #2563eb;
            font-weight: 600;
        }

        .ata-transcribe-card .step-item.done {
            color: #10b981;
        }

        .ata-transcribe-preview {
            background: #f1f5f9;
            color: #0f172a;
            border-radius: 8px;
            padding: 10px 12px;
            font-size: 12px;
            line-height: 1.4;
            max-height: 140px;
            overflow: auto;
            white-space: pre-wrap;
            border: 1px solid #e2e8f0;
        }

        .ata-chat {
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 12px;
            background: #ffffff;
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
        }

        .ata-chat-header {
            font-weight: 600;
            font-size: 13px;
            color: #334155;
            margin-bottom: 6px;
        }

        .ata-chat-history {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 8px;
            min-height: 130px;
            overflow: auto;
            font-size: 12px;
        }

        .ata-chat-row {
            display: flex;
            margin-bottom: 6px;
        }

        .ata-chat-row.user {
            justify-content: flex-end;
        }

        .ata-chat-bubble {
            padding: 6px 8px;
            border-radius: 8px;
            background: #e2e8f0;
            max-width: 85%;
        }

        .ata-chat-row.user .ata-chat-bubble {
            background: #2563eb;
            color: #ffffff;
        }

        .ata-chat-input {
            margin-top: 8px;
        }

        .ata-chat-actions {
            margin-top: 8px;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        @keyframes ata-spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        @media (max-width: 991px) {
            .ata-ai-panel-title {
                font-size: 18px;
            }

            .ata-ai-panel-header {
                margin-bottom: 12px;
            }

            .ata-ai-uploader {
                margin-top: 4px;
            }
        }
    </style>

    <script>
        $(".assemblymenChosen").chosen({
            disable_search_threshold: 10,
            no_results_text: "Oops, nothing found!",
            width: "95%"
        });
    </script>

    <script>
        $(document).ready(function () {
            let videoIdToRemove = null;

            // Função para carregar o vídeo ao iniciar a página
            reloadVideo();

            function reloadVideo() {
                var id = $('#meeting_id_toggle').val();
                let url = '/meetings/video/toggle/' + id;

                $.ajax({
                    url: url,
                    method: 'GET',
                    success: function (result) {
                        let converted = JSON.parse(result);
                        if (converted.length) {
                            let videoId = converted[0].url.split('v=')[1] || converted[0].url.split('/')
                                .pop();

                            $('.video-thumbnails').append(`
                                        <div class="video-container" id="youtube-video-${converted[0].meeting_id}">
                                            <iframe width="100%" height="400" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allowfullscreen></iframe>
                                            <a href="#" class="btn btn-danger remove-video" data-id="${converted[0].meeting_id}">
                                                Remover
                                            </a>
                                        </div>
                                    `.replace(/ID_PLACEHOLDER/g, converted[0].meeting_id));

                            $('#youtubeModal').modal('hide');
                            $('#youtubeLinkInput').val('');
                            $('#add-video-container').hide();
                        } else {
                            $('.video-thumbnails').append(`
                                        <div class="video-container" id="youtube-video-error">
                                        </div>`);
                        }
                    }
                });
            }

            // Função para adicionar o vídeo ao enviar o formulário
            $('#form-video-ata').submit(function (e) {
                e.preventDefault();
                var url = '{{ route('meeting.video.store') }}';
                var link = $('#youtubeLinkInput').val();

                if (link.includes('youtube.com') || link.includes('youtu.be')) {
                    let videoId = link.split('v=')[1] || link.split('/').pop();

                    $.ajax({
                        url: url,
                        method: 'POST',
                        data: $(this).serialize(),
                        success: function (result) {
                            $('.video-thumbnails').html('');

                            $('.video-thumbnails').append(`
                                        <div class="video-container" id="youtube-video-${result.meeting_id}">
                                            <iframe width="100%" height="400" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allowfullscreen></iframe>
                                            <a href="#" class="btn btn-danger remove-video" data-id="${result.meeting_id}">
                                                Remover
                                            </a>
                                        </div>
                                    `.replace(/ID_PLACEHOLDER/g, result.meeting_id));

                            $('#youtubeModal').modal('hide');
                            $('#youtubeLinkInput').val('');
                            $('#add-video-container').hide();
                        },
                        error: function (jqXHR) {
                            var errorMessage = jqXHR.responseJSON?.error ||
                                'Ocorreu um erro ao salvar o vídeo.';
                            toastr.error(errorMessage);
                        }
                    });
                } else {
                    toastr.error('Por favor, insira um link válido do YouTube.');
                }
            });

            //pega do modal
            $(document).on('click', '.remove-video', function (e) {
                e.preventDefault();
                videoIdToRemove = $(this).data('id');
                $('#confirmRemoveModal').modal('show');
                // console.log(this);
            });

            // Confirmação da remoção do vídeo
            $('#confirmRemoveBtn').on('click', function () {
                if (videoIdToRemove) {
                    $.ajax({
                        url: '/meetings/video/' + videoIdToRemove,
                        method: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function (response) {
                            $('#youtube-video-' + videoIdToRemove).remove();
                            $('#confirmRemoveModal').modal('hide');
                            toastr.success(response.success || 'Vídeo removido com sucesso.');
                        },
                        error: function (jqXHR) {
                            toastr.error(jqXHR.responseJSON?.error ||
                                'Erro ao remover o vídeo.');
                        }
                    });
                }
            });
        });
    </script>
@endsection