<?php if ( ! defined( 'ABSPATH' ) ) { exit; }
$import_id = isset($_GET['import_id']) ? absint($_GET['import_id']) : 0;
?>

<div class="mt_primelink-summary-eyebrow"><?php esc_html_e( 'Step 4 · Filters', 'primelink' ); ?></div>
<h2><?php esc_html_e( 'Filters & File Preview', 'primelink' ); ?></h2>
<input type="hidden" id="mt-primelink-step" value="4">

<div class="mt-primelink-two-col mt_primelink-filters-shell">
    <div class="col glass mt_primelink-card--glass mt_primelink-filters-card">
            <div class="mt_primelink-card-header">
                <div>
                    <div class="mt_primelink-summary-eyebrow"><?php esc_html_e( 'XML Scope', 'primelink' ); ?></div>
                    <h3 style="margin:4px 0 0;"><?php esc_html_e( 'XPath (XML only)', 'primelink' ); ?></h3>
                </div>
                <span class="mt_primelink-summary-pill alt"><?php esc_html_e( 'Parser', 'primelink' ); ?></span>
            </div>
            <div class="mt_primelink-card-body">
                <div class="mt_primelink-xml-root-row">
                    <label class="mt_primelink-form-row" style="flex:1;">
                        <span class="mt_primelink-label"><?php esc_html_e( 'Detected roots', 'primelink' ); ?></span>
                        <select id="mt_primelink-xml-root" aria-label="<?php esc_attr_e( 'Detected XML roots', 'primelink' ); ?>">
                            <option value=""><?php esc_html_e( 'Select root...', 'primelink' ); ?></option>
                        </select>
                    </label>
                    <button type="button" class="button" id="mt_primelink-detect-xml-roots"><?php esc_html_e( 'Detect', 'primelink' ); ?></button>
                </div>
                <label class="mt_primelink-form-row">
                    <span class="mt_primelink-label"><?php esc_html_e( 'Root node path', 'primelink' ); ?></span>
                    <input type="text" id="mt-primelink-xpath" name="xpath" placeholder="/downloads/download">
                    <small class="description"><?php esc_html_e( 'Leave empty to auto-detect items.', 'primelink' ); ?></small>
                </label>
            </div>

            <div class="mt_primelink-card-header" style="margin-top:6px;">
                <div>
                    <div class="mt_primelink-summary-eyebrow"><?php esc_html_e( 'Filters', 'primelink' ); ?></div>
                <h3 style="margin:4px 0 0;"><?php esc_html_e( 'Filter builder', 'primelink' ); ?></h3>
            </div>
            <span class="mt_primelink-summary-pill"><?php esc_html_e( 'Phase 2', 'primelink' ); ?></span>
            </div>
            <div class="mt_primelink-card-body">
                <div class="mt_primelink-filter-placeholder">
                    <div class="mt_primelink-filter-badge"><?php esc_html_e( 'READY', 'primelink' ); ?></div>
                    <p class="muted">
                        <?php esc_html_e( 'Design your conditions visually. Complex AND/OR logic, field comparisons, and value transforms will be available in the next phase.', 'primelink' ); ?>
                    </p>
                    <div id="mt_primelink-xml-tags" class="mt_primelink-xml-tags"></div>

                    <div class="mt_primelink-filter-builder">
                        <div class="mt_primelink-filter-builder__header">
                            <div style="display:flex;align-items:center;gap:8px;">
                                <strong><?php esc_html_e( 'Quick Filters', 'primelink' ); ?></strong>
                                <span class="mt_primelink-filter-pill" id="mt_primelink-filter-active-count" style="display:none;"></span>
                            </div>
                            <div class="mt_primelink-filter-actions">
                                <select id="mt_primelink-filter-presets" class="mt_primelink-filter-select">
                                    <option value=""><?php esc_html_e( 'Presets', 'primelink' ); ?></option>
                                </select>
                                <button type="button" class="button" id="mt_primelink-filter-preset-load"><?php esc_html_e( 'Load', 'primelink' ); ?></button>
                                <button type="button" class="button" id="mt_primelink-filter-preset-save"><?php esc_html_e( 'Save', 'primelink' ); ?></button>
                                <button type="button" class="button" id="mt_primelink-filter-preset-delete"><?php esc_html_e( 'Delete', 'primelink' ); ?></button>
                                <button type="button" class="button" id="mt_primelink-add-filter-row"><?php esc_html_e( 'Add condition', 'primelink' ); ?></button>
                            </div>
                        </div>
                        <div id="mt_primelink-filter-rows" class="mt_primelink-filter-rows"></div>
                        <div id="mt_primelink-filter-notice" class="mt_primelink-filter-notice" style="display:none;"></div>
                        <p class="muted" style="margin-top:6px;"><?php esc_html_e( 'Click a detected tag to prefill a condition.', 'primelink' ); ?></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col glass mt_primelink-card--glass">
        <div class="mt_primelink-card-header">
            <div>
                <div class="mt_primelink-summary-eyebrow"><?php esc_html_e( 'Data Check', 'primelink' ); ?></div>
                <div class="mt_primelink-title-inline">
                    <h3 style="margin:4px 0;"><?php esc_html_e( 'File Data Preview', 'primelink' ); ?></h3>
                    <span class="mt_primelink-summary-pill mt_primelink-live-pill mt_primelink-live-pill--small"><?php esc_html_e( 'Live rows', 'primelink' ); ?></span>
                </div>
            </div>
            <div class="mt_primelink-preview-controls">
                <div class="mt_primelink-preview-pages">
                    <label class="mt_primelink-preview-limit" style="margin-right:6px;">
                        <input type="number" id="mt_primelink-preview-limit" value="20" min="1" max="200">
                    </label>
                    <button type="button" class="button" id="mt_primelink-preview-page-prev"><?php esc_html_e( 'Page -', 'primelink' ); ?></button>
                    <span class="muted" id="mt_primelink-preview-page-label">1/1</span>
                    <button type="button" class="button" id="mt_primelink-preview-page-next"><?php esc_html_e( 'Page +', 'primelink' ); ?></button>
                </div>
            </div>
        </div>

        <div class="mt_primelink-card-body">
            <div id="mt-primelink-preview" class="mt_primelink-preview-card muted"
                 data-import-id="<?php echo (int) $import_id; ?>">
                <?php esc_html_e( 'Loading preview...', 'primelink' ); ?>
            </div>
        </div>
    </div>
</div>

