<?php
/**
 * 辰迅工具箱 - 文章列表页
 */
require_once 'config.php';

$db = getDB();
$categorySlug = isset($_GET['category']) ? sanitize($_GET['category']) : '';
$page = isset($_GET['page']) ? max(1, intval($_GET['page'])) : 1;
$perPage = 9;

$where = "WHERE a.is_published = 1";
$params = [];

if($categorySlug) {
    $stmt = $db->prepare("SELECT id FROM article_categories WHERE slug = ?");
    $stmt->execute([$categorySlug]);
    $cat = $stmt->fetch();
    if($cat) {
        $where .= " AND a.category_id = ?";
        $params[] = $cat['id'];
    }
}

$currentCategory = null;
if($categorySlug) {
    $stmt = $db->prepare("SELECT * FROM article_categories WHERE slug = ?");
    $stmt->execute([$categorySlug]);
    $currentCategory = $stmt->fetch();
}

// 获取总数
$stmt = $db->prepare("SELECT COUNT(*) FROM articles a $where");
$stmt->execute($params);
$total = $stmt->fetchColumn();
$totalPages = ceil($total / $perPage);

// 获取文章列表
$offset = ($page - 1) * $perPage;
$stmt = $db->prepare("SELECT a.*, ac.name as category_name 
                      FROM articles a 
                      LEFT JOIN article_categories ac ON a.category_id = ac.id 
                      $where 
                      ORDER BY a.is_featured DESC, a.created_at DESC 
                      LIMIT $perPage OFFSET $offset");
$stmt->execute($params);
$articles = $stmt->fetchAll();

// 获取所有分类
$stmt = $db->query("SELECT ac.*, COUNT(a.id) as article_count 
                     FROM article_categories ac 
                     LEFT JOIN articles a ON ac.id = a.category_id AND a.is_published = 1 
                     GROUP BY ac.id 
                     ORDER BY ac.sort_order");
$categories = $stmt->fetchAll();

// 获取侧边栏广告
$stmt = $db->prepare("SELECT * FROM ads WHERE position_id = 3 AND is_active = 1 
                      AND (start_date IS NULL OR start_date <= CURDATE()) 
                      AND (end_date IS NULL OR end_date >= CURDATE()) LIMIT 1");
$stmt->execute();
$sidebarAd = $stmt->fetch();
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php include "seo_head.php"; ?>
    <title><?php echo $currentCategory ? htmlspecialchars($currentCategory['name']) : '文章'; ?> - <?php echo SITE_NAME; ?></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #4F46E5;
            --primary-light: #818CF8;
            --bg-light: #F9FAFB;
            --text-dark: #1F2937;
            --text-gray: #6B7280;
        }
        
        * { box-sizing: border-box; }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: var(--bg-light);
            color: var(--text-dark);
        }
        
        .navbar {
            background: white;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            padding: 1rem 0;
        }
        
        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            color: var(--primary-color) !important;
        }
        
        /* 头部 */
        .page-header {
            background: linear-gradient(135deg, var(--primary-color), #3730A3);
            color: white;
            padding: 3rem 0;
            margin-bottom: 2rem;
        }
        
        .page-header h1 {
            font-size: 2rem;
            font-weight: 700;
            margin: 0;
        }
        
        /* 分类标签 */
        .category-tabs {
            background: white;
            padding: 1rem;
            border-radius: 12px;
            margin-bottom: 2rem;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            border: 1px solid #e5e7eb;
        }
        
        .category-tab {
            padding: 0.5rem 1rem;
            background: var(--bg-light);
            border-radius: 20px;
            color: var(--text-dark);
            text-decoration: none;
            font-size: 0.9rem;
            transition: all 0.2s;
        }
        
        .category-tab:hover,
        .category-tab.active {
            background: var(--primary-color);
            color: white;
        }
        
        /* 文章卡片 */
        .articles-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 1.5rem;
        }
        
        .article-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s;
            border: 1px solid #e5e7eb;
            text-decoration: none;
            color: var(--text-dark);
            display: flex;
            flex-direction: column;
        }
        
        .article-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.1);
        }
        
        .article-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .article-image i {
            font-size: 3rem;
            color: white;
            opacity: 0.5;
        }
        
        .article-body {
            padding: 1.5rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .article-meta-top {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
        }
        
        .category-tag {
            background: var(--bg-light);
            color: var(--primary-color);
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 500;
        }
        
        .featured-badge {
            background: #FEF3C7;
            color: #D97706;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        
        .article-card h3 {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            line-height: 1.4;
        }
        
        .article-card p {
            color: var(--text-gray);
            font-size: 0.9rem;
            flex: 1;
            margin: 0;
        }
        
        .article-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--bg-light);
            font-size: 0.8rem;
            color: var(--text-gray);
        }
        
        /* 分页 */
        .pagination {
            justify-content: center;
            margin-top: 2rem;
        }
        
        .pagination .page-link {
            color: var(--primary-color);
        }
        
        .pagination .page-item.active .page-link {
            background: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        /* 侧边栏 */
        .sidebar {
            position: sticky;
            top: 2rem;
        }
        
        .sidebar-card {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            border: 1px solid #e5e7eb;
        }
        
        .sidebar-card h4 {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid var(--primary-color);
        }
        
        .quick-link {
            display: flex;
            align-items: center;
            padding: 0.75rem;
            border-radius: 8px;
            color: var(--text-dark);
            text-decoration: none;
            transition: all 0.2s;
        }
        
        .quick-link:hover {
            background: var(--bg-light);
            color: var(--primary-color);
        }
        
        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 4rem 2rem;
            background: white;
            border-radius: 12px;
        }
        
        footer {
            background: #1F2937;
            color: white;
            padding: 2rem 0;
            margin-top: 4rem;
        }
        
        footer a { color: #9CA3AF; text-decoration: none; }
        footer a:hover { color: white; }
    </style>
<?php include "baidu_push.php"; ?>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="container">
            <a class="navbar-brand" href="<?php echo SITE_URL; ?>">
                <i class="fas fa-tools"></i><?php echo SITE_NAME; ?>
            </a>
            <div class="ml-auto">
                <a href="<?php echo SITE_URL; ?>" class="btn btn-outline-secondary btn-sm mr-2">返回工具箱</a>
                <a href="<?php echo BBS_URL; ?>" class="btn btn-outline-primary btn-sm" target="_blank">论坛</a>
            </div>
        </div>
    </nav>

    <!-- 头部 -->
    <section class="page-header">
        <div class="container text-center">
            <h1><i class="fas fa-newspaper mr-3"></i><?php echo $currentCategory ? htmlspecialchars($currentCategory['name']) : '精选文章'; ?></h1>
        </div>
    </section>

    <!-- 主内容 -->
    <div class="container">
        <div class="row">
            <div class="col-lg-9">
                <!-- 分类标签 -->
                <div class="category-tabs">
                    <a href="<?php echo SITE_URL; ?>/articles.php" class="category-tab <?php echo !$categorySlug ? 'active' : ''; ?>">
                        <i class="fas fa-th-large mr-1"></i>全部
                    </a>
                    <?php foreach($categories as $cat): ?>
                    <a href="<?php echo SITE_URL; ?>/articles.php?category=<?php echo $cat['slug']; ?>" 
                       class="category-tab <?php echo $categorySlug == $cat['slug'] ? 'active' : ''; ?>">
                        <?php echo htmlspecialchars($cat['name']); ?>
                    </a>
                    <?php endforeach; ?>
                </div>

                <!-- 文章列表 -->
                <?php if(!empty($articles)): ?>
                <div class="articles-grid">
                    <?php foreach($articles as $article): ?>
                    <a href="<?php echo SITE_URL; ?>/article.php?id=<?php echo $article['id']; ?>" class="article-card">
                        <?php if($article['cover_image']): ?>
                        <img src="<?php echo htmlspecialchars($article['cover_image']); ?>" class="article-image" alt="<?php echo htmlspecialchars($article['title']); ?>">
                        <?php else: ?>
                        <div class="article-image"><i class="fas fa-image"></i></div>
                        <?php endif; ?>
                        <div class="article-body">
                            <div class="article-meta-top">
                                <?php if($article['category_name']): ?>
                                <span class="category-tag"><?php echo htmlspecialchars($article['category_name']); ?></span>
                                <?php endif; ?>
                                <?php if($article['is_featured']): ?>
                                <span class="featured-badge"><i class="fas fa-star mr-1"></i>精选</span>
                                <?php endif; ?>
                            </div>
                            <h3><?php echo htmlspecialchars($article['title']); ?></h3>
                            <p><?php echo mb_substr(strip_tags($article['summary']), 0, 100); ?>...</p>
                            <div class="article-footer">
                                <span><i class="far fa-eye mr-1"></i><?php echo $article['view_count']; ?></span>
                                <span><i class="far fa-clock mr-1"></i><?php echo date('Y-m-d', strtotime($article['created_at'])); ?></span>
                            </div>
                        </div>
                    </a>
                    <?php endforeach; ?>
                </div>

                <!-- 分页 -->
                <?php if($totalPages > 1): ?>
                <nav class="pagination">
                    <?php if($page > 1): ?>
                    <a href="?page=<?php echo $page - 1; ?><?php echo $categorySlug ? '&category=' . $categorySlug : ''; ?>" 
                       class="btn btn-outline-primary mr-2">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                    <?php endif; ?>
                    
                    <span class="btn btn-light"><?php echo $page; ?> / <?php echo $totalPages; ?></span>
                    
                    <?php if($page < $totalPages): ?>
                    <a href="?page=<?php echo $page + 1; ?><?php echo $categorySlug ? '&category=' . $categorySlug : ''; ?>" 
                       class="btn btn-outline-primary ml-2">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                    <?php endif; ?>
                </nav>
                <?php endif; ?>

                <?php else: ?>
                <div class="empty-state">
                    <i class="fas fa-newspaper" style="font-size: 4rem; color: #d1d5db;"></i>
                    <h3 style="color: var(--text-gray);">暂无文章</h3>
                    <p style="color: var(--text-gray);">文章即将发布，敬请期待</p>
                </div>
                <?php endif; ?>
            </div>

            <!-- 侧边栏 -->
            <div class="col-lg-3">
                <div class="sidebar">
                    <div class="sidebar-card">
                        <h4><i class="fas fa-link mr-2"></i>快捷入口</h4>
                        <a href="<?php echo BBS_URL; ?>" class="quick-link" target="_blank">
                            <i class="fas fa-comments" style="color: #FF6B6B;"></i>
                            <span>访问论坛</span>
                        </a>
                        <a href="<?php echo SITE_URL; ?>" class="quick-link">
                            <i class="fas fa-tools" style="color: var(--primary-color);"></i>
                            <span>在线工具</span>
                        </a>
                    </div>

                    <?php if($sidebarAd): ?>
                    <div class="sidebar-card" style="padding: 0.75rem;">
                        <?php if($sidebarAd['image']): ?>
                        <a href="<?php echo htmlspecialchars($sidebarAd['link']); ?>" target="_blank">
                            <img src="<?php echo htmlspecialchars($sidebarAd['image']); ?>" style="width: 100%; border-radius: 8px;">
                        </a>
                        <?php elseif($sidebarAd['code']): ?>
                        <?php echo $sidebarAd['code']; ?>
                        <?php endif; ?>
                    </div>
                    <?php endif; ?>

                    <!-- 热门文章 -->
                    <?php
                    $stmt = $db->query("SELECT * FROM articles WHERE is_published = 1 ORDER BY view_count DESC LIMIT 5");
                    $hotArticles = $stmt->fetchAll();
                    ?>
                    <?php if(!empty($hotArticles)): ?>
                    <div class="sidebar-card">
                        <h4><i class="fas fa-fire mr-2"></i>热门文章</h4>
                        <?php foreach($hotArticles as $i => $hot): ?>
                        <a href="<?php echo SITE_URL; ?>/article.php?id=<?php echo $hot['id']; ?>" class="quick-link" style="border-bottom: 1px solid var(--bg-light);">
                            <span style="background: var(--primary-color); color: white; width: 20px; height: 20px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; margin-right: 0.5rem;"><?php echo $i + 1; ?></span>
                            <span style="flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><?php echo htmlspecialchars($hot['title']); ?></span>
                        </a>
                        <?php endforeach; ?>
                    </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <div class="container text-center">
            <p>&copy; <?php echo date('Y'); ?> <?php echo SITE_NAME; ?> | <a href="<?php echo BBS_URL; ?>" target="_blank">辰迅研论圈</a> | <a href="<?php echo ADMIN_URL; ?>">管理后台</a></p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
