<?php
/**
 * 汉字搜索结果页面模板
 */

get_header(); ?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?php if (have_posts()) : ?>
            <?php
            while (have_posts()) : the_post();
                $pinyin = get_post_meta(get_the_ID(), '_character_pinyin', true);
                $radical = get_post_meta(get_the_ID(), '_character_radical', true);
                $stroke_count = get_post_meta(get_the_ID(), '_character_stroke_count', true);
                $traditional_form = get_post_meta(get_the_ID(), '_character_traditional_form', true);
                $variants = get_post_meta(get_the_ID(), '_character_variants', true);
                $detailed_explanation = get_post_meta(get_the_ID(), '_character_detailed_explanation', true);
                $guoyu_dictionary = get_post_meta(get_the_ID(), '_character_guoyu_dictionary', true);
                $kangxi_dictionary = get_post_meta(get_the_ID(), '_character_kangxi_dictionary', true);
                $shuowen_jiezi = get_post_meta(get_the_ID(), '_character_shuowen_jiezi', true);
                $dialects = get_post_meta(get_the_ID(), '_character_dialects', true);
                $etymology = get_post_meta(get_the_ID(), '_character_etymology', true);
                $other_meanings = get_post_meta(get_the_ID(), '_character_other_meanings', true);
            ?>
                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <!-- 隐藏原有标题 -->
                    <div class="character-basic-info">
                        <div class="character-display">
                            <h1><?php the_title(); ?></h1>
                        </div>

                        <div class="character-details">
                            <p><strong>拼音：</strong><?php echo esc_html($pinyin ?: '无'); ?></p>
                            <p><strong>部首：</strong><?php echo esc_html($radical ?: '无'); ?></p>
                            <p><strong>笔画数：</strong><?php echo esc_html($stroke_count ?: '无'); ?></p>
                            <p><strong>繁体字：</strong><?php echo esc_html($traditional_form ?: '无'); ?></p>
                            <p><strong>异体字：</strong><?php echo esc_html($variants ?: '无'); ?></p>
                        </div>
                    </div>

                    <div class="character-explanations">
                        <div class="tab-container">
                            <ul class="tab-header">
                                <li class="tab-link active" data-tab="basic-explanation"><a href="#basic-explanation">基本解释</a></li>
                                <li class="tab-link" data-tab="detailed-explanation"><a href="#detailed-explanation">详细解释</a></li>
                                <li class="tab-link" data-tab="guoyu-dictionary"><a href="#guoyu-dictionary">国语辞典</a></li>
                                <li class="tab-link" data-tab="kangxi-dictionary"><a href="#kangxi-dictionary">康熙字典</a></li>
                                <li class="tab-link" data-tab="shuowen-jiezi"><a href="#shuowen-jiezi">说文解字</a></li>
                                <li class="tab-link" data-tab="dialects"><a href="#dialects">音韵方言</a></li>
                                <li class="tab-link" data-tab="etymology"><a href="#etymology">字源字形</a></li>
                                <li class="tab-link" data-tab="other-meanings"><a href="#other-meanings">其他释义</a></li>
                            </ul>

                            <div class="tab-content">
                                <div id="basic-explanation" class="tab-pane active">
                                    <h3>基本解释</h3>
                                    <div class="entry-content">
                                        <?php the_content(); ?>
                                    </div>
                                </div>

                                <div id="detailed-explanation" class="tab-pane">
                                    <h3>详细解释</h3>
                                    <div class="explanation-content"><?php echo wp_kses_post($detailed_explanation ?: '暂无内容'); ?></div>
                                </div>

                                <div id="guoyu-dictionary" class="tab-pane">
                                    <h3>国语辞典</h3>
                                    <div class="explanation-content"><?php echo wp_kses_post($guoyu_dictionary ?: '暂无内容'); ?></div>
                                </div>

                                <div id="kangxi-dictionary" class="tab-pane">
                                    <h3>康熙字典</h3>
                                    <div class="explanation-content"><?php echo wp_kses_post($kangxi_dictionary ?: '暂无内容'); ?></div>
                                </div>

                                <div id="shuowen-jiezi" class="tab-pane">
                                    <h3>说文解字</h3>
                                    <div class="explanation-content"><?php echo wp_kses_post($shuowen_jiezi ?: '暂无内容'); ?></div>
                                </div>

                                <div id="dialects" class="tab-pane">
                                    <h3>音韵方言</h3>
                                    <div class="explanation-content"><?php echo wp_kses_post($dialects ?: '暂无内容'); ?></div>
                                </div>

                                <div id="etymology" class="tab-pane">
                                    <h3>字源字形</h3>
                                    <div class="explanation-content"><?php echo wp_kses_post($etymology ?: '暂无内容'); ?></div>
                                </div>

                                <div id="other-meanings" class="tab-pane">
                                    <h3>其他释义</h3>
                                    <div class="explanation-content"><?php echo wp_kses_post($other_meanings ?: '暂无内容'); ?></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <?php if (comments_open() || get_comments_number()) : ?>
                        <div class="entry-comments">
                            <?php comments_template(); ?>
                        </div>
                    <?php endif; ?>
                </article>

            <?php endwhile; ?>
            
            <?php
            the_posts_pagination(array(
                'prev_text' => '上一页',
                'next_text' => '下一页',
            ));
            ?>

        <?php else : ?>
            <div class="no-results">
                <h2>未找到相关内容</h2>
                <p>抱歉，没有找到与 "<?php echo get_search_query(); ?>" 相关的汉字信息。</p>
            </div>
        <?php endif; ?>
    </main>
</div>

<script>
// 初始化标签页功能
jQuery(document).ready(function($) {
    // 初始化滚动监听
    if (typeof initScrollSpy === 'function') {
        initScrollSpy();
    }
});
</script>

<?php get_sidebar(); ?>
<?php get_footer(); ?>