@php
    $forceEnabled = $forceEnabled ?? false;
    $commentsEnabled = false;
    
    if (isset($article) && $article->section) {
        // Seções especiais que sempre permitem comentários
        $specialSections = ['bastidores-da-politica', 'coluna-do-holanda'];
        $isSpecialSection = in_array($article->section->slug, $specialSections);
        
        $commentsEnabled = $forceEnabled || $isSpecialSection || $article->section->comments_enabled;
    }
    
    $comments = [];
    
    if ($commentsEnabled) {
        $comments = \App\Models\Comment::with(['approvedReplies', 'user'])
            ->where('article_id', $article->id)
            ->where('status', 'approved')
            ->whereNull('parent_id')
            ->orderBy('created_at', 'desc')
            ->get();
    }
@endphp

@if($commentsEnabled)
<div class="jl_comments_section" id="comments-section">
    <style>
        .jl_comments_section {
            margin-top: 30px;
            padding: 20px;
            background: #f9fafb;
            border-radius: 8px;
        }
        .dark .jl_comments_section {
            background: #1f2937;
        }
        .jl_comments_title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e5e7eb;
        }
        .dark .jl_comments_title {
            border-bottom-color: #374151;
        }
        .jl_comment_form {
            margin-bottom: 30px;
            padding: 20px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .dark .jl_comment_form {
            background: #374151;
        }
        .jl_comment_form_title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 15px;
        }
        .jl_comment_form_row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 15px;
        }
        @media (max-width: 640px) {
            .jl_comment_form_row {
                grid-template-columns: 1fr;
            }
        }
        .jl_comment_form_group {
            display: flex;
            flex-direction: column;
        }
        .jl_comment_form_group label {
            font-size: 0.875rem;
            font-weight: 500;
            margin-bottom: 5px;
            color: #374151;
        }
        .dark .jl_comment_form_group label {
            color: #d1d5db;
        }
        .jl_comment_form_group input,
        .jl_comment_form_group textarea {
            padding: 10px 12px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 0.95rem;
            transition: border-color 0.2s;
        }
        .dark .jl_comment_form_group input,
        .dark .jl_comment_form_group textarea {
            background: #1f2937;
            border-color: #4b5563;
            color: #f9fafb;
        }
        .jl_comment_form_group input:focus,
        .jl_comment_form_group textarea:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        .jl_comment_form_group textarea {
            min-height: 100px;
            resize: vertical;
        }
        .jl_comment_submit_btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            background: #3b82f6;
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.2s;
        }
        .jl_comment_submit_btn:hover {
            background: #2563eb;
        }
        .jl_comment_submit_btn:disabled {
            background: #9ca3af;
            cursor: not-allowed;
        }
        .jl_comment_list {
            margin-top: 20px;
        }
        .jl_comment_item {
            padding: 15px;
            background: #fff;
            border-radius: 8px;
            margin-bottom: 15px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .dark .jl_comment_item {
            background: #374151;
        }
        .jl_comment_header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .jl_comment_author {
            font-weight: 600;
            color: #111827;
        }
        .dark .jl_comment_author {
            color: #f9fafb;
        }
        .jl_comment_date {
            font-size: 0.8rem;
            color: #6b7280;
        }
        .jl_comment_content {
            color: #374151;
            line-height: 1.6;
        }
        .dark .jl_comment_content {
            color: #d1d5db;
        }
        .jl_comment_reply_btn {
            margin-top: 10px;
            padding: 6px 12px;
            font-size: 0.8rem;
            font-weight: 500;
            color: #2563eb;
            background: #dbeafe !important;
            border: 1px solid #3b82f6;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
        }
        .dark .jl_comment_reply_btn {
            background: #1e3a8a !important;
            color: #93c5fd;
            border-color: #3b82f6;
        }
        .jl_comment_reply_btn:hover {
            background: #3b82f6 !important;
            color: #fff;
            border-color: #2563eb;
        }
        .dark .jl_comment_reply_btn:hover {
            background: #2563eb !important;
            color: #fff;
        }
        .jl_comment_replies {
            margin-top: 15px;
            margin-left: 30px;
            padding-left: 15px;
            border-left: 2px solid #e5e7eb;
        }
        .dark .jl_comment_replies {
            border-left-color: #4b5563;
        }
        .jl_comment_reply_form {
            margin-top: 15px;
            padding: 15px;
            background: #f3f4f6;
            border-radius: 6px;
        }
        .dark .jl_comment_reply_form {
            background: #1f2937;
        }
        .jl_comment_success {
            padding: 15px;
            background: #d1fae5;
            color: #065f46;
            border-radius: 6px;
            margin-bottom: 15px;
        }
        .jl_comment_error {
            padding: 15px;
            background: #fee2e2;
            color: #991b1b;
            border-radius: 6px;
            margin-bottom: 15px;
        }
        .jl_no_comments {
            padding: 30px;
            text-align: center;
            color: #6b7280;
        }
        /* Modal Styles */
        .jl_modal_overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .jl_modal_overlay.show {
            opacity: 1;
            visibility: visible;
        }
        .jl_modal {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            max-width: 500px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            transform: scale(0.95);
            transition: transform 0.3s ease;
        }
        .dark .jl_modal {
            background: #1f2937;
        }
        .jl_modal_overlay.show .jl_modal {
            transform: scale(1);
        }
        .jl_modal_header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 20px 24px;
            border-bottom: 1px solid #e5e7eb;
        }
        .dark .jl_modal_header {
            border-bottom-color: #374151;
        }
        .jl_modal_icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .jl_modal_icon.success {
            background: #d1fae5;
            color: #065f46;
        }
        .dark .jl_modal_icon.success {
            background: #064e3b;
            color: #6ee7b7;
        }
        .jl_modal_icon.error {
            background: #fee2e2;
            color: #991b1b;
        }
        .dark .jl_modal_icon.error {
            background: #7f1d1d;
            color: #fca5a5;
        }
        .jl_modal_icon.info {
            background: #dbeafe;
            color: #1e40af;
        }
        .dark .jl_modal_icon.info {
            background: #1e3a8a;
            color: #93c5fd;
        }
        .jl_modal_title {
            font-size: 1.125rem;
            font-weight: 600;
            flex: 1;
            color: #111827;
        }
        .dark .jl_modal_title {
            color: #f9fafb;
        }
        .jl_modal_close {
            background: none;
            border: none;
            color: #6b7280;
            cursor: pointer;
            padding: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: all 0.2s;
        }
        .jl_modal_close:hover {
            background: #f3f4f6;
            color: #111827;
        }
        .dark .jl_modal_close:hover {
            background: #374151;
            color: #f9fafb;
        }
        .jl_modal_body {
            padding: 24px;
            color: #374151;
            line-height: 1.6;
        }
        .dark .jl_modal_body {
            color: #d1d5db;
        }
        .jl_modal_footer {
            padding: 16px 24px;
            border-top: 1px solid #e5e7eb;
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }
        .dark .jl_modal_footer {
            border-top-color: #374151;
        }
        .jl_modal_btn {
            padding: 10px 20px;
            border-radius: 6px;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
        }
        .jl_modal_btn_primary {
            background: #3b82f6;
            color: #fff;
        }
        .jl_modal_btn_primary:hover {
            background: #2563eb;
        }
    </style>

    <h3 class="jl_comments_title">
        Comentários ({{ $comments->count() }})
    </h3>

    <!-- Formulário de comentário -->
    <div class="jl_comment_form">
        <h4 class="jl_comment_form_title">Deixe seu comentário</h4>
        
        <div id="comment-message"></div>
        
        <form id="comment-form">
            @csrf
            <input type="hidden" name="article_id" value="{{ $article->id }}">
            
            <div class="jl_comment_form_row">
                <div class="jl_comment_form_group">
                    <label for="author_name">Nome *</label>
                    <input type="text" id="author_name" name="author_name" required>
                </div>
                <div class="jl_comment_form_group">
                    <label for="author_email">E-mail *</label>
                    <input type="email" id="author_email" name="author_email" required>
                </div>
            </div>
            
            <div class="jl_comment_form_group" style="margin-bottom: 15px;">
                <label for="content">Comentário *</label>
                <textarea id="content" name="content" required maxlength="2000" placeholder="Escreva seu comentário aqui..."></textarea>
            </div>
            
            <div class="jl_comment_form_group" style="margin-bottom: 15px;">
                <label for="captcha_answer">Verificação de segurança *</label>
                <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
                    <div style="display: flex; align-items: center; gap: 5px; padding: 8px 12px; background: #f3f4f6; border-radius: 6px; font-weight: 600; color: #374151;">
                        <span id="captcha-question"></span>
                        <button type="button" onclick="generateCaptcha()" style="background: none; border: none; color: #3b82f6; cursor: pointer; padding: 2px 6px; font-size: 0.9rem;" title="Gerar novo desafio">
                            <svg style="width: 16px; height: 16px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                            </svg>
                        </button>
                    </div>
                    <input type="number" id="captcha_answer" name="captcha_answer" required style="width: 160px; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.95rem;" placeholder="Resposta" min="0" step="1" onkeypress="return event.charCode >= 48 && event.charCode <= 57" onpaste="return false" ondrop="return false">
                    <input type="hidden" id="captcha_hash" name="captcha_hash">
                </div>
                <small style="color: #6b7280; font-size: 0.8rem; margin-top: 4px; display: block;">Resolva a operação matemática acima</small>
            </div>
            
            <button type="submit" class="jl_comment_submit_btn" id="submit-comment-btn">
                Enviar Comentário
            </button>
        </form>
    </div>

    <!-- Lista de comentários -->
    <div class="jl_comment_list">
        @if($comments->count() > 0)
            @foreach($comments as $comment)
                <div class="jl_comment_item" id="comment-{{ $comment->id }}">
                    <div class="jl_comment_header">
                        <span class="jl_comment_author">{{ $comment->author_name }}</span>
                        <span class="jl_comment_date">{{ $comment->created_at->format('d/m/Y H:i') }}</span>
                    </div>
                    <div class="jl_comment_content">
                        {!! nl2br(e($comment->content)) !!}
                    </div>
                    <button type="button" class="jl_comment_reply_btn" onclick="showReplyForm({{ $comment->id }})">
                        Responder
                    </button>
                    
                    <!-- Formulário de resposta (oculto por padrão) -->
                    <div class="jl_comment_reply_form" id="reply-form-{{ $comment->id }}" style="display: none;">
                        <form onsubmit="submitReply(event, {{ $comment->id }})">
                            <input type="hidden" name="parent_id" value="{{ $comment->id }}">
                            <input type="hidden" name="article_id" value="{{ $article->id }}">
                            
                            <div class="jl_comment_form_row">
                                <div class="jl_comment_form_group">
                                    <label>Nome *</label>
                                    <input type="text" name="author_name" required>
                                </div>
                                <div class="jl_comment_form_group">
                                    <label>E-mail *</label>
                                    <input type="email" name="author_email" required>
                                </div>
                            </div>
                            
                            <div class="jl_comment_form_group" style="margin-bottom: 10px;">
                                <label>Resposta *</label>
                                <textarea name="content" required maxlength="2000" style="min-height: 80px;"></textarea>
                            </div>
                            
                            <div class="jl_comment_form_group" style="margin-bottom: 10px;">
                                <label>Verificação de segurança *</label>
                                <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
                                    <div style="display: flex; align-items: center; gap: 5px; padding: 8px 12px; background: #f3f4f6; border-radius: 6px; font-weight: 600; color: #374151;">
                                        <span class="reply-captcha-question-{{ $comment->id }}"></span>
                                        <button type="button" onclick="generateReplyCaptcha({{ $comment->id }})" style="background: none; border: none; color: #3b82f6; cursor: pointer; padding: 2px 6px; font-size: 0.9rem;" title="Gerar novo desafio">
                                            <svg style="width: 16px; height: 16px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                                            </svg>
                                        </button>
                                    </div>
                                    <input type="number" class="reply-captcha-answer-{{ $comment->id }}" required style="width: 160px; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.95rem;" placeholder="Resposta" min="0" step="1" onkeypress="return event.charCode >= 48 && event.charCode <= 57" onpaste="return false" ondrop="return false">
                                    <input type="hidden" class="reply-captcha-hash-{{ $comment->id }}">
                                </div>
                                <small style="color: #6b7280; font-size: 0.8rem; margin-top: 4px; display: block;">Resolva a operação matemática acima</small>
                            </div>
                            
                            <div style="display: flex; gap: 10px;">
                                <button type="submit" class="jl_comment_submit_btn" style="padding: 8px 15px; font-size: 0.85rem;">
                                    Enviar Resposta
                                </button>
                                <button type="button" class="jl_comment_reply_btn" onclick="hideReplyForm({{ $comment->id }})">
                                    Cancelar
                                </button>
                            </div>
                        </form>
                    </div>
                    
                    <!-- Respostas -->
                    @if($comment->approvedReplies && $comment->approvedReplies->count() > 0)
                        <div class="jl_comment_replies">
                            @foreach($comment->approvedReplies as $reply)
                                <div class="jl_comment_item" style="margin-bottom: 10px;">
                                    <div class="jl_comment_header">
                                        <span class="jl_comment_author">{{ $reply->author_name }}</span>
                                        <span class="jl_comment_date">{{ $reply->created_at->format('d/m/Y H:i') }}</span>
                                    </div>
                                    <div class="jl_comment_content">
                                        {!! nl2br(e($reply->content)) !!}
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            @endforeach
        @else
            <div class="jl_no_comments">
                Seja o primeiro a comentar!
            </div>
        @endif
    </div>

    <!-- Modal -->
    <div id="comment-modal" class="jl_modal_overlay">
        <div class="jl_modal">
            <div class="jl_modal_header">
                <div class="jl_modal_icon" id="modal-icon">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <h3 class="jl_modal_title" id="modal-title">Aviso</h3>
                <button type="button" class="jl_modal_close" onclick="closeModal()">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            <div class="jl_modal_body" id="modal-message">
                Mensagem
            </div>
            <div class="jl_modal_footer">
                <button type="button" class="jl_modal_btn jl_modal_btn_primary" onclick="closeModal()">
                    OK
                </button>
            </div>
        </div>
    </div>

    <script>
        let isSubmittingComment = false;
        let isSubmittingReply = {};
        let currentCaptchaAnswer = 0;

        // CAPTCHA functions
        function generateCaptcha() {
            const num1 = Math.floor(Math.random() * 10) + 1;
            const num2 = Math.floor(Math.random() * 10) + 1;
            const operators = ['+', '-', '×'];
            const operator = operators[Math.floor(Math.random() * operators.length)];
            
            let answer = 0;
            let question = '';
            
            switch(operator) {
                case '+':
                    answer = num1 + num2;
                    question = `${num1} + ${num2} = ?`;
                    break;
                case '-':
                    // Garantir que o resultado seja positivo
                    const maxNum = Math.max(num1, num2);
                    const minNum = Math.min(num1, num2);
                    answer = maxNum - minNum;
                    question = `${maxNum} - ${minNum} = ?`;
                    break;
                case '×':
                    answer = num1 * num2;
                    question = `${num1} × ${num2} = ?`;
                    break;
            }
            
            currentCaptchaAnswer = answer;
            document.getElementById('captcha-question').textContent = question;
            
            // Gerar hash simples para validação no backend
            const hash = btoa(`${answer}-${Date.now()}`).substring(0, 16);
            document.getElementById('captcha_hash').value = hash;
            
            // Limpar campo de resposta
            document.getElementById('captcha_answer').value = '';
        }

        // Função para gerar CAPTCHA de resposta
        const replyCaptchaAnswers = {};
        
        function generateReplyCaptcha(commentId) {
            const num1 = Math.floor(Math.random() * 10) + 1;
            const num2 = Math.floor(Math.random() * 10) + 1;
            const operators = ['+', '-', '×'];
            const operator = operators[Math.floor(Math.random() * operators.length)];
            
            let answer = 0;
            let question = '';
            
            switch(operator) {
                case '+':
                    answer = num1 + num2;
                    question = `${num1} + ${num2} = ?`;
                    break;
                case '-':
                    const maxNum = Math.max(num1, num2);
                    const minNum = Math.min(num1, num2);
                    answer = maxNum - minNum;
                    question = `${maxNum} - ${minNum} = ?`;
                    break;
                case '×':
                    answer = num1 * num2;
                    question = `${num1} × ${num2} = ?`;
                    break;
            }
            
            replyCaptchaAnswers[commentId] = answer;
            document.querySelector(`.reply-captcha-question-${commentId}`).textContent = question;
            
            const hash = btoa(`${answer}-${Date.now()}`).substring(0, 16);
            document.querySelector(`.reply-captcha-hash-${commentId}`).value = hash;
            
            document.querySelector(`.reply-captcha-answer-${commentId}`).value = '';
        }

        // Bloquear entrada de caracteres não numéricos nos campos CAPTCHA
        function setupCaptchaInputs() {
            const captchaInput = document.getElementById('captcha_answer');
            if (captchaInput) {
                captchaInput.addEventListener('input', function(e) {
                    // Remove qualquer caractere que não seja número
                    this.value = this.value.replace(/[^0-9]/g, '');
                });
                
                captchaInput.addEventListener('keydown', function(e) {
                    // Permite: backspace, delete, tab, escape, enter, setas
                    if ([46, 8, 9, 27, 13, 35, 36, 37, 38, 39, 40].indexOf(e.keyCode) !== -1 ||
                        // Permite Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X
                        (e.keyCode === 65 && e.ctrlKey === true) ||
                        (e.keyCode === 67 && e.ctrlKey === true) ||
                        (e.keyCode === 86 && e.ctrlKey === true) ||
                        (e.keyCode === 88 && e.ctrlKey === true) ||
                        // Permite home, end, left, right
                        (e.keyCode >= 35 && e.keyCode <= 40)) {
                        return;
                    }
                    // Bloqueia se não for número
                    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                        e.preventDefault();
                    }
                });
            }
        }

        // Gerar CAPTCHA ao carregar a página
        if (document.getElementById('captcha-question')) {
            generateCaptcha();
            setupCaptchaInputs();
        }

        // Modal functions
        function showModal(type, title, message) {
            const modal = document.getElementById('comment-modal');
            const icon = document.getElementById('modal-icon');
            const titleEl = document.getElementById('modal-title');
            const messageEl = document.getElementById('modal-message');
            
            // Remove todas as classes de tipo do ícone
            icon.className = 'jl_modal_icon ' + type;
            
            // Define o ícone baseado no tipo
            let iconSvg = '';
            if (type === 'success') {
                iconSvg = '<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>';
            } else if (type === 'error') {
                iconSvg = '<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>';
            } else {
                iconSvg = '<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>';
            }
            
            icon.innerHTML = iconSvg;
            titleEl.textContent = title;
            messageEl.textContent = message;
            
            modal.classList.add('show');
            
            // Fechar ao pressionar ESC
            document.addEventListener('keydown', handleEscKey);
        }

        function closeModal() {
            const modal = document.getElementById('comment-modal');
            modal.classList.remove('show');
            document.removeEventListener('keydown', handleEscKey);
        }

        function handleEscKey(e) {
            if (e.key === 'Escape') {
                closeModal();
            }
        }

        // Fechar ao clicar no overlay
        document.getElementById('comment-modal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeModal();
            }
        });

        function setupReplyCaptchaInput(commentId) {
            const replyInput = document.querySelector(`.reply-captcha-answer-${commentId}`);
            if (replyInput) {
                replyInput.addEventListener('input', function(e) {
                    // Remove qualquer caractere que não seja número
                    this.value = this.value.replace(/[^0-9]/g, '');
                });
                
                replyInput.addEventListener('keydown', function(e) {
                    // Permite: backspace, delete, tab, escape, enter, setas
                    if ([46, 8, 9, 27, 13, 35, 36, 37, 38, 39, 40].indexOf(e.keyCode) !== -1 ||
                        // Permite Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X
                        (e.keyCode === 65 && e.ctrlKey === true) ||
                        (e.keyCode === 67 && e.ctrlKey === true) ||
                        (e.keyCode === 86 && e.ctrlKey === true) ||
                        (e.keyCode === 88 && e.ctrlKey === true) ||
                        // Permite home, end, left, right
                        (e.keyCode >= 35 && e.keyCode <= 40)) {
                        return;
                    }
                    // Bloqueia se não for número
                    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                        e.preventDefault();
                    }
                });
            }
        }

        function showReplyForm(commentId) {
            document.getElementById('reply-form-' + commentId).style.display = 'block';
            // Gerar CAPTCHA quando o formulário de resposta for exibido
            generateReplyCaptcha(commentId);
            // Configurar validação do input
            setTimeout(() => setupReplyCaptchaInput(commentId), 100);
        }

        function hideReplyForm(commentId) {
            document.getElementById('reply-form-' + commentId).style.display = 'none';
        }

        document.getElementById('comment-form').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            // Prevenir múltiplos submits
            if (isSubmittingComment) {
                return;
            }
            
            const form = e.target;
            const submitBtn = document.getElementById('submit-comment-btn');
            const messageDiv = document.getElementById('comment-message');
            
            isSubmittingComment = true;
            submitBtn.disabled = true;
            submitBtn.textContent = 'Enviando...';
            messageDiv.innerHTML = '';
            
            const formData = new FormData(form);
            const captchaAnswer = parseInt(formData.get('captcha_answer'));
            
            // Validar CAPTCHA no frontend
            if (captchaAnswer !== currentCaptchaAnswer) {
                messageDiv.innerHTML = '<div class="jl_comment_error">Resposta do Verificação de segurança incorreta. Por favor, tente novamente.</div>';
                generateCaptcha(); // Gerar novo CAPTCHA
                return;
            }
            
            const data = {
                article_id: formData.get('article_id'),
                author_name: formData.get('author_name'),
                author_email: formData.get('author_email'),
                content: formData.get('content'),
                captcha_answer: captchaAnswer,
                captcha_hash: formData.get('captcha_hash'),
            };
            
            try {
                const response = await fetch('/api/comments', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': formData.get('_token'),
                    },
                    body: JSON.stringify(data),
                });
                
                const result = await response.json();
                
                if (response.ok) {
                    messageDiv.innerHTML = '<div class="jl_comment_success">' + (result.message || 'Comentário enviado com sucesso! Aguarde a aprovação.') + '</div>';
                    form.reset();
                    generateCaptcha(); // Gerar novo CAPTCHA após sucesso
                    // Manter botão desabilitado por mais 2 segundos para evitar duplo submit
                    setTimeout(() => {
                        isSubmittingComment = false;
                        submitBtn.disabled = false;
                        submitBtn.textContent = 'Enviar Comentário';
                    }, 2000);
                } else {
                    const errors = result.errors ? Object.values(result.errors).flat().join('<br>') : (result.message || 'Erro ao enviar comentário.');
                    messageDiv.innerHTML = '<div class="jl_comment_error">' + errors + '</div>';
                    generateCaptcha(); // Gerar novo CAPTCHA em caso de erro
                    isSubmittingComment = false;
                    submitBtn.disabled = false;
                    submitBtn.textContent = 'Enviar Comentário';
                }
            } catch (error) {
                messageDiv.innerHTML = '<div class="jl_comment_error">Erro ao enviar comentário. Tente novamente.</div>';
                generateCaptcha(); // Gerar novo CAPTCHA em caso de erro
                isSubmittingComment = false;
                submitBtn.disabled = false;
                submitBtn.textContent = 'Enviar Comentário';
            }
        });

        async function submitReply(e, parentId) {
            e.preventDefault();
            
            // Prevenir múltiplos submits
            if (isSubmittingReply[parentId]) {
                return;
            }
            
            const form = e.target;
            const formData = new FormData(form);
            const submitBtn = form.querySelector('button[type="submit"]');
            
            // Validar CAPTCHA
            const captchaAnswer = parseInt(form.querySelector(`.reply-captcha-answer-${parentId}`).value);
            if (captchaAnswer !== replyCaptchaAnswers[parentId]) {
                showModal('error', 'Erro', 'Resposta do Verificação de segurança incorreta. Por favor, tente novamente.');
                generateReplyCaptcha(parentId);
                return;
            }
            
            isSubmittingReply[parentId] = true;
            submitBtn.disabled = true;
            submitBtn.textContent = 'Enviando...';
            
            const data = {
                article_id: formData.get('article_id'),
                parent_id: formData.get('parent_id'),
                author_name: formData.get('author_name'),
                author_email: formData.get('author_email'),
                content: formData.get('content'),
                captcha_answer: captchaAnswer,
                captcha_hash: form.querySelector(`.reply-captcha-hash-${parentId}`).value,
            };
            
            try {
                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || 
                                 document.querySelector('input[name="_token"]')?.value;
                
                const response = await fetch('/api/comments', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                    },
                    body: JSON.stringify(data),
                });
                
                const result = await response.json();
                
                if (response.ok) {
                    showModal('success', 'Sucesso!', result.message || 'Resposta enviada com sucesso! Aguarde a aprovação.');
                    hideReplyForm(parentId);
                    form.reset();
                    delete replyCaptchaAnswers[parentId];
                    // Manter botão desabilitado por mais 2 segundos
                    setTimeout(() => {
                        delete isSubmittingReply[parentId];
                        submitBtn.disabled = false;
                        submitBtn.textContent = 'Enviar Resposta';
                    }, 2000);
                } else {
                    const errors = result.errors ? Object.values(result.errors).flat().join('\n') : (result.message || 'Erro ao enviar resposta.');
                    showModal('error', 'Erro', errors);
                    generateReplyCaptcha(parentId);
                    delete isSubmittingReply[parentId];
                    submitBtn.disabled = false;
                    submitBtn.textContent = 'Enviar Resposta';
                }
            } catch (error) {
                showModal('error', 'Erro', 'Erro ao enviar resposta. Tente novamente.');
                generateReplyCaptcha(parentId);
                delete isSubmittingReply[parentId];
                submitBtn.disabled = false;
                submitBtn.textContent = 'Enviar Resposta';
            }
        }
    </script>
</div>
@endif