<?php 
/**
 * 文章内容页
 */
?>
<?php get_header(); ?>
<section class="mt-[80px] relative w-full h-[52vh] md:h-[45vh] min-h-[400px] max-h-[500px] flex flex-col justify-center overflow-hidden bg-slate-50 border-b border-slate-200/60">

    <!-- 背景网格特效 -->
    <div class="absolute inset-0 opacity-[0.03] pointer-events-none" style="background-image: linear-gradient(#10b981 1px, transparent 1px), linear-gradient(90deg, #10b981 1px, transparent 1px); background-size: 32px 32px;"></div>

    <!-- 左上角光晕 -->
    <div class="absolute top-0 left-0 w-[600px] h-[600px] bg-primary-light/40 rounded-full mix-blend-multiply filter blur-[100px] opacity-70 -translate-x-1/2 -translate-y-1/2 pointer-events-none"></div>

    <!-- 右下角光晕 -->
    <div class="absolute bottom-0 right-0 w-[500px] h-[500px] bg-accent-light/20 rounded-full mix-blend-multiply filter blur-[80px] opacity-60 translate-x-1/3 translate-y-1/3 pointer-events-none"></div>

    <!-- 核心内容区 -->
    <div class="relative z-10 max-w-7xl mx-auto px-6 lg:px-8 w-full text-center aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000">

        <!-- 标签栏 -->
        <div class="inline-flex items-center justify-center gap-2 px-4 py-1.5 rounded-full bg-white shadow-sm border border-primary/10 text-primary-dark text-sm font-bold tracking-widest mb-6">
            <span class="material-symbols-outlined text-[16px] text-primary">newspaper</span>
            最新资讯
        </div>

        <!-- 主标题 -->
        <h1 class="font-display text-[2.66rem] md:text-5xl font-black text-slate-800 tracking-wide leading-tight mb-4">
            新闻中心
        </h1>

        <!-- 描述文本 -->
        <p class="text-slate-500 text-[1rem] max-w-2xl mx-auto leading-relaxed font-medium mb-10">
            关注企业最新动态、行业前沿资讯及重大活动报道，与您分享我们的成长与洞察。
        </p>

        <!-- 整合的 WordPress 搜索表单 -->
        <div class="search-form-wrapper max-w-3xl mx-auto">
            <?php
            $form_action = home_url('/');
            if (is_page()) {
                $form_action = get_permalink(get_queried_object_id());
            } elseif (is_category()) {
                $form_action = get_category_link(get_queried_object_id());
            }
            ?>
            <form class="news-search-form relative" method="get" action="<?php echo esc_url($form_action); ?>">
                <!-- 添加了 Tailwind 样式构建一体式圆角搜索栏 -->
                <div class="search-controls flex items-center bg-white rounded-full shadow-lg hover:shadow-xl transition-shadow duration-300 border border-slate-200/60 p-1.5">
                    
                    <!-- 分类选择下拉菜单 -->
                    <div class="category-selector relative flex-shrink-0  border-slate-200 ">
                        <?php
                        $current_cat = isset($_GET['category']) ? $_GET['category'] : '';
                        if (empty($current_cat) && is_category()) {
                            $current_cat = get_queried_object()->slug;
                        }
                        ?>
                        <select name="category" id="news-category" class="category-dropdown w-38 bg-transparent border-none text-slate-600 text-sm font-medium focus:ring-0 cursor-pointer pl-5 pr-8 py-3 appearance-none outline-none">
                            <option value="" data-url="<?php echo esc_url(home_url('/category/news-center/')); ?>" <?php selected(empty($current_cat) || $current_cat === 'news-center', true); ?>>显示全部</option>
                            <?php
                            $categories = get_categories(array(
                                'hide_empty' => false,
                                'orderby' => 'name',
                                'order' => 'ASC'
                            ));
                            foreach ($categories as $category) {
                                if ($category->slug === 'news-center') continue;
                                $cat_link = get_category_link($category->term_id);
                                echo '<option value="' . esc_attr($category->slug) . '" data-url="' . esc_url($cat_link) . '" ' . selected($current_cat, $category->slug, false) . '>' . esc_html($category->name) . '</option>';
                            }
                            ?>
                        </select>
                        <!-- 自定义下拉箭头图标 -->
                        <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </div>
                    </div>
                    
                    <!-- 搜索输入框 -->
                    <div class="search-input-wrapper relative flex-grow">
                        <input type="text" name="search_keyword" id="news-search" 
                               class="search-input w-full bg-transparent border-none text-slate-700 text-[15px] placeholder-slate-400 focus:ring-0 px-5 py-3 outline-none" 
                               placeholder="输入关键词搜索新闻资讯..." 
                               value="<?php echo isset($_GET['search_keyword']) ? esc_attr($_GET['search_keyword']) : ''; ?>"
                               autocomplete="off">
                        <div class="search-suggestions absolute top-full left-0 w-full mt-2 bg-white rounded-xl shadow-xl z-50" id="search-suggestions"></div>
                    </div>
                    
                    <!-- 搜索按钮 -->
                    <button type="submit" class="search-button flex items-center justify-center w-12 h-12 bg-primary hover:bg-primary-dark active:scale-95 text-white rounded-full transition-all duration-200 flex-shrink-0 group">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" class="group-hover:scale-110 transition-transform duration-200">
                            <path d="M19 19L13 13M15 8C15 11.866 11.866 15 8 15C4.134 15 1 11.866 1 8C1 4.134 4.134 1 8 1C11.866 1 15 4.134 15 8Z" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                </div>
                <input type="hidden" name="post_type" value="post">
            </form>
        </div>

    </div>

    <!-- 底部渐变线条 -->
    <div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-1/3 h-[2px] bg-gradient-to-r from-transparent via-primary/40 to-transparent"></div>

</section>

    <!-- 新闻搜索功能模块 -->

<div class="single-page-container">
    <!-- 左侧文章列表侧边栏 -->
    <aside class="sidebar-left" role="complementary" aria-label="相关文章">
        <header class="sidebar-header">
            <nav aria-label="返回导航">
                <a href="/category/news-center" 
                   class="back-link" 
                   aria-label="返回新闻中心">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                        <path d="M10 12L6 8L10   4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <span>返回新闻</span>
                </a>
            </nav>
        </header>
        
        <section class="recent-articles" aria-label="最新文章">
            <h2 class="screen-reader-text">最新文章列表</h2>
            <?php
            // 优化查询参数
            $recent_posts = new WP_Query(array(
                'post_type' => 'post',
                'posts_per_page' => 6,
                'post_status' => 'publish',
                'post__not_in' => array(get_the_ID()),
                'no_found_rows' => true, // 性能优化：不计算总数
                'update_post_meta_cache' => false, // 性能优化：不缓存meta
                'update_post_term_cache' => false, // 性能优化：不缓存terms
                'fields' => 'ids' // 只获取ID，减少内存使用
            ));
            
            if ($recent_posts->have_posts()) :
                // 重新获取完整文章数据（只针对需要的字段）
                $post_ids = $recent_posts->posts;
                $posts_data = get_posts(array(
                    'include' => $post_ids,
                    'post_type' => 'post',
                    'post_status' => 'publish',
                    'orderby' => 'post__in'
                ));
                
                foreach ($posts_data as $post) :
                    setup_postdata($post);
            ?>
            <article class="article-item">
                <div class="article-content">
                    <h3 class="article-title">
                        <a href="<?php echo esc_url(get_permalink($post->ID)); ?>" 
                           aria-label="阅读文章：<?php echo esc_attr(get_the_title($post->ID)); ?>">
                            <?php echo get_the_title($post->ID); ?>
                        </a>
                    </h3>
                    <time class="article-date" datetime="<?php echo get_the_date('c', $post->ID); ?>">
                        <?php echo get_the_date('Y-m-d', $post->ID); ?>
                    </time>
                </div>
            </article>
            <?php
                endforeach;
                wp_reset_postdata();
            else :
            ?>
            <p class="no-articles">暂无相关文章</p>
            <?php endif; ?>
        </section>
    </aside>
    
    <!-- 右侧主要内容区域 -->
    <main class="main-content" role="main">
        <article class="article-content">
            <header class="article-header">
                <h1 class="article-title"><?php the_title(); ?></h1>
                <div class="article-meta">
                    <time class="article-time" datetime="<?php echo get_the_date('c'); ?>">
                        <span class="screen-reader-text">发布时间：</span>
                        <?php the_time('Y-m-d H:i:s'); ?>
                    </time>
                    <?php if (get_the_category()) : ?>
                    <div class="article-categories">
                        <span class="screen-reader-text">分类：</span>
                        <?php the_category(', '); ?>
                    </div>
                    <?php endif; ?>
                </div>
            </header>
            
            <div class="article-body">
                <?php the_content(); ?>
            </div>
            
            <?php if (get_the_tags()) : ?>
            <footer class="article-footer">
                <div class="article-tags">
                    <span class="tags-label">标签：</span>
                    <?php the_tags('', ', ', ''); ?>
                </div>
            </footer>
            <?php endif; ?>
        </article>
    </main>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var categorySelect = document.getElementById('news-category');
    var searchForm = document.querySelector('.news-search-form');
    var searchInput = document.getElementById('news-search');
    
    if (categorySelect && searchForm) {
        // 处理表单提交
        searchForm.addEventListener('submit', function(e) {
            var keyword = searchInput ? searchInput.value.trim() : '';
            var selectedOption = categorySelect.options[categorySelect.selectedIndex];
            
            // 如果没有关键词，但选择了分类，则跳转到分类页
            if (!keyword && selectedOption && selectedOption.dataset.url) {
                e.preventDefault();
                window.location.href = selectedOption.dataset.url;
            }
            // 如果有关键词，正常提交，WordPress会自动处理到search.php
        });
        
        // 下拉框改变时
        categorySelect.addEventListener('change', function() {
            var keyword = searchInput ? searchInput.value.trim() : '';
            var selectedOption = this.options[this.selectedIndex];
            
            // 如果没有关键词，直接跳转到分类页
            if (!keyword && selectedOption && selectedOption.dataset.url) {
                window.location.href = selectedOption.dataset.url;
            } else {
                // 如果有关键词，或者没有分类url（比如"显示全部"且没配置url），则提交表单
                searchForm.submit();
            }
        });
    }
});
</script>
<?php get_footer(); ?>
