<?php
/**
 * 2026企业CMS - 搜索结果页（优化版）
 * UI Designer: 像素君
 * 设计系统版本: 2.0
 */
$pageDescription = '搜索结果 - ' . SITE_NAME;
$breadcrumbItems = [['title' => '搜索结果']];
?>
<?php echo breadcrumb($breadcrumbItems); ?>

<div class="main-content">
    <div class="container" style="display: flex; gap: var(--space-8);">
        <!-- 主内容区 -->
        <div style="flex: 1;">
            <div class="search-header">
                <h1 class="section-title text-left">
                    搜索结果
                    <?php if ($keyword): ?>
                        ：<span class="search-keyword"><?php echo xss_clean($keyword); ?></span>
                    <?php endif; ?>
                </h1>
            </div>
            
            <?php if (!$keyword): ?>
                <div class="empty-state">
                    <div class="empty-state-icon">🔍</div>
                    <p class="empty-state-text">请输入搜索关键词</p>
                </div>
            <?php elseif (empty($results['articles']) && empty($results['products'])): ?>
                <div class="empty-state">
                    <div class="empty-state-icon">😔</div>
                    <p class="empty-state-text">没有找到相关内容</p>
                    <p style="color: var(--color-gray-400); margin-top: var(--space-4);">
                        请尝试其他关键词搜索
                    </p>
                </div>
            <?php else: ?>
                <!-- 文章结果 -->
                <?php if (!empty($results['articles'])): ?>
                    <div class="search-result-section">
                        <h2 class="search-result-title">
                            文章 (<?php echo count($results['articles']); ?>)
                        </h2>
                        <?php foreach ($results['articles'] as $r): ?>
                            <div class="search-result-item">
                                <a href="<?php echo cms_url('article', ['slug' => $r['slug']]); ?>" 
                                   class="search-result-link">
                                    <?php echo xss_clean($r['title']); ?>
                                </a>
                                <p class="search-result-summary">
                                    <?php echo xss_clean(str_cut($r['summary'], 100)); ?>
                                </p>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
                
                <!-- 产品结果 -->
                <?php if (!empty($results['products'])): ?>
                    <div class="search-result-section">
                        <h2 class="search-result-title">
                            产品 (<?php echo count($results['products']); ?>)
                        </h2>
                        <div class="grid grid-2">
                            <?php foreach ($results['products'] as $r): ?>
                                <div class="card">
                                    <a href="<?php echo cms_url('product', ['slug' => $r['slug']]); ?>" 
                                       class="search-product-link">
                                        <div class="search-product-info">
                                            <div class="search-product-title">
                                                <?php echo xss_clean($r['title']); ?>
                                            </div>
                                            <div class="search-product-summary">
                                                <?php echo xss_clean(str_cut($r['summary'], 60)); ?>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                <?php endif; ?>
            <?php endif; ?>
        </div>
        
        <!-- 侧边栏 -->
        <aside class="sidebar">
            <div class="widget">
                <h3 class="widget-title">热门搜索</h3>
                <div class="hot-keywords">
                    <?php $hotKeywords = ['企业网站','SEO优化','微信小程序','网络推广','CMS系统']; ?>
                    <?php foreach ($hotKeywords as $hk): ?>
                        <a href="<?php echo cms_url('search', ['q' => urlencode($hk)]); ?>" 
                           class="hot-keyword">
                            <?php echo $hk; ?>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>
            
            <div class="widget">
                <h3 class="widget-title">最新文章</h3>
                <ul class="sidebar-list">
                    <?php $latest = db_query("SELECT `title`,`slug` FROM `articles` WHERE `status`=1 ORDER BY `id` DESC LIMIT 5"); ?>
                    <?php foreach ($latest as $l): ?>
                        <li>
                            <a href="<?php echo cms_url('article', ['slug' => $l['slug']]); ?>">
                                <?php echo xss_clean($l['title']); ?>
                            </a>
                        </li>
                    <?php endforeach; ?>
                </ul>
            </div>
        </aside>
    </div>
</div>

<!-- 搜索页面额外样式 -->
<style>
.search-header {
    margin-bottom: var(--space-8);
}

.search-result-section {
    margin-bottom: var(--space-10);
}

.search-result-title {
    font-size: var(--text-xl);
    color: var(--color-gray-900);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-secondary);
    margin-bottom: var(--space-6);
}

.search-result-item {
    padding: var(--space-5);
    background: white;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    border-left: 3px solid var(--color-secondary);
    transition: all var(--transition-fast);
}

.search-result-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
}

.search-result-link {
    font-size: var(--text-base);
    color: var(--color-gray-900);
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 500;
}

.search-result-link:hover {
    color: var(--color-secondary);
}

.search-result-summary {
    color: var(--color-gray-500);
    font-size: var(--text-sm);
    margin: 0;
}

.search-product-link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    color: inherit;
    text-decoration: none;
}

.search-product-info {
    flex: 1;
}

.search-product-title {
    font-size: var(--text-base);
    color: var(--color-gray-900);
    margin-bottom: var(--space-2);
    font-weight: 500;
}

.search-product-summary {
    color: var(--color-gray-500);
    font-size: var(--text-sm);
}

.hot-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.hot-keyword {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
    color: var(--color-gray-600);
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
}

.hot-keyword:hover {
    background: var(--color-secondary);
    color: white;
}

.sidebar-list {
    list-style: none;
}

.sidebar-list li {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.sidebar-list li:last-child {
    border-bottom: none;
}

.sidebar-list li a {
    color: var(--color-gray-600);
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
    display: block;
}

.sidebar-list li a:hover {
    color: var(--color-secondary);
    padding-left: var(--space-2);
}

.empty-state {
    text-align: center;
    padding: var(--space-16);
    color: var(--color-gray-400);
}

.empty-state-icon {
    font-size: 64px;
    margin-bottom: var(--space-4);
}

.empty-state-text {
    font-size: var(--text-lg);
}

@media (max-width: 1024px) {
    .container {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
    }
}
</style>
