<?php
/**
 * 2026企业CMS - 产品列表页（优化版）
 * UI Designer: 像素君
 * 设计系统版本: 2.0
 */
$pageDescription = '产品中心 - ' . SITE_NAME;
$breadcrumbItems = [['title' => '产品中心']];
$urlPattern = (get_setting('url_mode',1)==1) ? '?p=products&page=%d' : '/products/%d.html';
$pagination = paginate($total, $page, $pageSize, $urlPattern);

// 获取分类列表
$categories = db_query("SELECT * FROM `product_categories` WHERE `status`=1 ORDER BY `sort_order` ASC");

// 获取所有启用的属性（用于筛选）
$filter_attributes = db_query("SELECT * FROM `product_attributes` WHERE `status`=1 ORDER BY `sort_order` ASC");

// 获取当前筛选参数
$current_filters = [];
foreach ($filter_attributes as $attr) {
    $param_name = 'filter_' . $attr['slug'];
    if (isset($_GET[$param_name])) {
        $current_filters[$attr['slug']] = $_GET[$param_name];
    }
}

// 获取价格区间参数
$price_min = isset($_GET['price_min']) ? floatval($_GET['price_min']) : 0;
$price_max = isset($_GET['price_max']) ? floatval($_GET['price_max']) : 0;
?>
<?php echo breadcrumb($breadcrumbItems); ?>

<div class="main-content">
    <div class="container" style="display: flex; gap: var(--space-8);">
        <!-- 侧边栏筛选 -->
        <aside class="sidebar">
            <!-- 分类筛选 -->
            <div class="widget">
                <h3 class="widget-title">产品分类</h3>
                <ul>
                    <li>
                        <a href="<?php echo cms_url('products'); ?>" 
                           class="<?php echo !$category ? 'font-weight-bold color-secondary' : ''; ?>">
                            全部产品
                        </a>
                    </li>
                    <?php foreach ($categories as $cat): ?>
                    <li>
                        <a href="<?php echo cms_url('products', ['category' => $cat['slug']]); ?>"
                           class="<?php echo htmlspecialchars($category, ENT_QUOTES, "UTF-8")==$cat['slug'] ? 'font-weight-bold color-secondary' : ''; ?>">
                            <?php echo xss_clean($cat['name']); ?>
                        </a>
                    </li>
                    <?php endforeach; ?>
                </ul>
            </div>
            
            <!-- 多条件筛选 -->
            <?php if ($filter_attributes): ?>
            <div class="filter-widget">
                <h3 class="widget-title">筛选条件</h3>
                <form method="get" action="<?php echo cms_url('products'); ?>" id="filterForm" class="filter-form">
                    <!-- 保留分类参数 -->
                    <?php if ($category): ?>
                        <input type="hidden" name="category" value="<?php echo xss_clean($category); ?>">
                    <?php endif; ?>
                    
                    <?php foreach ($filter_attributes as $attr): ?>
                        <div class="filter-group">
                            <h4 class="filter-title"><?php echo htmlspecialchars($attr['name']); ?></h4>
                            
                            <?php $options = $attr['options'] ? json_decode($attr['options'], true) : []; ?>
                            <?php $param_name = 'filter_' . $attr['slug']; ?>
                            
                            <?php if ($attr['type'] == 'select' || $attr['type'] == 'radio'): ?>
                                <!-- 单选 -->
                                <div class="filter-options">
                                    <label class="filter-option">
                                        <input type="radio" name="<?php echo $param_name; ?>" value="" 
                                               <?php echo !isset($current_filters[$attr['slug']]) ? 'checked' : ''; ?>>
                                        <span>全部</span>
                                    </label>
                                    <?php foreach ($options as $opt): ?>
                                        <label class="filter-option">
                                            <input type="radio" name="<?php echo $param_name; ?>" value="<?php echo htmlspecialchars($opt); ?>" 
                                                   <?php echo (isset($current_filters[$attr['slug']]) && $current_filters[$attr['slug']]==$opt) ? 'checked' : ''; ?>>
                                            <span><?php echo htmlspecialchars($opt); ?></span>
                                        </label>
                                    <?php endforeach; ?>
                                </div>
                                
                            <?php elseif ($attr['type'] == 'multiselect' || $attr['type'] == 'checkbox'): ?>
                                <!-- 多选 -->
                                <div class="filter-options">
                                    <?php foreach ($options as $opt): ?>
                                        <label class="filter-option">
                                            <input type="checkbox" name="<?php echo $param_name; ?>[]" value="<?php echo htmlspecialchars($opt); ?>" 
                                                   <?php echo (isset($current_filters[$attr['slug']]) && is_array($current_filters[$attr['slug']]) && in_array($opt, $current_filters[$attr['slug']])) ? 'checked' : ''; ?>>
                                            <span><?php echo htmlspecialchars($opt); ?></span>
                                        </label>
                                    <?php endforeach; ?>
                                </div>
                                
                            <?php elseif ($attr['type'] == 'price_range'): ?>
                                <!-- 价格区间 -->
                                <div class="filter-price">
                                    <input type="number" name="price_min" placeholder="最低价" 
                                           value="<?php echo $price_min > 0 ? $price_min : ''; ?>" 
                                           class="filter-price-input">
                                    <span class="filter-price-separator">-</span>
                                    <input type="number" name="price_max" placeholder="最高价" 
                                           value="<?php echo $price_max > 0 ? $price_max : ''; ?>" 
                                           class="filter-price-input">
                                </div>
                                
                            <?php elseif ($attr['type'] == 'text'): ?>
                                <!-- 文本输入 -->
                                <input type="text" name="<?php echo $param_name; ?>" 
                                       value="<?php echo xss_clean($current_filters[$attr['slug']] ?? ''); ?>" 
                                       placeholder="输入<?php echo htmlspecialchars($attr['name']); ?>"
                                       class="filter-text-input">
                                
                            <?php elseif ($attr['type'] == 'number'): ?>
                                <!-- 数字输入 -->
                                <input type="number" name="<?php echo $param_name; ?>" 
                                       value="<?php echo xss_clean($current_filters[$attr['slug']] ?? ''); ?>" 
                                       placeholder="输入数值"
                                       class="filter-number-input">
                                
                            <?php endif; ?>
                        </div>
                    <?php endforeach; ?>
                    
                    <div class="filter-actions">
                        <button type="submit" class="btn btn-primary btn-sm">筛选</button>
                        <a href="<?php echo cms_url('products'); ?>" class="btn btn-secondary btn-sm">重置</a>
                    </div>
                </form>
            </div>
            <?php endif; ?>
        </aside>
        
        <!-- 产品列表 -->
        <div style="flex: 1;">
            <div class="products-header">
                <h2 class="section-title text-left">产品中心</h2>
                
                <!-- 当前筛选条件显示 -->
                <?php if ($current_filters || $price_min > 0 || $price_max > 0): ?>
                    <div class="current-filters">
                        <span class="filter-label">当前筛选：</span>
                        <?php foreach ($current_filters as $slug => $value): ?>
                            <?php
                            // 获取属性名称
                            $attr_name = '';
                            foreach ($filter_attributes as $attr) {
                                if ($attr['slug'] == $slug) {
                                    $attr_name = $attr['name'];
                                    break;
                                }
                            }
                            ?>
                            <span class="filter-tag">
                                <?php echo htmlspecialchars($attr_name); ?>:
                                <?php if (is_array($value)): ?>
                                    <?php echo implode(', ', array_map('htmlspecialchars', $value)); ?>
                                <?php else: ?>
                                    <?php echo htmlspecialchars($value); ?>
                                <?php endif; ?>
                                <a href="?<?php echo http_build_query(array_diff_key($_GET, [$param_name => ''])); ?>" 
                                   class="filter-tag-remove">×</a>
                            </span>
                        <?php endforeach; ?>
                        
                        <?php if ($price_min > 0 || $price_max > 0): ?>
                            <span class="filter-tag">
                                价格: ¥<?php echo $price_min; ?> - ¥<?php echo $price_max > 0 ? $price_max : '∞'; ?>
                                <a href="?<?php echo http_build_query(array_diff_key($_GET, ['price_min' => '', 'price_max' => ''])); ?>" 
                                   class="filter-tag-remove">×</a>
                            </span>
                        <?php endif; ?>
                    </div>
                <?php endif; ?>
            </div>
            
            <?php if (empty($products)): ?>
                <div class="empty-state">
                    <div class="empty-state-icon">📦</div>
                    <p class="empty-state-text">暂无产品</p>
                </div>
            <?php else: ?>
                <div class="grid grid-3">
                    <?php foreach ($products as $p): ?>
                    <div class="card product-card">
                        <a href="<?php echo cms_url('product', ['slug' => $p['slug']]); ?>" class="product-link">
                            <div class="card-img product-img">
                                <?php if ($p['cover_image']): ?>
                                    <img src="<?php echo $p['cover_image']; ?>" 
                                         alt="<?php echo xss_clean($p['title']); ?>">
                                <?php else: ?>
                                    <div class="product-img-placeholder">📦</div>
                                <?php endif; ?>
                            </div>
                            <div class="card-body">
                                <h3 class="card-title"><?php echo xss_clean($p['title']); ?></h3>
                                <p class="card-desc"><?php echo xss_clean(str_cut($p['summary'], 60)); ?></p>
                                <div class="product-meta">
                                    <?php if ($p['price']): ?>
                                        <span class="product-price">¥<?php echo $p['price']; ?></span>
                                    <?php endif; ?>
                                    <span class="product-sales">已售<?php echo $p['sales']; ?></span>
                                </div>
                            </div>
                        </a>
                    </div>
                    <?php endforeach; ?>
                </div>
                
                <!-- 分页 -->
                <?php if ($totalPage > 1): ?>
                <div class="pagination">
                    <?php if ($page > 1): ?>
                        <a href="<?php echo cms_url('products', ['page' => $page-1]); ?>">上一页</a>
                    <?php endif; ?>
                    
                    <?php for ($i = max(1, $page-2); $i <= min($totalPage, $page+2); $i++): ?>
                        <?php if ($i == $page): ?>
                            <span class="current"><?php echo $i; ?></span>
                        <?php else: ?>
                            <a href="<?php echo cms_url('products', ['page' => $i]); ?>"><?php echo $i; ?></a>
                        <?php endif; ?>
                    <?php endfor; ?>
                    
                    <?php if ($page < $totalPage): ?>
                        <a href="<?php echo cms_url('products', ['page' => $page+1]); ?>">下一页</a>
                    <?php endif; ?>
                </div>
                <?php endif; ?>
            <?php endif; ?>
        </div>
    </div>
</div>

<!-- 产品列表页额外样式 -->
<style>
.products-header {
    margin-bottom: var(--space-8);
}

.product-card {
    transition: all var(--transition-normal);
}

.product-link {
    color: inherit;
    text-decoration: none;
    display: block;
}

.product-img {
    height: 240px;
    position: relative;
    overflow: hidden;
}

.product-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    color: var(--color-gray-300);
    background: var(--color-gray-50);
}

.product-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-gray-100);
}

.product-price {
    color: var(--color-error);
    font-weight: 700;
    font-size: var(--text-xl);
}

.product-sales {
    color: var(--color-gray-400);
    font-size: var(--text-sm);
}

.filter-form {
    display: flex;
    flex-direction: column;
}

.filter-price-input {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.filter-price-separator {
    display: inline-block;
    width: 8%;
    text-align: center;
    color: var(--color-gray-400);
}

.filter-text-input,
.filter-number-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.filter-label {
    font-weight: 500;
    color: var(--color-gray-600);
}

.filter-tag-remove {
    margin-left: var(--space-2);
    color: var(--color-gray-400);
    font-size: var(--text-lg);
    line-height: 1;
    text-decoration: none;
}

.filter-tag-remove:hover {
    color: var(--color-error);
}

.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>
