@extends('frontend.layouts.app')

@php
    use Illuminate\Support\Str;
    use Illuminate\Support\Facades\Storage;
    $title = $article->seo_title ?: $article->title;
    $description = $article->seo_description ?: $article->summary;
    $ogType = 'article';
    $ogImage = $article->cover ? Storage::url($article->cover) : null;
@endphp

@push('head')
<script type="application/ld+json">
{!! json_encode([
    '@context' => 'https://schema.org',
    '@type' => 'Article',
    'headline' => $article->title,
    'description' => $article->summary,
    'datePublished' => optional($article->published_at)->toAtomString(),
    'author' => $article->author ? ['@type' => 'Person', 'name' => $article->author] : null,
    'mainEntityOfPage' => url()->current(),
], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}
</script>
@endpush

@section('content')
<div class="page-header">
    <div>
        <h1>{{ $article->title }}</h1>
        <p>{{ $article->summary }}</p>
    </div>
</div>

<div class="detail-grid">
    <div class="detail-main">
        <div class="article-meta">
            <span>{{ $article->author ?? '官方' }}</span>
            <span>{{ optional($article->published_at)->format('Y-m-d') }}</span>
            <span>浏览 {{ $article->view_count }}</span>
        </div>
        <div class="rich-text">{!! Str::markdown($article->content_md) !!}</div>
    </div>
    <div class="detail-side">
        @if($article->cover)
            <div class="detail-card">
                <img src="{{ Storage::url($article->cover) }}" alt="{{ $article->title }}" class="cover-image">
            </div>
        @endif
        <div class="detail-card">
            <h4>标签</h4>
            <div class="tag-cloud">
                @foreach($article->tags as $tag)
                    <a href="{{ route('articles.index', ['tag' => $tag->slug]) }}" class="tag-chip">{{ $tag->name }}</a>
                @endforeach
            </div>
        </div>
        @include('frontend.partials.ad-slot', ['slotKey' => 'detail', 'title' => '推广位'])
    </div>
</div>

<section class="section">
    <div class="section-header">
        <h2>相关文章</h2>
    </div>
    <div class="article-list">
        @foreach($relatedArticles as $item)
            <a class="article-item" href="{{ route('articles.show', $item->slug) }}">
                <div class="article-title">{{ $item->title }}</div>
                <div class="article-meta">
                    <span>{{ optional($item->published_at)->format('Y-m-d') }}</span>
                </div>
            </a>
        @endforeach
    </div>
</section>

@php
    $commentsEnabled = \App\Models\SiteSetting::value('comments_enabled', '1');
@endphp

<section class="section">
    <div class="section-header">
        <h2>评论</h2>
    </div>

    @if($commentsEnabled)
        @if(session('success'))
            <div class="notice success">{{ session('success') }}</div>
        @endif
        @if($errors->any())
            <div class="notice error">
                @foreach($errors->all() as $error)
                    <div>{{ $error }}</div>
                @endforeach
            </div>
        @endif

        <form class="comment-form" method="post" action="{{ route('comments.store') }}">
            @csrf
            <input type="hidden" name="target_type" value="article">
            <input type="hidden" name="target_id" value="{{ $article->id }}">
            <div class="form-row">
                <input type="text" name="nickname" placeholder="昵称" required>
                <input type="email" name="email" placeholder="邮箱（可选）">
            </div>
            <textarea name="content" rows="4" placeholder="写下你的评论" required></textarea>
            <div class="form-row captcha-row">
                <input type="text" name="captcha" placeholder="验证码" required>
                <img src="{{ route('comments.captcha') }}" alt="验证码" onclick="this.src='{{ route('comments.captcha') }}?t=' + Date.now()" class="captcha-image">
            </div>
            <button type="submit" class="primary-button">提交评论</button>
        </form>

        <div class="comment-list">
            @forelse($comments as $comment)
                <div class="comment-item">
                    <div class="comment-header">
                        <strong>{{ $comment->nickname }}</strong>
                        <span>{{ $comment->created_at->format('Y-m-d H:i') }}</span>
                    </div>
                    <div class="comment-body">{{ $comment->content }}</div>
                    <div class="comment-actions">
                        <form method="post" action="{{ route('comments.like', $comment->id) }}">
                            @csrf
                            <button type="submit" class="like-button">点赞 {{ $comment->like_count }}</button>
                        </form>
                    </div>
                    @if($comment->reply_content)
                        <div class="comment-reply">
                            <span>官方回复：</span>{{ $comment->reply_content }}
                        </div>
                    @endif
                </div>
            @empty
                <div class="empty">暂无评论</div>
            @endforelse
        </div>
    @else
        <div class="empty">评论已关闭</div>
    @endif
</section>
@endsection