@extends('layouts.site')

@section('page_class', 'page-models')
@section('title', 'AI 模型推荐 - AIWeb')
@section('meta_description', '按模态、部署方式与评分维度筛选 AI 模型，快速完成选型。')
@section('canonical', route('models.index'))

@section('content')
@php
    $icons = ['bi-chat-square-text', 'bi-collection', 'bi-image', 'bi-mic'];
    $resetModalityFilters = array_filter([
        'q' => $filters['q'] ?? null,
        'deployment' => $filters['deployment'] ?? null,
    ], fn ($value) => $value !== null && $value !== '');
@endphp

<div class="channel-layout">
    <aside class="channel-sidebar" aria-label="模型分类">
        <div class="channel-brand"><span class="channel-brand-mark">AI</span>AI模型库</div>
        <nav class="channel-links">
            <a class="channel-link @if(empty($filters['modality'])) active @endif" href="{{ route('models.index', $resetModalityFilters) }}">
                <i class="bi bi-stars"></i>
                <span>全部模型</span>
                <small>{{ $modelStats['total'] ?? 0 }}</small>
            </a>
            @foreach($modalityOptions as $index => $option)
                <a class="channel-link @if(($filters['modality'] ?? '') === $option['value']) active @endif" href="{{ route('models.by-use-case', $option['value']) }}">
                    <i class="bi {{ $icons[$index % count($icons)] }}"></i>
                    <span>{{ $option['label'] }}</span>
                    <small>{{ $option['count'] }}</small>
                </a>
            @endforeach
        </nav>
    </aside>

    <section class="channel-main">
        <header class="channel-head">
            <nav class="channel-tabs" aria-label="频道导航">
                <a class="channel-tab" href="{{ route('tools.index') }}">AI工具集</a>
                <a class="channel-tab active" href="{{ route('models.index') }}">模型推荐</a>
                <a class="channel-tab" href="{{ route('news.index') }}">资讯文章</a>
                <a class="channel-tab" href="{{ route('guides.index') }}">教程学习</a>
                <a class="channel-tab" href="{{ route('home') }}">首页</a>
            </nav>
            <div class="channel-status">收录模型 <b>{{ $modelStats['total'] ?? 0 }}</b></div>
        </header>

        <nav class="channel-mobile-nav" aria-label="移动分类导航">
            <a class="channel-link @if(empty($filters['modality'])) active @endif" href="{{ route('models.index', $resetModalityFilters) }}">
                <i class="bi bi-stars"></i>
                <span>全部模型</span>
                <small>{{ $modelStats['total'] ?? 0 }}</small>
            </a>
            @foreach($modalityOptions as $index => $option)
                <a class="channel-link @if(($filters['modality'] ?? '') === $option['value']) active @endif" href="{{ route('models.by-use-case', $option['value']) }}">
                    <i class="bi {{ $icons[$index % count($icons)] }}"></i>
                    <span>{{ $option['label'] }}</span>
                    <small>{{ $option['count'] }}</small>
                </a>
            @endforeach
        </nav>

        <section class="channel-hero">
            <span class="channel-chip">AIWEB.CN</span>
            <h1 class="channel-title">AI模型推荐</h1>
            <p class="channel-subtitle">按效果、成本与速度三维比较，快速筛选适配业务场景的模型方案。</p>

            <form class="channel-search" method="get" action="{{ route('models.index') }}" role="search" aria-label="搜索 AI 模型">
                <input type="search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="搜索模型名称或能力，如 多模态 / 长上下文" autocomplete="off" spellcheck="false">
                <select name="modality" aria-label="按模态筛选">
                    <option value="">全部分类</option>
                    @foreach($modalityOptions as $option)
                        <option value="{{ $option['value'] }}" @selected(($filters['modality'] ?? '') === $option['value'])>{{ $option['label'] }}</option>
                    @endforeach
                </select>
                <select name="deployment" aria-label="按部署筛选">
                    <option value="">部署方式</option>
                    <option value="api" @selected(($filters['deployment'] ?? '') === 'api')>API</option>
                    <option value="self_hosted" @selected(($filters['deployment'] ?? '') === 'self_hosted')>私有部署</option>
                    <option value="hybrid" @selected(($filters['deployment'] ?? '') === 'hybrid')>混合部署</option>
                </select>
                <a class="btn btn-outline-secondary" href="{{ route('models.index') }}">重置</a>
                <button class="btn btn-primary" type="submit"><i class="bi bi-search"></i> 搜索</button>
            </form>

            <section class="channel-kpis" aria-label="模型统计概览">
                <article class="channel-kpi"><span>收录模型</span><b>{{ $modelStats['total'] ?? 0 }}</b></article>
                <article class="channel-kpi"><span>多模态</span><b>{{ $modelStats['multimodal'] ?? 0 }}</b></article>
                <article class="channel-kpi"><span>API部署</span><b>{{ $modelStats['api'] ?? 0 }}</b></article>
                <article class="channel-kpi"><span>7天更新</span><b>{{ $modelStats['updated_7d'] ?? 0 }}</b></article>
            </section>
        </section>

        <section class="channel-body">
            <section class="channel-panel">
                <header class="channel-panel-head">
                    <h2 class="channel-panel-title">模型列表</h2>
                </header>

                @if($items->isNotEmpty())
                    <div class="entity-grid">
                        @foreach($items as $model)
                            <article class="entity-card">
                                <a class="entity-title" href="{{ route('models.show', $model->slug) }}">{{ $model->name }}</a>
                                <div class="entity-meta">{{ $model->provider ?: '未知供应商' }} · {{ $model->deployment_mode ?: '未标注部署' }}</div>
                                <p class="entity-desc line-clamp-2">{{ $model->summary }}</p>
                                <div class="d-flex align-items-center justify-content-between gap-2">
                                    <span class="chip">总分 {{ $model->total_score }}</span>
                                    <a class="btn btn-sm btn-outline-primary" href="{{ route('models.show', $model->slug) }}">详情</a>
                                </div>
                            </article>
                        @endforeach
                    </div>

                    <div class="mt-3">{{ $items->links() }}</div>
                @else
                    <p class="text-muted-soft mb-0">暂无符合条件的模型数据</p>
                @endif
            </section>

            <aside class="channel-list">
                <section class="channel-panel">
                    <header class="channel-panel-head">
                        <h3 class="channel-panel-title">相关工具</h3>
                        <a class="tiny-link" href="{{ route('tools.index') }}">查看全部</a>
                    </header>
                    @forelse($sidebarTools as $tool)
                        <article class="side-list-item">
                            <a href="{{ route('tools.show', $tool->slug) }}">{{ $tool->name }}</a>
                            <small>{{ $tool->pricing_type }} · {{ $tool->has_api ? '支持 API' : '无 API' }}</small>
                        </article>
                    @empty
                        <p class="text-muted-soft small mb-0">暂无工具</p>
                    @endforelse
                </section>

                <section class="channel-panel">
                    <header class="channel-panel-head">
                        <h3 class="channel-panel-title">最新资讯</h3>
                        <a class="tiny-link" href="{{ route('news.index') }}">查看全部</a>
                    </header>
                    @forelse($sidebarNews as $news)
                        <article class="side-list-item">
                            <a href="{{ route('news.show', $news->slug) }}">{{ $news->title }}</a>
                            <small>{{ $news->published_at?->format('m-d H:i') }}</small>
                        </article>
                    @empty
                        <p class="text-muted-soft small mb-0">暂无资讯</p>
                    @endforelse
                </section>
            </aside>
        </section>
    </section>
</div>
@endsection