@extends('layouts.app')

@section('title', $story->title . ' - UN-Habitat Nepal')

@section('content')
<div class="py-16">
    {{-- Header & Featured Image --}}
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
        <div class="mb-12">
            <h1 class="text-4xl md:text-5xl font-extrabold mb-4">
                {{ $story->title }}
            </h1>
        </div>

        @if($story->image)
        <div class="rounded-3xl overflow-hidden shadow-2xl aspect-video mb-12">
            <img src="{{ Storage::url($story->image) }}" alt="{{ $story->image_alt ?: $story->title }}" class="w-full h-full object-cover">
        </div>
        @endif

        <div class="clearfix"></div>

        <div class="flex items-center space-x-4 mb-6 text-sm font-bold text-slate-600 uppercase tracking-widest">
                <span class="text-blue-800">Published {{ $story->published_date ? $story->published_date->format('M d, Y') : $story->created_at->format('M d, Y') }}</span>
                @if($story->is_featured)
                    <span class="w-1.5 h-1.5 bg-slate-200 rounded-full"></span>
                    <span class="text-amber-500 flex items-center space-x-1">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                        <span>Featured Story</span>
                    </span>
                @endif
            </div>
    </div>

    {{-- Content Blocks --}}
    @foreach($story->content as $block)
        <!-- DEBUG: Type: {{ $block['type'] }} | is_full_width: {{ json_encode($block['data']['is_full_width'] ?? null) }} -->
        @if($block['type'] === 'parallax' && filter_var($block['data']['is_full_width'] ?? true, FILTER_VALIDATE_BOOLEAN))
            @php
                $titleColor = $block['data']['title_color'] ?? '#ffffff';
                $subtitleColor = $block['data']['subtitle_color'] ?? '#ffffff';
            @endphp
            <div class="relative overflow-hidden my-12 bg-fixed bg-center bg-cover flex items-center justify-center w-full" 
                 style="background-image: url('{{ Storage::url($block['data']['image']) }}'); 
                        height: {{ $block['data']['height'] == 'small' ? '300px' : ($block['data']['height'] == 'large' ? '700px' : '500px') }};"
                 role="img" aria-label="{{ !empty($block['data']['image_alt']) ? $block['data']['image_alt'] : ($block['data']['title'] ?? '') }}">
                <div class="absolute inset-0 bg-slate-900/40 backdrop-blur-[1px]"></div>
                <div class="relative z-10 text-center px-6">
                    @if(!empty($block['data']['title']))
                        <h3 class="text-3xl md:text-5xl font-black mb-2" style="color: {{ $titleColor }};">{{ $block['data']['title'] }}</h3>
                    @endif
                    @if(!empty($block['data']['subtitle']))
                        <p class="text-lg md:text-xl font-medium" style="color: {{ $subtitleColor }}; opacity: 0.9;">{{ $block['data']['subtitle'] }}</p>
                    @endif
                </div>
            </div>
        @else
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-12">
                <div class="prose prose-lg prose-blue max-w-none prose-slate">
                    @switch($block['type'])
                        @case('text')
                            <div class="mb-8">
                                {!! $block['data']['content'] !!}
                            </div>
                            @break

                        @case('image')
                            <div class="my-12 block-image block-image-{{ $block['data']['alignment'] }} block-image-{{ $block['data']['width'] }}">
                                <figure class="m-0">
                                    <img src="{{ Storage::url($block['data']['image']) }}" alt="{{ !empty($block['data']['image_alt']) ? $block['data']['image_alt'] : ($block['data']['caption'] ?? '') }}" class="rounded-3xl shadow-xl w-full">
                                    @if(!empty($block['data']['caption']))
                                        <figcaption class="mt-4 text-center text-sm text-slate-500 italic">{{ $block['data']['caption'] }}</figcaption>
                                    @endif
                                </figure>
                            </div>
                            @break

                        @case('quote')
                            <blockquote class="my-12 border-l-8 border-blue-800 bg-blue-50/50 p-10 rounded-r-3xl">
                                <p class="text-2xl font-bold text-slate-800 italic mb-4 leading-relaxed">
                                    "{{ $block['data']['quote'] }}"
                                </p>
                                @if(!empty($block['data']['author']))
                                    <cite class="text-blue-800 font-bold not-italic">— {{ $block['data']['author'] }}</cite>
                                @endif
                            </blockquote>
                            @break

                    @case('parallax')
                        @php
                            $titleColor = $block['data']['title_color'] ?? '#ffffff';
                            $subtitleColor = $block['data']['subtitle_color'] ?? '#ffffff';
                        @endphp
                        <div class="relative overflow-hidden my-12 bg-fixed bg-center bg-cover flex items-center justify-center rounded-3xl" 
                             style="background-image: url('{{ Storage::url($block['data']['image']) }}'); 
                                    height: {{ $block['data']['height'] == 'small' ? '300px' : ($block['data']['height'] == 'large' ? '700px' : '500px') }};"
                             role="img" aria-label="{{ !empty($block['data']['image_alt']) ? $block['data']['image_alt'] : ($block['data']['title'] ?? '') }}">
                            <div class="absolute inset-0 bg-slate-900/40 backdrop-blur-[1px]"></div>
                            <div class="relative z-10 text-center px-6">
                                @if(!empty($block['data']['title']))
                                    <h3 class="text-3xl md:text-5xl font-black mb-2" style="color: {{ $titleColor }};">{{ $block['data']['title'] }}</h3>
                                @endif
                                @if(!empty($block['data']['subtitle']))
                                    <p class="text-lg md:text-xl font-medium" style="color: {{ $subtitleColor }}; opacity: 0.9;">{{ $block['data']['subtitle'] }}</p>
                                @endif
                            </div>
                        </div>
                        @break

                    @case('slideshow')
                        <div class="my-12 relative group slideshow-container">
                            <div class="swiper rounded-3xl overflow-hidden shadow-xl">
                                <div class="swiper-wrapper">
                                    @foreach($block['data']['slides'] as $slide)
                                        @php
                                            $fontColor = $slide['font_color'] ?? '#ffffff';
                                        @endphp
                                        <div class="swiper-slide relative aspect-[16/9] w-full overflow-hidden">
                                            <img src="{{ Storage::url($slide['image']) }}" alt="{{ !empty($slide['image_alt']) ? $slide['image_alt'] : ($slide['caption'] ?? '') }}" class="w-full h-full object-cover">
                                            @if(!empty($slide['caption']) || !empty($slide['subcaption']))
                                                <div class="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-slate-900/30 to-transparent flex flex-col justify-end p-8 md:p-12 text-center">
                                                    <div class="slide-caption-content transform translate-y-6 opacity-0 transition-all duration-700 ease-out" style="color: {{ $fontColor }};">
                                                        @if(!empty($slide['caption']))
                                                            <div class="text-xl md:text-2xl font-bold tracking-wide mb-2 drop-shadow-md">{{ $slide['caption'] }}</div>
                                                        @endif
                                                        @if(!empty($slide['subcaption']))
                                                            <div class="text-sm md:text-base font-medium opacity-90 italic drop-shadow-sm">{{ $slide['subcaption'] }}</div>
                                                        @endif
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                                <div class="swiper-button-next !text-white !w-12 !h-12 !bg-black/30 hover:!bg-black/50 backdrop-blur-sm rounded-full after:!text-lg transition-all duration-300 opacity-0 group-hover:opacity-100 !right-4"></div>
                                <div class="swiper-button-prev !text-white !w-12 !h-12 !bg-black/30 hover:!bg-black/50 backdrop-blur-sm rounded-full after:!text-lg transition-all duration-300 opacity-0 group-hover:opacity-100 !left-4"></div>
                                <div class="swiper-pagination !bottom-4"></div>
                            </div>
                        </div>
                        @break

                    @case('video')
                        @php
                            $videoSource = $block['data']['source'] ?? 'youtube';
                            $caption = $block['data']['caption'] ?? null;
                        @endphp
                        <div class="my-12">
                            @if($videoSource === 'youtube' && !empty($block['data']['youtube_url']))
                                @php
                                    $youtubeUrl = $block['data']['youtube_url'];
                                    $videoId = null;
                                    if (preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/\s]{11})%i', $youtubeUrl, $match)) {
                                        $videoId = $match[1];
                                    }
                                @endphp
                                @if($videoId)
                                    <div class="aspect-video w-full rounded-3xl overflow-hidden shadow-xl">
                                        <iframe class="w-full h-full border-0" 
                                                src="https://www.youtube.com/embed/{{ $videoId }}" 
                                                title="YouTube video player" 
                                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                                                allowfullscreen>
                                        </iframe>
                                    </div>
                                @else
                                    <div class="p-4 bg-amber-50 text-amber-800 rounded-xl text-sm">
                                        Invalid YouTube URL provided.
                                    </div>
                                @endif
                            @elseif($videoSource === 'file' && !empty($block['data']['video_file']))
                                <div class="rounded-3xl overflow-hidden shadow-xl bg-slate-900 aspect-video">
                                    <video class="w-full h-full object-contain" controls>
                                        <source src="{{ Storage::url($block['data']['video_file']) }}" type="video/mp4">
                                        Your browser does not support the video tag.
                                    </video>
                                </div>
                            @endif
                            @if(!empty($caption))
                                <p class="mt-4 text-center text-sm text-slate-500 italic">{{ $caption }}</p>
                            @endif
                        </div>
                        @break
                @endswitch
                </div>
            </div>
        @endif
    @endforeach

    <!-- Related Stories -->
    @if($relatedStories->isNotEmpty())
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-24 pt-16 border-t border-slate-100">
        <h2 class="text-3xl font-bold mb-12">{{ $story->project ? 'More from ' . $story->project->name : 'More Stories' }}</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            @foreach($relatedStories as $related)
            <a href="{{ route('stories.show', $related->slug) }}" class="group block">
                <div class="aspect-video rounded-2xl overflow-hidden mb-4 bg-slate-100 border border-slate-100">
                    @if($related->image)
                        <img src="{{ Storage::url($related->image) }}" alt="{{ $related->image_alt ?: $related->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                    @endif
                </div>
                <h3 class="font-bold text-slate-800 group-hover:text-blue-800 transition-colors line-clamp-2">
                    {{ $related->title }}
                </h3>
            </a>
            @endforeach
        </div>
    </div>
    @endif
</div>

<style>
    /* Content Builder Styles */
    .block-image-left {
        float: left;
        margin-right: 2rem;
        margin-bottom: 2rem;
    }
    .block-image-right {
        float: right;
        margin-left: 2rem;
        margin-bottom: 2rem;
    }
    .block-image-center {
        clear: both;
        margin-left: auto;
        margin-right: auto;
    }

    /* Width variations */
    .block-image-small { width: 33%; }
    .block-image-medium { width: 66%; }
    .block-image-full { width: 100%; clear: both; }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .block-image-left, .block-image-right, .block-image-small, .block-image-medium {
            float: none;
            width: 100%;
            margin-left: 0;
            margin-right: 0;
        }
    }

    .prose p {
        margin-bottom: 1.5rem;
        line-height: 1.8;
    }
    .prose h2 {
        font-size: 2.25rem;
        font-weight: 800;
        margin-top: 4rem;
        margin-bottom: 1.5rem;
        color: #0f172a;
    }
    .prose clear-both {
        clear: both;
    }
    .scrollbar-none::-webkit-scrollbar {
        display: none;
    }
    .scrollbar-none {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Swiper slide active animation */
    .swiper-slide-active .slide-caption-content {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.slideshow-container').forEach(function(container) {
            const swiperEl = container.querySelector('.swiper');
            new Swiper(swiperEl, {
                slidesPerView: 1,
                spaceBetween: 30,
                loop: true,
                autoplay: {
                    delay: 5000,
                    disableOnInteraction: false,
                },
                pagination: {
                    el: container.querySelector('.swiper-pagination'),
                    clickable: true,
                    dynamicBullets: true,
                },
                navigation: {
                    nextEl: container.querySelector('.swiper-button-next'),
                    prevEl: container.querySelector('.swiper-button-prev'),
                },
            });
        });
    });
</script>
@endsection