@extends('frontend.layouts.app')

@php
    use Illuminate\Support\Facades\Storage;
    $platformText = is_array($product->platforms) ? implode(', ', $product->platforms) : '';
    $title = $product->seo_title ?: $product->name;
    $description = $product->seo_description ?: $product->summary;
    $ogType = 'product';
    $ogImage = $product->cover ? Storage::url($product->cover) : null;
@endphp

@push('head')
<script type="application/ld+json">
{!! json_encode([
    '@context' => 'https://schema.org',
    '@type' => 'SoftwareApplication',
    'name' => $product->name,
    'description' => $product->summary,
    'url' => url()->current(),
    'applicationCategory' => $product->category?->name,
    'operatingSystem' => $platformText,
], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}
</script>
@endpush

@section('content')
<div class="page-header">
    <div>
        <h1>{{ $product->name }}</h1>
        <p>{{ $product->summary }}</p>
    </div>
    <a href="{{ route('outbound', $product->slug) }}" class="primary-button" target="_blank" rel="noopener">访问官网</a>
</div>

<div class="detail-grid">
    <div class="detail-main">
        <div class="detail-section">
            <h3>产品介绍</h3>
            <div class="rich-text">{!! nl2br(e($product->description)) !!}</div>
        </div>

        @if($product->screenshots)
            <div class="detail-section">
                <h3>截图</h3>
                <div class="media-grid">
                    @foreach($product->screenshots as $shot)
                        <img src="{{ Storage::url($shot) }}" alt="{{ $product->name }}">
                    @endforeach
                </div>
            </div>
        @endif
    </div>
    <div class="detail-side">
        <div class="detail-card">
            <div class="meta-item"><span>分类</span><strong>{{ $product->category?->name }}</strong></div>
            <div class="meta-item"><span>浏览</span><strong>{{ $product->view_count }}</strong></div>
            <div class="meta-item"><span>点击</span><strong>{{ $product->click_count }}</strong></div>
            <div class="meta-item"><span>收费</span><strong>{{ $product->pricing_type ?? '未知' }}</strong></div>
        </div>
        <div class="detail-card">
            <h4>标签</h4>
            <div class="tag-cloud">
                @foreach($product->tags as $tag)
                    <a href="{{ route('tags.show', $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="product-grid">
        @foreach($relatedProducts as $item)
            @include('frontend.partials.product-card', ['product' => $item])
        @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="product">
            <input type="hidden" name="target_id" value="{{ $product->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