@extends('admin.layouts.app')

@section('content')
    <div class="azp-article-container">

        {{-- BARRA DE ACÇÕES --}}
        <div class="azp-article-nav">
            <a href="{{ route('admin.news.index') }}" class="back-link">← Voltar à lista</a>
            <div class="nav-actions">
                @if($item->is_internal)
                    <span class="internal-badge">🔒 Notícia Interna</span>
                @endif
                <a href="{{ route('admin.news.edit', $item->id) }}" class="edit-btn">Editar Artigo</a>
            </div>
        </div>

        <div class="azp-article-layout">

            {{-- CONTEÚDO TIPO NEWS --}}
            <article class="azp-article-main">

                {{-- HEADER DO ARTIGO --}}
                <header class="article-header">
                    <div class="article-meta">
                        <span class="category">{{ $item->club_id ? optional($item->club)->name : 'Geral' }}</span>
                        <span class="dot">•</span>
                        <time>{{ $item->published_at ? \Carbon\Carbon::parse($item->published_at)->format('d \d\e M, Y') : $item->created_at->format('d \d\e M, Y') }}</time>
                    </div>
                    <h1 class="article-title">{{ $item->title }}</h1>
                </header>

                {{-- MEDIA PRINCIPAL (Destaque) --}}
                @if($item->media && $item->media->count() > 0)
                    @php $first = $item->media->sortBy('sort_order')->first(); @endphp
                    <div class="article-hero-media">
                        {!! renderMediaElement($first) !!}
                        @if($first->caption)
                            <figcaption class="hero-caption">{{ $first->caption }}</figcaption>
                        @endif
                    </div>
                @endif

                {{-- CORPO DA NOTÍCIA --}}
                <div class="article-body">
                    {!! nl2br(e($item->body)) !!}
                </div>

                {{-- GALERIA SECUNDÁRIA (Restante Media) --}}
                @if($item->media && $item->media->count() > 1)
                    <div class="article-sub-media">
                        <h3 class="sub-title">Mais imagens e vídeos</h3>
                        <div class="media-grid-flow">
                            @foreach($item->media->sortBy('sort_order')->skip(1) as $m)
                                <div class="media-card">
                                    <div class="media-card-wrap">
                                        {!! renderMediaElement($m) !!}
                                    </div>
                                    @if($m->caption)
                                        <p class="media-caption">{{ $m->caption }}</p>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            </article>

            {{-- SIDEBAR --}}
            <aside class="azp-article-sidebar">
                <div class="sidebar-block">
                    <h4>Publicação</h4>
                    <div class="info-row">
                        <span>Estado:</span>
                        <span class="status-tag {{ $item->status }}">{{ $item->status === 'published' ? 'Publicado' : 'Rascunho' }}</span>
                    </div>
                    <div class="info-row">
                        <span>Hora:</span>
                        <strong>{{ $item->published_at ? \Carbon\Carbon::parse($item->published_at)->format('H:i') : $item->created_at->format('H:i') }}</strong>
                    </div>
                </div>

                @if($item->creator)
                    <div class="sidebar-block">
                        <h4>Autor</h4>
                        <div class="author-info">
                            <div class="author-avatar">{{ strtoupper(substr($item->creator->name, 0, 1)) }}</div>
                            <span>{{ $item->creator->name }}</span>
                        </div>
                    </div>
                @endif
            </aside>

        </div>
    </div>

    {{-- FUNÇÃO AUXILIAR --}}
    @php
        function renderMediaElement($m) {
            $u = trim((string)$m->url);
            if($m->type === 'image') {
                return '<img src="'.$u.'" class="media-content" loading="lazy">';
            }

            $embedUrl = null;
            // Detecção de Vídeo Direto
            if(preg_match('~\.(mp4|webm)(\?|$)~i', $u)) {
                return '<video controls class="media-content"><source src="'.$u.'"></video>';
            }

            // YouTube / Vimeo
            if(preg_match('~youtu\.be/([A-Za-z0-9_-]{6,})~', $u, $mm)) $embedUrl = 'https://www.youtube.com/embed/'.$mm[1];
            elseif(preg_match('~youtube\.com/shorts/([A-Za-z0-9_-]{6,})~', $u, $mm)) $embedUrl = 'https://www.youtube.com/embed/'.$mm[1];
            elseif(preg_match('~vimeo\.com/(?:video/)?(\d+)~', $u, $mm)) $embedUrl = 'https://player.vimeo.com/video/'.$mm[1];
            elseif(strpos($u, 'v=') !== false) {
                parse_str(parse_url($u, PHP_URL_QUERY), $qs);
                if(!empty($qs['v'])) $embedUrl = 'https://www.youtube.com/embed/'.$qs['v'];
            }

            if($embedUrl) {
                return '<iframe src="'.$embedUrl.'" frameborder="0" allowfullscreen class="media-content"></iframe>';
            }

            return '<div class="media-error" style="padding:20px; text-align:center; background:#f1f5f9; font-size:12px;">Link não reconhecido</div>';
        }
    @endphp

    <style>
        /* Reset & Layout Base */
        .azp-article-container { max-width: 1200px; margin: 0 auto; padding: 30px 20px; font-family: 'Inter', system-ui, -apple-system, sans-serif; color: #1e293b; }
        .azp-article-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
        .back-link { text-decoration: none; color: #64748b; font-weight: 500; font-size: 0.9rem; transition: color 0.2s; }
        .back-link:hover { color: #1e293b; }
        .edit-btn { background: #2563eb; color: #fff; padding: 10px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: background 0.2s; }
        .edit-btn:hover { background: #1d4ed8; }
        .internal-badge { background: #fef3c7; color: #92400e; padding: 6px 12px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; margin-right: 10px; border: 1px solid #fde68a; }

        .azp-article-layout { display: grid; grid-template-columns: 1fr 300px; gap: 30px; align-items: start; }

        /* Article Card */
        .azp-article-main { background: #fff; padding: 0; border-radius: 20px; border: 1px solid #e2e8f0; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05); }
        .article-header { padding: 40px 40px 20px; }
        .article-meta { margin-bottom: 12px; font-size: 0.8rem; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
        .article-meta .category { color: #2563eb; }
        .article-title { font-size: 2.8rem; font-weight: 800; line-height: 1.1; color: #0f172a; margin: 0; letter-spacing: -0.04em; }

        /* Hero Media */
        .article-hero-media { width: 100%; background: #000; position: relative; }
        .media-content { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; border: 0; }
        .hero-caption { padding: 15px 40px; font-size: 0.9rem; color: #64748b; font-style: italic; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }

        /* Body text */
        .article-body { padding: 40px; font-size: 1.2rem; line-height: 1.85; color: #334155; white-space: pre-wrap; }

        /* Sub Gallery */
        .article-sub-media { padding: 0 40px 40px; }
        .sub-title { font-size: 1.25rem; font-weight: 800; margin-bottom: 20px; color: #0f172a; }
        .media-grid-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .media-card { background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0; }
        .media-card-wrap { aspect-ratio: 16/9; background: #000; overflow: hidden; }
        .media-caption { padding: 12px; font-size: 0.85rem; color: #64748b; line-height: 1.4; }

        /* Sidebar */
        .sidebar-block { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; margin-bottom: 20px; }
        .sidebar-block h4 { font-size: 0.7rem; text-transform: uppercase; color: #94a3b8; margin-bottom: 15px; letter-spacing: 0.1em; font-weight: 800; }
        .info-row { display: flex; justify-content: space-between; font-size: 0.9rem; margin-bottom: 10px; }
        .status-tag { font-weight: 800; font-size: 0.7rem; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; }
        .status-tag.published { background: #dcfce7; color: #166534; }
        .status-tag.draft { background: #f1f5f9; color: #475569; }

        .author-info { display: flex; align-items: center; gap: 12px; font-weight: 700; color: #0f172a; }
        .author-avatar { width: 36px; height: 36px; background: #2563eb; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }

        /* Mobile */
        @media (max-width: 900px) {
            .azp-article-layout { grid-template-columns: 1fr; }
            .article-header { padding: 30px 20px 15px; }
            .article-title { font-size: 2rem; }
            .article-body { padding: 20px; font-size: 1.1rem; }
            .article-sub-media { padding: 0 20px 20px; }
            .media-grid-flow { grid-template-columns: 1fr; }
        }
    </style>
@endsection