<?php
/**
 * Step 5 - Field Mapping for Variations.
 *
 * @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. Parent ID: parent_product_id, parent_id, product_id).</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>

                    <!-- Parent Product -->
                    <details class="mt_primelink-accordion">
                        <summary class="mt_primelink-accordion-title">Parent Product (Required)</summary>
                        <div class="mt_primelink-accordion-body">
                            <?php TemplateHelper::render_import_slots( array(
                                'parent_id'      => 'Parent Product ID (Required)',
                                'parent_sku'     => 'Parent Product SKU',
                            ) ); ?>
                            <p class="description"><?php esc_html_e( 'Either Parent Product ID or Parent Product SKU is required to identify the parent variable product.', 'primelink' ); ?></p>
                        </div>
                    </details>

                    <!-- 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(
                                'variation_id'   => 'Variation ID (for updates)',
                                'sku'            => 'SKU',
                                'status'         => 'Status (publish, draft, etc.)',
                            ) ); ?>
                        </div>
                    </details>

                    <!-- Pricing -->
                    <details class="mt_primelink-accordion">
                        <summary class="mt_primelink-accordion-title">Pricing</summary>
                        <div class="mt_primelink-accordion-body">
                            <?php TemplateHelper::render_import_slots( array(
                                'regular_price'  => 'Regular Price',
                                'sale_price'     => 'Sale Price',
                            ) ); ?>
                        </div>
                    </details>

                    <!-- Stock Management -->
                    <details class="mt_primelink-accordion">
                        <summary class="mt_primelink-accordion-title">Stock Management</summary>
                        <div class="mt_primelink-accordion-body">
                            <?php TemplateHelper::render_import_slots( array(
                                'stock_quantity' => 'Stock Quantity',
                                'stock_status'   => 'Stock Status (instock, outofstock, onbackorder)',
                                'manage_stock'   => 'Manage Stock (yes/no, 1/0, true/false)',
                                'backorders'     => 'Backorders (no, notify, yes)',
                            ) ); ?>
                        </div>
                    </details>

                    <!-- Dimensions -->
                    <details class="mt_primelink-accordion">
                        <summary class="mt_primelink-accordion-title">Dimensions</summary>
                        <div class="mt_primelink-accordion-body">
                            <?php TemplateHelper::render_import_slots( array(
                                'weight'         => 'Weight',
                                'length'          => 'Length',
                                'width'           => 'Width',
                                'height'          => 'Height',
                            ) ); ?>
                        </div>
                    </details>

                    <!-- Attributes -->
                    <details class="mt_primelink-accordion">
                        <summary class="mt_primelink-accordion-title">Variation Attributes</summary>
                        <div class="mt_primelink-accordion-body">
                            <?php TemplateHelper::render_import_slots( array(
                                'attributes'     => 'Attributes (JSON)',
                            ) ); ?>
                            <p class="description"><?php esc_html_e( 'Format: JSON object with attribute names as keys and values as values, e.g. {"pa_color":"red","pa_size":"large"}. Or use separate columns like "attribute:pa_color" and "attribute:pa_size".', 'primelink' ); ?></p>
                            <div id="mt_primelink-variation-attributes-wrap"></div>
                            <button type="button" class="button" id="mt_primelink-add-variation-attribute">Add Attribute Column</button>
                        </div>
                    </details>

                    <!-- Images -->
                    <details class="mt_primelink-accordion">
                        <summary class="mt_primelink-accordion-title">Images</summary>
                        <div class="mt_primelink-accordion-body">
                            <?php TemplateHelper::render_import_slots( array(
                                'image'          => 'Variation Image URL',
                                'gallery'        => 'Variation Gallery URLs (comma-separated)',
                            ) ); ?>
                        </div>
                    </details>

                    <!-- Description -->
                    <details class="mt_primelink-accordion">
                        <summary class="mt_primelink-accordion-title">Description</summary>
                        <div class="mt_primelink-accordion-body">
                            <?php TemplateHelper::render_import_slots( array(
                                'description'    => 'Description',
                                'short_description' => 'Short Description',
                            ) ); ?>
                        </div>
                    </details>

                    <!-- Tax -->
                    <details class="mt_primelink-accordion">
                        <summary class="mt_primelink-accordion-title">Tax</summary>
                        <div class="mt_primelink-accordion-body">
                            <?php TemplateHelper::render_import_slots( array(
                                'tax_class'      => 'Tax Class',
                            ) ); ?>
                        </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>

<!-- 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 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-bottom" style="display:none;"></span>
                </div>
                <div class="mt_primelink-filter-actions">
                    <select id="mt_primelink-filter-presets-bottom" 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-bottom"><?php esc_html_e( 'Load', 'primelink' ); ?></button>
                    <button type="button" class="button" id="mt_primelink-filter-preset-save-bottom"><?php esc_html_e( 'Save', 'primelink' ); ?></button>
                    <button type="button" class="button" id="mt_primelink-filter-preset-delete-bottom"><?php esc_html_e( 'Delete', 'primelink' ); ?></button>
                    <button type="button" class="button" id="mt_primelink-add-filter-row-bottom"><?php esc_html_e( 'Add condition', 'primelink' ); ?></button>
                </div>
            </div>
            <div id="mt_primelink-filter-rows-bottom" class="mt_primelink-filter-rows"></div>
            <div id="mt_primelink-filter-notice-bottom" 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>

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


