<?php
/**
 * Step 5 - Field Mapping for Downloads.
 *
 * @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. Product ID: product_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>

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

                    <!-- Download File (Required) -->
                    <details class="mt_primelink-accordion">
                        <summary class="mt_primelink-accordion-title">Download File (Required)</summary>
                        <div class="mt_primelink-accordion-body">
                            <?php TemplateHelper::render_import_slots( array(
                                'file_url'        => 'File URL (Required)',
                                'file_name'       => 'File Name',
                                'download_id'     => 'Download ID (for updates)',
                            ) ); ?>
                            <p class="description"><?php esc_html_e( 'File URL is required. File Name is optional (will use filename from URL if not provided).', 'primelink' ); ?></p>
                        </div>
                    </details>

                    <!-- Download Settings -->
                    <details class="mt_primelink-accordion">
                        <summary class="mt_primelink-accordion-title">Download Settings</summary>
                        <div class="mt_primelink-accordion-body">
                            <?php TemplateHelper::render_import_slots( array(
                                'download_limit'  => 'Download Limit (number of times)',
                                'download_expiry' => 'Download Expiry (days)',
                            ) ); ?>
                            <p class="description"><?php esc_html_e( 'Set to 0 or leave empty for unlimited downloads/no expiry.', 'primelink' ); ?></p>
                        </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 download import step -->
<div data-import-type="downloads" style="display:none;"></div>

