@extends('layouts.site')

@section('page_class', 'page-tools page-detail')
@section('title', $item->seo_title ?: $item->name.' - AI工具详情')
@section('meta_description', $item->seo_description ?: $item->summary)
@section('canonical', $item->canonical_url ?: route('tools.show', $item->slug))

@section('head')
<style>
    .tool-show-shell {
        display: grid;
        grid-template-columns: 210px minmax(0, 1fr) 320px;
        gap: var(--page-section-gap);
        align-items: start;
    }

    .tool-show-left,
    .tool-show-right {
        position: sticky;
        top: 84px;
        align-self: start;
    }

    .tool-show-nav {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--bg-surface);
        box-shadow: var(--shadow-sm);
        padding: .62rem .54rem;
        display: grid;
        gap: .3rem;
    }

    .tool-show-nav-title {
        margin: 0;
        padding: .1rem .24rem .45rem;
        border-bottom: 1px solid var(--line);
        color: var(--text-muted);
        font-size: .76rem;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .tool-show-nav-link {
        display: grid;
        grid-template-columns: 1rem minmax(0, 1fr);
        gap: .44rem;
        align-items: center;
        border: 1px solid transparent;
        border-radius: .6rem;
        padding: .42rem .46rem;
        color: #4e6288;
        text-decoration: none;
        font-size: .82rem;
        transition: .16s ease;
    }

    .tool-show-nav-link:hover {
        border-color: var(--line-strong);
        background: var(--brand-soft);
        color: #223b67;
    }

    .tool-show-nav-link i {
        color: #6f83aa;
        text-align: center;
        font-size: .82rem;
    }

    .tool-main {
        min-width: 0;
    }

    .tool-hero {
        border: 1px solid var(--line);
        border-radius: 12px;
        background:
            linear-gradient(160deg, color-mix(in srgb, #eff4ff 88%, #fff) 0, color-mix(in srgb, #f6f9ff 86%, #fff) 100%);
        box-shadow: var(--shadow-sm);
        padding: .98rem;
        margin-bottom: .72rem;
    }

    .tool-hero-inner {
        display: grid;
        grid-template-columns: 108px minmax(0, 1fr) auto;
        gap: .88rem;
        align-items: start;
    }

    .tool-logo {
        width: 108px;
        height: 108px;
        border-radius: 14px;
        border: 1px solid var(--line);
        background: #fff;
        box-shadow: 0 10px 22px rgba(28, 48, 93, .1);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tool-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .tool-logo-fallback {
        width: 100%;
        height: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: "Outfit", "Noto Sans SC", sans-serif;
        font-size: 1.6rem;
        font-weight: 800;
        color: #405c94;
        background: linear-gradient(160deg, #eef3ff 0, #e2ebff 100%);
    }

    .tool-name {
        margin: .08rem 0 .28rem;
        font-family: "Outfit", "Noto Sans SC", sans-serif;
        font-size: clamp(1.55rem, 2.8vw, 2.1rem);
        font-weight: 800;
        letter-spacing: .01em;
        line-height: 1.2;
        color: #1d2f52;
    }

    .tool-summary {
        margin: 0;
        color: #53678f;
        font-size: .96rem;
        line-height: 1.75;
    }

    .tool-meta-chips {
        display: flex;
        flex-wrap: wrap;
        gap: .44rem;
        margin-bottom: .4rem;
    }

    .tool-meta-chips span {
        display: inline-flex;
        align-items: center;
        gap: .28rem;
        border: 1px solid color-mix(in srgb, var(--line) 92%, #fff);
        border-radius: 999px;
        background: rgba(255, 255, 255, .86);
        padding: .14rem .56rem;
        color: #64799f;
        font-size: .74rem;
        white-space: nowrap;
    }

    .tool-hero-actions {
        min-width: 168px;
        display: grid;
        gap: .44rem;
    }

    .tool-hero-actions .btn {
        border-radius: 999px;
        font-weight: 600;
    }

    .tool-card {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--bg-surface);
        box-shadow: var(--shadow-sm);
        padding: .96rem;
        margin-bottom: .72rem;
    }

    .tool-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        margin-bottom: .56rem;
    }

    .tool-card-title {
        margin: 0;
        font-family: "Outfit", "Noto Sans SC", sans-serif;
        font-size: .98rem;
        font-weight: 700;
        color: #2b4068;
    }

    .tool-card-sub {
        color: #7a8db0;
        font-size: .78rem;
    }

    .tool-capability-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .48rem;
    }

    .tool-capability-item {
        border: 1px solid color-mix(in srgb, var(--line) 90%, #fff);
        border-radius: .74rem;
        background: color-mix(in srgb, var(--bg-soft) 70%, #fff);
        padding: .5rem .56rem;
        color: #556a92;
        font-size: .82rem;
        line-height: 1.3;
    }

    .tool-scenario-list {
        margin: 0;
        padding-left: 1.15rem;
        color: #314a74;
        line-height: 1.82;
        font-size: .95rem;
    }

    .tool-scenario-list li + li {
        margin-top: .3rem;
    }

    .tool-related-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .56rem;
    }

    .tool-related-item {
        border: 1px solid var(--line);
        border-radius: .78rem;
        background: #fff;
        padding: .66rem .7rem;
        transition: .16s ease;
    }

    .tool-related-item:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
        box-shadow: 0 10px 20px rgba(29, 53, 116, .1);
    }

    .tool-related-item a {
        color: #23406e;
        text-decoration: none;
        font-weight: 700;
    }

    .tool-related-item p {
        margin: .34rem 0 .42rem;
        color: #687d9f;
        font-size: .82rem;
        line-height: 1.5;
    }

    .tool-right-card {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--bg-surface);
        box-shadow: var(--shadow-sm);
        padding: .8rem .82rem;
        margin-bottom: .62rem;
    }

    .tool-right-title {
        margin: 0 0 .48rem;
        font-family: "Outfit", "Noto Sans SC", sans-serif;
        font-size: .92rem;
        font-weight: 700;
        color: #2a426d;
    }

    .tool-info-list {
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: .82rem;
    }

    .tool-info-list li {
        display: flex;
        justify-content: space-between;
        gap: .5rem;
        padding: .34rem 0;
        border-bottom: 1px dashed var(--line);
        color: #5e739a;
    }

    .tool-info-list li:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .tool-info-list strong {
        color: #22395f;
        font-weight: 700;
    }

    .tool-right-list {
        display: grid;
        gap: .42rem;
    }

    .tool-right-list article {
        border: 1px solid var(--line);
        border-radius: .7rem;
        background: #fff;
        padding: .5rem .56rem;
    }

    .tool-right-list a {
        color: #2a4270;
        text-decoration: none;
        font-size: .84rem;
        font-weight: 700;
    }

    .tool-right-list div {
        margin-top: .18rem;
        color: #7a8eb0;
        font-size: .74rem;
    }

    @media (max-width: 1280px) {
        .tool-show-shell {
            grid-template-columns: 190px minmax(0, 1fr) 290px;
        }

        .tool-capability-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 991.98px) {
        .tool-show-shell {
            grid-template-columns: 1fr;
        }

        .tool-show-left,
        .tool-show-right {
            position: static;
        }

        .tool-show-nav {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .tool-show-nav-title {
            grid-column: 1 / -1;
        }

        .tool-hero-inner {
            grid-template-columns: 90px minmax(0, 1fr);
        }

        .tool-logo {
            width: 90px;
            height: 90px;
        }

        .tool-hero-actions {
            grid-column: 1 / -1;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 575.98px) {
        .tool-show-nav {
            grid-template-columns: 1fr;
        }

        .tool-hero-inner {
            grid-template-columns: 1fr;
        }

        .tool-logo {
            width: 76px;
            height: 76px;
            border-radius: 12px;
        }

        .tool-hero-actions {
            grid-template-columns: 1fr;
        }

        .tool-related-grid,
        .tool-capability-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
<script type="application/ld+json">
{!! json_encode([
    '@context' => 'https://schema.org',
    '@type' => 'SoftwareApplication',
    'name' => $item->name,
    'description' => $item->summary,
    'url' => $item->official_url,
    'applicationCategory' => $item->category?->name,
], JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT) !!}
</script>
@endsection

@section('content')
@php
    $name = trim((string) ($item->h1 ?: $item->name));
    $logoText = mb_strtoupper(mb_substr($item->name ?: 'AI', 0, 2));
@endphp

@if($showRiskNotice)
    <div class="alert alert-warning mb-2" role="alert">
        免责声明：涉及医疗、法律、投资等高风险场景的内容仅供学习参考，不构成专业建议。
    </div>
@endif

<div class="tool-show-shell">
    <aside class="tool-show-left" aria-label="页面目录">
        <nav class="tool-show-nav">
            <p class="tool-show-nav-title">Tool Detail</p>
            <a class="tool-show-nav-link" href="#overview"><i class="bi bi-grid-1x2"></i><span>概览</span></a>
            <a class="tool-show-nav-link" href="#details"><i class="bi bi-file-text"></i><span>详细介绍</span></a>
            <a class="tool-show-nav-link" href="#highlights"><i class="bi bi-stars"></i><span>功能亮点</span></a>
            <!-- <a class="tool-show-nav-link" href="#scenarios"><i class="bi bi-check2-square"></i><span>适用建议</span></a> -->
            @if($relatedTools->isNotEmpty())
                <a class="tool-show-nav-link" href="#related"><i class="bi bi-diagram-3"></i><span>同类推荐</span></a>
            @endif
        </nav>
    </aside>

    <main class="tool-main">
        <section class="tool-hero" id="overview">
            <div class="tool-hero-inner">
                <div class="tool-logo">
                    @if(!empty($item->logo_url))
                        <img src="{{ $item->logo_url }}" alt="{{ $item->name }} Logo" loading="lazy">
                    @else
                        <span class="tool-logo-fallback">{{ $logoText }}</span>
                    @endif
                </div>

                <div>
                    <div class="tool-meta-chips">
                        <span><i class="bi bi-grid"></i>{{ $item->category?->name ?? 'AI 工具' }}</span>
                        <span><i class="bi bi-wallet2"></i>{{ $item->pricing_type }}</span>
                        <span><i class="bi bi-plug"></i>{{ $item->has_api ? '支持 API' : '无 API' }}</span>
                        <span><i class="bi bi-shield-check"></i>{{ $item->source_level?->label() ?? '未知来源' }}</span>
                    </div>
                    <h1 class="tool-name">{{ $name }}</h1>
                    <p class="tool-summary">{{ $item->summary }}</p>
                </div>

                <div class="tool-hero-actions">
                    <a class="btn btn-primary" href="{{ $item->official_url }}" target="_blank" rel="nofollow noopener">访问官网</a>
                    @if($item->alternative)
                        <a class="btn btn-outline-primary" href="{{ route('tools.show', $item->alternative->slug) }}">查看替代工具</a>
                    @endif
                </div>
            </div>
        </section>

        <section class="tool-card" id="details">
            <div class="tool-card-head">
                <h2 class="tool-card-title">工具详细介绍</h2>
                <span class="tool-card-sub">更新于 {{ $item->updated_at?->format('Y-m-d') ?? '-' }}</span>
            </div>
            <div class="md-content detail-content">
                @if(trim((string) $item->description) !== '')
                    {!! $descriptionHtml !!}
                @else
                    <p>{{ $item->summary }}</p>
                @endif
            </div>
        </section>

        <section class="tool-card" id="highlights">
            <div class="tool-card-head">
                <h2 class="tool-card-title">功能亮点</h2>
                <span class="tool-card-sub">基于内容自动提取</span>
            </div>
            @if(!empty($capabilityTags))
                <div class="tool-capability-grid">
                    @foreach($capabilityTags as $tag)
                        <div class="tool-capability-item">{{ $tag }}</div>
                    @endforeach
                </div>
            @else
                <p class="text-muted-soft small mb-0">暂无可展示的功能标签。</p>
            @endif
        </section>



        @if($relatedTools->isNotEmpty())
            <section class="tool-card mb-0" id="related">
                <div class="tool-card-head">
                    <h2 class="tool-card-title">同类工具推荐</h2>
                    <span class="tool-card-sub">按最近发布排序</span>
                </div>
                <div class="tool-related-grid">
                    @foreach($relatedTools as $tool)
                        <article class="tool-related-item">
                            <a href="{{ route('tools.show', $tool->slug) }}">{{ $tool->name }}</a>
                            <p class="line-clamp-2">{{ $tool->summary }}</p>
                            <div class="d-flex flex-wrap gap-2">
                                <span class="chip">{{ $tool->pricing_type }}</span>
                                <span class="chip">{{ $tool->has_api ? 'API' : 'No API' }}</span>
                            </div>
                        </article>
                    @endforeach
                </div>
            </section>
        @endif
    </main>

    <aside class="tool-show-right">
        <section class="tool-right-card">
            <h3 class="tool-right-title">基础信息</h3>
            <ul class="tool-info-list">
                <li><span>价格模式</span><strong>{{ $item->pricing_type }}</strong></li>
                <li><span>API 支持</span><strong>{{ $item->has_api ? '支持' : '不支持' }}</strong></li>
                <li><span>适用平台</span><strong>{{ $item->platform ?: '未提供' }}</strong></li>
                <li><span>支持语言</span><strong>{{ $item->language ?: '未提供' }}</strong></li>
                <li><span>最后校验</span><strong>{{ $item->last_verified_at?->format('Y-m-d') ?? '未记录' }}</strong></li>
                <li><span>状态</span><strong>{{ $item->is_stale ? '可能过期' : '有效' }}</strong></li>
            </ul>
        </section>

        @if($latestTools->isNotEmpty())
            <section class="tool-right-card">
                <h3 class="tool-right-title">最新收录</h3>
                <div class="tool-right-list">
                    @foreach($latestTools->take(6) as $tool)
                        <article>
                            <a href="{{ route('tools.show', $tool->slug) }}">{{ $tool->name }}</a>
                            <div>{{ $tool->category?->name ?? '未分类' }}</div>
                        </article>
                    @endforeach
                </div>
            </section>
        @endif
    </aside>
</div>
@endsection