<?php
/**
 * Step 5 - Field Mapping for Customers.
 *
 * @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="<?php esc_attr_e( 'Template name', 'primelink' ); ?>" />
            <button type="button" class="button button-primary" id="mt_primelink-save-template"><?php esc_html_e( 'Save', 'primelink' ); ?></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><?php esc_html_e( 'File Fields', 'primelink' ); ?></h3>
                <input type="search" id="mt_primelink-field-search" placeholder="<?php esc_attr_e( 'Search field...', 'primelink' ); ?>" />
            </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"><?php esc_html_e( 'Loading fields...', 'primelink' ); ?></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=""><?php esc_html_e( 'Load existing template...', 'primelink' ); ?></option>
                </select>
                <button type="button" class="button" id="mt_primelink-load-template-btn"><?php esc_html_e( 'Load', 'primelink' ); ?></button>
                <button type="button" class="button mt_primelink-duplicate-btn" id="mt_primelink-duplicate-template"><?php esc_html_e( 'Duplicate', 'primelink' ); ?></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><?php esc_html_e( 'Auto-map Aliases', 'primelink' ); ?></h3>
                        <div class="mt_primelink-groups-hint"><?php esc_html_e( 'Add custom synonyms for targets (e.g. Email: customer_email, email_address).', 'primelink' ); ?></div>
                    </div>
                    <button type="button" class="button" id="mt_primelink-add-alias"><?php esc_html_e( 'Add alias', 'primelink' ); ?></button>
                </div>
                <div class="mt_primelink-card-body" id="mt_primelink-alias-wrap">
                    <div class="mt_primelink-empty"><?php esc_html_e( 'No custom aliases yet.', 'primelink' ); ?></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><?php esc_html_e( 'Field Mapping', 'primelink' ); ?></h3>
                        <div class="mt_primelink-groups-hint"><?php esc_html_e( 'Drag fields from left into slots.', 'primelink' ); ?></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"><?php esc_html_e( 'Clear all', 'primelink' ); ?></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"><?php esc_html_e( 'Required fields', 'primelink' ); ?></div>
                            <div id="mt_primelink-required-status" class="mt_primelink-helper-status"><?php esc_html_e( 'Checking...', 'primelink' ); ?></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><?php esc_html_e( 'Suggestions from sample row', 'primelink' ); ?></span>
                            </div>
                            <div id="mt_primelink-suggestion-list" class="mt_primelink-helper-list"></div>
                        </div>
                    </div>

                    <!-- General -->
                    <details class="mt_primelink-accordion">
                        <summary class="mt_primelink-accordion-title">General</summary>
                        <div class="mt_primelink-accordion-body">
                            <?php TemplateHelper::render_import_slots( array(
                                'email'      => 'Email (Required)',
                                'username'   => 'Username',
                                'password'   => 'Password',
                                'first_name' => 'First Name',
                                'last_name'  => 'Last Name',
                                'display_name' => 'Display Name',
                                'role'       => 'User Role',
                                'user_registered' => 'Registration Date',
                            ) ); ?>
                        </div>
                    </details>

                    <!-- Customer Data -->
                    <details class="mt_primelink-accordion">
                        <summary class="mt_primelink-accordion-title">Customer Data</summary>
                        <div class="mt_primelink-accordion-body">
                            <div class="mt_primelink-pd-layout">
                                <div class="mt_primelink-pd-tabs" role="tablist" aria-label="<?php esc_attr_e( 'Customer data tabs', 'primelink' ); ?>">
                                    <button type="button" class="mt_primelink-pd-tab is-active" data-tab="billing">Billing</button>
                                    <button type="button" class="mt_primelink-pd-tab" data-tab="shipping">Shipping</button>
                                    <button type="button" class="mt_primelink-pd-tab" data-tab="custom">Custom Fields</button>
                                </div>
                                <div class="mt_primelink-pd-panels">
                                    <div class="mt_primelink-pd-panel is-active" data-panel="billing">
                                        <?php TemplateHelper::render_import_slots( array(
                                            'billing_first_name' => 'Billing First Name',
                                            'billing_last_name'  => 'Billing Last Name',
                                            'billing_company'    => 'Billing Company',
                                            'billing_address_1'  => 'Billing Address 1',
                                            'billing_address_2'  => 'Billing Address 2',
                                            'billing_city'       => 'Billing City',
                                            'billing_state'      => 'Billing State',
                                            'billing_postcode'   => 'Billing Postcode',
                                            'billing_country'    => 'Billing Country',
                                            'billing_email'      => 'Billing Email',
                                            'billing_phone'      => 'Billing Phone',
                                        ) ); ?>
                                    </div>
                                    <div class="mt_primelink-pd-panel" data-panel="shipping">
                                        <?php TemplateHelper::render_import_slots( array(
                                            'shipping_first_name' => 'Shipping First Name',
                                            'shipping_last_name'  => 'Shipping Last Name',
                                            'shipping_company'    => 'Shipping Company',
                                            'shipping_address_1'  => 'Shipping Address 1',
                                            'shipping_address_2'  => 'Shipping Address 2',
                                            'shipping_city'       => 'Shipping City',
                                            'shipping_state'      => 'Shipping State',
                                            'shipping_postcode'   => 'Shipping Postcode',
                                            'shipping_country'    => 'Shipping Country',
                                        ) ); ?>
                                    </div>
                                    <div class="mt_primelink-pd-panel" data-panel="custom">
                                        <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>
                                </div>
                            </div>
                        </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 customer import step -->
<div data-import-type="customers" 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. email or customer_email', '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 customers import step for JS targeting
add_filter('body_class', function($classes){
    $classes[] = 'mt_primelink-import-customers';
    return $classes;
});
?>






