<x-app-layout>

    <x-module-hero
        title="My Replies"
        description="All replies you have made to discussions"
        icon="fa-reply">

        <x-slot name="backButton">
            <a href="{{ route('contributor.dashboard') }}"
               class="inline-flex items-center gap-2 text-white/80 hover:text-white text-sm transition-colors">
                <i class="fas fa-arrow-left"></i> Back to Dashboard
            </a>
        </x-slot>

        <x-slot name="tabs">
            <a href="{{ route('contributor.dashboard') }}" class="module-hero-tab">
                <i class="fas fa-gauge-high"></i> Dashboard
            </a>
            <a href="{{ route('contributor.discussions') }}" class="module-hero-tab">
                <i class="fas fa-comments"></i> My Discussions
            </a>
            <a href="{{ route('contributor.replies') }}"
               class="module-hero-tab {{ request()->routeIs('contributor.replies') ? 'active-tab' : '' }}">
                <i class="fas fa-reply"></i> My Replies
            </a>

            @can('view discussion topics')
            <a href="{{ route('knowledge-sharing.discussions.topics.index') }}"
               class="module-hero-tab {{ request()->routeIs('knowledge-sharing.discussions.topics.*') ? 'active-tab' : '' }}">
                <i class="fas fa-lightbulb"></i> Topics
            </a>
            @endcan

            @can('view discussions')
            <a href="{{ route('knowledge-sharing.discussions.index') }}"
               class="module-hero-tab {{ request()->routeIs('knowledge-sharing.discussions.index') ? 'active-tab' : '' }}">
                <i class="fas fa-message"></i> All Discussions
            </a>
            @endcan

            @can('manage knowledge base categories')
            <a href="{{ route('knowledge-sharing.knowledge-base.categories.index') }}"
               class="module-hero-tab {{ request()->routeIs('knowledge-sharing.knowledge-base.categories.*') ? 'active-tab' : '' }}">
                <i class="fas fa-book-open"></i> KB Categories
            </a>
            @endcan

            @can('view knowledge base questions')
            <a href="{{ route('knowledge-sharing.knowledge-base.index') }}"
               class="module-hero-tab {{ request()->routeIs('knowledge-sharing.knowledge-base.index') || (request()->routeIs('knowledge-sharing.knowledge-base.*') && !request()->routeIs('knowledge-sharing.knowledge-base.categories.*')) ? 'active-tab' : '' }}">
                <i class="fas fa-circle-question"></i> Knowledge Base
            </a>
            @endcan
        </x-slot>

    </x-module-hero>

    <div class="p-6">

        @if($replies->count() > 0)
            <div class="space-y-4">
                @foreach($replies as $reply)
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5">
                        <div class="flex items-start gap-4">
                            <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-700 font-semibold flex-shrink-0">
                                {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                            </div>
                            <div class="flex-1 min-w-0">
                                @if($reply->discussion)
                                    <p class="text-sm text-gray-500 mb-2">
                                        <i class="fas fa-reply mr-1"></i> Replied to:
                                        <a href="{{ route('public.discussions.show', $reply->discussion->slug) }}"
                                           class="text-green-600 font-medium hover:underline">
                                            {{ $reply->discussion->title }}
                                        </a>
                                        @if($reply->discussion->topic)
                                            <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
                                                {{ $reply->discussion->topic->name }}
                                            </span>
                                        @endif
                                    </p>
                                @endif
                                <div class="text-sm text-gray-700">
                                    {{ \Illuminate\Support\Str::limit(strip_tags($reply->content), 300) }}
                                </div>
                                <div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
                                    <span><i class="fas fa-clock mr-1"></i>{{ $reply->created_at->diffForHumans() }}</span>
                                    @if($reply->is_accepted_answer)
                                        <span class="text-green-600 font-medium">
                                            <i class="fas fa-check-circle mr-1"></i> Accepted Answer
                                        </span>
                                    @endif
                                    <span><i class="fas fa-thumbs-up mr-1"></i>{{ $reply->like_count }}</span>
                                </div>
                            </div>
                            @if($reply->discussion)
                                <a href="{{ route('public.discussions.show', $reply->discussion->slug) }}#reply-{{ $reply->id }}"
                                   class="btn-action-view flex-shrink-0">
                                    <i class="fas fa-external-link-alt"></i> View
                                </a>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="mt-6">
                {{ $replies->links() }}
            </div>
        @else
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-12 text-center">
                <i class="fas fa-reply text-4xl text-gray-300 mb-3 block"></i>
                <h3 class="text-lg font-semibold text-gray-800 mb-2">No Replies Yet</h3>
                <p class="text-gray-500 mb-4">You haven't replied to any discussions yet. Start engaging with the community!</p>
                <a href="{{ route('public.discussions.index') }}"
                   class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white text-sm rounded-lg hover:bg-green-700">
                    <i class="fas fa-comments"></i> Browse Discussions
                </a>
            </div>
        @endif

    </div>

</x-app-layout>
