@extends('layouts.admin')

@section('content')
    @php
        $statusLabel = str($record->status ?? 'draft')->replace('_', ' ')->title()->toString();
        $statusTone = $record->status === 'published' ? 'is-resolved' : ($record->status === 'archived' ? 'is-spam' : 'is-new');
        $resolveUrl = function (?string $path): ?string {
            if (! $path) {
                return null;
            }

            return str($path)->startsWith(['http://', 'https://', '/'])
                ? $path
                : (str($path)->startsWith(['storage/', 'images/']) ? asset($path) : asset('storage/'.$path));
        };
        $imageUrl = $resolveUrl($record->image?->file_path);
        $pdfUrl = $resolveUrl($record->pdfFile?->file_path);
    @endphp

    @include('admin.partials.submission-detail-styles')

    <div class="submission-detail">
        <header class="submission-detail-header">
            <div class="submission-heading">
                <a class="submission-back" href="{{ route('admin.newsletters.index') }}">
                    <i data-lucide="arrow-left" width="16" height="16" aria-hidden="true"></i> All newsletters
                </a>
                <div class="submission-title-row">
                    <div class="submission-icon" aria-hidden="true"><i data-lucide="mail" width="23" height="23"></i></div>
                    <div>
                        <p class="submission-eyebrow">Newsletter details</p>
                        <h1>{{ $record->title_en ?: 'Newsletter #'.$record->id }}</h1>
                        <p class="submission-reference">Record #{{ $record->id }} <span aria-hidden="true">·</span> /archives/monthly-newsletter/{{ $record->slug }}</p>
                    </div>
                </div>
            </div>
            <div class="submission-header-actions">
                <span class="submission-status {{ $statusTone }}"><span class="submission-status-dot"></span>{{ $statusLabel }}</span>
                <a class="submission-edit" href="{{ route('admin.newsletters.edit', $record->id) }}"><i data-lucide="pencil" width="16" height="16" aria-hidden="true"></i> Edit record</a>
            </div>
        </header>

        <div class="submission-detail-grid">
            <div class="submission-main-column">
                <section class="submission-panel">
                    <div class="submission-panel-heading"><div><p class="submission-eyebrow">English</p><h2>{{ $record->title_en }}</h2></div><span class="submission-type">English</span></div>
                    @if ($record->summary_en)<p class="newsletter-summary">{{ $record->summary_en }}</p>@endif
                    {{-- Body HTML is sanitised on save (App\Support\HtmlSanitizer). --}}
                    <div class="newsletter-body">{!! $record->content_en ?: '<p>No English story provided.</p>' !!}</div>
                </section>

                <section class="submission-panel">
                    <div class="submission-panel-heading"><div><p class="submission-eyebrow">Assamese</p><h2>{{ $record->title_as ?: 'অসমীয়া শিৰোনাম' }}</h2></div><span class="submission-type">অসমীয়া</span></div>
                    @if ($record->summary_as)<p class="newsletter-summary">{{ $record->summary_as }}</p>@endif
                    <div class="newsletter-body">{!! $record->content_as ?: '<p>অসমীয়াত কোনো বিষয়বস্তু দিয়া হোৱা নাই।</p>' !!}</div>
                </section>
            </div>

            <aside class="submission-side-column">
                <section class="submission-panel">
                    <div class="submission-panel-heading"><div><p class="submission-eyebrow">Media</p><h2>Cover image</h2></div><i class="submission-section-icon" data-lucide="image" width="20" height="20" aria-hidden="true"></i></div>
                    @if ($imageUrl)
                        <a class="submission-preview" href="{{ $imageUrl }}" target="_blank" rel="noopener"><img src="{{ $imageUrl }}" alt="{{ $record->title_en }}"></a>
                    @else
                        <div class="submission-empty"><i data-lucide="image-off" width="20" height="20" aria-hidden="true"></i> No cover image attached.</div>
                    @endif
                </section>

                <section class="submission-panel">
                    <div class="submission-panel-heading"><div><p class="submission-eyebrow">Download</p><h2>Newsletter PDF</h2></div><i class="submission-section-icon" data-lucide="file-text" width="20" height="20" aria-hidden="true"></i></div>
                    @if ($pdfUrl)
                        <a class="submission-edit" href="{{ $pdfUrl }}" target="_blank" rel="noopener"><i data-lucide="download" width="16" height="16" aria-hidden="true"></i> {{ $record->pdfFile->title_en ?: 'Open PDF' }}</a>
                    @else
                        <div class="submission-empty"><i data-lucide="file-x" width="20" height="20" aria-hidden="true"></i> No PDF attached.</div>
                    @endif
                </section>

                <section class="submission-panel submission-record-panel">
                    <p class="submission-eyebrow">Record</p><h2>Record information</h2>
                    <dl class="submission-contact-list">
                        <div><dt>Issue</dt><dd>{{ $record->issue_date?->format('F Y') ?? 'Not set' }}</dd></div>
                        <div><dt>Publish date</dt><dd>{{ $record->published_at?->format('d M Y, h:i A') ?? 'Not set' }}</dd></div>
                        <div><dt>Created</dt><dd>{{ $record->created_at?->format('d M Y, h:i A') ?? '—' }}</dd></div>
                        <div><dt>Last updated</dt><dd>{{ $record->updated_at?->format('d M Y, h:i A') ?? '—' }}</dd></div>
                    </dl>
                </section>
            </aside>
        </div>
    </div>

    <style>
        .newsletter-summary { margin: -7px 0 17px; color: var(--submission-muted); font-size: 13px; line-height: 1.7; white-space: pre-line; }
        .newsletter-body { font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
        .newsletter-body img { max-width: 100%; height: auto; border-radius: 10px; }
        .newsletter-body figure { margin: 1rem 0; }
        .newsletter-body figcaption { font-size: 12px; opacity: .75; }
        .newsletter-body blockquote { margin: 1rem 0; padding: .25rem 1rem; border-left: 3px solid currentColor; opacity: .85; }
        .newsletter-body table { border-collapse: collapse; }
        .newsletter-body td, .newsletter-body th { border: 1px solid var(--admin-border); padding: .35rem .6rem; }
    </style>
@endsection