<x-app-layout>

    <x-module-hero
        title="Story Review: {{ Str::limit($story->title, 45) }}"
        description="{{ Str::limit($story->title, 55) }}"
        icon="fa-heart">

        <x-slot name="backButton">
            <a href="{{ route('advocacy.stories.moderation') }}"
               class="inline-flex items-center gap-1 text-sm text-[#475569] hover:text-[#1e293b] transition-colors">
                <i class="fas fa-arrow-left text-xs"></i> Back to Moderation
            </a>
        </x-slot>

        <x-slot name="tabs">
            @can('view campaigns')
            <a href="{{ route('advocacy.campaigns.index') }}"
               class="module-hero-tab {{ request()->routeIs('advocacy.campaigns.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-bullhorn text-sm"></i> Campaigns
            </a>
            @endcan
            @can('view polls')
            <a href="{{ route('advocacy.polls.index') }}"
               class="module-hero-tab {{ request()->routeIs('advocacy.polls.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-poll text-sm"></i> Polls
            </a>
            @endcan
            @can('view stories')
            <a href="{{ route('advocacy.stories.index') }}"
               class="module-hero-tab {{ request()->routeIs('advocacy.stories.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-newspaper text-sm"></i> Health Stories
            </a>
            @endcan
        </x-slot>

    </x-module-hero>

    <div class="p-6">

        @if(session('success'))
        <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg text-sm">
            <i class="fas fa-check-circle mr-2"></i> {{ session('success') }}
        </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

            {{-- Main Content --}}
            <div class="lg:col-span-2 space-y-5">

                {{-- Story Content --}}
                <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                    @if($story->featured_image)
                    <img src="{{ asset('storage/' . $story->featured_image) }}"
                         alt="{{ $story->title }}"
                         class="w-full h-48 object-cover">
                    @endif
                    <div class="p-5">
                        <div class="flex items-center gap-2 mb-3">
                            @php
                            $statusColors = [
                                'pending_review' => 'bg-blue-100 text-blue-700',
                                'approved'       => 'bg-green-100 text-green-700',
                                'published'      => 'bg-purple-100 text-purple-700',
                                'rejected'       => 'bg-red-100 text-red-700',
                            ];
                            @endphp
                            <span class="px-3 py-1 text-xs font-semibold rounded-full {{ $statusColors[$story->status] ?? 'bg-gray-100' }}">
                                {{ str_replace('_', ' ', ucfirst($story->status)) }}
                            </span>
                            @if($story->is_featured)
                            <span class="px-3 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-700">
                                <i class="fas fa-star mr-1"></i>Featured
                            </span>
                            @endif
                        </div>
                        <h1 class="text-xl font-bold text-gray-900 mb-3">{{ $story->title }}</h1>
                        @if($story->excerpt)
                        <p class="text-base text-gray-600 italic mb-4 border-l-4 border-rose-500 pl-4 text-sm">
                            "{{ $story->excerpt }}"
                        </p>
                        @endif
                        <div class="prose prose-gray max-w-none text-sm">
                            {!! nl2br(e($story->content)) !!}
                        </div>

                        @if($story->gallery && count($story->gallery) > 0)
                        <div class="mt-5 pt-5 border-t border-gray-100">
                            <h3 class="font-semibold text-gray-900 mb-3 text-sm">
                                <i class="fas fa-images text-rose-500 mr-2"></i>
                                Gallery ({{ count($story->gallery) }} images)
                            </h3>
                            <div class="grid grid-cols-3 gap-2">
                                @foreach($story->gallery as $image)
                                <img src="{{ asset('storage/' . $image) }}"
                                     class="w-full h-20 object-cover rounded">
                                @endforeach
                            </div>
                        </div>
                        @endif

                        @if($story->video_url)
                        <div class="mt-5 pt-5 border-t border-gray-100">
                            <h3 class="font-semibold text-gray-900 mb-3 text-sm">
                                <i class="fas fa-video text-rose-500 mr-2"></i> Video
                            </h3>
                            <iframe src="{{ $story->video_url }}"
                                    class="w-full h-48 rounded"
                                    frameborder="0" allowfullscreen></iframe>
                        </div>
                        @endif
                    </div>
                </div>

                {{-- Rejection Reason --}}
                @if($story->status === 'rejected' && $story->rejection_reason)
                <div class="bg-red-50 border border-red-200 rounded-lg p-5">
                    <h3 class="font-semibold text-red-900 mb-2 text-sm">
                        <i class="fas fa-times-circle text-red-600 mr-2"></i> Rejection Reason
                    </h3>
                    <p class="text-red-800 text-sm">{{ $story->rejection_reason }}</p>
                    @if($story->moderator)
                    <p class="text-xs text-red-600 mt-2">
                        Rejected by {{ $story->moderator->name }} on {{ $story->moderated_at->format('M d, Y') }}
                    </p>
                    @endif
                </div>
                @endif

            </div>

            {{-- Sidebar --}}
            <div class="space-y-5">

                {{-- Author Info --}}
                <div class="bg-white rounded-lg border border-gray-200 p-5">
                    <h3 class="text-base font-semibold text-gray-800 mb-3">
                        <i class="fas fa-user text-rose-500 mr-2"></i> Author Information
                    </h3>
                    <div class="flex items-center gap-3 mb-3">
                        <div class="w-10 h-10 bg-rose-100 rounded-full flex items-center justify-center flex-shrink-0">
                            <span class="text-rose-600 font-bold text-sm">{{ Str::substr($story->author_name, 0, 1) }}</span>
                        </div>
                        <div>
                            <p class="font-medium text-gray-900 text-sm">{{ $story->author_name }}</p>
                            <p class="text-xs text-gray-500">
                                @if($story->isGuestSubmission())
                                <span class="text-orange-600"><i class="fas fa-user-tag mr-1"></i>Guest</span>
                                @else
                                <span class="text-green-600"><i class="fas fa-user-check mr-1"></i>Registered</span>
                                @endif
                            </p>
                        </div>
                    </div>
                    <ul class="text-xs space-y-1.5 text-gray-600">
                        <li class="flex items-center gap-2"><i class="fas fa-envelope w-4"></i> {{ $story->author_email }}</li>
                        @if($story->author_phone)
                        <li class="flex items-center gap-2"><i class="fas fa-phone w-4"></i> {{ $story->author_phone }}</li>
                        @endif
                        @if($story->location)
                        <li class="flex items-center gap-2"><i class="fas fa-map-marker-alt w-4"></i> {{ $story->location }}</li>
                        @endif
                    </ul>
                </div>

                {{-- Campaign --}}
                @if($story->campaign)
                <div class="bg-white rounded-lg border border-gray-200 p-5">
                    <h3 class="text-base font-semibold text-gray-800 mb-3">
                        <i class="fas fa-bullhorn text-teal-500 mr-2"></i> Campaign
                    </h3>
                    <a href="{{ route('advocacy.campaigns.show', $story->campaign) }}"
                       class="block p-3 bg-gray-50 rounded hover:bg-gray-100 transition text-sm">
                        {{ $story->campaign->title }}
                    </a>
                </div>
                @endif

                {{-- Moderation Actions --}}
                @if($story->status === 'pending_review')
                <div class="bg-white rounded-lg border border-gray-200 p-5">
                    <h3 class="text-base font-semibold text-gray-800 mb-4">
                        <i class="fas fa-gavel text-purple-500 mr-2"></i> Moderation Actions
                    </h3>
                    <form action="{{ route('advocacy.stories.approve', $story) }}" method="POST" class="mb-3">
                        @csrf
                        <button type="submit"
                                class="w-full px-4 py-2.5 bg-green-600 text-white rounded-lg font-semibold hover:bg-green-700 transition text-sm">
                            <i class="fas fa-check-circle mr-2"></i> Approve & Publish
                        </button>
                    </form>
                    <form action="{{ route('advocacy.stories.reject', $story) }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label for="rejection_reason" class="block text-xs font-medium text-gray-700 mb-1">
                                Rejection Reason <span class="text-red-500">*</span>
                            </label>
                            <textarea name="rejection_reason" id="rejection_reason" rows="3" required
                                      placeholder="Explain why this story is being rejected..."
                                      class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 text-xs"></textarea>
                        </div>
                        <button type="submit"
                                class="w-full px-4 py-2.5 bg-red-600 text-white rounded-lg font-semibold hover:bg-red-700 transition text-sm">
                            <i class="fas fa-times-circle mr-2"></i> Reject Story
                        </button>
                    </form>
                </div>
                @endif

                {{-- Quick Actions --}}
                <div class="bg-white rounded-lg border border-gray-200 p-5">
                    <h3 class="text-base font-semibold text-gray-800 mb-3">Quick Actions</h3>
                    <div class="space-y-2">
                        @can('feature stories')
                        <button onclick="toggleFeatured()"
                                class="w-full px-4 py-2 {{ $story->is_featured ? 'bg-yellow-100 text-yellow-700' : 'bg-gray-100 text-gray-700' }} rounded-lg hover:opacity-80 transition text-sm text-left">
                            <i class="fas fa-star mr-2"></i>
                            {{ $story->is_featured ? 'Remove Featured' : 'Make Featured' }}
                        </button>
                        @endcan
                        @if($story->status === 'published')
                        <a href="{{ route('advocacy.public.stories.show', $story) }}" target="_blank"
                           class="block w-full px-4 py-2 bg-teal-100 text-teal-700 rounded-lg hover:bg-teal-200 transition text-sm">
                            <i class="fas fa-external-link-alt mr-2"></i> View Public Page
                        </a>
                        @endif
                        @can('delete stories')
                        <form action="{{ route('advocacy.stories.destroy', $story) }}" method="POST"
                              onsubmit="return confirm('Delete this story?')">
                            @csrf @method('DELETE')
                            <button type="submit"
                                    class="w-full px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition text-sm text-left">
                                <i class="fas fa-trash mr-2"></i> Delete Story
                            </button>
                        </form>
                        @endcan
                    </div>
                </div>

                {{-- Metadata --}}
                <div class="bg-gray-50 rounded-lg border border-gray-200 p-4">
                    <h4 class="text-xs font-semibold text-gray-700 mb-2">Metadata</h4>
                    <ul class="text-xs text-gray-600 space-y-1">
                        <li>Submitted: {{ $story->created_at->format('M d, Y H:i') }}</li>
                        @if($story->published_at)
                        <li>Published: {{ $story->published_at->format('M d, Y H:i') }}</li>
                        @endif
                        @if($story->views_count > 0)
                        <li>Views: {{ $story->views_count }}</li>
                        @endif
                        @if($story->shares_count > 0)
                        <li>Shares: {{ $story->shares_count }}</li>
                        @endif
                    </ul>
                </div>

            </div>
        </div>
    </div>

</x-app-layout>

@push('scripts')
<script>
function toggleFeatured() {
    fetch('/dashboard/advocacy/stories/{{ $story->id }}/toggle-featured', {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content }
    }).then(r => r.json()).then(d => { if (d.success) window.location.reload(); });
}
</script>
@endpush
