<?php
/*
Theme Name: SWELL Child
Theme URI: https://swell-theme.com/
Template: swell
Author: LOOS,Inc.
Author URI: https://loos.co.jp/
Description: SWELL Child Theme
Version: 1.0.0
*/

function oyabiyo_blog_shortcode() {
    $current_cat = isset($_GET['cat']) ? intval($_GET['cat']) : 0;
    $current_tag = isset($_GET['tag']) ? sanitize_text_field($_GET['tag']) : '';
    $current_s   = isset($_GET['s'])   ? sanitize_text_field($_GET['s'])   : '';
    $paged       = isset($_GET['blog_page']) ? max(1, intval($_GET['blog_page'])) : 1;

    $categories = get_categories(['orderby' => 'name', 'order' => 'ASC', 'hide_empty' => true]);
    $tags       = get_tags(['orderby' => 'name', 'order' => 'ASC', 'hide_empty' => true]);
    $base_url   = get_permalink();

    $args = [
        'post_type'      => 'post',
        'post_status'    => 'publish',
        'posts_per_page' => 9,
        'paged'          => $paged,
    ];
    if ($current_cat > 0)    $args['cat'] = $current_cat;
    if ($current_tag !== '') $args['tag'] = $current_tag;
    if ($current_s !== '')   $args['s']   = $current_s;

    $query = new WP_Query($args);

    ob_start();
    ?>
    <div class="oyb-wrap">
        <div class="oyb-search-box">
            <div class="oyb-section">
                <span class="oyb-label">カテゴリー</span>
                <div class="oyb-btn-group">
                    <a href="<?php echo esc_url(remove_query_arg(['cat','tag','s','blog_page'], $base_url)); ?>"
                       class="oyb-btn oyb-btn--cat <?php echo ($current_cat===0 && $current_tag==='') ? 'is-active' : ''; ?>">すべて</a>
                    <?php foreach ($categories as $cat) : ?>
                        <a href="<?php echo esc_url(add_query_arg(['cat'=>$cat->term_id,'s'=>$current_s], remove_query_arg(['tag','blog_page'], $base_url))); ?>"
                           class="oyb-btn oyb-btn--cat <?php echo ($current_cat===$cat->term_id) ? 'is-active' : ''; ?>">
                            <?php echo esc_html($cat->name); ?>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>
            <?php if (!empty($tags)) : ?>
            <div class="oyb-section">
                <span class="oyb-label">タグ</span>
                <div class="oyb-btn-group">
                    <?php foreach ($tags as $tag) : ?>
                        <a href="<?php echo esc_url(add_query_arg(['tag'=>$tag->slug,'s'=>$current_s], remove_query_arg(['cat','blog_page'], $base_url))); ?>"
                           class="oyb-btn oyb-btn--tag <?php echo ($current_tag===$tag->slug) ? 'is-active' : ''; ?>">
                            #<?php echo esc_html($tag->name); ?>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>
            <?php endif; ?>
            <div class="oyb-section">
                <span class="oyb-label">キーワード</span>
                <form class="oyb-form" method="get" action="<?php echo esc_url($base_url); ?>">
                    <?php if ($current_cat > 0) : ?><input type="hidden" name="cat" value="<?php echo $current_cat; ?>"><?php endif; ?>
                    <?php if ($current_tag !== '') : ?><input type="hidden" name="tag" value="<?php echo esc_attr($current_tag); ?>"><?php endif; ?>
                    <div class="oyb-input-wrap">
                        <input type="search" name="s" class="oyb-input" placeholder="キーワードで探す..." value="<?php echo esc_attr($current_s); ?>">
                        <button type="submit" class="oyb-submit">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <?php if ($query->have_posts()) : ?>
            <div class="oyb-grid">
                <?php while ($query->have_posts()) : $query->the_post(); ?>
                    <a href="<?php the_permalink(); ?>" class="oyb-card">
                        <div class="oyb-card__thumb">
                            <?php if (has_post_thumbnail()) : ?>
                                <?php the_post_thumbnail('medium', ['loading' => 'lazy']); ?>
                            <?php else : ?>
                                <div class="oyb-card__no-img">🌸</div>
                            <?php endif; ?>
                        </div>
                        <div class="oyb-card__body">
                            <div class="oyb-card__cats">
                                <?php foreach (array_slice(get_the_category(), 0, 2) as $pc) : ?>
                                    <span class="oyb-card__cat"><?php echo esc_html($pc->name); ?></span>
                                <?php endforeach; ?>
                            </div>
                            <h3 class="oyb-card__title"><?php the_title(); ?></h3>
                            <p class="oyb-card__date"><?php echo get_the_date('Y.m.d'); ?></p>
                        </div>
                    </a>
                <?php endwhile; ?>
            </div>
            <?php if ($query->max_num_pages > 1) : ?>
            <div class="oyb-pagination">
                <?php for ($i = 1; $i <= $query->max_num_pages; $i++) : ?>
                    <a href="<?php echo esc_url(add_query_arg('blog_page', $i, $base_url)); ?>"
                       class="oyb-page-btn <?php echo ($paged===$i) ? 'is-active' : ''; ?>"><?php echo $i; ?></a>
                <?php endfor; ?>
            </div>
            <?php endif; ?>
        <?php else : ?>
            <div class="oyb-empty"><p>😊 該当する記事が見つかりませんでした。</p></div>
        <?php endif; wp_reset_postdata(); ?>
    </div>

    <style>
    .oyb-wrap{max-width:900px;margin:0 auto}
    .oyb-search-box{background:#fff9fb;border:1.5px solid #f5c6d8;border-radius:16px;padding:24px 28px;margin-bottom:36px;box-shadow:0 2px 12px rgba(240,150,180,.10)}
    .oyb-section{margin-bottom:16px}.oyb-section:last-child{margin-bottom:0}
    .oyb-label{display:block;font-size:.75rem;font-weight:700;color:#c0607a;letter-spacing:.08em;margin-bottom:8px}
    .oyb-btn-group{display:flex;flex-wrap:wrap;gap:8px}
    .oyb-btn{display:inline-block;padding:6px 16px;border-radius:999px;font-size:.85rem;font-weight:600;text-decoration:none;transition:background .18s,color .18s,border-color .18s;white-space:nowrap}
    .oyb-btn--cat{border:1.5px solid #f0a0c0;background:#fff;color:#c0607a}
    .oyb-btn--cat:hover{background:#fce8f0;border-color:#e07090;color:#a0405a;text-decoration:none}
    .oyb-btn--cat.is-active{background:linear-gradient(135deg,#f28ab0,#e06080);border-color:transparent;color:#fff;box-shadow:0 2px 8px rgba(220,100,130,.25)}
    .oyb-btn--tag{border:1.5px solid #ddb0cc;background:#fff;color:#9a5070;font-size:.80rem;padding:5px 13px}
    .oyb-btn--tag:hover{background:#f5e0ee;border-color:#c080a0;color:#7a3050;text-decoration:none}
    .oyb-btn--tag.is-active{background:linear-gradient(135deg,#d090b8,#b06090);border-color:transparent;color:#fff}
    .oyb-form{margin:0}
    .oyb-input-wrap{display:flex;align-items:center;background:#fff;border:1.5px solid #f0a0c0;border-radius:999px;overflow:hidden;max-width:480px;transition:border-color .18s,box-shadow .18s}
    .oyb-input-wrap:focus-within{border-color:#e06080;box-shadow:0 0 0 3px rgba(240,130,160,.18)}
    .oyb-input{flex:1;border:none!important;outline:none!important;background:transparent;padding:10px 18px;font-size:.95rem;color:#555;box-shadow:none!important}
    .oyb-input::placeholder{color:#d0a0b0}
    .oyb-submit{background:linear-gradient(135deg,#f28ab0,#e06080);border:none;border-radius:0 999px 999px 0;color:#fff;padding:10px 18px;cursor:pointer;display:flex;align-items:center;transition:opacity .18s}
    .oyb-submit:hover{opacity:.85}
    .oyb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:36px}
    .oyb-card{background:#fff;border-radius:12px;overflow:hidden;border:1px solid #f0dde8;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s;display:block}
    .oyb-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(200,100,140,.14);text-decoration:none}
    .oyb-card__thumb{aspect-ratio:16/9;overflow:hidden;background:#fce8f0}
    .oyb-card__thumb img{width:100%;height:100%;object-fit:cover;display:block}
    .oyb-card__no-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2rem}
    .oyb-card__body{padding:14px 16px}
    .oyb-card__cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
    .oyb-card__cat{font-size:.7rem;font-weight:700;color:#e06080;background:#fff0f4;padding:2px 8px;border-radius:999px}
    .oyb-card__title{font-size:.9rem;font-weight:700;color:#333;line-height:1.5;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
    .oyb-card__date{font-size:.75rem;color:#b0a0a8;margin:0}
    .oyb-pagination{display:flex;gap:8px;justify-content:center;margin-bottom:20px}
    .oyb-page-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid #f0a0c0;background:#fff;color:#c0607a;font-size:.85rem;font-weight:700;text-decoration:none;transition:background .18s}
    .oyb-page-btn:hover{background:#fce8f0;text-decoration:none}
    .oyb-page-btn.is-active{background:linear-gradient(135deg,#f28ab0,#e06080);border-color:transparent;color:#fff}
    .oyb-empty{text-align:center;padding:48px 20px;color:#b0a0a8;font-size:.95rem;line-height:1.8}
    @media(max-width:768px){.oyb-grid{grid-template-columns:repeat(2,1fr);gap:16px}.oyb-search-box{padding:18px 16px}}
    @media(max-width:480px){.oyb-grid{grid-template-columns:1fr}.oyb-btn{font-size:.8rem;padding:5px 12px}}
    </style>
    <?php
    return ob_get_clean();
}
add_shortcode('oyabiyo_blog', 'oyabiyo_blog_shortcode');