<?php
/**
 * 博物馆聚合页面模板
 * 展示所有博物馆的列表
 */

get_header();

// 获取搜索关键词
$search_query = isset($_GET['s']) ? sanitize_text_field($_GET['s']) : '';

// 获取所有博物馆
$args = array(
    'post_type' => 'chinese_museum',
    'post_status' => 'publish',
    'numberposts' => -1,
    'orderby' => 'title',
    'order' => 'ASC'
);

// 如果有搜索关键词，则添加搜索条件
if (!empty($search_query)) {
    $args['s'] = $search_query;
}

$museums = get_posts($args);

// 按地区分组博物馆
$museums_by_location = array();
foreach ($museums as $museum) {
    $location = get_post_meta($museum->ID, '_museum_location', true);
    if (empty($location)) {
        $location = '未指定地区';
    }
    
    if (!isset($museums_by_location[$location])) {
        $museums_by_location[$location] = array();
    }
    
    $museums_by_location[$location][] = $museum;
}
?>

<div class="museum-archive-container">
    <header class="page-header">
        <h1 class="page-title">博物馆名录</h1>
        <p class="page-description">以下为收录的所有博物馆，按地区分组展示</p>
        
        <!-- 添加搜索框 -->
        <div class="museum-search-form">
            <form method="GET" action="<?php echo esc_url(home_url('/museum')); ?>">
                <input type="text" 
                       name="s" 
                       placeholder="搜索博物馆..." 
                       value="<?php echo esc_attr($search_query); ?>"
                       class="museum-search-input">
                <button type="submit" class="museum-search-button">搜索</button>
                
                <?php if (!empty($search_query)): ?>
                    <a href="<?php echo esc_url(home_url('/museum')); ?>" class="museum-search-clear">清除搜索</a>
                <?php endif; ?>
            </form>
            
            <?php if (!empty($search_query)): ?>
                <p class="search-results-info">
                    <?php 
                    $total_museums = count($museums);
                    echo sprintf('找到 %d 个匹配 "%s" 的博物馆', $total_museums, esc_html($search_query));
                    ?>
                </p>
            <?php endif; ?>
        </div>
    </header>

    <?php if (!empty($museums_by_location)): ?>
        <div class="museum-archive-content">
            <?php foreach ($museums_by_location as $location => $location_museums): ?>
                <section class="museum-location-section">
                    <h2 class="location-title"><?php echo esc_html($location); ?></h2>
                    <div class="museums-grid">
                        <?php foreach ($location_museums as $museum): 
                            $founded_year = get_post_meta($museum->ID, '_museum_founded_year', true);
                            $director = get_post_meta($museum->ID, '_museum_director', true);
                        ?>
                            <div class="museum-item">
                                <div class="museum-item-content">
                                    <?php if (has_post_thumbnail($museum->ID)): ?>
                                        <div class="museum-thumbnail">
                                            <a href="<?php echo get_permalink($museum->ID); ?>">
                                                <?php echo get_the_post_thumbnail($museum->ID, 'medium'); ?>
                                            </a>
                                        </div>
                                    <?php endif; ?>
                                    
                                    <div class="museum-info">
                                        <h3 class="museum-title">
                                            <a href="<?php echo get_permalink($museum->ID); ?>">
                                                <?php echo esc_html($museum->post_title); ?>
                                            </a>
                                        </h3>
                                        
                                        <?php if ($founded_year || $director): ?>
                                            <div class="museum-meta">
                                                <?php if ($founded_year): ?>
                                                    <span class="founded-year">建立年份: <?php echo esc_html($founded_year); ?></span>
                                                <?php endif; ?>
                                                
                                                <?php if ($director): ?>
                                                    <span class="director">馆长: <?php echo esc_html($director); ?></span>
                                                <?php endif; ?>
                                            </div>
                                        <?php endif; ?>
                                        
                                        <div class="museum-excerpt">
                                            <?php 
                                            $excerpt = wp_trim_words($museum->post_content, 20, '...');
                                            echo esc_html($excerpt);
                                            ?>
                                        </div>
                                        
                                        <div class="museum-link">
                                            <a href="<?php echo get_permalink($museum->ID); ?>" class="button">查看详情</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </section>
            <?php endforeach; ?>
        </div>
    <?php else: ?>
        <div class="no-museums">
            <p><?php echo !empty($search_query) ? '未找到匹配的博物馆。' : '暂无博物馆信息。'; ?></p>
        </div>
    <?php endif; ?>
</div>

<style>
.museum-archive-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.page-header {
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.page-title {
    font-size: 2.5em;
    color: #333;
    margin: 0 0 10px;
}

.page-description {
    font-size: 1.1em;
    color: #666;
    margin: 0 0 20px;
}

.museum-search-form {
    margin: 20px 0;
}

.museum-search-form form {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.museum-search-input {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    min-width: 300px;
    max-width: 500px;
}

.museum-search-button {
    padding: 10px 20px;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.museum-search-button:hover {
    background-color: #005a87;
}

.museum-search-clear {
    padding: 10px 15px;
    background-color: #f7f7f7;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    font-size: 16px;
}

.museum-search-clear:hover {
    background-color: #e0e0e0;
}

.search-results-info {
    margin-top: 15px;
    color: #666;
    font-style: italic;
}

.museum-location-section {
    margin-bottom: 50px;
}

.location-title {
    font-size: 1.8em;
    color: #444;
    border-left: 4px solid #0073aa;
    padding-left: 15px;
    margin: 0 0 20px;
}

.museums-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.museum-item {
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.museum-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.museum-item-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.museum-thumbnail {
    height: 200px;
    overflow: hidden;
}

.museum-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.museum-placeholder {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    color: #999;
    font-size: 3em;
}

.museum-info {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.museum-title {
    margin: 0 0 15px;
    font-size: 1.3em;
}

.museum-title a {
    text-decoration: none;
    color: #333;
}

.museum-title a:hover {
    color: #0073aa;
}

.museum-meta {
    margin-bottom: 15px;
    font-size: 0.9em;
    color: #666;
}

.museum-meta span {
    display: block;
    margin-bottom: 5px;
}

.museum-excerpt {
    margin-bottom: 20px;
    color: #555;
    flex-grow: 1;
}

.museum-link .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0073aa;
    color: white;
    text-decoration: none;
    border-radius: 3px;
    transition: background-color 0.3s ease;
    text-align: center;
}

.museum-link .button:hover {
    background-color: #005a87;
}

.no-museums {
    text-align: center;
    padding: 50px 0;
    color: #666;
}

@media (max-width: 768px) {
    .museums-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }
    
    .page-title {
        font-size: 2em;
    }
    
    .location-title {
        font-size: 1.5em;
    }
    
    .museum-search-form form {
        flex-direction: column;
        align-items: center;
    }
    
    .museum-search-input {
        min-width: auto;
        width: 100%;
        max-width: 100%;
        margin-bottom: 10px;
    }
    
    .museum-search-button,
    .museum-search-clear {
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
    }
}
</style>

<?php get_footer(); ?>