@extends('layouts.marketplace')

@section('title', $post->title ?: 'Community Post')

@section('mobile_header')
    <div class="flex items-center justify-between p-4">
        <div class="flex items-center gap-3">
            <a class="flex items-center justify-center p-2 rounded-lg hover:bg-primary/10 text-slate-700 dark:text-slate-200" href="{{ route('pharmacy.community.index') }}">
                <span class="material-symbols-outlined">arrow_back</span>
            </a>
            <h1 class="text-xl font-bold tracking-tight text-slate-900 dark:text-slate-100">Post</h1>
        </div>
        @include('pharmacy.partials.notifications_icon')
    </div>
@endsection

@section('mobile_content')
    <div class="p-4 space-y-4 pb-24">
        <div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden shadow-sm">
            <div class="p-5 flex flex-col gap-4">
                <div class="flex justify-between items-start">
                    <div class="flex gap-3 min-w-0">
                        <div class="h-10 w-10 rounded-full overflow-hidden bg-white flex items-center justify-center border border-slate-200 dark:border-slate-800 shrink-0">
                            <img class="h-full w-full object-contain p-1" src="{{ asset('images/pharma-logo.png') }}" alt="Pharmacy logo">
                        </div>
                        <div class="flex flex-col min-w-0">
                            <span class="font-bold text-slate-900 dark:text-white truncate">{{ $post->pharmacy?->name }}</span>
                            <span class="text-xs text-slate-500 truncate">{{ $post->created_at?->diffForHumans() }}</span>
                        </div>
                    </div>
                </div>
                <div class="flex flex-col gap-3">
                    <h3 class="text-lg font-bold text-slate-900 dark:text-white leading-tight break-words">{{ $post->title ?: 'Post' }}</h3>
                    <div class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed whitespace-pre-wrap break-words">{{ $post->body }}</div>
                    @php
                        $mediaPaths = is_array($post->media_paths) && count($post->media_paths) > 0
                            ? $post->media_paths
                            : ($post->image_path ? [$post->image_path] : []);
                        $pdfPaths = array_values(array_filter($mediaPaths, fn ($p) => is_string($p) && \Illuminate\Support\Str::endsWith(strtolower($p), '.pdf')));
                        $imagePaths = array_values(array_filter($mediaPaths, fn ($p) => is_string($p) && ! \Illuminate\Support\Str::endsWith(strtolower($p), '.pdf')));
                        $imageUrls = array_map(fn ($p) => asset($p), $imagePaths);
                    @endphp
                    @if(count($imageUrls) > 0)
                        @if(count($imageUrls) === 1)
                            <button class="w-full overflow-hidden rounded-xl border border-slate-100 dark:border-slate-800" type="button" data-lightbox='@json($imageUrls)' data-lightbox-index="0">
                                <img class="w-full aspect-video object-cover" src="{{ $imageUrls[0] }}" alt="Post image">
                            </button>
                        @else
                            <div class="grid grid-cols-2 gap-2">
                                @foreach($imageUrls as $i => $url)
                                    <button class="w-full overflow-hidden rounded-xl border border-slate-100 dark:border-slate-800" type="button" data-lightbox='@json($imageUrls)' data-lightbox-index="{{ $i }}">
                                        <img class="w-full aspect-square object-cover" src="{{ $url }}" alt="Post image">
                                    </button>
                                @endforeach
                            </div>
                        @endif
                    @endif
                    @if(count($pdfPaths) > 0)
                        <div class="flex flex-col gap-2">
                            @foreach($pdfPaths as $path)
                                <a class="group inline-flex items-center gap-1.5 text-sm font-bold text-primary no-underline" href="{{ asset($path) }}" target="_blank" rel="noopener noreferrer">
                                    <span class="material-symbols-outlined text-lg">picture_as_pdf</span>
                                    <span class="group-hover:underline underline-offset-4">Open PDF</span>
                                </a>
                            @endforeach
                        </div>
                    @endif
                    @if($post->video_url)
                        <a class="group inline-flex items-center gap-1.5 text-sm font-bold text-primary no-underline" href="{{ $post->video_url }}" target="_blank" rel="noopener noreferrer">
                            <span class="material-symbols-outlined text-lg">play_circle</span>
                            <span class="group-hover:underline underline-offset-4">Open Video</span>
                        </a>
                    @endif
                    @if($post->location_url)
                        <a class="group inline-flex items-center gap-1.5 text-sm font-bold text-primary no-underline" href="{{ $post->location_url }}" target="_blank" rel="noopener noreferrer">
                            <span class="material-symbols-outlined text-lg">location_on</span>
                            <span class="group-hover:underline underline-offset-4">Location</span>
                        </a>
                    @endif
                </div>
                <div class="flex items-center justify-between pt-2 border-t border-slate-100 dark:border-slate-800">
                    <div class="flex gap-4">
                        <form method="POST" action="{{ route('pharmacy.community.like', $post) }}">
                            @csrf
                            <button class="flex items-center gap-1.5 text-slate-500 hover:text-primary transition-colors @if($post->liked_by_me) text-primary @endif" type="submit">
                                <span class="material-symbols-outlined text-xl">favorite</span>
                                <span class="text-xs font-bold">{{ $post->likes_count }}</span>
                            </button>
                        </form>
                        <span class="flex items-center gap-1.5 text-slate-500">
                            <span class="material-symbols-outlined text-xl">chat_bubble</span>
                            <span class="text-xs font-bold">{{ $post->replies->count() }}</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-5 shadow-sm">
            <div class="font-bold text-slate-900 dark:text-white mb-3">Reply</div>
            <form method="POST" action="{{ route('pharmacy.community.reply', $post) }}">
                @csrf
                <textarea class="form-input w-full min-h-[90px] rounded-xl text-slate-900 dark:text-white focus:outline-0 focus:ring-1 focus:ring-primary border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 placeholder:text-slate-400 p-3 text-sm resize-none" name="body" rows="4" placeholder="Write a reply..." required>{{ old('body') }}</textarea>
                <div class="mt-3 flex justify-end">
                    <button class="bg-primary hover:bg-primary/90 text-white font-bold py-2 px-6 rounded-xl transition-colors shadow-lg shadow-primary/20" type="submit">
                        Send
                    </button>
                </div>
            </form>
        </div>

        <div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-5 shadow-sm">
            <div class="font-bold text-slate-900 dark:text-white mb-4">Replies ({{ $post->replies->count() }})</div>
            @if($post->replies->count() === 0)
                <div class="text-slate-500 dark:text-slate-400">No replies yet.</div>
            @else
                <div class="space-y-3">
                    @foreach($post->replies as $reply)
                        <div class="border border-slate-200 dark:border-slate-800 rounded-xl p-4">
                            <div class="flex items-center justify-between gap-4">
                                <div class="font-semibold text-slate-900 dark:text-white text-sm">{{ $reply->pharmacy?->name }}</div>
                                <div class="text-xs text-slate-400">{{ $reply->created_at?->diffForHumans() }}</div>
                            </div>
                            <div class="mt-2 text-slate-600 dark:text-slate-400 text-sm whitespace-pre-wrap">{{ $reply->body }}</div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
    <script>
        (function () {
            if (window.pmLightboxInitialized) return;
            window.pmLightboxInitialized = true;

            var modal = document.getElementById('pmLightbox');
            if (!modal) {
                modal = document.createElement('div');
                modal.id = 'pmLightbox';
                modal.className = 'hidden fixed inset-0 z-[100]';
                modal.innerHTML =
                    '<div class="absolute inset-0 bg-black/80" data-lightbox-close></div>' +
                    '<div class="absolute inset-0 flex items-center justify-center p-4">' +
                    '<div class="relative w-full max-w-4xl">' +
                    '<button type="button" class="absolute -top-12 right-0 text-white/90 hover:text-white" data-lightbox-close>' +
                    '<span class="material-symbols-outlined text-3xl">close</span>' +
                    '</button>' +
                    '<button type="button" class="absolute left-0 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2" data-lightbox-prev>' +
                    '<span class="material-symbols-outlined text-4xl">chevron_left</span>' +
                    '</button>' +
                    '<button type="button" class="absolute right-0 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2" data-lightbox-next>' +
                    '<span class="material-symbols-outlined text-4xl">chevron_right</span>' +
                    '</button>' +
                    '<img class="mx-auto max-h-[80vh] w-auto rounded-xl shadow-2xl" data-lightbox-img alt="Preview">' +
                    '<div class="mt-3 text-center text-white/80 text-sm font-bold" data-lightbox-count></div>' +
                    '</div>' +
                    '</div>';
                document.body.appendChild(modal);
            }

            var state = { images: [], index: 0 };
            var imgEl = modal.querySelector('[data-lightbox-img]');
            var countEl = modal.querySelector('[data-lightbox-count]');

            function render() {
                if (!imgEl) return;
                var url = state.images[state.index];
                imgEl.src = url || '';
                if (countEl) {
                    countEl.textContent = state.images.length > 0 ? state.index + 1 + ' / ' + state.images.length : '';
                }
            }

            function open(images, index) {
                state.images = Array.isArray(images) ? images : [];
                state.index = typeof index === 'number' ? index : 0;
                if (state.index < 0) state.index = 0;
                if (state.index >= state.images.length) state.index = state.images.length - 1;
                modal.classList.remove('hidden');
                document.body.classList.add('overflow-hidden');
                render();
            }

            function close() {
                modal.classList.add('hidden');
                document.body.classList.remove('overflow-hidden');
                state.images = [];
                state.index = 0;
                if (imgEl) imgEl.src = '';
                if (countEl) countEl.textContent = '';
            }

            function prev() {
                if (state.images.length === 0) return;
                state.index = (state.index - 1 + state.images.length) % state.images.length;
                render();
            }

            function next() {
                if (state.images.length === 0) return;
                state.index = (state.index + 1) % state.images.length;
                render();
            }

            document.addEventListener('click', function (e) {
                var trigger = e.target && e.target.closest ? e.target.closest('[data-lightbox]') : null;
                if (trigger) {
                    var raw = trigger.getAttribute('data-lightbox');
                    var idxRaw = trigger.getAttribute('data-lightbox-index');
                    var idx = idxRaw ? parseInt(idxRaw, 10) : 0;
                    try {
                        open(JSON.parse(raw || '[]'), isNaN(idx) ? 0 : idx);
                    } catch (err) {}
                    return;
                }

                if (e.target && e.target.closest && e.target.closest('[data-lightbox-close]')) {
                    close();
                    return;
                }

                if (e.target && e.target.closest && e.target.closest('[data-lightbox-prev]')) {
                    prev();
                    return;
                }

                if (e.target && e.target.closest && e.target.closest('[data-lightbox-next]')) {
                    next();
                    return;
                }
            });

            document.addEventListener('keydown', function (e) {
                if (modal.classList.contains('hidden')) return;
                if (e.key === 'Escape') close();
                if (e.key === 'ArrowLeft') prev();
                if (e.key === 'ArrowRight') next();
            });
        })();
    </script>
@endsection

@section('desktop_content')
    <main class="flex flex-1 justify-center py-8 px-4 md:px-0">
        <div class="layout-content-container flex flex-col max-w-[800px] flex-1 gap-6">
            <div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden shadow-sm">
                <div class="p-5 flex flex-col gap-4">
                    <div class="flex justify-between items-start">
                        <div class="flex gap-3 min-w-0">
                            <div class="h-10 w-10 rounded-full overflow-hidden bg-white flex items-center justify-center border border-slate-200 dark:border-slate-800 shrink-0">
                                <img class="h-full w-full object-contain p-1" src="{{ asset('images/pharma-logo.png') }}" alt="Pharmacy logo">
                            </div>
                            <div class="flex flex-col min-w-0">
                                <span class="font-bold text-slate-900 dark:text-white truncate">{{ $post->pharmacy?->name }}</span>
                                <span class="text-xs text-slate-500 truncate">{{ $post->created_at?->diffForHumans() }}</span>
                            </div>
                        </div>
                        <a class="bg-primary/10 text-primary hover:bg-primary hover:text-white font-bold py-1.5 px-4 rounded-lg text-sm transition-all" href="{{ route('pharmacy.community.index') }}">Back</a>
                    </div>

                    <div class="flex flex-col gap-3">
                        <h3 class="text-lg font-bold text-slate-900 dark:text-white leading-tight break-words">{{ $post->title ?: 'Post' }}</h3>
                        <div class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed whitespace-pre-wrap break-words">{{ $post->body }}</div>
                        @php
                            $mediaPaths = is_array($post->media_paths) && count($post->media_paths) > 0
                                ? $post->media_paths
                                : ($post->image_path ? [$post->image_path] : []);
                            $pdfPaths = array_values(array_filter($mediaPaths, fn ($p) => is_string($p) && \Illuminate\Support\Str::endsWith(strtolower($p), '.pdf')));
                            $imagePaths = array_values(array_filter($mediaPaths, fn ($p) => is_string($p) && ! \Illuminate\Support\Str::endsWith(strtolower($p), '.pdf')));
                            $imageUrls = array_map(fn ($p) => asset($p), $imagePaths);
                        @endphp
                        @if(count($imageUrls) > 0)
                            @if(count($imageUrls) === 1)
                                <button class="w-full overflow-hidden rounded-xl border border-slate-100 dark:border-slate-800" type="button" data-lightbox='@json($imageUrls)' data-lightbox-index="0">
                                    <img class="w-full aspect-video object-cover" src="{{ $imageUrls[0] }}" alt="Post image">
                                </button>
                            @else
                                <div class="grid grid-cols-2 gap-2">
                                    @foreach($imageUrls as $i => $url)
                                        <button class="w-full overflow-hidden rounded-xl border border-slate-100 dark:border-slate-800" type="button" data-lightbox='@json($imageUrls)' data-lightbox-index="{{ $i }}">
                                            <img class="w-full aspect-square object-cover" src="{{ $url }}" alt="Post image">
                                        </button>
                                    @endforeach
                                </div>
                            @endif
                        @endif
                        @if(count($pdfPaths) > 0)
                            <div class="flex flex-col gap-2">
                                @foreach($pdfPaths as $path)
                                    <a class="group inline-flex items-center gap-1.5 text-sm font-bold text-primary no-underline" href="{{ asset($path) }}" target="_blank" rel="noopener noreferrer">
                                        <span class="material-symbols-outlined text-lg">picture_as_pdf</span>
                                        <span class="group-hover:underline underline-offset-4">Open PDF</span>
                                    </a>
                                @endforeach
                            </div>
                        @endif
                        @if($post->video_url)
                            <a class="group inline-flex items-center gap-1.5 text-sm font-bold text-primary no-underline" href="{{ $post->video_url }}" target="_blank" rel="noopener noreferrer">
                                <span class="material-symbols-outlined text-lg">play_circle</span>
                                <span class="group-hover:underline underline-offset-4">Open Video</span>
                            </a>
                        @endif
                        @if($post->location_url)
                            <a class="group inline-flex items-center gap-1.5 text-sm font-bold text-primary no-underline" href="{{ $post->location_url }}" target="_blank" rel="noopener noreferrer">
                                <span class="material-symbols-outlined text-lg">location_on</span>
                                <span class="group-hover:underline underline-offset-4">Location</span>
                            </a>
                        @endif
                    </div>

                    <div class="flex items-center justify-between pt-2 border-t border-slate-100 dark:border-slate-800">
                        <div class="flex gap-4">
                            <form method="POST" action="{{ route('pharmacy.community.like', $post) }}">
                                @csrf
                                <button class="flex items-center gap-1.5 text-slate-500 hover:text-primary transition-colors @if($post->liked_by_me) text-primary @endif" type="submit">
                                    <span class="material-symbols-outlined text-xl">favorite</span>
                                    <span class="text-xs font-bold">{{ $post->likes_count }}</span>
                                </button>
                            </form>
                            <span class="flex items-center gap-1.5 text-slate-500">
                                <span class="material-symbols-outlined text-xl">chat_bubble</span>
                                <span class="text-xs font-bold">{{ $post->replies->count() }}</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-5 shadow-sm">
                <div class="font-bold text-slate-900 dark:text-white mb-3">Reply</div>
                <form method="POST" action="{{ route('pharmacy.community.reply', $post) }}">
                    @csrf
                    <textarea class="form-input w-full min-h-[100px] rounded-xl text-slate-900 dark:text-white focus:outline-0 focus:ring-1 focus:ring-primary border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 placeholder:text-slate-400 p-4 text-base resize-none" name="body" rows="4" placeholder="Write a reply..." required>{{ old('body') }}</textarea>
                    <div class="mt-3 flex justify-end">
                        <button class="bg-primary hover:bg-primary/90 text-white font-bold py-2 px-8 rounded-xl transition-colors shadow-lg shadow-primary/20" type="submit">
                            Send Reply
                        </button>
                    </div>
                </form>
            </div>

            <div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-5 shadow-sm">
                <div class="font-bold text-slate-900 dark:text-white mb-4">Replies ({{ $post->replies->count() }})</div>
                @if($post->replies->count() === 0)
                    <div class="text-slate-500 dark:text-slate-400">No replies yet.</div>
                @else
                    <div class="space-y-3">
                        @foreach($post->replies as $reply)
                            <div class="border border-slate-200 dark:border-slate-800 rounded-xl p-4">
                                <div class="flex items-center justify-between gap-4">
                                    <div class="font-semibold text-slate-900 dark:text-white text-sm">{{ $reply->pharmacy?->name }}</div>
                                    <div class="text-xs text-slate-400">{{ $reply->created_at?->diffForHumans() }}</div>
                                </div>
                                <div class="mt-2 text-slate-600 dark:text-slate-400 text-sm whitespace-pre-wrap">{{ $reply->body }}</div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </main>
@endsection