@extends('layouts.app')

@section('title', $article->title.' | '.config('app.name', 'Help Numo'))

@section('body-class', 'lib-hub-page')

@section('content')
    @php
        $relatedArticles = $relatedArticles ?? collect();
        $parentCategories = $parentCategories ?? collect();
        $ar = 'ar';
        $fmtDate = static function ($d) use ($ar) {
            if (! $d) {
                return null;
            }

            return $d->locale($ar)->translatedFormat('j F Y');
        };
        $meta = $article->meta ?? [];
        $beforeStart = trim((string) ($meta['before_start'] ?? ''));
        $quickSolutions = trim((string) ($meta['quick_solutions'] ?? ''));
        $externalLinks = collect($meta['external_links'] ?? [])->filter(function ($row) {
            return is_array($row) && filled($row['url'] ?? null);
        });
        $hasSidebar = $beforeStart !== '' || $quickSolutions !== '' || $externalLinks->isNotEmpty();
        $hasBottom = $article->tags->isNotEmpty() || $relatedArticles->isNotEmpty();
        $hasNavSidebar = $parentCategories->isNotEmpty();
    @endphp
    <div class="lib-hub">
        @include('library.partials.topbar')

        <div class="lib-hub__shell lib-hub__shell--with-sidebar lib-hub__shell--article @if (! $hasNavSidebar) lib-hub__shell--full @endif">
            @if ($hasNavSidebar)
                @include('library.partials.sidebar-categories', [
                    'parentCategories' => $parentCategories,
                    'activeCategory' => $activeCategory ?? null,
                ])
            @endif

            <div class="lib-hub__main lib-hub__main--article-page">
                <div class="library-article-page-wrap">
                    <article class="library-article library-article-shell @if ($hasSidebar) library-article-shell--split @endif">
                        <div class="library-article__frame card">
                            @if (session('status'))
                                <div class="alert-info mb-3">{{ session('status') }}</div>
                            @endif

                            <header class="library-article__top">
                                <div class="library-article__back-row">
                                    <a href="{{ route('library.home') }}" class="library-article__back-link">
                                        العودة للمكتبة
                                        <span class="library-article__back-icon" aria-hidden="true">→</span>
                                    </a>
                                </div>

                                <h1 class="library-article__title">
                                    <span class="library-article__title-text">{{ $article->title }}</span>
                                    <x-new-badge :show="$article->show_new_badge" />
                                </h1>

                                @if ($article->updated_at)
                                    <div class="library-article__meta-strip library-article__meta-strip--top" role="group" aria-label="آخر تحديث">
                                        <div class="library-article__meta">
                                            <div class="library-article__date-pill">
                                                <span class="library-article__date-label">آخر تحديث</span>
                                                <time class="library-article__date-value" datetime="{{ $article->updated_at->toIso8601String() }}">
                                                    {{ $fmtDate($article->updated_at) }}
                                                </time>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                @if ($article->categories->isNotEmpty())
                                    <div class="library-article__categories-block">
                                        <p class="library-article__categories-label">
                                            <span class="library-article__inline-icon" aria-hidden="true">📁</span>
                                            التصنيفات
                                        </p>
                                        <div class="library-article__chips" role="list">
                                            @foreach ($article->categories as $cat)
                                                <span class="library-article__chip library-article__chip--category" role="listitem">{{ $cat->name }}</span>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            </header>

                            @if ($hasSidebar)
                                <div class="library-article__split-grid">
                                    <div class="library-article__main-column">
                                        <div class="library-article__main">
                                            <div class="library-article__body body-m">
                                                {!! $articleHtml ?? $article->body !!}
                                            </div>
                                        </div>
                                    </div>
                                    <aside class="library-article__aside" aria-label="معلومات إضافية">
                                        @if ($beforeStart !== '')
                                            <div class="library-article__note">
                                                <h4 class="library-article__aside-title">قبل أن تبدأ</h4>
                                                <p class="library-article__aside-text">{!! nl2br(e($beforeStart)) !!}</p>
                                            </div>
                                        @endif
                                        @if ($quickSolutions !== '')
                                            <div class="library-article__note">
                                                <h4 class="library-article__aside-title">حلول سريعة عند التعثر</h4>
                                                <p class="library-article__aside-text">{!! nl2br(e($quickSolutions)) !!}</p>
                                            </div>
                                        @endif
                                        @if ($externalLinks->isNotEmpty())
                                            <div class="library-article__refs" id="article-external-refs">
                                                <h4 class="library-article__refs-title">روابط خارجية</h4>
                                                @foreach ($externalLinks as $link)
                                                    @php
                                                        $href = $link['url'];
                                                        $linkLabel = trim((string) ($link['label'] ?? ''));
                                                    @endphp
                                                    <a href="{{ $href }}" target="_blank" rel="noopener noreferrer" class="library-article__ref-link">{{ $linkLabel !== '' ? $linkLabel : $href }}</a>
                                                @endforeach
                                            </div>
                                        @endif
                                    </aside>
                                </div>
                            @else
                                <div class="library-article__main library-article__main--full">
                                    <div class="library-article__body body-m">
                                        {!! $articleHtml ?? $article->body !!}
                                    </div>
                                </div>
                            @endif

                            @if ($showArticleRating ?? true)
                                @include('library.partials.article-rating', [
                                    'article' => $article,
                                    'alreadyRated' => $articleAlreadyRated ?? false,
                                ])
                            @endif

                            @if ($hasBottom)
                                <footer class="library-article__footer library-article__footer--bottom">
                                    @if ($article->tags->isNotEmpty())
                                        <div class="library-article__footer-panel">
                                            <p class="library-article__footer-label">
                                                <span class="library-article__footer-icon" aria-hidden="true">🏷️</span>
                                                الوسوم
                                            </p>
                                            <div class="library-article__chips" role="list">
                                                @foreach ($article->tags as $tag)
                                                    <a
                                                        href="{{ route('library.tag', $tag) }}"
                                                        class="library-article__chip library-article__chip--tag library-article__chip--tag-link"
                                                        role="listitem"
                                                    >
                                                        <span>{{ $tag->name }}</span>
                                                        <x-new-badge :show="$tag->show_new_badge" class="new-badge--inline new-badge--chip" />
                                                    </a>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif

                                    @if ($relatedArticles->isNotEmpty())
                                        <section class="library-article__footer-panel library-article__footer-panel--related" aria-labelledby="library-related-heading">
                                            <p id="library-related-heading" class="library-article__footer-label">
                                                <span class="library-article__footer-icon" aria-hidden="true">📎</span>
                                                مقالات ذات صلة
                                            </p>
                                            <ul class="library-article__related-grid">
                                                @foreach ($relatedArticles as $rel)
                                                    <li>
                                                        <a href="{{ route('library.article.show', $rel->slug) }}" class="library-article__related-card">
                                                            <span class="library-article__related-card-title">
                                                                <span class="library-article__related-card-title-text">{{ $rel->title }}</span>
                                                                <x-new-badge :show="$rel->show_new_badge" class="new-badge--inline" />
                                                            </span>
                                                            @if ($rel->published_at)
                                                                <time class="library-article__related-card-date" datetime="{{ $rel->published_at->toIso8601String() }}">
                                                                    {{ $rel->published_at->locale($ar)->translatedFormat('j F Y') }}
                                                                </time>
                                                            @endif
                                                        </a>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </section>
                                    @endif
                                </footer>
                            @endif
                        </div>
                    </article>
                </div>

                @include('library.partials.site-footer')
            </div>
        </div>
    </div>
@endsection