@extends('layouts.app')
@section('title', $post->title)
@section('page-title', '💬 Forum Dialektika')

@section('content')

{{-- Preview Banner --}}
@if($isPreview)
<div class="preview-banner">
    🔒 Konten diskusi disensor. <a href="{{ route('login') }}" class="btn btn-primary btn-sm">Login untuk membaca</a>
</div>
@endif

{{-- Breadcrumb --}}
<div class="breadcrumb">
    <a href="{{ route('forum.index') }}">Forum</a> ›
    <a href="{{ route('forum.index', ['course_id' => $post->course_id]) }}">{{ $post->course->name }}</a> ›
    <span>{{ Str::limit($post->title, 40) }}</span>
</div>

{{-- Pertanyaan utama --}}
<div class="thread-detail">
    <div class="thread-header">
        <div class="thread-badges">
            @if($post->is_solved)
            <span class="badge badge-success">✅ Terjawab</span>
            @else
            <span class="badge badge-warning">❓ Belum Terjawab</span>
            @endif
            <span class="badge badge-course">{{ $post->course->name }}</span>
            @if($post->material)
            <a href="{{ route('vault.show', $post->material) }}" class="badge badge-material">
                📎 {{ $post->material->title }}
            </a>
            @endif
        </div>
        <h1 class="thread-detail-title">{{ $post->title }}</h1>
        <div class="thread-author-meta">
            <div class="author-avatar">{{ strtoupper(substr($post->user->name, 0, 1)) }}</div>
            <div>
                <a href="{{ route('profile', $post->user) }}" class="author-name">
                    {{ $post->user->name }}
                </a>
                <span class="badge-role-{{ $post->user->role }}">{{ $post->user->role }}</span>
            </div>
            <span class="meta-dot">·</span>
            <span class="meta-time">{{ $post->created_at->diffForHumans() }}</span>
            <span class="meta-dot">·</span>
            <span>👁️ {{ number_format($post->views) }} dilihat</span>
        </div>
    </div>

    {{-- Isi pertanyaan --}}
    @if(!$isPreview)
    <div class="thread-body">
        {!! nl2br(e($post->body)) !!}
    </div>
    @else
    <div class="thread-body blurred-content">
        <p>▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ Login untuk membaca isi diskusi ▓▓▓▓▓▓▓▓▓▓</p>
        <p>▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓</p>
        <a href="{{ route('login') }}" class="btn btn-primary">Login untuk membaca</a>
    </div>
    @endif

    {{-- Code snippet --}}
    @if($post->has_code_snippet && !$isPreview)
    <div class="code-block">
        <div class="code-header">
            <span class="code-lang">{{ strtoupper($post->code_language) }}</span>
            <button onclick="copyCode(this)" class="btn-copy">📋 Copy</button>
        </div>
        <pre><code class="language-{{ $post->code_language }}">{{ $post->code_snippet }}</code></pre>
    </div>
    @elseif($post->has_code_snippet && $isPreview)
    <div class="code-block blurred-content">
        <div class="code-header"><span class="code-lang">{{ strtoupper($post->code_language) }}</span></div>
        <pre><code>▓▓▓▓▓▓▓▓▓▓ // Kode disensor, login untuk melihat ▓▓▓▓▓▓▓▓</code></pre>
    </div>
    @endif

</div>

{{-- Jawaban --}}
@if(!$isPreview)
<div class="answers-section">
    <h3>💬 {{ $post->comments->count() }} Jawaban</h3>

    @forelse($post->comments->whereNull('parent_id') as $comment)
    <div class="answer-item {{ $comment->is_verified_solution ? 'answer-verified' : '' }}" id="comment-{{ $comment->id }}">

        @if($comment->is_verified_solution)
        <div class="verified-banner">✅ Verified Solution</div>
        @endif

        <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)
        <div class="code-block">
            <div class="code-header">
                <span class="code-lang">{{ strtoupper($comment->code_language) }}</span>
                <button onclick="copyCode(this)" class="btn-copy">📋 Copy</button>
            </div>
            <pre><code class="language-{{ $comment->code_language }}">{{ $comment->code_snippet }}</code></pre>
        </div>
        @endif

        {{-- Actions --}}
        <div class="answer-actions">
            @auth
            @if(!$comment->is_verified_solution && (auth()->id() === $post->user_id || auth()->user()->isDosen()))
            <form method="POST" action="{{ route('forum.verify', [$post, $comment]) }}" style="display:inline">
                @csrf
                <button type="submit" class="btn btn-sm btn-success">✅ Verified Solution</button>
            </form>
            @endif
            @endauth
        </div>

        {{-- Replies --}}
        @if($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>
    @empty
    <div class="empty-state">Belum ada jawaban. Bantu jawab! 💡</div>
    @endforelse

</div>

{{-- Form jawaban --}}
@auth
<div class="reply-form-section">
    <h3>✍️ Tulis Jawaban</h3>
    <form method="POST" action="{{ route('forum.reply', $post) }}" class="reply-form">
        @csrf
        <textarea name="body" class="form-input" rows="5"
                  placeholder="Bagikan solusimu di sini..." required></textarea>

        {{-- Code snippet --}}
        <div x-data="{ showCode: false }">
            <button type="button" @click="showCode = !showCode" class="btn btn-ghost btn-sm">
                💻 Tambah Code Snippet
            </button>
            <div x-show="showCode" class="code-input-area mt-2">
                <select name="code_language" class="form-input form-input-sm mb-1">
                    @foreach(\App\Models\Post::SUPPORTED_LANGUAGES as $lang)
                    <option value="{{ $lang }}">{{ strtoupper($lang) }}</option>
                    @endforeach
                </select>
                <textarea name="code_snippet" class="form-input code-textarea" rows="8"
                          placeholder="// Paste kode mu di sini..."></textarea>
            </div>
        </div>

        <button type="submit" class="btn btn-primary mt-2">
            📤 Kirim Jawaban
        </button>
    </form>
</div>
@else
<div class="login-prompt">
    <a href="{{ route('login') }}" class="btn btn-primary">Login untuk menjawab</a>
</div>
@endauth

@else
{{-- Preview: sensor semua jawaban --}}
<div class="answers-section">
    <h3>💬 Jawaban</h3>
    <div class="blurred-content login-prompt">
        <p>🔒 Jawaban disensor. Login untuk membaca dan ikut berdiskusi.</p>
        <a href="{{ route('login') }}" class="btn btn-primary">Login Sekarang</a>
    </div>
</div>
@endif

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.13.5/cdn.min.js" defer></script>
<script>
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

@endsection