<?php
/**
 * 单个汉字显示模板
 */

get_header(); ?>

    <div class="pinyin-index-container">
        <!-- 英文字母索引 -->
        <div class="pinyin-section">

<div id="primary1" class="content-area">
    <main id="main" class="site-main">
        <?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);
            $example_usage = get_post_meta(get_the_ID(), '_character_example_usage', true);
            $structured_explanations = get_post_meta(get_the_ID(), '_character_structured_explanations', 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);
            $related_dictionaries = get_post_meta(get_the_ID(), '_character_related_dictionaries', true);
            $related_idioms = get_post_meta(get_the_ID(), '_character_related_idioms', true);
            
            // 获取与当前汉字关联的所有发音含义对
            $pronunciations = get_posts(array(
                'post_type' => 'pronunciation_pair',
                'post_status' => 'publish',
                'numberposts' => -1,
                'meta_query' => array(
                    array(
                        'key' => '_pronunciation_related_character',
                        'value' => get_the_ID(),
                        'compare' => '='
                    )
                ),
                'orderby' => 'date',
                'order' => 'ASC'
            ));
            $has_pronunciations = !empty($pronunciations);
            
            // 检查各个字段是否有内容，用于决定是否显示对应的标签页
            $has_detailed_explanation = !empty($detailed_explanation);
            $has_example_usage = !empty($example_usage);
            $has_structured_explanations = !empty($structured_explanations) && is_array($structured_explanations);
            $has_guoyu_dictionary = !empty($guoyu_dictionary);
            $has_kangxi_dictionary = !empty($kangxi_dictionary);
            $has_shuowen_jiezi = !empty($shuowen_jiezi);
            $has_dialects = !empty($dialects);
            $has_etymology = !empty($etymology);
            $has_other_meanings = !empty($other_meanings);
            $has_related_content = !empty($related_dictionaries) || !empty($related_idioms);
        ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <!-- 隐藏原有标题 -->
                <!--
                <header class="entry-header">
                    <h1 class="entry-title"><?php the_title(); ?></h1>
                </header>
                -->

                <div class="character-basic-info">
                    <div class="character-display">
                        <h1><?php the_title(); ?></h1>
                        <?php if ($pinyin): ?>
                            <div class="full-pinyin"><?php echo esc_html($pinyin); ?></div>
                        <?php endif; ?>
                    </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>
                        <?php 
                        // 显示关联的古籍链接
                        $related_ancient_text_id = get_post_meta(get_the_ID(), '_character_related_ancient_text', true);
                        if ($related_ancient_text_id) {
                            $ancient_text = get_post($related_ancient_text_id);
                            if ($ancient_text && $ancient_text->post_status === 'publish') {
                                echo '<p><strong>相关古籍：</strong><a href="' . get_permalink($ancient_text->ID) . '">' . esc_html($ancient_text->post_title) . '</a></p>';
                            }
                        }
                        ?>
                    </div>
                </div>

                <div class="character-explanations">
                    <div class="tab-container">
                        <ul class="tab-header">
                            <li class="tab-link"><a href="#basic-explanation">基本解释</a></li>
                            <?php if ($has_detailed_explanation || $has_example_usage || $has_structured_explanations): ?>
                            <li class="tab-link"><a href="#detailed-explanation">详细解释</a></li>
                            <?php endif; ?>
                            <?php if ($has_guoyu_dictionary): ?>
                            <li class="tab-link"><a href="#guoyu-dictionary">国语辞典</a></li>
                            <?php endif; ?>
                            <?php if ($has_kangxi_dictionary): ?>
                            <li class="tab-link"><a href="#kangxi-dictionary">康熙字典</a></li>
                            <?php endif; ?>
                            <?php if ($has_shuowen_jiezi): ?>
                            <li class="tab-link"><a href="#shuowen-jiezi">说文解字</a></li>
                            <?php endif; ?>
                            <?php if ($has_dialects): ?>
                            <li class="tab-link"><a href="#dialects">音韵方言</a></li>
                            <?php endif; ?>
                            <?php if ($has_etymology): ?>
                            <li class="tab-link"><a href="#etymology">字源字形</a></li>
                            <?php endif; ?>
                            <li class="tab-link"><a href="#calligraphy">书法字形</a></li>
                            <?php if ($has_pronunciations): ?>
                            <li class="tab-link"><a href="#pronunciations">多音字详解</a></li>
                            <?php endif; ?>
                            <?php if ($has_other_meanings): ?>
                            <li class="tab-link"><a href="#other-meanings">其他释义</a></li>
                            <?php endif; ?>
                            <?php if ($has_related_content): ?>
                            <li class="tab-link"><a href="#related-content">相关词语成语</a></li>
                            <?php endif; ?>
                        </ul>

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

                            <?php if ($has_detailed_explanation || $has_example_usage || $has_structured_explanations): ?>
                            <div id="detailed-explanation" class="tab-section">
                                <h3>详细解释</h3>
                                
                                <?php if ($has_structured_explanations): ?>
                                    <div class="structured-explanations">
                                        <!-- <h4>结构化解释</h4> -->
                                        <?php foreach ($structured_explanations as $index => $exp): ?>
                                            <div class="structured-explanation-item" style="margin-bottom: 20px; padding: 1px; border: 0px solid #eee;">
                                                <?php if (!empty($exp['pinyin'])): ?>
                                                    <div class="pinyin" style="margin: 5px 0;">
                                                       <!-- <strong>拼音：</strong> -->
                                                        <span><?php echo esc_html($exp['pinyin']); ?></span>
                                                        
                                                        <?php 
                                                        // 显示音频播放按钮
                                                        if (!empty($exp['audio'])):
                                                            $audio_url = wp_get_attachment_url($exp['audio']);
                                                            if ($audio_url):
                                                        ?>
                                                            <span style="margin-left: 5px;">
                                                                <audio id="audio-<?php echo esc_attr($index); ?>" style="display: none;">
                                                                    <source src="<?php echo esc_url($audio_url); ?>" type="audio/mpeg">
                                                                    您的浏览器不支持音频播放。
                                                                </audio>
                                                                <button type="button" 
                                                                        class="simple-audio-button" 
                                                                        data-audio="audio-<?php echo esc_attr($index); ?>"
                                                                        title="播放发音"
                                                                        style="background: none; border: none; cursor: pointer; font-size: 14px; padding: 2px;">
                                                                    🔊
                                                                </button>
                                                            </span>
                                                        <?php 
                                                            endif;
                                                        endif; 
                                                        ?>
                                                        
                                                    <?php if (!empty($exp['part_of_speech'])): ?>
                                                    <!--<div class="part-of-speech" style="margin: 5px 0;">-->
                                                        <!--<strong>词性：</strong>-->
                                                        <!--<div class="pinyin" style="font-weight: bold; color: #333; font-size: 1.1em;">&nbsp;-->
                                                        	〔<?php echo esc_html($exp['part_of_speech']); ?>〕
                                                        	<!--</div>-->
                                                    <!--</div>-->
                                                <?php endif; ?>
                                                        
                                                    </div>
                                                <?php endif; ?>
                                               
                                              
                                                
                                                <?php if (!empty($exp['dialect_region']) || !empty($exp['dialect_city'])): ?>
                                                    <div class="dialect-info" style="margin: 5px 0;">
                                                        <strong>方言类别：</strong>
                                                        <span>
                                                            <?php 
                                                            if (!empty($exp['dialect_region'])) {
                                                                echo esc_html($exp['dialect_region']);
                                                                if (!empty($exp['dialect_city'])) {
                                                                    echo ' - ' . esc_html($exp['dialect_city']);
                                                                }
                                                            } else if (!empty($exp['dialect_city'])) {
                                                                echo esc_html($exp['dialect_city']);
                                                            }
                                                            ?>
                                                        </span>
                                                    </div>
                                                <?php endif; ?>
                                                
                                                <?php if (!empty($exp['province']) || !empty($exp['city'])): ?>
                                                    <div class="province-city-info" style="margin: 5px 0;">
                                                        <strong>地区：</strong>
                                                        <span>
                                                            <?php 
                                                            if (!empty($exp['province'])) {
                                                                echo esc_html($exp['province']);
                                                                if (!empty($exp['city'])) {
                                                                    echo ' - ' . esc_html($exp['city']);
                                                                }
                                                            } else if (!empty($exp['city'])) {
                                                                echo esc_html($exp['city']);
                                                            }
                                                            ?>
                                                        </span>
                                                    <!--</div>-->
                                                <?php endif; ?>
                                                
                                                <?php if (!empty($exp['county']) || !empty($exp['town'])): ?>
                                                    <!--<div class="county-town-info" style="margin: 5px 0;">-->
                                                        <!--<strong>详细地区：</strong>-->
                                                        <span>
                                                            <?php 
                                                            if (!empty($exp['county'])) {
                                                                echo ' - ' . esc_html($exp['county']);
                                                                if (!empty($exp['town'])) {
                                                                    echo ' - ' . esc_html($exp['town']);
                                                                }
                                                            } else if (!empty($exp['town'])) {
                                                                echo esc_html($exp['town']);
                                                            }
                                                            ?>
                                                        </span>
                                                    </div> 
                                                <?php endif; ?>
                                                
                                                 <?php 
                                                // 显示关联内容（汉字、词语、成语）
                                                if (!empty($exp['related_content']) && is_array($exp['related_content'])):
                                                    // 分类存储不同类型的关联内容
                                                    $related_characters = array();
                                                    $related_dictionaries = array();
                                                    $related_idioms = array();
                                                    
                                                    // 分析关联内容类型
                                                    foreach ($exp['related_content'] as $content_item) {
                                                        if (strpos($content_item, 'char_') === 0) {
                                                            $char_id = substr($content_item, 5);
                                                            $related_characters[] = intval($char_id);
                                                        } elseif (strpos($content_item, 'dict_') === 0) {
                                                            $dict_id = substr($content_item, 5);
                                                            $related_dictionaries[] = intval($dict_id);
                                                        } elseif (strpos($content_item, 'idiom_') === 0) {
                                                            $idiom_id = substr($content_item, 6);
                                                            $related_idioms[] = intval($idiom_id);
                                                        }
                                                    }
                                                    
                                                    // 获取汉字内容
                                                    if (!empty($related_characters)):
                                                        $characters = get_posts(array(
                                                            'post_type' => 'chinese_character',
                                                            'post_status' => 'publish',
                                                            'post__in' => $related_characters,
                                                            'orderby' => 'post__in'
                                                        ));
                                                        if (!empty($characters)):
                                                    ?>
                                                        <div class="related-characters" style="margin: 10px 0; padding: 10px; background-color: #e8f4e8;">
                                                            <div style="font-weight: bold; margin-bottom: 5px;">对应汉字:
                                                            
                                                                <?php foreach ($characters as $character): ?>
                                                                    <a href="<?php echo get_permalink($character->ID); ?>" style="margin-right: 10px; display: inline-block;"><?php echo esc_html($character->post_title); ?></a>
                                                                <?php endforeach; ?>
                                                            </div>
                                                        </div>
                                                    <?php 
                                                        endif;
                                                    endif;
                                                    
                                                    // 获取词语内容
                                                    if (!empty($related_dictionaries)):
                                                        $dictionaries = get_posts(array(
                                                            'post_type' => 'chinese_dictionary',
                                                            'post_status' => 'publish',
                                                            'post__in' => $related_dictionaries,
                                                            'orderby' => 'post__in'
                                                        ));
                                                        if (!empty($dictionaries)):
                                                    ?>
                                                        <div class="related-dictionaries" style="margin: 10px 0; padding: 10px; background-color: #e8f4f8;">
                                                            <div style="font-weight: bold; margin-bottom: 5px;">对应词语:
                                                            
                                                                <?php foreach ($dictionaries as $dictionary): ?>
                                                                    <a href="<?php echo get_permalink($dictionary->ID); ?>" style="margin-right: 10px; display: inline-block;"><?php echo esc_html($dictionary->post_title); ?></a>
                                                                <?php endforeach; ?>
                                                            </div>
                                                        </div>
                                                    <?php 
                                                        endif;
                                                    endif;
                                                    
                                                    // 获取成语内容
                                                    if (!empty($related_idioms)):
                                                        $idioms = get_posts(array(
                                                            'post_type' => 'chinese_idiom',
                                                            'post_status' => 'publish',
                                                            'post__in' => $related_idioms,
                                                            'orderby' => 'post__in'
                                                        ));
                                                        if (!empty($idioms)):
                                                    ?>
                                                        <div class="related-idioms" style="margin: 10px 0; padding: 10px; background-color: #fef6e2;">
                                                            <div style="font-weight: bold; margin-bottom: 5px;">对应成语:
                                                            
                                                                <?php foreach ($idioms as $idiom): ?>
                                                                    <a href="<?php echo get_permalink($idiom->ID); ?>" style="margin-right: 10px; display: inline-block;"><?php echo esc_html($idiom->post_title); ?></a>
                                                                <?php endforeach; ?>
                                                            </div>
                                                        </div>
                                                    <?php 
                                                        endif;
                                                    endif;
                                                endif;
                                                ?>
                                                
                                                
                                                <?php if (!empty($exp['explanation'])): ?>
                                                    <div class="research-content" style="margin: 10px 0; padding: 10px; background-color: #f9f9f9; border-left: 0px solid #0073aa;">
                                                        <div style="font-weight: bold; margin-bottom: 5px;">释义:</div>
                                                        <div class="explanation" style="margin: 10px 0;"><?php echo wp_kses_post($exp['explanation']); ?></div>
                                                    </div>
                                                <?php endif; ?>
                                                
                                                 <!-- 显示考据内容 -->
                                                <?php if (!empty($exp['research'])): ?>
                                                    <div class="research-content" style="margin: 10px 0; padding: 10px; background-color: #f9f9f9; border-left: 0px solid #0073aa;">
                                                        <div style="font-weight: bold; margin-bottom: 5px;">考据:</div>
                                                        <div><?php echo wp_kses_post($exp['research']); ?></div>
                                                    </div>
                                                <?php endif; ?>
                                                
                                                <?php if (!empty($exp['example_sentences'])): ?>
                                                    <div class="example-sentences" style="margin: 10px 0; padding: 10px; background-color: #f9f9f9; border-left: 0px solid #ddd;">
                                                        <div style="font-weight: bold; margin-bottom: 5px;">例句:</div>
                                                        <div><?php echo wp_kses_post($exp['example_sentences']); ?></div>
                                                    </div>
                                                <?php endif; ?>
                                                
                                                <?php 
                                                // 显示同义字词
                                                if (!empty($exp['synonymous_characters'])):
                                                    // 处理数组或字符串格式
                                                    $synonymous_list = array();
                                                    if (is_array($exp['synonymous_characters'])) {
                                                        $synonymous_list = $exp['synonymous_characters'];
                                                    } else {
                                                        $synonymous_list = explode(',', $exp['synonymous_characters']);
                                                        $synonymous_list = array_map('trim', $synonymous_list);
                                                    }
                                                    
                                                    // 获取同义字词链接
                                                    $synonymous_links = array();
                                                    foreach ($synonymous_list as $char_id) {
                                                        if (!empty($char_id)) {
                                                            // 获取汉字文章标题
                                                            $char_post = get_post($char_id);
                                                            if ($char_post && $char_post->post_type === 'chinese_character') {
                                                                $synonymous_links[] = '<a href="' . get_permalink($char_post->ID) . '">' . esc_html($char_post->post_title) . '</a>';
                                                            } else {
                                                                // 如果找不到文章，尝试按标题查找
                                                                $char_posts = get_posts(array(
                                                                    'post_type' => 'chinese_character',
                                                                    'post_status' => 'publish',
                                                                    'title' => $char_id,
                                                                    'numberposts' => 1
                                                                ));
                                                                
                                                                if (!empty($char_posts)) {
                                                                    $synonymous_links[] = '<a href="' . get_permalink($char_posts[0]->ID) . '">' . esc_html($char_id) . '</a>';
                                                                } else {
                                                                    $synonymous_links[] = esc_html($char_id);
                                                                }
                                                            }
                                                        }
                                                    }
                                                ?>
                                                    <div class="synonymous-characters" style="margin: 10px 0; padding: 10px; background-color: #f0f8ff;">
                                                        <div style="font-weight: bold; margin-bottom: 5px;">同义字词:
                                                        <?php echo implode(' ', $synonymous_links); ?></div>
                                                    </div>
                                                <?php endif; ?>
                                                
                                                <?php 
                                                // 显示近义字词
                                                if (!empty($exp['similar_characters'])):
                                                    // 处理数组或字符串格式
                                                    $similar_list = array();
                                                    if (is_array($exp['similar_characters'])) {
                                                        $similar_list = $exp['similar_characters'];
                                                    } else {
                                                        $similar_list = explode(',', $exp['similar_characters']);
                                                        $similar_list = array_map('trim', $similar_list);
                                                    }
                                                    
                                                    // 获取近义字词链接
                                                    $similar_links = array();
                                                    foreach ($similar_list as $char_id) {
                                                        if (!empty($char_id)) {
                                                            // 获取汉字文章标题
                                                            $char_post = get_post($char_id);
                                                            if ($char_post && $char_post->post_type === 'chinese_character') {
                                                                $similar_links[] = '<a href="' . get_permalink($char_post->ID) . '">' . esc_html($char_post->post_title) . '</a>';
                                                            } else {
                                                                // 如果找不到文章，尝试按标题查找
                                                                $char_posts = get_posts(array(
                                                                    'post_type' => 'chinese_character',
                                                                    'post_status' => 'publish',
                                                                    'title' => $char_id,
                                                                    'numberposts' => 1
                                                                ));
                                                                
                                                                if (!empty($char_posts)) {
                                                                    $similar_links[] = '<a href="' . get_permalink($char_posts[0]->ID) . '">' . esc_html($char_id) . '</a>';
                                                                } else {
                                                                    $similar_links[] = esc_html($char_id);
                                                                }
                                                            }
                                                        }
                                                    }
                                                ?>
                                                    <div class="similar-characters" style="margin: 10px 0; padding: 10px; background-color: #fff0f5;">
                                                        <div style="font-weight: bold; margin-bottom: 5px;">近义字词:
                                                        <?php echo implode(' ', $similar_links); ?></div>
                                                    </div>
                                                <?php endif; ?>
                                                
                                                <?php 
                                                // 显示反义字词
                                                if (!empty($exp['antonymous_characters'])):
                                                    // 处理数组或字符串格式
                                                    $antonymous_list = array();
                                                    if (is_array($exp['antonymous_characters'])) {
                                                        $antonymous_list = $exp['antonymous_characters'];
                                                    } else {
                                                        $antonymous_list = explode(',', $exp['antonymous_characters']);
                                                        $antonymous_list = array_map('trim', $antonymous_list);
                                                    }
                                                    
                                                    // 获取反义字词链接
                                                    $antonymous_links = array();
                                                    foreach ($antonymous_list as $char_id) {
                                                        if (!empty($char_id)) {
                                                            // 获取汉字文章标题
                                                            $char_post = get_post($char_id);
                                                            if ($char_post && $char_post->post_type === 'chinese_character') {
                                                                $antonymous_links[] = '<a href="' . get_permalink($char_post->ID) . '">' . esc_html($char_post->post_title) . '</a>';
                                                            } else {
                                                                // 如果找不到文章，尝试按标题查找
                                                                $char_posts = get_posts(array(
                                                                    'post_type' => 'chinese_character',
                                                                    'post_status' => 'publish',
                                                                    'title' => $char_id,
                                                                    'numberposts' => 1
                                                                ));
                                                                
                                                                if (!empty($char_posts)) {
                                                                    $antonymous_links[] = '<a href="' . get_permalink($char_posts[0]->ID) . '">' . esc_html($char_id) . '</a>';
                                                                } else {
                                                                    $antonymous_links[] = esc_html($char_id);
                                                                }
                                                            }
                                                        }
                                                    }
                                                ?>
                                                    <div class="antonymous-characters" style="margin: 10px 0; padding: 10px; background-color: #f0f8ff;">
                                                        <div style="font-weight: bold; margin-bottom: 5px;">反义字词:
                                                        <?php echo implode(' ', $antonymous_links); ?></div>
                                                    </div>
                                                <?php endif; ?>
                                                
                                                <?php 
                                                // 显示关联词语
                                                if (!empty($exp['related_dictionaries']) && is_array($exp['related_dictionaries'])):
                                                    $related_dictionaries = get_posts(array(
                                                        'post_type' => 'chinese_dictionary',
                                                        'post_status' => 'publish',
                                                        'post__in' => $exp['related_dictionaries'],
                                                        'orderby' => 'post__in'
                                                    ));
                                                    if (!empty($related_dictionaries)):
                                                ?>
                                                    <div class="related-dictionaries" style="margin: 10px 0; padding: 10px; background-color: #e8f4f8;">
                                                        <div style="font-weight: bold; margin-bottom: 5px;">关联词语:</div>
                                                        <div>
                                                            <?php foreach ($related_dictionaries as $dictionary): ?>
                                                                <a href="<?php echo get_permalink($dictionary->ID); ?>" style="margin-right: 10px; display: inline-block;"><?php echo esc_html($dictionary->post_title); ?></a>
                                                            <?php endforeach; ?>
                                                        </div>
                                                    </div>
                                                <?php 
                                                    endif;
                                                endif;
                                                ?>
                                                
                                                <?php 
                                                // 显示关联成语
                                                if (!empty($exp['related_idioms']) && is_array($exp['related_idioms'])):
                                                    $related_idioms = get_posts(array(
                                                        'post_type' => 'chinese_idiom',
                                                        'post_status' => 'publish',
                                                        'post__in' => $exp['related_idioms'],
                                                        'orderby' => 'post__in'
                                                    ));
                                                    if (!empty($related_idioms)):
                                                ?>
                                                    <div class="related-idioms" style="margin: 10px 0; padding: 10px; background-color: #fef6e2;">
                                                        <div style="font-weight: bold; margin-bottom: 5px;">关联成语:</div>
                                                        <div>
                                                            <?php foreach ($idioms as $idiom): ?>
                                                                <!--<a href="<?php //echo get_permalink($idiom->ID); ?>" style="margin-right: 10px; display: inline-block;"><?php //echo esc_html($idiom->post_title); ?></a>-->
                                                                <a href="<?php echo get_permalink($idiom->ID); ?>" style="margin-right: 0px; display: inline-block;"><?php echo esc_html($idiom->post_title); ?></a>
                                                            <?php endforeach; ?>
                                                        </div>
                                                    </div>
                                                <?php 
                                                    endif;
                                                endif;
                                                ?>
                                                
                                               
                                                <?php if (!empty($exp['custom_fields']) && is_array($exp['custom_fields'])): ?>
                                                    <div class="custom-fields" style="margin: 10px 0; padding: 10px; background-color: #f0f0f0;">
                                                        <?php foreach ($exp['custom_fields'] as $custom_field): ?>
                                                            <?php if (!empty($custom_field['label']) || !empty($custom_field['value'])): ?>
                                                                <div class="custom-field-item" style="margin-bottom: 5px;">
                                                                    <?php if (!empty($custom_field['label'])): ?>
                                                                        <span style="font-weight: bold;"><?php echo esc_html($custom_field['label']); ?>:</span>
                                                                    <?php endif; ?>
                                                                    <span><?php echo esc_html($custom_field['value']); ?></span>
                                                                </div>
                                                            <?php endif; ?>
                                                        <?php endforeach; ?>
                                                    </div>
                                                <?php endif; ?>
                                                
                                               
                                                
                                                <!-- 音频播放功能 -->
                                                <?php if (!empty($exp['audio_url'])): ?>
                                                    <div class="audio-player" style="margin: 10px 0;">
                                                        <button type="button" 
                                                                class="audio-play-btn" 
                                                                data-audio-url="<?php echo esc_url($exp['audio_url']); ?>"
                                                                style="background: #0073aa; color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;">
                                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                                                                <polygon points="6,3 12,8 6,13"></polygon>
                                                            </svg>
                                                            播放发音
                                                        </button>
                                                    </div>
                                                <?php endif; ?>
                                            </div>
                                        <?php endforeach; ?>
                                    </div>
                                <?php endif; ?>
                                
                                <?php if ($has_example_usage): ?>
                                <div class="example-usage">
                                    <!--<h4>使用示例</h4>-->
                                    <pre><?php echo esc_html($example_usage); ?></pre>
                                </div>
                                <?php endif; ?>
                                
                                <?php if ($has_detailed_explanation): ?>
                                <div><?php echo wpautop(wp_kses_post($detailed_explanation)); ?></div>
                                <?php endif; ?>
                            </div>
                            <?php endif; ?>

                            <?php if ($has_guoyu_dictionary): ?>
                            <div id="guoyu-dictionary" class="tab-section">
                                <h3>国语辞典</h3>
                                <div><?php echo wpautop(wp_kses_post($guoyu_dictionary)); ?></div>
                            </div>
                            <?php endif; ?>

                            <?php if ($has_kangxi_dictionary): ?>
                            <div id="kangxi-dictionary" class="tab-section">
                                <h3>康熙字典</h3>
                                <div><?php echo wpautop(wp_kses_post($kangxi_dictionary)); ?></div>
                            </div>
                            <?php endif; ?>

                            <?php if ($has_shuowen_jiezi): ?>
                            <div id="shuowen-jiezi" class="tab-section">
                                <h3>说文解字</h3>
                                <div><?php echo wpautop(wp_kses_post($shuowen_jiezi)); ?></div>
                            </div>
                            <?php endif; ?>

                            <?php if ($has_dialects): ?>
                            <div id="dialects" class="tab-section">
                                <h3>音韵方言</h3>
                                <div><?php echo wpautop(wp_kses_post($dialects)); ?></div>
                            </div>
                            <?php endif; ?>

                            <?php if ($has_etymology): ?>
                            <div id="etymology" class="tab-section">
                                <h3>字源字形</h3>
                                <div><?php echo wpautop(wp_kses_post($etymology)); ?></div>
                            </div>
                            <?php endif; ?>

                            <div id="calligraphy" class="tab-section">
                                <h3>书法字形</h3>
                                <div class="calligraphy-content">
                                    <p>以下展示了汉字"<?php the_title(); ?>"在不同书法家笔下的字形：</p>
                                    <div id="calligraphy-results" class="calligraphy-results">
                                        <p class="loading">正在加载书法作品...</p>
                                    </div>
                                </div>
                            </div>

                            <?php if ($has_pronunciations): ?>
                            <div id="pronunciations" class="tab-section">
                                <h3>多音字详解</h3>
                                <div class="pronunciation-list">
                                    <?php foreach ($pronunciations as $pronunciation): ?>
                                        <div class="pronunciation-item">
                                            <h4>
                                                <?php 
                                                // 获取拼音并支持多音显示
                                                $pinyin_value = get_post_meta($pronunciation->ID, '_pronunciation_pinyin', true);
                                                if ($pinyin_value):
                                                    // 将空格分隔的拼音转换为数组
                                                    $pinyins = preg_split('/\s+/', $pinyin_value, -1, PREG_SPLIT_NO_EMPTY);
                                                    // 显示所有拼音，用逗号分隔
                                                    echo esc_html(implode(', ', $pinyins));
                                                endif;
                                                ?>
                                                <?php 
                                                $part_of_speech = get_post_meta($pronunciation->ID, '_pronunciation_part_of_speech', true);
                                                if ($part_of_speech): ?>
                                                    (<?php echo esc_html($part_of_speech); ?>)
                                                <?php endif; ?>
                                            </h4>
                                            <div class="pronunciation-content">
                                                <?php echo apply_filters('the_content', $pronunciation->post_content); ?>
                                            </div>
                                            <?php 
                                            $examples = get_post_meta($pronunciation->ID, '_pronunciation_examples', true);
                                            if ($examples): ?>
                                                <div class="pronunciation-examples">
                                                    <h5>使用示例:</h5>
                                                    <ul>
                                                        <?php 
                                                        $example_lines = preg_split('/\r\n|\r|\n/', $examples);
                                                        foreach ($example_lines as $example): ?>
                                                            <li><?php echo esc_html($example); ?></li>
                                                        <?php endforeach; ?>
                                                    </ul>
                                                </div>
                                            <?php endif; ?>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                            <?php endif; ?>

                            <?php if ($has_other_meanings): ?>
                            <div id="other-meanings" class="tab-section">
                                <h3>其他释义</h3>
                                <div><?php echo wpautop(wp_kses_post($other_meanings)); ?></div>
                            </div>
                            <?php endif; ?>
                            
                            <?php if ($has_related_content): ?>
                            <div id="related-content" class="tab-section">
                                <h3>相关词语和成语</h3>
                                <div class="related-content-container">
                                    <?php if (!empty($related_dictionaries)): ?>
                                    <div class="related-dictionaries">
                                        <h4>包含"<?php the_title(); ?>"的词语</h4>
                                        <div class="dictionary-grid">
                                            <?php foreach ($related_dictionaries as $dictionary_id): 
                                                $dictionary = get_post($dictionary_id);
                                                if ($dictionary && $dictionary->post_status === 'publish'):
                                                    $pinyin = get_post_meta($dictionary_id, '_dictionary_pinyin', true);
                                            ?>
                                                <div class="dictionary-item">
                                                    <h5><a href="<?php echo get_permalink($dictionary_id); ?>"><?php echo esc_html($dictionary->post_title); ?></a></h5>
                                                    <?php if ($pinyin): ?>
                                                        <p>拼音: <?php echo esc_html($pinyin); ?></p>
                                                    <?php endif; ?>
                                                </div>
                                            <?php endif; endforeach; ?>
                                        </div>
                                    </div>
                                    <?php endif; ?>
                                    
                                    <?php if (!empty($related_idioms)): ?>
                                    <div class="related-idioms">
                                        <h4>包含"<?php the_title(); ?>"的成语</h4>
                                        <div class="idiom-grid">
                                            <?php foreach ($related_idioms as $idiom_id): 
                                                $idiom = get_post($idiom_id);
                                                if ($idiom && $idiom->post_status === 'publish'):
                                                    $pinyin = get_post_meta($idiom_id, '_idiom_pinyin', true);
                                            ?>
                                                <div class="idiom-item">
                                                    <h5><a href="<?php echo get_permalink($idiom_id); ?>"><?php echo esc_html($idiom->post_title); ?></a></h5>
                                                    <?php if ($pinyin): ?>
                                                        <p>拼音: <?php echo esc_html($pinyin); ?></p>
                                                    <?php endif; ?>
                                                </div>
                                            <?php endif; endforeach; ?>
                                        </div>
                                    </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>

            </article>
        <?php endwhile; ?>
	</main><!-- .site-main -->
	</div><!-- .content-area -->
	<?php //get_sidebar(); ?>

               </div>
                </div>


<script>
jQuery(document).ready(function($) {
    // 处理标签点击事件，平滑滚动到对应位置
    $('.tab-link a').on('click', function(e) {
        e.preventDefault();
        var target = $(this).attr('href');
        
        // 平滑滚动到目标位置
        $('html, body').animate({
            scrollTop: $(target).offset().top - 100
        }, 500);
        
        // 更新URL中的hash
        history.pushState(null, null, target);
    });
    
    // 简洁音频播放按钮功能
    $(document).on('click', '.simple-audio-button', function(e) {
        e.preventDefault();
        var audioId = $(this).data('audio');
        var audio = document.getElementById(audioId);
        
        if (audio) {
            // 如果音频正在播放，则暂停
            if (!audio.paused) {
                audio.pause();
                return;
            }
            
            // 播放音频
            audio.play().then(function() {
                console.log('音频播放开始');
            }).catch(function(error) {
                console.error('音频播放失败:', error);
                alert('音频播放失败，请重试');
            });
        }
    });
    
    // 页面加载完成后自动加载书法作品
    loadCalligraphyWorks();
    
    function loadCalligraphyWorks() {
        // 如果已经加载过数据，则不再重复加载
        if ($('#calligraphy-results').data('loaded')) {
            return;
        }
        
        var character = '<?php the_title(); ?>';
        
        $.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'POST',
            data: {
                action: 'get_calligraphy_by_character',
                character: character
            },
            success: function(response) {
                if (response.success) {
                    var html = '';
                    if (response.data.length > 0) {
                        html += '<div class="calligraphy-grid">';
                        $.each(response.data, function(index, item) {
                            html += '<div class="calligraphy-item">';
                            html += '<div class="calligraphy-image">';
                            // 显示特色图像或单字字形图片
                            if (item.thumbnail) {
                                html += '<a href="' + item.permalink + '"><img src="' + item.thumbnail + '" alt="' + item.title + '"></a>';
                            } else if (item.character_images && item.character_images.length > 0) {
                                html += '<a href="' + item.permalink + '"><img src="' + item.character_images[0].thumbnail + '" alt="' + item.title + '"></a>';
                            } else {
                                html += '<div class="no-image">无图像</div>';
                            }
                            html += '</div>';
                            html += '<div class="calligraphy-info">';
                            html += '<h4><a href="' + item.permalink + '">' + item.title + '</a></h4>';
                            html += '<p>书法家: ' + (item.artist || '未知') + '</p>';
                            html += '<p>书体: ' + (item.style || '未知') + '</p>';
                            if (item.dynasty || item.year) {
                                html += '<p>年代: ' + (item.dynasty || item.year || '未知') + '</p>';
                            }
                            html += '</div>';
                            
                            // 显示额外的单字字形图片缩略图
                            if (item.character_images && item.character_images.length > 1) {
                                html += '<div class="character-images-thumbnails">';
                                html += '<p>更多字形:</p>';
                                html += '<div class="thumbnails-container">';
                                $.each(item.character_images, function(i, image) {
                                    if (i > 0) { // 跳过第一张，因为已经显示在主图位置
                                        html += '<a href="' + item.permalink + '"><img src="' + image.thumbnail + '" alt="字形 ' + (i+1) + '"></a>';
                                    }
                                });
                                html += '</div>';
                                html += '</div>';
                            }
                            
                            html += '</div>';
                        });
                        html += '</div>';
                    } else {
                        html = '<p>暂无相关书法作品。</p>';
                    }
                    $('#calligraphy-results').html(html).data('loaded', true);
                } else {
                    $('#calligraphy-results').html('<p>加载失败: ' + response.data + '</p>');
                }
            },
            error: function() {
                $('#calligraphy-results').html('<p>加载过程中发生错误。</p>');
            }
        });
    }
    
    // 处理页面加载时的锚点
    if (window.location.hash) {
        var target = window.location.hash;
        if ($(target).length) {
            $('html, body').animate({
                scrollTop: $(target).offset().top - 100
            }, 500);
        }
    }
});

</script>

<style>

.character-basic-info {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
}

.character-display {
    flex: 1;
    min-width: 200px;
    text-align: center;
    padding-right: 20px;
    border-right: 1px solid #ddd;
}

.character-display h1 {
    font-size: 4em;
    margin: 0;
    color: #333;
}

.full-pinyin {
    font-size: 1.5em;
    color: #666;
    margin-top: 10px;
    text-align: center;
}

.character-details {
    flex: 2;
    min-width: 300px;
    padding-left: 20px;
}

.character-details p {
    margin: 5px 0;
}


.pinyin-index-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.pinyin-section {
    margin-bottom: 40px;
}

.pinyin-section h2 {
    border-bottom: 2px solid #0073aa;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.calligraphy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.calligraphy-item {
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.calligraphy-image {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
}

.calligraphy-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.calligraphy-image .no-image {
    color: #999;
    font-style: italic;
}

.calligraphy-info {
    padding: 15px;
}

.calligraphy-info h4 {
    margin: 0 0 10px 0;
}

.calligraphy-info h4 a {
    text-decoration: none;
}

.calligraphy-info p {
    margin: 5px 0;
    font-size: 14px;
    color: #666;
}

.character-images-thumbnails {
    border-top: 1px solid #eee;
    padding: 10px 15px;
    background-color: #f9f9f9;
}

.character-images-thumbnails p {
    margin: 0 0 5px 0;
    font-size: 12px;
    color: #666;
}

.thumbnails-container {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.thumbnails-container img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border: 1px solid #ddd;
}

.loading {
    text-align: center;
    padding: 20px;
    color: #666;
}

.tab-content {
    padding: 20px;
    border: 1px solid #ddd;
    border-top: none;
    background-color: #fff;
}

.tab-section {
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}

.tab-section:last-child {
    border-bottom: none;
}

.tab-header {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #ddd;
    background-color: #f5f5f5;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    z-index: 100;
}

/*
.tab-link {
    padding: 12px 20px;
    cursor: pointer;
    border-right: 1px solid #ddd;
    border-bottom: 3px solid transparent;
}

.tab-link.active {
    background-color: #fff;
    border-bottom: 3px solid #0073aa;
    font-weight: bold;
}
    
.tab-link a {
    text-decoration: none;
    color: inherit;
}

.tab-link:hover:not(.active) {
    background-color: #e9e9e9;
}
*/

.related-content-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

/* 多音字详解样式 */
.pronunciation-list {
    margin-top: 20px;
}

.pronunciation-item {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
}

.pronunciation-item h4 {
    margin-top: 0;
    color: #0073aa;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.pronunciation-content {
    margin-bottom: 15px;
}

.pronunciation-examples h5 {
    margin-top: 15px;
    margin-bottom: 10px;
}

.pronunciation-examples ul {
    margin-top: 0;
    padding-left: 20px;
}

.pronunciation-examples li {
    margin-bottom: 5px;
}

.related-results {
    min-height: 100px;
}

.dictionary-grid, .idiom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.dictionary-item, .idiom-item {
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 10px;
    background-color: #fafafa;
}

.dictionary-item h5, .idiom-item h5 {
    margin: 0 0 5px 0;
}

.dictionary-item h5 a, .idiom-item h5 a {
    text-decoration: none;
    color: #333;
}

.dictionary-item p, .idiom-item p {
    margin: 5px 0;
    font-size: 13px;
    color: #666;
}

@media (max-width: 768px) {
    .related-content-container {
        grid-template-columns: 1fr;
    }
    
    .dictionary-grid, .idiom-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}
</style>

<?php
get_footer();
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 音频播放按钮功能
    document.querySelectorAll('.audio-play-button').forEach(function(button) {
        button.addEventListener('click', function() {
            var audioId = this.getAttribute('data-audio');
            var audio = document.getElementById(audioId);
            if (audio) {
                audio.play();
            }
        });
    });
});
</script>
