@extends('layouts.app')

@section('content')
    <article class="mb-4">
        <h1>{{ $news->title }}</h1>
        <div class="text-muted mb-3">
            <span>{{ $news->taxonomy_label }}</span>
            @if($news->published_at)
                <span class="ms-2">· {{ $news->published_at->format('F j, Y') }}</span>
            @endif
        </div>
        @php
            $renderableBlocks = $news->renderable_content_blocks;
            $hasRenderableContent = false;
        @endphp

        @foreach($renderableBlocks as $block)
            @php $type = $block['type'] ?? null; @endphp

            @if($type === 'image')
                @php $imagePath = trim($block['image_path'] ?? ''); @endphp
                @if($imagePath !== '')
                    @php $hasRenderableContent = true; @endphp
                    <figure class="mb-3">
                        <img src="{{ $imagePath }}" class="img-fluid news-article__image" alt="{{ $block['caption'] ?? $news->title }}">
                        @if(! empty($block['caption']))
                            <figcaption class="text-muted small mt-2">{{ $block['caption'] }}</figcaption>
                        @endif
                    </figure>
                @endif
            @elseif($type === 'text')
                @php
                    $rawBody = $block['body'] ?? '';
                    $sanitizedBody = $rawBody !== ''
                        ? strip_tags($rawBody, '<p><br><br/><br /><strong><em><u><ol><ul><li><a><blockquote>')
                        : '';
                    $formattedBody = $sanitizedBody !== '' ? nl2br($sanitizedBody) : '';
                @endphp

                @if($formattedBody !== '')
                    @php $hasRenderableContent = true; @endphp
                    <div class="news-article__body mb-3">{!! $formattedBody !!}</div>
                @endif
            @elseif($type === 'youtube')
                @php
                    $rawUrl = trim($block['embed_url'] ?? '');
                    $youtubeId = null;

                    if ($rawUrl !== '') {
                        $parsed = parse_url($rawUrl);
                        $query = [];

                        if (isset($parsed['query'])) {
                            parse_str($parsed['query'], $query);
                        }

                        $path = $parsed['path'] ?? '';

                        if (! empty($query['v'])) {
                            $youtubeId = $query['v'];
                        } elseif (! empty($path)) {
                            $segments = explode('/', trim($path, '/'));

                            if (str_contains($parsed['host'] ?? '', 'youtu.be') && isset($segments[0])) {
                                $youtubeId = $segments[0];
                            } elseif (($segments[0] ?? '') === 'embed' && isset($segments[1])) {
                                $youtubeId = $segments[1];
                            }
                        }
                    }
                @endphp

                @if($youtubeId)
                    @php
                        $hasRenderableContent = true;
                    @endphp
                    <div class="ratio ratio-16x9 mb-3">
                        <iframe src="https://www.youtube.com/embed/{{ e($youtubeId) }}" title="YouTube video player" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"></iframe>
                    </div>
                @endif
            @elseif(in_array($type, ['facebook', 'tiktok', 'twitter']))
                @php $embedUrl = trim($block['embed_url'] ?? ''); @endphp

                @if($embedUrl !== '')
                    @php $hasRenderableContent = true; @endphp

                    @if($type === 'facebook')
                        <div class="ratio ratio-4x3 mb-3">
                            <iframe src="https://www.facebook.com/plugins/post.php?href={{ urlencode($embedUrl) }}&show_text=true&width=500" allowfullscreen scrolling="no" frameborder="0"></iframe>
                        </div>
                    @elseif($type === 'tiktok')
                        @php
                            $videoId = null;
                            if (preg_match('#/video/(\d+)#', $embedUrl, $matches)) {
                                $videoId = $matches[1];
                            }
                        @endphp

                        @if($videoId)
                            <div class="ratio ratio-9x16 mb-3">
                                <iframe src="https://www.tiktok.com/embed/v2/{{ e($videoId) }}" allowfullscreen allow="autoplay; encrypted-media"></iframe>
                            </div>
                        @else
                            <div class="ratio ratio-4x3 mb-3">
                                <iframe src="https://www.tiktok.com/embed/v2?url={{ urlencode($embedUrl) }}" allowfullscreen allow="autoplay; encrypted-media"></iframe>
                            </div>
                        @endif
                    @elseif($type === 'twitter')
                        <div class="ratio ratio-4x3 mb-3">
                            <iframe src="https://twitframe.com/show?url={{ urlencode($embedUrl) }}" allowfullscreen frameborder="0"></iframe>
                        </div>
                    @endif
                @endif
            @endif
        @endforeach

        @if(! $hasRenderableContent)
            <p class="text-muted">{{ __('This article does not have any content yet.') }}</p>
        @endif
    </article>

    <section>
        <h2 class="mb-3">Comments</h2>

        @auth
            @if(auth()->user()->hasVerifiedEmail())
                <form method="POST" action="{{ route('news.comments.store', $news) }}" class="mb-4">
                    @csrf
                    <div class="mb-3">
                        <label for="comment" class="form-label">Add a comment</label>
                        <textarea id="comment" name="body" class="form-control" rows="4" required>{{ old('body') }}</textarea>
                    </div>
                    <button type="submit" class="button button-primary">Post comment</button>
                </form>
            @else
                <div class="alert alert-info">Please verify your email address to join the discussion.</div>
            @endif
        @else
            <p><a href="{{ route('login') }}">Log in</a> or <a href="{{ route('register') }}">register</a> to post a comment.</p>
        @endauth

        @forelse($comments as $comment)
            <article class="mb-3">
                <p class="mb-2"><strong>{{ $comment->user->name }}</strong> <span class="text-muted">&middot; {{ $comment->created_at->diffForHumans() }}</span></p>
                <p>{{ $comment->body }}</p>
            </article>
        @empty
            <p class="text-muted">No comments yet. Be the first to share your thoughts!</p>
        @endforelse
    </section>
@endsection