<?php
namespace FuseCommerce\Views\Admin\Settings;
if ( ! defined( 'ABSPATH' ) ) exit;

use FuseCommerce\Views\Admin\Settings\BaseView;
use FuseCommerce\Views\Admin\Settings\IView;
use FuseCommerce\Helpers\FilterConfigHelper;
use FuseCommerce\Utils\OptionUtils;

class Filters extends BaseView implements IView {

    public function render(): void {
        $options_group = OptionUtils::OPTION_GROUP_SLUG;
        $hasIndexingData = FilterConfigHelper::hasIndexingData();
        
        ?>

        <!-- Warning if indexing data doesn't exist -->
        <?php if (!$hasIndexingData): ?>
        <div class="alert alert-warning alert-dismissible fade show" role="alert" id="filter-warning-banner">
            <i class="bi bi-exclamation-triangle-fill me-2"></i>
            <strong><?php esc_html_e('Indexing Required:', 'ftlcommerce-instant-product-search'); ?></strong>
            <?php esc_html_e('Filter configuration requires indexed data. Please run product indexing first.', 'ftlcommerce-instant-product-search'); ?>
            <a href="#indexing-tab" class="alert-link ms-2" onclick="event.preventDefault(); document.querySelector('[data-bs-target=\'#indexing-tab\']')?.click();">
                <?php esc_html_e('Go to Indexing', 'ftlcommerce-instant-product-search'); ?>
            </a>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        <?php endif; ?>

        <!-- Filter Configuration Section -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><?php esc_html_e('Frontend Filter Components', 'ftlcommerce-instant-product-search'); ?></h5>
                <button type="button" class="btn btn-sm btn-outline-primary" id="btn-refresh-filters">
                    <i class="bi bi-arrow-clockwise"></i>
                    <?php esc_html_e('Refresh from Index', 'ftlcommerce-instant-product-search'); ?>
                </button>
            </div>
            <div class="card-body">
                <p class="text-muted">
                    <?php esc_html_e('Drag and drop to reorder filter components. Uncheck "Show in Frontend" to hide specific filters from the frontend.', 'ftlcommerce-instant-product-search'); ?>
                </p>

                <!-- Loading state -->
                <div id="filter-loading-state" style="display: none;">
                    <div class="d-flex align-items-center">
                        <div class="spinner-border spinner-border-sm me-2" role="status">
                            <span class="visually-hidden"><?php esc_html_e('Loading...', 'ftlcommerce-instant-product-search'); ?></span>
                        </div>
                        <span><?php esc_html_e('Loading filter configuration...', 'ftlcommerce-instant-product-search'); ?></span>
                    </div>
                </div>

                <!-- Filter ordering list -->
                <div id="filter-ordering-container" style="display: none;">
                    <ul id="filter-ordering-list" class="list-group">
                        <!-- Items will be populated via JavaScript -->
                    </ul>

                    <!-- Hidden input to store configuration for form submission -->
                    <input type="hidden"
                           name="<?php echo esc_attr("{$options_group}[filter_components]"); ?>"
                           id="filter-components-data"
                           value="">
                </div>

                <!-- Empty state -->
                <div id="filter-empty-state" style="display: none;">
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle me-2"></i>
                        <?php esc_html_e('No filter components found. Please run indexing first.', 'ftlcommerce-instant-product-search'); ?>
                    </div>
                </div>
                
            </div>
        </div>

        <!-- Save button -->
        <div class="row">
            <div class="col-md-12">
                <?php $this->renderSettingsSaveBtn(); ?>
            </div>
        </div>
        <?php
    }
}
