<?php
/**
 * 首页模板 - 修复分页404问题（强制使用?paged=2格式）
 * 适配STM32技术博客设计风格
 */
get_header(); ?>

<!-- 首页核心容器 - 隔离全局样式冲突 -->
<div id="index-main-container" style="width: 1200px; max-width: 100%; margin: 0 auto; padding: 60px 20px;">
    <!-- 首页标题/简介 -->
    <div class="index-header" style="text-align: center; margin-bottom: 60px; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,0.1);">
        <h1 style="font-size: 2.5rem; color: #0091BD; margin-bottom: 20px;">STM32技术博客</h1>
        <p style="font-size: 1.1rem; color: #8B949E; max-width: 800px; margin: 0 auto;">
            专注于STM32嵌入式开发 | 底层驱动 | FreeRTOS | 外设开发 | 项目实战
        </p>
    </div>

    <!-- 首页内容布局（和single.php保持一致的弹性布局） -->
    <div style="display: flex; gap: 40px; width: 100%;">
        <!-- 首页文章列表（主内容区） -->
        <div style="flex: 8; width: 100%;">
            <div class="post-list" style="display: grid; grid-template-columns: 1fr; gap: 30px;">
                <?php 
                // ========== 核心修复：分页参数定义（适配静态/动态首页） ==========
                if (get_option('show_on_front') == 'page') {
                    $paged = (get_query_var('page')) ? get_query_var('page') : 1;
                } else {
                    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
                }
                $paged = max(1, intval($paged)); // 确保页码为正整数
                
                // 文章查询参数
                $args = array(
                    'posts_per_page' => 6, // 每页显示6篇文章
                    'paged' => $paged,
                    'post_status' => 'publish',
                    'ignore_sticky_posts' => true // 忽略置顶文章，保证分页准确
                );
                
                $temp_query = $wp_query; // 保存原始查询
                $wp_query = new WP_Query($args);
                
                // 文章列表渲染
                if ($wp_query->have_posts()) : 
                    while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
                        <!-- 文章卡片 -->
                        <article style="background: #161B22; border-radius: 12px; padding: 30px; border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
                            <header style="margin-bottom: 20px;">
                                <h2 style="font-size: 1.5rem; margin-bottom: 12px;">
                                    <a href="<?php the_permalink(); ?>" style="color: #E6EDF3; text-decoration: none; transition: color 0.3s ease;">
                                        <?php the_title(); ?>
                                    </a>
                                </h2>
                                <div style="display: flex; flex-wrap: wrap; gap: 12px; color: #8B949E; font-size: 0.9rem;">
                                    <span><i class="fas fa-user"></i> <?php the_author(); ?></span>
                                    <span><i class="far fa-calendar"></i> <?php echo get_the_date('Y年m月d日'); ?></span>
                                    <?php
                                    $series_terms = get_the_terms(get_the_ID(), 'stm32_series');
                                    if (!empty($series_terms) && !is_wp_error($series_terms)) {
                                        $term_names = array();
                                        foreach ($series_terms as $term) {
                                            $term_names[] = $term->name;
                                        }
                                        echo '<span><i class="fas fa-bookmark"></i> ' . implode(' / ', $term_names) . '</span>';
                                    }
                                    ?>
                                    <span><i class="far fa-eye"></i> <?php echo function_exists('stm32_get_post_views') ? stm32_get_post_views(get_the_ID()) : '0'; ?> 阅读</span>
                                </div>
                            </header>
                            <div style="margin-bottom: 20px; color: #8B949E; line-height: 1.6;">
                                <?php echo wp_trim_words(get_the_content(), 150, '...'); ?>
                            </div>
                            <footer>
                                <a href="<?php the_permalink(); ?>" style="display: inline-block; padding: 8px 16px; background: rgba(0,145,189,0.1); color: #0091BD; border-radius: 8px; text-decoration: none; transition: all 0.3s ease;">
                                    阅读全文 <i class="fas fa-arrow-right" style="margin-left: 6px;"></i>
                                </a>
                            </footer>
                        </article>
                    <?php
                    endwhile;
                
                    // ========== 优化版分页导航（强制?paged=2格式，彻底解决404） ==========
                    if ($wp_query->max_num_pages > 1) :
                        $prev_page = $paged - 1;
                        $next_page = $paged + 1;
                    ?>
                    <nav class="pagination" style="margin: 40px 0; text-align: center;">
                        <!-- 上一页按钮 -->
                        <?php if ($prev_page >= 1) : ?>
                            <a href="<?php echo add_query_arg('paged', $prev_page, home_url('/')); ?>" 
                               style="padding: 10px 20px; background: #0091BD; color: white; border-radius: 8px; text-decoration: none; margin: 0 8px; display: inline-block;">
                                <i class="fas fa-chevron-left"></i> 上一页
                            </a>
                        <?php endif; ?>

                        <!-- 页码信息 -->
                        <span style="color: #8B949E; margin: 0 12px; font-size: 1rem;">
                            第 <?php echo $paged; ?> 页 / 共 <?php echo $wp_query->max_num_pages; ?> 页
                        </span>

                        <!-- 下一页按钮 -->
                        <?php if ($next_page <= $wp_query->max_num_pages) : ?>
                            <a href="<?php echo add_query_arg('paged', $next_page, home_url('/')); ?>" 
                               style="padding: 10px 20px; background: #0091BD; color: white; border-radius: 8px; text-decoration: none; margin: 0 8px; display: inline-block;">
                                下一页 <i class="fas fa-chevron-right"></i>
                            </a>
                        <?php endif; ?>
                    </nav>
                    <?php
                    endif;
                
                    wp_reset_postdata();
                    $wp_query = $temp_query; // 恢复原始查询
                else : ?>
                    <!-- 无文章提示 -->
                    <div style="padding: 40px; text-align: center; background: #161B22; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1);">
                        <h2 style="margin-bottom: 20px; color: #0091BD;">暂无文章</h2>
                        <p style="margin-bottom: 30px; color: #8B949E;">快来发布你的第一篇STM32技术文章吧！</p>
                    </div>
                <?php endif; ?>
            </div>
        </div>

        <!-- 首页侧边栏（复用single.php的丰富版侧边栏） -->
        <div style="flex: 3; width: 100%; min-width: 280px; position: sticky; top: 100px;">
            <!-- 1. 博主信息卡片 -->
            <div style="background: #161B22; border-radius: 12px; padding: 24px; border: 1px solid rgba(255,255,255,0.1); margin-bottom: 30px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
                <h3 style="font-size: 1.2rem; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); color: #0091BD; display: flex; align-items: center; gap: 8px;">
                    <i class="fas fa-user-circle"></i> 关于博主
                </h3>
                <div style="text-align: center; margin-bottom: 16px;">
                    <?php echo function_exists('stm32_get_avatar') ? stm32_get_avatar(get_the_author_meta('ID'), 100) : get_avatar(get_the_author_meta('ID'), 100); ?>
                </div>
                <h4 style="font-size: 1.2rem; font-weight: 600; margin: 8px 0; text-align: center;"><?php the_author(); ?></h4>
                <p style="color: #8B949E; margin-bottom: 16px; text-align: center; font-size: 0.95rem;"><?php echo get_the_author_meta('description') ?: 'STM32嵌入式开发爱好者 | 持续分享技术干货'; ?></p>
                
                <div style="display: flex; justify-content: space-around; margin: 20px 0; padding: 12px; background: rgba(0,145,189,0.05); border-radius: 8px;">
                    <div style="text-align: center;">
                        <div style="font-size: 1.1rem; font-weight: 600; color: #0091BD;">
                            <?php echo wp_count_posts()->publish; ?>
                        </div>
                        <div style="font-size: 0.85rem; color: #8B949E;">原创文章</div>
                    </div>
                    <div style="text-align: center;">
                        <div style="font-size: 1.1rem; font-weight: 600; color: #0091BD;">
                            <?php echo get_terms(array('taxonomy' => 'stm32_series', 'hide_empty' => false)) ? count(get_terms(array('taxonomy' => 'stm32_series', 'hide_empty' => false))) : 0; ?>
                        </div>
                        <div style="font-size: 0.85rem; color: #8B949E;">技术分类</div>
                    </div>
                    <div style="text-align: center;">
                        <div style="font-size: 1.1rem; font-weight: 600; color: #0091BD;">∞</div>
                        <div style="font-size: 0.85rem; color: #8B949E;">持续更新</div>
                    </div>
                </div>
                
                <?php
                $github_link = get_the_author_meta('github') ?: '#';
                $zhihu_link = get_the_author_meta('zhihu') ?: '#';
                $bilibili_link = get_the_author_meta('bilibili') ?: '#';
                ?>
                <div style="display: flex; justify-content: center; gap: 12px; margin-top: 10px;">
                    <a href="<?php echo esc_url($github_link); ?>" target="_blank" style="width: 36px; height: 36px; border-radius: 50%; background: rgba(0,145,189,0.1); color: #0091BD; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;" title="GitHub">
                        <i class="fab fa-github"></i>
                    </a>
                    <a href="<?php echo esc_url($zhihu_link); ?>" target="_blank" style="width: 36px; height: 36px; border-radius: 50%; background: rgba(0,145,189,0.1); color: #0091BD; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;" title="知乎">
                        <i class="fab fa-zhihu"></i>
                    </a>
                    <a href="<?php echo esc_url($bilibili_link); ?>" target="_blank" style="width: 36px; height: 36px; border-radius: 50%; background: rgba(0,145,189,0.1); color: #0091BD; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;" title="B站">
                        <i class="fab fa-bilibili"></i>
                    </a>
                </div>
            </div>
            
            <!-- 2. STM32系列分类 -->
            <div style="background: #161B22; border-radius: 12px; padding: 24px; border: 1px solid rgba(255,255,255,0.1); margin-bottom: 30px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
                <h3 style="font-size: 1.2rem; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); color: #0091BD; display: flex; align-items: center; gap: 8px;">
                    <i class="fas fa-microchip"></i> STM32系列
                </h3>
                <ul style="list-style: none; padding: 0;">
                    <?php
                    $stm32_series_terms = get_terms(array(
                        'taxonomy' => 'stm32_series',
                        'hide_empty' => false,
                        'orderby' => 'name',
                        'order' => 'ASC'
                    ));
                    
                    if (!empty($stm32_series_terms) && !is_wp_error($stm32_series_terms)) {
                        foreach ($stm32_series_terms as $term) {
                            echo '<li style="margin-bottom: 8px;">
                                <a href="'.esc_url(get_term_link($term)).'" style="display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; color: #E6EDF3; text-decoration: none; transition: all 0.2s ease;">
                                    <span style="width: 6px; height: 6px; background: #0091BD; border-radius: 50%;"></span>
                                    '.esc_html($term->name).' 
                                    <span style="margin-left: auto; color: #8B949E; font-size: 0.85rem;">('.$term->count.')</span>
                                </a>
                            </li>';
                        }
                    } else {
                        echo '<li style="padding: 12px; color: #8B949E; text-align: center; font-size: 0.95rem;">
                            <i class="fas fa-info-circle" style="margin-right: 6px;"></i>暂无分类数据
                            <div style="margin-top: 8px; font-size: 0.85rem;">快来创建你的第一个STM32分类吧！</div>
                        </li>';
                    }
                    ?>
                </ul>
                
                <!-- 新增分类快速入口 -->
                <div style="margin-top: 16px; padding-top: 16px; border-top: 1px dashed rgba(255,255,255,0.08);">
                    <a href="<?php echo esc_url(admin_url('edit-tags.php?taxonomy=stm32_series')); ?>" target="_blank" style="display: inline-block; padding: 6px 12px; background: rgba(0,145,189,0.1); color: #0091BD; border-radius: 6px; font-size: 0.85rem; transition: all 0.3s ease;">
                        <i class="fas fa-plus-circle"></i> 管理分类
                    </a>
                </div>
            </div>
            
            <!-- 3. 热门文章推荐 -->
            <div style="background: #161B22; border-radius: 12px; padding: 24px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
                <h3 style="font-size: 1.2rem; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); color: #0091BD; display: flex; align-items: center; gap: 8px;">
                    <i class="fas fa-fire"></i> 热门文章
                </h3>
                <ul style="list-style: none; padding: 0;">
                    <?php
                    $popular_posts = new WP_Query(array(
                        'posts_per_page' => 5,
                        'post_status' => 'publish',
                        'orderby' => 'meta_value_num',
                        'meta_key' => 'post_views_count',
                        'order' => 'DESC'
                    ));
                    
                    if ($popular_posts->have_posts()) {
                        $index = 1;
                        while ($popular_posts->have_posts()) {
                            $popular_posts->the_post();
                            $hot_class = $index <= 3 ? 'color: #FF7D00;' : 'color: #8B949E;';
                            echo '<li style="margin-bottom: 12px; border-bottom: 1px dashed rgba(255,255,255,0.05); padding-bottom: 12px;">
                                <a href="'.get_permalink().'" style="display: flex; align-items: flex-start; gap: 10px; color: #E6EDF3; text-decoration: none; transition: all 0.2s ease;">
                                    <span style="'.$hot_class.' font-weight: 600; font-size: 0.9rem; min-width: 18px; text-align: center;">'.$index.'</span>
                                    <span style="font-size: 0.95rem; line-height: 1.4;">'.wp_trim_words(get_the_title(), 18, '...').'</span>
                                </a>
                                <div style="margin-left: 28px; margin-top: 4px; font-size: 0.8rem; color: #8B949E;">
                                    <i class="far fa-eye"></i> '. (function_exists('stm32_get_post_views') ? stm32_get_post_views(get_the_ID()) : '0') .' 
                                    <span style="margin: 0 8px;">•</span>
                                    <i class="far fa-calendar"></i> '. get_the_date('m-d') .'
                                </div>
                            </li>';
                            $index++;
                        }
                        wp_reset_postdata();
                    } else {
                        echo '<li style="padding: 12px; color: #8B949E; text-align: center; font-size: 0.95rem;">
                            <i class="fas fa-book-open" style="margin-right: 6px;"></i>暂无热门文章
                        </li>';
                    }
                    ?>
                </ul>
            </div>
            
            <!-- 4. 开发工具链接 -->
            <div style="background: #161B22; border-radius: 12px; padding: 24px; border: 1px solid rgba(255,255,255,0.1); margin-top: 30px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
                <h3 style="font-size: 1.2rem; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); color: #0091BD; display: flex; align-items: center; gap: 8px;">
                    <i class="fas fa-tools"></i> 开发工具
                </h3>
                <div style="display: grid; grid-template-columns: 1fr; gap: 10px;">
                    <a href="https://www.keil.com/" target="_blank" style="padding: 10px; background: rgba(0,145,189,0.05); border-radius: 8px; text-align: center; color: #E6EDF3; font-size: 0.9rem; transition: all 0.3s ease; text-decoration: none;">
                        <i class="fas fa-terminal" style="color: #0091BD; margin-bottom: 6px; display: block; font-size: 1.2rem;"></i>
                        Keil MDK
                    </a>
                    <a href="https://www.st.com/en/development-tools/stm32cubemx.html" target="_blank" style="padding: 10px; background: rgba(0,145,189,0.05); border-radius: 8px; text-align: center; color: #E6EDF3; font-size: 0.9rem; transition: all 0.3s ease; text-decoration: none;">
                        <i class="fas fa-cogs" style="color: #0091BD; margin-bottom: 6px; display: block; font-size: 1.2rem;"></i>
                        STM32CubeMX
                    </a>
                    <a href="https://ghdl.github.io/ghdl/" target="_blank" style="padding: 10px; background: rgba(0,145,189,0.05); border-radius: 8px; text-align: center; color: #E6EDF3; font-size: 0.9rem; transition: all 0.3s ease; text-decoration: none;">
                        <i class="fas fa-microchip" style="color: #0091BD; margin-bottom: 6px; display: block; font-size: 1.2rem;"></i>
                        GHDL仿真
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<?php get_footer(); ?>