{{--
    Knowledge Base Question Card Partial
    =====================================
    Reusable card for displaying question summaries on public pages.
    RBAC: edit/delete buttons only shown to authorised users.

    Variables:
    - $question: KnowledgeBaseQuestion model instance
    - $featured: bool (optional)
--}}
<div class="bg-theme-card rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden
    {{ $featured ?? false ? 'border-l-4 border-yellow-500' : '' }}
    {{ $question->has_accepted_answer ? 'border-l-4 border-green-500' : '' }}">
    <div class="p-5">

        {{-- Header: category + difficulty + featured badges --}}
        <div class="flex items-center flex-wrap gap-2 mb-3">
            @if($question->category)
                <a href="{{ route('public.knowledge-base.category', $question->category->slug) }}"
                   class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold
                          {{ $question->category->color ? "bg-{$question->category->color}-100 text-{$question->category->color}-800" : 'bg-blue-100 text-blue-800' }}
                          hover:opacity-80 transition">
                    <i class="fas {{ $question->category->icon ?? 'fa-folder' }} text-xs"></i>
                    {{ $question->category->name }}
                </a>
            @endif

            @if($featured ?? false)
                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
                    <i class="fas fa-star text-xs"></i>Featured
                </span>
            @endif

            @if($question->difficulty)
                @php
                    $diffColors = [
                        'beginner'     => 'bg-green-100 text-green-800',
                        'intermediate' => 'bg-yellow-100 text-yellow-800',
                        'advanced'     => 'bg-red-100 text-red-800',
                    ];
                @endphp
                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium {{ $diffColors[$question->difficulty] ?? 'bg-gray-100 text-gray-800' }}">
                    <i class="fas fa-signal text-xs"></i>{{ ucfirst($question->difficulty) }}
                </span>
            @endif

            @if($question->has_accepted_answer)
                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
                    <i class="fas fa-check-circle text-xs"></i>Answered
                </span>
            @endif
        </div>

        {{-- Title --}}
        <h3 class="text-base font-bold text-theme-heading mb-2 line-clamp-2">
            <a href="{{ route('public.knowledge-base.show', $question->slug) }}"
               class="hover:text-blue-600 transition">
                {{ $question->title }}
            </a>
        </h3>

        {{-- Excerpt --}}
        <p class="text-theme-body text-sm mb-3 line-clamp-2">
            {{ Str::limit(strip_tags($question->content), 160) }}
        </p>

        {{-- Tags --}}
        @if($question->tags)
            @php $tags = is_array($question->tags) ? $question->tags : explode(',', $question->tags); @endphp
            <div class="flex flex-wrap gap-1 mb-3">
                @foreach(array_slice($tags, 0, 4) as $tag)
                    <a href="{{ route('public.knowledge-base.tag', trim($tag)) }}"
                       class="px-2 py-0.5 bg-blue-50 text-blue-600 rounded-full text-xs hover:bg-blue-100 transition">
                        {{ trim($tag) }}
                    </a>
                @endforeach
                @if(count($tags) > 4)
                    <span class="text-xs text-gray-400 self-center">+{{ count($tags) - 4 }} more</span>
                @endif
            </div>
        @endif

        {{-- Inward divider --}}
        <div class="border-t border-gray-200 mb-3" style="box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);"></div>

        {{-- Footer: author + stats + actions --}}
        <div class="flex items-center justify-between gap-2 flex-wrap">

            {{-- Author --}}
            <div class="flex items-center gap-2">
                <img src="{{ $question->user->avatar ?? 'https://ui-avatars.com/api/?name=' . urlencode($question->user->name) . '&size=32&background=1e40af&color=fff' }}"
                     alt="{{ $question->user->name }}"
                     class="w-7 h-7 rounded-full">
                <div>
                    <p class="text-xs font-semibold text-theme-heading leading-none">{{ $question->user->name }}</p>
                    <p class="text-xs text-gray-400 mt-0.5">{{ $question->created_at->diffForHumans() }}</p>
                </div>
            </div>

            {{-- Stats --}}
            <div class="flex items-center gap-3 text-xs text-theme-body">
                <span class="flex items-center gap-1" title="Views">
                    <i class="fas fa-eye text-blue-400"></i>
                    {{ number_format($question->view_count) }}
                </span>
                <span class="flex items-center gap-1 {{ $question->has_accepted_answer ? 'text-green-600 font-semibold' : '' }}" title="Answers">
                    <i class="fas {{ $question->has_accepted_answer ? 'fa-check-circle' : 'fa-lightbulb' }}
                       {{ $question->has_accepted_answer ? 'text-green-500' : 'text-blue-400' }}"></i>
                    {{ $question->answer_count ?? 0 }}
                </span>
                @if(($question->helpful_count ?? 0) > 0)
                    <span class="flex items-center gap-1 text-orange-500" title="Helpful">
                        <i class="fas fa-thumbs-up"></i>
                        {{ $question->helpful_count }}
                    </span>
                @endif
            </div>

            {{-- RBAC action buttons --}}
            @auth
                <div class="flex items-center gap-1">
                    @if($question->user_id === auth()->id() || auth()->user()->can('edit knowledge base questions'))
                        <a href="{{ route('knowledge-sharing.knowledge-base.edit', $question) }}"
                           class="p-1.5 text-amber-500 hover:bg-amber-50 rounded-lg transition text-xs" title="Edit">
                            <i class="fas fa-edit"></i>
                        </a>
                    @endif
                    @if($question->user_id === auth()->id() || auth()->user()->can('delete knowledge base questions'))
                        <form action="{{ route('knowledge-sharing.knowledge-base.destroy', $question) }}"
                              method="POST" class="inline"
                              onsubmit="return confirm('Delete this question?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="p-1.5 text-red-400 hover:bg-red-50 rounded-lg transition text-xs" title="Delete">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    @endif
                </div>
            @endauth
        </div>
    </div>
</div>
