<?php
defined('ABSPATH') || exit;

add_action('init', 'cf_resource_search_register_block');

function cf_resource_search_register_block() {
    register_block_type(CF_RESOURCE_SEARCH_PATH . 'src', [
        'render_callback' => 'cf_resource_search_render',
    ]);
}

function cf_resource_search_render($attributes) {
    // Get postsPerPage from attributes, default to 9
    $posts_per_page = isset($attributes['postsPerPage']) ? absint($attributes['postsPerPage']) : 9;

    // Enqueue frontend assets
    wp_enqueue_style(
        'cf-resource-search-frontend',
        CF_RESOURCE_SEARCH_URL . 'assets/frontend.css',
        [],
        CF_RESOURCE_SEARCH_VERSION
    );
    wp_enqueue_script(
        'cf-resource-search-frontend',
        CF_RESOURCE_SEARCH_URL . 'assets/frontend.js',
        [],
        CF_RESOURCE_SEARCH_VERSION,
        true
    );
    wp_localize_script('cf-resource-search-frontend', 'cfResourceSearch', [
        'restUrl'     => rest_url('cf-resource-search/v1/filter'),
        'nonce'       => wp_create_nonce('wp_rest'),
        'postsPerPage'=> $posts_per_page,
    ]);

    // Get taxonomy terms for dropdowns
    $topics = get_terms(['taxonomy' => 'topic', 'hide_empty' => true, 'orderby' => 'name']);
    $services = get_terms(['taxonomy' => 'resource-service', 'hide_empty' => true, 'orderby' => 'name']);
    $types = get_terms(['taxonomy' => 'resource-type', 'hide_empty' => true, 'orderby' => 'name']);

    ob_start();
    ?>
    <div class="cf-resource-search-block" data-rest-url="<?php echo esc_url(rest_url('cf-resource-search/v1/filter')); ?>" data-per-page="<?php echo esc_attr($posts_per_page); ?>">
        <div class="cf-filter-bar">
            <div class="cf-filter-item cf-filter-search">
                <label for="cf-filter-search">Search</label>
                <input type="text" id="cf-filter-search" class="cf-filter-input" placeholder="Keywords, title, topic...">
            </div>
            <div class="cf-filter-item">
                <label for="cf-filter-topic">Topic</label>
                <select id="cf-filter-topic" class="cf-filter-select">
                    <option value="">All Topics</option>
                    <?php if (!is_wp_error($topics) && !empty($topics)): ?>
                        <?php foreach ($topics as $term): ?>
                            <option value="<?php echo esc_attr($term->slug); ?>"><?php echo esc_html($term->name); ?></option>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </select>
            </div>
            <div class="cf-filter-item">
                <label for="cf-filter-service">Service</label>
                <select id="cf-filter-service" class="cf-filter-select">
                    <option value="">All Services</option>
                    <?php if (!is_wp_error($services) && !empty($services)): ?>
                        <?php foreach ($services as $term): ?>
                            <option value="<?php echo esc_attr($term->slug); ?>"><?php echo esc_html($term->name); ?></option>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </select>
            </div>
            <div class="cf-filter-item">
                <label for="cf-filter-type">Resource Type</label>
                <select id="cf-filter-type" class="cf-filter-select">
                    <option value="">All Types</option>
                    <?php if (!is_wp_error($types) && !empty($types)): ?>
                        <?php foreach ($types as $term): ?>
                            <option value="<?php echo esc_attr($term->slug); ?>"><?php echo esc_html($term->name); ?></option>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </select>
            </div>
            <div class="cf-filter-actions">
                <button class="cf-filter-btn" type="button">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="18" height="18">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                    Search
                </button>
                <button class="cf-filter-reset" type="button">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="16" height="16">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                    Reset
                </button>
            </div>
        </div>

        <!-- Results container — populated via AJAX -->
        <div class="cf-resource-results">
            <div class="cf-resource-results-grid">
                <!-- Posts loaded here via JS -->
            </div>
            <div class="cf-resource-results-status"></div>
            <button class="cf-load-more-btn" type="button" style="display:none;">Load More</button>
        </div>
    </div>
    <?php
    return ob_get_clean();
}
