@extends('layouts.site')

@section('title', ($article->title ?? 'قراءة المقال') . ' | XRD LAB')

@section('content')
<main id="main">
    @include('partials.breadcrumbs', [
        'items' => [
            ['label' => 'الرئيسية', 'url' => route('home')],
            [
                'label' => $categoryLabel ?? 'المدونة',
                'url' => isset($categoryRouteName) ? route($categoryRouteName) : route('blog.research.index'),
            ],
        ],
    ])

    <section id="blog" class="blog" dir="rtl">
        <div class="container" data-aos="fade-up">
            <div class="row">
                <div class="col-lg-8 entries">
                    <article class="entry entry-single">
                        <h2 class="entry-title d-lg-none">{{ $article->title }}</h2>
                        <div class="entry-img">
                            <img src="{{ $article->image ? Storage::url($article->image) : asset('assets/img/avatar.jpg') }}" alt="{{ $article->title }}" class="img-fluid">
                        </div>
                        @if($article->audio_path)
                        <div class="d-lg-none">
                            <aside class="article-audio-sidebar article-audio-sidebar--mobile">
                                <div class="article-audio-card">
                                    <div class="article-audio-player article-audio-player--line" data-audio-player>
                                        <audio preload="metadata" data-audio-element>
                                            <source src="{{ Storage::url($article->audio_path) }}">
                                        </audio>
                                        <span class="article-audio-inline-label">قراءة صوتية</span>
                                        <div class="article-audio-line-row">
                                            <button type="button" class="article-audio-play article-audio-play--line" data-audio-toggle aria-label="تشغيل القراءة الصوتية">
                                                <i class="bi bi-play-fill article-audio-play__icon" data-audio-toggle-icon></i>
                                            </button>
                                            <div class="article-audio-wave-track">
                                                <div class="article-audio-wave" data-audio-wave aria-hidden="true"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </aside>
                        </div>
                        @endif
                        <h2 class="entry-title d-none d-lg-block">{{ $article->title }}</h2>
                        <div class="entry-content justified-text">{!! $article->content !!}</div>
                        <div class="footer-content text-left">
                            <p class="mb-0">{{ $article->author->name }}</p>
                            <p class="mb-0">{{ $article->published_at->format('d-m-Y') }}</p>
                            <form method="post" id="like-form" data-like-url="{{ route('article.like', ['post' => $article->id]) }}">
                                @csrf
                                <button type="submit" name="like" class="btn like-post-btn {{ $likedByVisitor ? 'is-liked' : '' }}" {{ $likedByVisitor ? 'disabled' : '' }}>
                                    <i class="fa fa-heart text-danger"></i>
                                    <span id="likes-count">{{ $article->likes_count }}</span>
                                </button>
                            </form>
                        </div>
                    </article>

                    <div class="comments-section blog" id="comments">
                        <div class="comment-entry mb-4">
                            <button type="button" class="btn comment-trigger-btn" id="comment-toggle" aria-expanded="false" aria-controls="comment-form-shell">
                                <i class="bi bi-chat-left-dots"></i>
                                <span>أضف تعليقاً</span>
                            </button>

                            <div class="comment-form-shell" id="comment-form-shell">
                                <form action="{{ route('article.comments.store', ['post' => $article->id]) }}#comments" method="post" class="comment-form" id="comment-form">
                                    @csrf
                                    <input type="text" name="website" class="honeypot-field" tabindex="-1" autocomplete="off">
                                    <div class="form-group mb-3">
                                        <input type="text" id="first_name" name="first_name" class="form-control" value="{{ old('first_name') }}" maxlength="60" placeholder="الاسم الأول (اختياري)">
                                    </div>
                                    <div class="form-group">
                                        <textarea id="comment-content" name="content" class="form-control" rows="4" maxlength="800" placeholder="أضف تعليقك هنا">{{ old('content') }}</textarea>
                                        <small class="text-muted d-block mt-2">الحد الأقصى 800 حرف. إذا تجاوزت هذا الحد سيتم تجاهل النص الزائد تلقائياً.</small>
                                        @error('content')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="comment-submit-row mt-3">
                                        <button type="submit" class="btn comment-submit-btn" id="comment-submit-btn">
                                            <span class="comment-submit-label">إرسال التعليق</span>
                                            <span class="comment-submit-loading" aria-hidden="true">
                                                <span class="comment-spinner"></span>
                                                <span>جارٍ الإرسال...</span>
                                            </span>
                                        </button>
                                        <span class="comment-submit-hint" id="comment-submit-hint">يتم الآن التحقق من التعليق قبل حفظه.</span>
                                    </div>
                                </form>
                            </div>
                        </div>

                        @forelse($approvedComments as $comment)
                            <div class="comment mb-3">
                                <p><strong>{{ $comment->displayName() }}</strong> - <span class="text-muted">{{ $comment->created_at->format('d-m-Y') }}</span></p>
                                <p class="mb-0 comment-quote">"{{ $comment->content }}"</p>
                                <div class="comment-reactions mt-3" data-comment-id="{{ $comment->id }}" data-react-url="{{ route('comments.react', ['comment' => $comment->id]) }}">
                                    <button type="button" class="comment-reaction-btn {{ $comment->current_reaction === 'like' ? 'is-active' : '' }}" data-reaction="like">
                                        <i class="bi bi-hand-thumbs-up"></i>
                                        <span class="reaction-count" data-role="likes">{{ $comment->likes_count }}</span>
                                    </button>
                                    <button type="button" class="comment-reaction-btn is-negative {{ $comment->current_reaction === 'dislike' ? 'is-active' : '' }}" data-reaction="dislike">
                                        <i class="bi bi-hand-thumbs-down"></i>
                                        <span class="reaction-count" data-role="dislikes">{{ $comment->dislikes_count }}</span>
                                    </button>
                                </div>
                            </div>
                            @if(! $loop->last)
                                <hr>
                            @endif
                        @empty
                            <div class="comment-empty-state">
                                لا توجد تعليقات منشورة حالياً. يمكنك أن تكون أول من يشارك رأيه.
                            </div>
                        @endforelse
                    </div>
                </div>
                @if($article->audio_path)
                <div class="col-lg-4 d-none d-lg-block">
                    <aside class="article-audio-sidebar">
                        <div class="article-audio-card">
                            <div class="article-audio-player article-audio-player--line" data-audio-player>
                                <audio preload="metadata" data-audio-element>
                                    <source src="{{ Storage::url($article->audio_path) }}">
                                </audio>
                                <span class="article-audio-inline-label">قراءة صوتية</span>
                                <div class="article-audio-line-row">
                                    <button type="button" class="article-audio-play article-audio-play--line" data-audio-toggle aria-label="تشغيل القراءة الصوتية">
                                        <i class="bi bi-play-fill article-audio-play__icon" data-audio-toggle-icon></i>
                                    </button>
                                    <div class="article-audio-wave-track">
                                        <div class="article-audio-wave" data-audio-wave aria-hidden="true"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </aside>
                </div>
                @endif
            </div>
        </div>
    </section>

    <div class="modal fade comment-feedback-modal" id="commentFeedbackModal" tabindex="-1" aria-hidden="true" dir="rtl">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        {{ session('comment_status_type') === 'success' ? 'شكراً لمشاركتك' : 'تعذر إرسال التعليق' }}
                    </h5>
                    <button type="button" class="btn-close ms-0 me-auto" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {{ session('comment_status_type') === 'success'
                        ? 'شكراً لوقتك واهتمامك بالمشاركة. تم استلام تعليقك بنجاح، وسيظهر بعد المراجعة.'
                        : session('comment_status') }}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn comment-modal-btn" data-bs-dismiss="modal">حسناً</button>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@push('styles')
<style>
.justified-text { text-align: justify; }
.blog#blog { padding-top: 10px; }
.blog .entry.entry-single .entry-img {
    max-height: none;
    overflow: visible;
    margin: 0 0 20px 0;
}
.blog .entry.entry-single .entry-img img { width: 100%; height: auto; object-fit: contain; }
.footer-content { margin-top: 20px; font-size: 0.9em; display: flex; justify-content: space-between; align-items: center; }
.like-post-btn { display: inline-flex; align-items: center; gap: 8px; color: var(--theme-primary); background: rgba(255,255,255,0.92); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); }
.like-post-btn.is-liked { opacity: 0.7; cursor: default; }
.comments-section { margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(37, 52, 63, 0.12); }
.comment { padding: 10px 15px; background-color: #f8f9fa; }
.comment-quote { font-style: italic; }
.comment-empty-state { padding: 14px 16px; background: #f8f9fa; color: var(--theme-text-muted); }
.comment-entry { display: grid; gap: 14px; }
.comment-trigger-btn { display: inline-flex; align-items: center; gap: 8px; width: fit-content; background: linear-gradient(140deg, rgba(255,255,255,0.92), rgba(255,255,255,0.58)); color: var(--theme-primary); box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08); font-weight: 700; }
.comment-trigger-btn:hover { color: var(--theme-primary); transform: translateY(-1px); }
.comment-form-shell { display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(-10px); transition: grid-template-rows 0.35s ease, opacity 0.28s ease, transform 0.28s ease; }
.comment-form-shell.is-open { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); }
.comment-form-shell > .comment-form { overflow: hidden; }
.comment-form.is-submitting { opacity: 0.92; }
.comment-form .form-control { border-radius: 0; }
.comment-submit-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.comment-submit-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 180px; background: linear-gradient(135deg, var(--theme-primary), color-mix(in srgb, var(--theme-primary) 78%, #ffffff)); color: #fff; font-weight: 700; box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255,255,255,0.18); }
.comment-submit-btn:hover { color: #fff; opacity: 0.95; }
.comment-submit-loading { display: none; align-items: center; gap: 8px; }
.comment-submit-btn.is-loading .comment-submit-label { display: none; }
.comment-submit-btn.is-loading .comment-submit-loading { display: inline-flex; }
.comment-submit-btn.is-loading { pointer-events: none; opacity: 0.88; }
.comment-submit-hint { display: none; color: var(--theme-text-muted); font-size: 0.88rem; }
.comment-submit-hint.is-visible { display: inline-flex; }
.comment-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: comment-spin 0.75s linear infinite; }
@keyframes comment-spin { to { transform: rotate(360deg); } }
.comment-reactions { display: flex; gap: 10px; flex-wrap: wrap; }
.comment-reaction-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; padding: 0; color: #64748b; font-weight: 600; box-shadow: none; }
.comment-reaction-btn:hover { color: var(--theme-primary); }
.comment-reaction-btn.is-active { color: #16a34a; }
.comment-reaction-btn.is-negative.is-active { color: #dc2626; }
.comment-reaction-btn i { font-size: 1rem; }
.reaction-count { font-size: 0.85rem; opacity: 0.95; }
.comment-feedback-modal .modal-content { border: 0; box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18); background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(234,239,239,0.96)); }
.comment-feedback-modal .modal-header { border-bottom: 1px solid rgba(37, 52, 63, 0.08); }
.comment-feedback-modal .modal-title { color: var(--theme-primary); font-weight: 700; }
.comment-feedback-modal .modal-body { color: var(--theme-primary); line-height: 1.9; }
.comment-feedback-modal .modal-footer { border-top: 0; }
.comment-modal-btn { background: linear-gradient(135deg, var(--theme-primary), color-mix(in srgb, var(--theme-primary) 78%, #ffffff)); color: #fff; font-weight: 700; min-width: 120px; }
.comment-modal-btn:hover { color: #fff; opacity: 0.95; }
.honeypot-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.article-audio-sidebar { position: sticky; top: 100px; }
.article-audio-sidebar--mobile { position: static; margin: 18px 0 8px; }
.article-audio-card {
    position: relative;
    overflow: hidden;
    padding: 24px;
    background:
        linear-gradient(160deg, rgba(255,255,255,0.52), rgba(234,239,239,0.22)),
        linear-gradient(140deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
    border: 1px solid rgba(255,255,255,0.38);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.11);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.article-audio-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(255,155,81,0.18) 0%, rgba(255,155,81,0) 72%);
    pointer-events: none;
}
.article-audio-player {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
}
.article-audio-line-row {
    display: flex;
    align-items: center;
    gap: 10px;
    direction: ltr;
}
.article-audio-play.article-audio-play--line {
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0 !important;
    background: transparent;
    color: var(--theme-primary);
    padding: 0;
    box-shadow: none;
}
.article-audio-play.article-audio-play--line:hover { color: var(--theme-primary-dark); }
.article-audio-play__icon {
    font-size: 1.7rem;
    line-height: 1;
    display: block;
    margin: 0;
}
.article-audio-inline-label {
    display: block;
    color: var(--theme-primary);
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    margin-bottom: 4px;
}
.article-audio-wave-track {
    position: relative;
    flex: 1;
}
.article-audio-wave {
    display: flex;
    width: 100%;
    height: 22px;
    align-items: center;
    justify-content: flex-start;
    gap: 1px;
    padding-inline: 0;
}
.article-audio-wave span {
    width: 1px;
    min-width: 1px;
    height: 10px;
    border-radius: 1px;
    background: rgba(148, 163, 184, 0.55);
    opacity: 0.9;
    transition: background-color 0.2s linear, opacity 0.2s linear;
}
.article-audio-wave span.is-passed {
    background: color-mix(in srgb, #ff9b51 78%, #25343f);
    opacity: 1;
}
@media (max-width: 991.98px) {
    .article-audio-sidebar {
        position: static;
        margin-top: 24px;
    }
}
</style>
@endpush

@push('scripts')
<script>
window.onload = function () {
    const form = document.getElementById('like-form');
    const commentReactionGroups = document.querySelectorAll('.comment-reactions');
    const commentToggle = document.getElementById('comment-toggle');
    const commentFormShell = document.getElementById('comment-form-shell');
    const commentFeedbackModalElement = document.getElementById('commentFeedbackModal');
    const commentForm = document.getElementById('comment-form');
    const commentSubmitButton = document.getElementById('comment-submit-btn');
    const commentSubmitHint = document.getElementById('comment-submit-hint');
    const hasCommentError = {!! $errors->has('content') ? 'true' : 'false' !!};
    const commentStatusType = @json(session('comment_status_type'));

    if (form) {
        form.addEventListener('submit', function (event) {
            event.preventDefault();
            const likeUrl = form.getAttribute('data-like-url');
            const csrfToken = form.querySelector('input[name="_token"]').value;

            fetch(likeUrl, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('likes-count').textContent = data.likes_count;
                if (!data.already_liked) {
                    const button = form.querySelector('button[type="submit"]');
                    button.classList.add('is-liked');
                    button.setAttribute('disabled', 'disabled');
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        });
    }

    document.querySelectorAll('[data-audio-player]').forEach(function (playerElement) {
        const audioToggleButton = playerElement.querySelector('[data-audio-toggle]');
        const audioElement = playerElement.querySelector('[data-audio-element]');
        const audioToggleIcon = playerElement.querySelector('[data-audio-toggle-icon]');
        const audioWaveContainer = playerElement.querySelector('[data-audio-wave]');

        if (!audioToggleButton || !audioElement || !audioToggleIcon || !audioWaveContainer) return;

        function buildStaticWaveform() {
            audioWaveContainer.innerHTML = '';
            const containerWidth = audioWaveContainer.clientWidth || 320;
            const barsCount = Math.max(90, Math.floor(containerWidth / 2));
            for (let i = 0; i < barsCount; i++) {
                const bar = document.createElement('span');
                const barHeight = 4 + Math.floor(Math.random() * 18);
                bar.style.height = String(barHeight) + 'px';
                audioWaveContainer.appendChild(bar);
            }
        }

        buildStaticWaveform();
        let audioWaveBars = audioWaveContainer.querySelectorAll('span');

        function setAudioProgress(progress) {
            const normalized = Math.max(0, Math.min(1, progress));
            const passedBars = Math.floor(normalized * audioWaveBars.length);
            audioWaveBars.forEach(function (bar, index) {
                bar.classList.toggle('is-passed', index < passedBars);
            });
        }

        function setAudioState(state) {
            playerElement.classList.toggle('is-playing', state === 'playing');

            if (state === 'playing') {
                audioToggleIcon.classList.remove('bi-play-fill');
                audioToggleIcon.classList.add('bi-pause-fill');
            } else {
                audioToggleIcon.classList.remove('bi-pause-fill');
                audioToggleIcon.classList.add('bi-play-fill');
            }
        }

        function syncAudioProgress() {
            if (!audioElement.duration || Number.isNaN(audioElement.duration)) {
                setAudioProgress(0);
                return;
            }
            setAudioProgress(audioElement.currentTime / audioElement.duration);
        }

        audioToggleButton.addEventListener('click', function () {
            document.querySelectorAll('[data-audio-element]').forEach(function (otherAudio) {
                if (otherAudio !== audioElement) {
                    otherAudio.pause();
                    otherAudio.currentTime = 0;
                    const otherPlayer = otherAudio.closest('[data-audio-player]');
                    const otherIcon = otherPlayer?.querySelector('[data-audio-toggle-icon]');
                    const otherBars = otherPlayer?.querySelectorAll('[data-audio-wave] span');
                    if (otherIcon) {
                        otherIcon.classList.remove('bi-pause-fill');
                        otherIcon.classList.add('bi-play-fill');
                    }
                    if (otherPlayer) {
                        otherPlayer.classList.remove('is-playing');
                    }
                    if (otherBars?.length) {
                        otherBars.forEach(function (bar) {
                            bar.classList.remove('is-passed');
                        });
                    }
                }
            });

            if (audioElement.paused) {
                audioElement.play().catch(function () {
                    setAudioState('idle');
                });
            } else {
                audioElement.pause();
            }
        });

        audioElement.addEventListener('loadedmetadata', function () {
            setAudioState('idle');
            setAudioProgress(0);
        });

        audioElement.addEventListener('play', function () {
            setAudioState('playing');
        });

        audioElement.addEventListener('pause', function () {
            if (audioElement.ended) return;
            setAudioState('idle');
        });

        audioElement.addEventListener('timeupdate', syncAudioProgress);

        audioElement.addEventListener('ended', function () {
            setAudioProgress(1);
            setAudioState('idle');
            window.setTimeout(function () {
                audioElement.currentTime = 0;
                setAudioProgress(0);
                setAudioState('idle');
            }, 1200);
        });

        audioElement.addEventListener('error', function () {
            setAudioState('idle');
        });
    });

    window.addEventListener('beforeunload', function () {
        document.querySelectorAll('[data-audio-element]').forEach(function (audioElement) {
            audioElement.pause();
            audioElement.currentTime = 0;
        });
    });

    function setCommentFormOpen(open) {
        if (!commentFormShell || !commentToggle) return;
        commentFormShell.classList.toggle('is-open', open);
        commentToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
    }

    if (commentToggle) {
        commentToggle.addEventListener('click', function () {
            setCommentFormOpen(!commentFormShell.classList.contains('is-open'));
        });
    }

    if (hasCommentError) {
        setCommentFormOpen(true);
    }

    if (commentForm && commentSubmitButton) {
        commentForm.addEventListener('submit', function () {
            commentForm.classList.add('is-submitting');
            commentSubmitButton.classList.add('is-loading');
            commentSubmitButton.setAttribute('disabled', 'disabled');
            if (commentSubmitHint) {
                commentSubmitHint.classList.add('is-visible');
            }
        });
    }

    commentReactionGroups.forEach(function (group) {
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
        const reactUrl = group.getAttribute('data-react-url');
        const buttons = group.querySelectorAll('.comment-reaction-btn');

        buttons.forEach(function (button) {
            button.addEventListener('click', function () {
                fetch(reactUrl, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken,
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        reaction: button.getAttribute('data-reaction')
                    })
                })
                .then(response => response.json())
                .then(data => {
                    group.querySelector('[data-role="likes"]').textContent = data.likes_count;
                    group.querySelector('[data-role="dislikes"]').textContent = data.dislikes_count;

                    buttons.forEach(function (btn) {
                        btn.classList.toggle('is-active', btn.getAttribute('data-reaction') === data.current_reaction);
                    });
                })
                .catch(error => {
                    console.error('Error:', error);
                });
            });
        });
    });

    if (commentFeedbackModalElement && commentStatusType && window.bootstrap && window.bootstrap.Modal) {
        const commentFeedbackModal = new window.bootstrap.Modal(commentFeedbackModalElement);

        if (commentStatusType === 'success') {
            setCommentFormOpen(true);
            commentFeedbackModal.show();
            commentFeedbackModalElement.addEventListener('hidden.bs.modal', function () {
                setCommentFormOpen(false);
            }, { once: true });
        } else if (commentStatusType === 'error') {
            setCommentFormOpen(true);
            commentFeedbackModal.show();
        }
    }
};
</script>
@endpush