@extends('layouts.app')

@section('content')
    @if ($message->heroImage)
        <div class="message-hero position-relative overflow-hidden mb-5" style="height: 400px;">
            <img src="{{ asset('storage/' . $message->heroImage->path) }}" alt="{{ $message->heroImage->alt_text }}"
                class="w-100 h-100 object-fit-cover">
            <div class="position-absolute bottom-0 start-0 w-100 p-4"
                style="background: linear-gradient(transparent, rgba(0,0,0,0.7));">
                <div class="container text-white">
                    <p class="mb-0 fw-bold">{{ $message->date->format('Y/m/d') }}</p>
                </div>
            </div>
        </div>
    @else
        <div class="container mt-5 pt-4"></div>
    @endif

    <div class="container mb-5">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <nav aria-label="breadcrumb" class="mb-4">
                    <ol class="breadcrumb bg-transparent p-0">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-decoration-none">ホーム</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('messages.index') }}"
                                class="text-decoration-none">メッセージ</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ $message->title }}</li>
                    </ol>
                </nav>

                <header class="mb-4 text-start">
                    @if (!$message->heroImage)
                        <p class="text-muted fw-bold mb-2">{{ $message->date->format('Y/m/d') }}</p>
                    @endif
                    <h2 class="display-6 fw-bold mb-4">{{ $message->title }}</h2>
                </header>

                <div class="row g-4">
                    <div class="{{ $message->template === 'full_width' ? 'col-12' : 'col-lg-8' }}">
                        {{-- Video Top Template --}}
                        @if ($message->template === 'video_top' && $message->youtube_url)
                            <div class="ratio ratio-16x9 rounded shadow-sm overflow-hidden mb-5">
                                @php
                                    preg_match(
                                        '/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/',
                                        $message->youtube_url,
                                        $matches,
                                    );
                                    $videoId = $matches[1] ?? null;
                                @endphp
                                @if ($videoId)
                                    <iframe src="https://www.youtube.com/embed/{{ $videoId }}" title="YouTube video"
                                        allowfullscreen></iframe>
                                @endif
                            </div>
                        @endif

                        <div class="message-content bg-white p-4 p-md-5 rounded shadow-sm lh-lg mb-5">
                            <x-content-blocks :blocks="$message->content" />
                        </div>

                        {{-- Default & Full Width: YouTube Section at the bottom --}}
                        @if ($message->template !== 'video_top')
                            <div class="youtube-section mt-5 pt-5 border-top">
                                <h4 class="mb-4">動画で見る</h4>
                                @if ($message->youtube_url)
                                    <div class="ratio ratio-16x9 rounded shadow-sm overflow-hidden mb-3">
                                        @php
                                            preg_match(
                                                '/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/',
                                                $message->youtube_url,
                                                $matches,
                                            );
                                            $videoId = $matches[1] ?? null;
                                        @endphp
                                        @if ($videoId)
                                            <iframe src="https://www.youtube.com/embed/{{ $videoId }}"
                                                title="YouTube video" allowfullscreen></iframe>
                                        @endif
                                    </div>
                                    <p class="small text-muted">
                                        動画が再生されない場合は<a href="{{ $message->youtube_url }}"
                                            target="_blank">こちら（YouTube）</a>から視聴してください。
                                    </p>
                                @else
                                    <div class="alert alert-light border shadow-sm p-4 text-center">
                                        <p class="mb-3">このメッセージの動画は現在準備中です。公式チャンネルにて過去のメッセージをご覧いただけます。</p>
                                        <a href="https://www.youtube.com/@OpenDoorChapel2025" target="_blank"
                                            class="btn btn-outline-primary rounded-pill px-4">
                                            <i class="bi bi-youtube me-2"></i> YouTube公式チャンネルへ
                                        </a>
                                    </div>
                                @endif
                            </div>
                        @endif
                    </div>

                    @if ($message->template !== 'full_width')
                        <div class="col-lg-4">
                            <div class="sticky-top" style="top: 100px;">
                                @if ($message->pdf_path)
                                    <div class="card border-0 shadow-sm mb-4">
                                        <div class="card-body p-4 text-center">
                                            <i class="bi bi-file-earmark-pdf text-danger display-4 mb-3"></i>
                                            <h5>メッセージ資料</h5>
                                            <p class="small text-muted mb-3">当日のアウトラインや週報をダウンロードいただけます。</p>
                                            <a href="{{ asset('storage/' . $message->pdf_path) }}"
                                                class="btn btn-outline-danger w-100" target="_blank">
                                                PDFを開く
                                            </a>
                                        </div>
                                    </div>
                                @endif

                                <div class="card border-0 shadow-sm">
                                    <div class="card-body p-4 font-monospace">
                                        <h6>聖書箇所</h6>
                                        <hr>
                                        <div id="message-bible-references">
                                            {{-- This will be populated if relevant content is found in blocks or metadata --}}
                                            <p class="text-muted small italic">本文中の聖句引用を参照してください。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection