<?php
/**
 * Step 5 - Field Mapping for Categories.
 *
 * @package PrimeLink
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

$import_id = isset( $_GET['import_id'] ) ? absint( $_GET['import_id'] ) : 0;

use PrimeLink\Helpers\TemplateHelper;
?>

<div class="mt_primelink-summary-eyebrow"><?php esc_html_e( 'Step 5 · Mapping', 'primelink' ); ?></div>
<h2><?php esc_html_e( 'Field Mapping Studio', 'primelink' ); ?></h2>
<input type="hidden" id="mt-primelink-step" value="5">

<!-- Templates -->
<section class="mt_primelink-card mt_primelink-card--glass mt_primelink-templates-card">
    <div class="mt_primelink-card-header">
        <h3>Load &amp; Save Settings</h3>
    </div>
    <div class="mt_primelink-card-body mt_primelink-templates-body">
        <div class="mt_primelink-template-row">
            <input type="text" id="mt_primelink-template-name" placeholder="Template name" />
            <button type="button" class="button button-primary" id="mt_primelink-save-template">Save</button>
        </div>
    </div>
</section>

<div class="mt_primelink-step mt_primelink-import-step-5" data-import-id="<?php echo esc_attr( $import_id ); ?>">

    <div class="mt_primelink-mapping-shell">

        <!-- Left panel: file fields -->
        <aside class="mt_primelink-fields-panel">
            <div class="mt_primelink-fields-header">
                <h3>File Fields</h3>
                <input type="search" id="mt_primelink-field-search" placeholder="Search field..." />
            </div>

            <div class="mt_primelink-field-list" id="mt-primelink-fields" data-import-id="<?php echo esc_attr( $import_id ); ?>">
                <div class="mt_primelink-loading">Loading fields...</div>
            </div>
        </aside>

        <!-- Right panel: mapping first, preview after -->
        <main class="mt_primelink-mapping-main">
            <div class="mt_primelink-template-row mt_primelink-template-row--actions">
                <input type="search" id="mt_primelink-target-search" placeholder="<?php esc_attr_e( 'Search target field...', 'primelink' ); ?>" aria-label="<?php esc_attr_e( 'Search target field', 'primelink' ); ?>">
                <select id="mt_primelink-load-template">
                    <option value="">Load existing template...</option>
                </select>
                <button type="button" class="button" id="mt_primelink-load-template-btn">Load</button>
                <button type="button" class="button mt_primelink-duplicate-btn" id="mt_primelink-duplicate-template">Duplicate</button>
            </div>
            <!-- Custom auto-map aliases -->
            <section class="mt_primelink-card mt_primelink-card--glass mt_primelink-alias-card">
                <div class="mt_primelink-card-header">
                    <div>
                        <h3>Auto-map Aliases</h3>
                        <div class="mt_primelink-groups-hint">Add custom synonyms for targets (e.g. Name: category_name, cat_name).</div>
                    </div>
                    <button type="button" class="button" id="mt_primelink-add-alias">Add alias</button>
                </div>
                <div class="mt_primelink-card-body" id="mt_primelink-alias-wrap">
                    <div class="mt_primelink-empty">No custom aliases yet.</div>
                </div>
            </section>

            <!-- Mapping groups -->
            <section class="mt_primelink-card mt_primelink-card--glass mt_primelink-groups-card">
                <div class="mt_primelink-card-header">
                    <div>
                        <h3>Field Mapping</h3>
                        <div class="mt_primelink-groups-hint">Drag fields from left into slots.</div>
                    </div>
                    <div class="mt_primelink-map-actions">
                        <button type="button" class="button" id="mt_primelink-auto-map"><?php esc_html_e( 'Auto-map', 'primelink' ); ?></button>
                        <button type="button" class="button" id="mt_primelink-clear-mapping">Clear all</button>
                        <span class="mt_primelink-unmapped-pill" id="mt_primelink-unmapped-count" style="display:none;"></span>
                    </div>
                </div>

                <div class="mt_primelink-card-body">

                    <div class="mt_primelink-helper-row">
                        <div class="mt_primelink-helper-card glass">
                            <div class="mt_primelink-helper-head">Required fields</div>
                            <div id="mt_primelink-required-status" class="mt_primelink-helper-status">Checking...</div>
                            <ul id="mt_primelink-required-list" class="mt_primelink-helper-list"></ul>
                        </div>
                        <div class="mt_primelink-helper-card glass">
                            <div class="mt_primelink-helper-head">
                                <span>Suggestions from sample row</span>
                            </div>
                            <div id="mt_primelink-suggestion-list" class="mt_primelink-helper-list"></div>
                        </div>
                    </div>

                    <!-- Basic Fields -->
                    <details class="mt_primelink-accordion">
                        <summary class="mt_primelink-accordion-title">Basic Fields</summary>
                        <div class="mt_primelink-accordion-body">
                            <?php TemplateHelper::render_import_slots( array(
                                'name'          => 'Category Name (Required)',
                                'slug'          => 'Slug',
                                'description'   => 'Description',
                                'parent'        => 'Parent Category',
                            ) ); ?>
                        </div>
                    </details>

                    <!-- Media & Display -->
                    <details class="mt_primelink-accordion">
                        <summary class="mt_primelink-accordion-title">Media & Display</summary>
                        <div class="mt_primelink-accordion-body">
                            <?php TemplateHelper::render_import_slots( array(
                                'thumbnail'     => 'Thumbnail Image (URL or ID)',
                                'display_type'  => 'Display Type',
                            ) ); ?>
                        </div>
                    </details>

                    <!-- Custom Fields -->
                    <details class="mt_primelink-accordion">
                        <summary class="mt_primelink-accordion-title">Custom Fields</summary>
                        <div class="mt_primelink-accordion-body">
                            <div id="mt_primelink-custom-fields-wrap"></div>
                            <button type="button" class="button" id="mt_primelink-add-custom-field">Add Custom Field</button>
                            <p class="description">Create custom meta mapping (key/value).</p>
                        </div>
                    </details>

                    <?php
                    // Shared integrations mapping (Yoast, etc.).
                    include MT_PRIMELINK_PATH . 'templates/admin/imports/partials/integrations-mapping.php';
                    ?>

                </div>
            </section>

            <!-- Preview (vertical, row navigator) -->
            <div id="mt-primelink-item-preview"
                 class="mt_primelink-preview-card"
                 data-import-id="<?php echo esc_attr( $import_id ); ?>">
            </div>

        </main>
    </div>
</div>

<!-- Add a marker for JS to detect category import step -->
<div data-import-type="categories" style="display:none;"></div>

<!-- Row Filters (Step 5) -->
<div class="mt_primelink-card mt_primelink-card--glass" style="margin-top:12px;">
    <div class="mt_primelink-card-header">
        <h3><?php esc_html_e( 'Row Filters', 'primelink' ); ?></h3>
        <span id="mt_primelink-filter-active-count" style="display:none;" class="mt_primelink-summary-pill"></span>
    </div>
    <div class="mt_primelink-card-body">
        <div id="mt_primelink-filter-rows" class="mt_primelink-filter-rows" data-populated="0"></div>
        <div class="mt_primelink-filter-actions" style="margin-top:8px;">
            <button type="button" class="button" id="mt_primelink-add-filter-row"><?php esc_html_e( 'Add condition', 'primelink' ); ?></button>
        </div>
        <div id="mt_primelink-filter-notice" class="mt_primelink-empty" style="display:none;margin-top:6px;"></div>
    </div>
</div>

<!-- Advanced Mapping Editor -->
<div id="mt_primelink-map-editor" class="mt_primelink-map-editor" style="display:none;">
    <div class="mt_primelink-map-editor__backdrop"></div>
    <div class="mt_primelink-map-editor__panel">
        <div class="mt_primelink-map-editor__header">
            <div class="mt_primelink-editor-title-wrap">
                <h3>Field Options</h3>
            </div>
            <button type="button" class="button mt_primelink-map-editor-close"><?php esc_html_e( 'Close', 'primelink' ); ?></button>
        </div>

        <div class="mt_primelink-map-editor__body">
            <input type="hidden" id="mt_primelink-editor-target" value="" />

            <div class="mt_primelink-form-row">
                <label><?php esc_html_e( 'Source Field', 'primelink' ); ?></label>
                <input type="text" id="mt_primelink-editor-source" placeholder="<?php esc_attr_e( 'e.g. name or category_name', 'primelink' ); ?>" />
            </div>

            <div class="mt_primelink-form-row">
                <label><?php esc_html_e( 'Prefix / Suffix', 'primelink' ); ?></label>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">
                    <input type="text" id="mt_primelink-editor-prefix" placeholder="<?php esc_attr_e( 'Prefix (optional)', 'primelink' ); ?>" />
                    <input type="text" id="mt_primelink-editor-suffix" placeholder="<?php esc_attr_e( 'Suffix (optional)', 'primelink' ); ?>" />
                </div>
                <small class="description"><?php esc_html_e( 'Useful to add fixed text before/after fields.', 'primelink' ); ?></small>
            </div>

            <div class="mt_primelink-form-row">
                <label><?php esc_html_e( 'Separator (split multi-values)', 'primelink' ); ?></label>
                <input type="text" id="mt_primelink-editor-separator" placeholder="<?php esc_attr_e( 'e.g. | , ; >', 'primelink' ); ?>" />
                <small class="description"><?php esc_html_e( 'Example: "value1,value2" use ","', 'primelink' ); ?></small>
            </div>

            <div class="mt_primelink-form-row">
                <label><?php esc_html_e( 'Default value (if empty)', 'primelink' ); ?></label>
                <input type="text" id="mt_primelink-editor-default" placeholder="<?php esc_attr_e( 'Fallback value', 'primelink' ); ?>" />
            </div>

            <div class="mt_primelink-form-row">
                <label><?php esc_html_e( 'Template (for descriptions or titles)', 'primelink' ); ?></label>
                <textarea id="mt_primelink-editor-template" rows="3" placeholder="<?php esc_attr_e( 'Use {value} to inject the mapped field. Example: &quot;Special: {value}&quot;. Leave {value} out to append/prepend.', 'primelink' ); ?>"></textarea>
                <div style="margin-top:4px;">
                    <label style="margin-right:8px;"><?php esc_html_e( 'Template placement', 'primelink' ); ?></label>
                    <label><input type="radio" name="mt_primelink-editor-template-mode" value="before" checked> <?php esc_html_e( 'Before value', 'primelink' ); ?></label>
                    <label style="margin-left:12px;"><input type="radio" name="mt_primelink-editor-template-mode" value="after"> <?php esc_html_e( 'After value', 'primelink' ); ?></label>
                    <label style="margin-left:12px;"><input type="radio" name="mt_primelink-editor-template-mode" value="replace"> <?php esc_html_e( 'Replace (use template only)', 'primelink' ); ?></label>
                </div>
            </div>

            <div class="mt_primelink-form-row">
                <label><?php esc_html_e( 'Transforms', 'primelink' ); ?></label>
                <label><input type="checkbox" id="mt_primelink-editor-trim" checked /> <?php esc_html_e( 'Trim spaces', 'primelink' ); ?></label>
                <label><input type="checkbox" id="mt_primelink-editor-lowercase" /> <?php esc_html_e( 'Lowercase', 'primelink' ); ?></label>
                <label><input type="checkbox" id="mt_primelink-editor-normalize-html" /> <?php esc_html_e( 'Normalize HTML (strip tags / entities)', 'primelink' ); ?></label>
            </div>

            <div class="mt_primelink-form-row">
                <label><?php esc_html_e( 'Replace rules', 'primelink' ); ?></label>
                <div id="mt_primelink-editor-replace-wrap"></div>
                <button type="button" class="button" id="mt_primelink-editor-add-replace"><?php esc_html_e( 'Add Replace Rule', 'primelink' ); ?></button>
            </div>

            <div class="mt_primelink-form-row">
                <label><?php esc_html_e( 'Conditions (all must pass)', 'primelink' ); ?></label>
                <div id="mt_primelink-editor-conditions-wrap"></div>
                <button type="button" class="button" id="mt_primelink-editor-add-condition"><?php esc_html_e( 'Add Condition', 'primelink' ); ?></button>
            </div>
        </div>

        <div class="mt_primelink-map-editor__footer">
            <button type="button" class="button button-primary" id="mt_primelink-editor-save"><?php esc_html_e( 'Save Options', 'primelink' ); ?></button>
        </div>
    </div>
</div>

<?php
// Add a body class for categories import step for JS targeting
add_filter('body_class', function($classes){
    $classes[] = 'mt_primelink-import-categories';
    return $classes;
});
?>

