@extends('layouts.site')

@section('title', $story->title . ' - Impact Story')
@section('meta-description', Str::limit($story->excerpt ?? strip_tags($story->content), 160))

@section('content')
<!-- Hero Section -->
@if($story->featured_image)
    <div class="relative h-80 md:h-96 bg-gray-900">
        <img src="{{ asset('storage/' . $story->featured_image) }}" 
             alt="{{ $story->title }}"
             class="w-full h-full object-cover opacity-70">
        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 md:p-10">
            <div class="max-w-7xl mx-auto">
                @if($story->campaign)
                    <a href="{{ route('advocacy.public.campaigns.show', $story->campaign) }}" 
                       class="inline-block px-3 py-1 bg-rose-500 text-white text-sm rounded-full mb-3 hover:bg-rose-600 transition">
                        {{ $story->campaign->title }}
                    </a>
                @endif
                <h1 class="text-3xl md:text-4xl font-serif font-bold text-white">
                    {{ $story->title }}
                </h1>
            </div>
        </div>
    </div>
@else
    <div class="bg-gradient-to-r from-rose-500 to-pink-600 shadow-lg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            @if($story->campaign)
                <a href="{{ route('advocacy.public.campaigns.show', $story->campaign) }}" 
                   class="inline-block px-3 py-1 bg-white/20 text-white text-sm rounded-full mb-3 hover:bg-white/30 transition">
                    {{ $story->campaign->title }}
                </a>
            @endif
            <h1 class="text-3xl md:text-4xl font-serif font-bold text-white">
                {{ $story->title }}
            </h1>
        </div>
    </div>
@endif

<!-- Breadcrumb -->
<div class="bg-gray-50 border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
        <nav class="flex items-center space-x-2 text-sm text-gray-600" aria-label="Breadcrumb">
            <a href="{{ url('/') }}" class="hover:text-rose-600 transition flex items-center">
                <i class="fas fa-home mr-1"></i>Home
            </a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <a href="{{ route('advocacy.public.index') }}" class="hover:text-rose-600 transition">Advocacy</a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <a href="{{ route('advocacy.public.stories.index') }}" class="hover:text-rose-600 transition">Stories</a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <span class="text-gray-900 font-medium truncate max-w-xs">{{ Str::limit($story->title, 50) }}</span>
        </nav>
    </div>
</div>

<!-- Main Content -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Main Content -->
        <div class="lg:col-span-2 space-y-8">
            <!-- Author Info -->
            <div class="bg-white rounded-xl shadow-md p-6">
                <div class="flex items-center gap-4">
                    <div class="w-14 h-14 bg-rose-100 rounded-full flex items-center justify-center">
                        <span class="text-rose-600 font-bold text-xl">
                            {{ Str::substr($story->author_name, 0, 1) }}
                        </span>
                    </div>
                    <div>
                        <p class="font-semibold text-gray-900">{{ $story->author_name }}</p>
                        <div class="flex items-center gap-3 text-sm text-gray-500">
                            @if($story->location)
                                <span><i class="fas fa-map-marker-alt mr-1"></i>{{ $story->location }}</span>
                            @endif
                            <span><i class="fas fa-calendar mr-1"></i>{{ $story->published_at->format('M d, Y') }}</span>
                        </div>
                    </div>
                    <div class="ml-auto flex items-center gap-4 text-sm text-gray-500">
                        <span><i class="fas fa-eye mr-1"></i>{{ $story->views_count }} views</span>
                        <span><i class="fas fa-share-alt mr-1"></i>{{ $story->shares_count }} shares</span>
                    </div>
                </div>
            </div>

            <!-- Story Content -->
            <article class="bg-white rounded-xl shadow-md p-6 md:p-8">
                <div class="prose prose-lg max-w-none prose-rose">
                    @php
                        // Render content correctly:
                        // If content contains HTML tags (from rich editor), output as-is.
                        // If it's plain text, convert newlines to paragraphs.
                        $hasHtml = $story->content !== strip_tags($story->content);
                    @endphp
                    @if($hasHtml)
                        {!! $story->content !!}
                    @else
                        @foreach(array_filter(explode("\n\n", $story->content)) as $paragraph)
                            <p>{{ trim($paragraph) }}</p>
                        @endforeach
                    @endif
                </div>

                <!-- Video Embed -->
                @if($story->video_url)
                    <div class="mt-8">
                        <h3 class="font-semibold text-gray-900 mb-4">
                            <i class="fas fa-video text-rose-500 mr-2"></i>
                            Video
                        </h3>
                        <div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden">
                            <iframe src="{{ $story->video_url }}" 
                                    frameborder="0" 
                                    allowfullscreen
                                    class="w-full h-64 md:h-96"></iframe>
                        </div>
                    </div>
                @endif

                <!-- Gallery -->
                @if($story->gallery && count($story->gallery) > 0)
                    <div class="mt-8">
                        <h3 class="font-semibold text-gray-900 mb-4">
                            <i class="fas fa-images text-rose-500 mr-2"></i>
                            Gallery
                        </h3>
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                            @foreach($story->gallery as $image)
                                <div class="aspect-square rounded-lg overflow-hidden">
                                    <img src="{{ asset('storage/' . $image) }}" 
                                         alt="Gallery image {{ $loop->iteration }}"
                                         class="w-full h-full object-cover hover:scale-105 transition-transform cursor-pointer"
                                         onclick="openLightbox(this.src)">
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            </article>

            <!-- Share Actions -->
            <div class="bg-white rounded-xl shadow-md p-6">
                <h3 class="font-semibold text-gray-900 mb-4">Share This Story</h3>
                <div class="flex flex-wrap gap-3">
                    <button onclick="shareTwitter()" 
                            class="px-4 py-2 bg-blue-400 text-white rounded-lg hover:bg-blue-500 transition">
                        <i class="fab fa-twitter mr-2"></i>Twitter
                    </button>
                    <button onclick="shareFacebook()" 
                            class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                        <i class="fab fa-facebook mr-2"></i>Facebook
                    </button>
                    <button onclick="shareWhatsApp()" 
                            class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition">
                        <i class="fab fa-whatsapp mr-2"></i>WhatsApp
                    </button>
                    <button onclick="copyLink()" 
                            class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">
                        <i class="fas fa-link mr-2"></i>Copy Link
                    </button>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Campaign Card -->
            @if($story->campaign)
                <div class="bg-white rounded-xl shadow-md p-6">
                    <h3 class="font-serif font-bold text-lg text-gray-900 mb-4">
                        <i class="fas fa-bullhorn text-teal-600 mr-2"></i>
                        Related Campaign
                    </h3>
                    @if($story->campaign->thumbnail)
                        <img src="{{ asset('storage/' . $story->campaign->thumbnail) }}" 
                             alt="{{ $story->campaign->title }}"
                             class="w-full h-32 object-cover rounded-lg mb-3">
                    @endif
                    <h4 class="font-semibold text-gray-900 mb-2">{{ $story->campaign->title }}</h4>
                    <p class="text-sm text-gray-600 line-clamp-3 mb-4">
                        {{ Str::limit($story->campaign->description, 100) }}
                    </p>
                    <a href="{{ route('advocacy.public.campaigns.show', $story->campaign) }}" 
                       class="block w-full px-4 py-2 bg-teal-600 text-white rounded-lg text-center hover:bg-teal-700 transition">
                        View Campaign
                    </a>
                </div>
            @endif

            <!-- Submit Your Story CTA -->
            <div class="bg-gradient-to-br from-rose-500 to-pink-600 rounded-xl shadow-lg p-6 text-white">
                <h3 class="font-serif font-bold text-xl mb-3">
                    <i class="fas fa-pen-alt mr-2"></i>
                    Share Your Story
                </h3>
                <p class="text-rose-100 mb-4">
                    Your journey can inspire others. Share your health success story today.
                </p>
                <a href="{{ route('advocacy.public.stories.create') }}" 
                   class="block w-full px-4 py-3 bg-white text-rose-600 rounded-lg font-semibold text-center hover:bg-rose-50 transition">
                    Submit Your Story
                </a>
            </div>

            <!-- Related Stories -->
            @if($related->count() > 0)
                <div class="bg-white rounded-xl shadow-md p-6">
                    <h3 class="font-serif font-bold text-lg text-gray-900 mb-4">
                        <i class="fas fa-heart text-rose-500 mr-2"></i>
                        Related Stories
                    </h3>
                    <div class="space-y-4">
                        @foreach($related as $relatedStory)
                            <a href="{{ route('advocacy.public.stories.show', $relatedStory) }}" 
                               class="block group">
                                @if($relatedStory->featured_image)
                                    <img src="{{ asset('storage/' . $relatedStory->featured_image) }}" 
                                         alt="{{ $relatedStory->title }}"
                                         class="w-full h-24 object-cover rounded-lg mb-2">
                                @endif
                                <h4 class="font-medium text-gray-900 group-hover:text-rose-600 transition line-clamp-2">
                                    {{ $relatedStory->title }}
                                </h4>
                                <p class="text-xs text-gray-500 mt-1">
                                    {{ $relatedStory->author_name }} • {{ $relatedStory->published_at->diffForHumans() }}
                                </p>
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

{{-- Lightbox Modal --}}
<div id="lightbox" class="fixed inset-0 bg-black/90 z-50 hidden items-center justify-center p-4">
    <button class="absolute top-4 right-4 w-10 h-10 flex items-center justify-center rounded-full bg-white/20 hover:bg-white/40 text-white text-xl transition z-10" onclick="closeLightbox()">
        <i class="fas fa-times"></i>
    </button>
    <img id="lightbox-img" src="" alt="Full size image" class="max-w-full max-h-full object-contain" onclick="event.stopPropagation()">
</div>

@push('scripts')
<script>
const storyUrl = window.location.href;
const storyTitle = @json($story->title);

// Share tracking — fire once per social share button click
function trackShare() {
    fetch('/advocacy/stories/{{ $story->id }}/share', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json',
        },
    });
}

function shareTwitter() {
    trackShare();
    window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(storyTitle)}&url=${encodeURIComponent(storyUrl)}`, '_blank');
}

function shareFacebook() {
    trackShare();
    window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(storyUrl)}`, '_blank');
}

function shareWhatsApp() {
    trackShare();
    window.open(`https://wa.me/?text=${encodeURIComponent(storyTitle + ' ' + storyUrl)}`, '_blank');
}

function copyLink() {
    navigator.clipboard.writeText(storyUrl).then(() => {
        alert('Link copied to clipboard!');
    });
}

function openLightbox(src) {
    document.getElementById('lightbox-img').src = src;
    document.getElementById('lightbox').classList.remove('hidden');
    document.getElementById('lightbox').classList.add('flex');
    document.body.style.overflow = 'hidden';
}

function closeLightbox() {
    document.getElementById('lightbox').classList.add('hidden');
    document.getElementById('lightbox').classList.remove('flex');
    document.body.style.overflow = '';
}
</script>
@endpush
@endsection
