{{--
    Partial: comment-item
    Dipanggil dari vault/show.blade.php dan bisa dipakai di tempat lain.
    Variable yang dibutuhkan: $comment (App\Models\Comment)
--}}
<div class="answer-item" id="comment-{{ $comment->id }}">
    <div class="answer-header">
        <div class="answer-author">
            <div class="author-avatar">
                {{ strtoupper(substr($comment->user->name, 0, 1)) }}
            </div>
            <div>
                <a href="{{ route('profile', $comment->user) }}" class="author-name">
                    {{ $comment->user->name }}
                </a>
                <span class="badge-role-{{ $comment->user->role }}">{{ $comment->user->role }}</span>
            </div>
        </div>
        <span class="answer-time">{{ $comment->created_at->diffForHumans() }}</span>
    </div>

    <div class="answer-body">{!! nl2br(e($comment->body)) !!}</div>

    @if($comment->has_code_snippet && $comment->code_snippet)
    <div class="code-block">
        <div class="code-header">
            <span class="code-lang">{{ strtoupper($comment->code_language ?? 'code') }}</span>
            <button onclick="copyCode(this)" class="btn-copy">📋 Copy</button>
        </div>
        <pre><code class="language-{{ $comment->code_language ?? 'plaintext' }}">{{ $comment->code_snippet }}</code></pre>
    </div>
    @endif

    {{-- Replies --}}
    @if($comment->replies && $comment->replies->count() > 0)
    <div class="replies-section">
        @foreach($comment->replies as $reply)
        <div class="reply-item">
            <div class="author-avatar author-avatar-sm">
                {{ strtoupper(substr($reply->user->name, 0, 1)) }}
            </div>
            <div class="reply-content">
                <strong>{{ $reply->user->name }}</strong>
                <span class="reply-time">{{ $reply->created_at->diffForHumans() }}</span>
                <p>{!! nl2br(e($reply->body)) !!}</p>
            </div>
        </div>
        @endforeach
    </div>
    @endif
</div>

@push('scripts')
<script>
if (typeof copyCode === 'undefined') {
    function copyCode(btn) {
        const code = btn.closest('.code-block').querySelector('code').textContent;
        navigator.clipboard.writeText(code).then(() => {
            btn.textContent = '✅ Copied!';
            setTimeout(() => btn.textContent = '📋 Copy', 2000);
        });
    }
}
</script>
@endpush