<?php
/**
 * 专业的汉字字典搜索页面模板
 *
 * @package Chinese-Character-Dictionary
 */

get_header(); ?>

<div class="professional-search-wrapper">
    <div class="professional-search-container">
        <div class="professional-search-header">
            <h1></h1>
            <p></p>
        </div>
        
        <div class="professional-search-form-wrapper">
            <form id="professional-search-form" class="professional-search-form" method="get" action="<?php echo esc_url(home_url('/')); ?>">
                <div class="search-input-group">
                    <input 
                        type="text" 
                        id="professional-search-input" 
                        name="s" 
                        placeholder="请输入汉字、词语或成语..." 
                        value="<?php echo get_search_query(); ?>"
                        autocomplete="off"
                    >
                    <button type="submit" class="search-submit-button">
                        <span class="search-icon">🔍</span>
                        <span class="search-text">搜索</span>
                    </button>
                </div>
                
                <!-- 移除搜索类型选择，系统会自动识别 -->
            </form>
            
            <!-- 添加拼音检索和部首检索选项 -->
            <div class="search-options-direct">
                <p class="search-options-text">或者通过以下方式查找汉字：</p>
                <div class="search-options-buttons">
                    <a href="<?php echo home_url('/pinyin-index'); ?>" class="search-option-button pinyin-option">
                        拼音检索
                    </a>
                    <a href="<?php echo home_url('/radical-index'); ?>" class="search-option-button radical-option">
                        部首检索
                    </a>
                </div>
            </div>
            
            <!-- 推荐内容区域 -->
            <?php
            $recommended_content = get_option('chinese_character_recommended_content', array(
                'characters' => array(),
                'words' => array(),
                'idioms' => array(),
                'ancient_texts' => array(),
                'calligraphies' => array(),
                'posts' => array(),
                'pages' => array()
            ));
            
            // 检查是否有任何推荐内容
            $has_recommended_content = false;
            foreach ($recommended_content as $content_type => $content_ids) {
                if (!empty($content_ids)) {
                    $has_recommended_content = true;
                    break;
                }
            }
            
            if ($has_recommended_content) : ?>
            <div class="recommended-content">
                <h3>推荐内容</h3>
                
                <?php if (!empty($recommended_content['characters'])) : ?>
                <div class="recommended-section">
                    <h4>推荐汉字</h4>
                    <div class="recommended-characters recommended-items">
                        <?php foreach ($recommended_content['characters'] as $char_id) : 
                            $char_post = get_post($char_id);
                            if ($char_post && $char_post->post_status === 'publish') :
                                $pinyin = get_post_meta($char_id, '_character_pinyin', true);
                        ?>
                            <a href="<?php echo get_permalink($char_id); ?>" class="recommended-character recommended-item">
                                <span class="char"><?php echo esc_html($char_post->post_title); ?></span>
                                <span class="pinyin"><?php echo esc_html($pinyin); ?></span>
                            </a>
                        <?php endif; endforeach; ?>
                    </div>
                </div>
                <?php endif; ?>
                
                <?php if (!empty($recommended_content['words'])) : ?>
                <div class="recommended-section">
                    <h4>推荐词语</h4>
                    <div class="recommended-words recommended-items">
                        <?php foreach ($recommended_content['words'] as $word_id) : 
                            $word_post = get_post($word_id);
                            if ($word_post && $word_post->post_status === 'publish') :
                                $pinyin = get_post_meta($word_id, '_dictionary_pinyin', true);
                        ?>
                            <a href="<?php echo get_permalink($word_id); ?>" class="recommended-word recommended-item">
                                <span class="word"><?php echo esc_html($word_post->post_title); ?></span>
                                <span class="pinyin"><?php echo esc_html($pinyin); ?></span>
                            </a>
                        <?php endif; endforeach; ?>
                    </div>
                </div>
                <?php endif; ?>
                
                <?php if (!empty($recommended_content['idioms'])) : ?>
                <div class="recommended-section">
                    <h4>推荐成语</h4>
                    <div class="recommended-idioms recommended-items">
                        <?php foreach ($recommended_content['idioms'] as $idiom_id) : 
                            $idiom_post = get_post($idiom_id);
                            if ($idiom_post && $idiom_post->post_status === 'publish') :
                                $pinyin = get_post_meta($idiom_id, '_idiom_pinyin', true);
                        ?>
                            <a href="<?php echo get_permalink($idiom_id); ?>" class="recommended-idiom recommended-item">
                                <span class="idiom"><?php echo esc_html($idiom_post->post_title); ?></span>
                                <span class="pinyin"><?php echo esc_html($pinyin); ?></span>
                            </a>
                        <?php endif; endforeach; ?>
                    </div>
                </div>
                <?php endif; ?>
                
                <?php if (!empty($recommended_content['ancient_texts'])) : ?>
                <div class="recommended-section">
                    <h4>推荐古籍</h4>
                    <div class="recommended-ancient-texts recommended-items">
                        <?php foreach ($recommended_content['ancient_texts'] as $ancient_text_id) : 
                            $ancient_text_post = get_post($ancient_text_id);
                            if ($ancient_text_post && $ancient_text_post->post_status === 'publish') :
                        ?>
                            <a href="<?php echo get_permalink($ancient_text_id); ?>" class="recommended-ancient-text recommended-item">
                                <span class="ancient-text"><?php echo esc_html($ancient_text_post->post_title); ?></span>
                            </a>
                        <?php endif; endforeach; ?>
                    </div>
                </div>
                <?php endif; ?>
                
                <?php if (!empty($recommended_content['calligraphies'])) : ?>
                <div class="recommended-section">
                    <h4>推荐书法作品</h4>
                    <div class="recommended-calligraphies recommended-items">
                        <?php foreach ($recommended_content['calligraphies'] as $calligraphy_id) : 
                            $calligraphy_post = get_post($calligraphy_id);
                            if ($calligraphy_post && $calligraphy_post->post_status === 'publish') :
                        ?>
                            <a href="<?php echo get_permalink($calligraphy_id); ?>" class="recommended-calligraphy recommended-item">
                                <span class="calligraphy"><?php echo esc_html($calligraphy_post->post_title); ?></span>
                            </a>
                        <?php endif; endforeach; ?>
                    </div>
                </div>
                <?php endif; ?>
                
                <?php if (!empty($recommended_content['posts'])) : ?>
                <div class="recommended-section">
                    <h4>推荐文章</h4>
                    <div class="recommended-posts recommended-items">
                        <?php foreach ($recommended_content['posts'] as $post_id) : 
                            $post_item = get_post($post_id);
                            if ($post_item && $post_item->post_status === 'publish') :
                        ?>
                            <a href="<?php echo get_permalink($post_id); ?>" class="recommended-post recommended-item">
                                <span class="post"><?php echo esc_html($post_item->post_title); ?></span>
                            </a>
                        <?php endif; endforeach; ?>
                    </div>
                </div>
                <?php endif; ?>
                
                <?php if (!empty($recommended_content['pages'])) : ?>
                <div class="recommended-section">
                    <h4>推荐页面</h4>
                    <div class="recommended-pages recommended-items">
                        <?php foreach ($recommended_content['pages'] as $page_id) : 
                            $page_item = get_post($page_id);
                            if ($page_item && $page_item->post_status === 'publish') :
                        ?>
                            <a href="<?php echo get_permalink($page_id); ?>" class="recommended-page recommended-item">
                                <span class="page"><?php echo esc_html($page_item->post_title); ?></span>
                            </a>
                        <?php endif; endforeach; ?>
                    </div>
                </div>
                <?php endif; ?>
            </div>
            <?php endif; ?>
            <!-- /推荐内容区域 -->
        </div>
        
        <div class="search-instructions">
            <h3>使用说明</h3>
            <ul>
                <li>输入单个汉字（如：一、二、三）可直接查看详细解释</li>
                <li>输入词语（如：风和日丽）可直接查看词语解释</li>
                <li>输入成语（如：一帆风顺）可直接查看成语解释</li>
                <li>选择不同的搜索类型可精确查找相应内容</li>
            </ul>
        </div>
    </div>
</div>

<style>
.professional-search-wrapper {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.professional-search-container {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 40px;
}

.professional-search-header {
    text-align: center;
    margin-bottom: 30px;
}

.professional-search-header h1 {
    font-size: 2.2em;
    color: #333;
    margin-bottom: 10px;
}

.professional-search-header p {
    font-size: 1.1em;
    color: #666;
}

.professional-search-form-wrapper {
    margin-bottom: 30px;
}

.search-input-group {
    display: flex;
    border: 2px solid #3498db;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.2);
}

#professional-search-input {
    flex: 1;
    padding: 15px 25px;
    border: none;
    font-size: 1.1em;
    outline: none;
}

.search-submit-button {
    background: #3498db;
    color: white;
    border: none;
    padding: 0 30px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-submit-button:hover {
    background: #2980b9;
}

/* 推荐内容区域样式 */
.recommended-content {
    margin: 20px 0;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.recommended-content h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
    font-size: 1.1em;
}

.recommended-section {
    margin-bottom: 20px;
}

.recommended-section:last-child {
    margin-bottom: 0;
}

.recommended-section h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #555;
    font-size: 1em;
}

.recommended-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.recommended-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    background: white;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    min-width: 60px;
}

.recommended-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.recommended-character .char,
.recommended-word .word,
.recommended-idiom .idiom,
.recommended-ancient-text .ancient-text,
.recommended-calligraphy .calligraphy {
    font-size: 1.5em;
    font-weight: bold;
    color: #3498db;
}

.recommended-item .pinyin {
    font-size: 0.8em;
    color: #666;
    margin-top: 5px;
}

/* 新添加的样式 */
.search-options-direct {
    text-align: center;
    margin-top: 20px;
}

.search-options-text {
    margin-bottom: 15px;
    color: #666;
    font-size: 0.95em;
}

.search-options-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.search-option-button {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 2px solid #3498db;
}

.search-option-button.pinyin-option {
    background: #fff;
    color: #3498db;
}

.search-option-button.pinyin-option:hover {
    background: #3498db;
    color: #fff;
}

.search-option-button.radical-option {
    background: #3498db;
    color: #fff;
}

.search-option-button.radical-option:hover {
    background: #2980b9;
    border-color: #2980b9;
}

.search-type-selector {
    display: inline-flex;
    background: #f8f9fa;
    border-radius: 30px;
    padding: 5px;
}

.search-type-option {
    display: flex;
    align-items: center;
    margin: 0 5px;
}

.search-type-option input {
    display: none;
}

.search-type-option span {
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.search-type-option input:checked + span {
    background: #3498db;
    color: white;
}

.search-type-option input:not(:checked) + span:hover {
    background: #e9ecef;
}

.search-instructions {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
}

.search-instructions h3 {
    margin-top: 0;
    color: #333;
}

.search-instructions ul {
    padding-left: 20px;
    margin-bottom: 0;
}

.search-instructions li {
    margin-bottom: 8px;
    color: #555;
}

@media (max-width: 768px) {
    .professional-search-container {
        padding: 20px;
    }
    
    .professional-search-header h1 {
        font-size: 1.8em;
    }
    
    .search-input-group {
        flex-direction: column;
        border-radius: 10px;
    }
    
    #professional-search-input {
        padding: 15px;
        border-radius: 0;
    }
    
    .search-submit-button {
        padding: 15px;
        justify-content: center;
    }
    
    .search-type-selector {
        flex-wrap: wrap;
    }
    
    .search-options-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .search-option-button {
        width: 80%;
        margin-bottom: 10px;
    }
}
</style>

<?php get_footer(); ?>