{% extends "admin_base.html" %}
{% import "macros/admin_crud_list.html" as crud %}

{% block extra_head %}
{% endblock %}

{% block page_title %}Shopify–HubSpot Sync{% endblock %}

{% block admin_content %}
<div class="shs-admin" id="shs-root" data-plugin="shopify-hubspot-sync"
     data-settings-url="/plugins/core-settings/settings#settings-shopify-hubspot-sync"
     data-test-url="/plugins/shopify-hubspot-sync/test_connections"
     data-save-url="/plugins/shopify-hubspot-sync/save_profile"
     data-get-url="/plugins/shopify-hubspot-sync/get_profile"
     data-delete-url="/plugins/shopify-hubspot-sync/delete_profile"
     data-run-url="/plugins/shopify-hubspot-sync/run_sync"
     data-shopify-objects-url="/plugins/shopify-hubspot-sync/list_shopify_objects"
     data-hubspot-objects-url="/plugins/shopify-hubspot-sync/list_hubspot_objects"
     data-shopify-fields-url="/plugins/shopify-hubspot-sync/list_shopify_fields"
     data-hubspot-fields-url="/plugins/shopify-hubspot-sync/list_hubspot_properties">

<div class="shs-toolbar">
        <button type="button" class="blocks-button blocks-button-secondary" id="shs-test-connections">
            <i class="fas fa-plug"></i> Test connections
        </button>
        <button type="button" class="blocks-button blocks-button-secondary" id="shs-run-all">
            <i class="fas fa-play"></i> Run all active now
        </button>
        <a href="/plugins/core-settings/settings#settings-shopify-hubspot-sync" class="blocks-button blocks-button-secondary shs-muted">Plugin settings</a>
    </div>

    <div id="shs-banner" class="blocks-workspace-notice" role="status" aria-live="polite" tabindex="-1" hidden></div>

    {{ crud::shell_open(config_url="/plugins/shopify-hubspot-sync/assets/admin/profiles_list.json", mount_id="shs-profiles-list", custom_mount=true, context_selector="#shs-root") }}

    <div class="table-container">
        <table>
            <thead></thead>
            <tbody>
                <tr><td colspan="9" class="crud-empty-state text-center">Loading profiles…</td></tr>
            </tbody>
        </table>
    </div>

    {{ crud::shell_close() }}
</div>

<div id="profileModal" class="crud-modal" aria-hidden="true">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="modalTitle">Create Sync Profile</h2>
            <button type="button" class="close-btn" aria-label="Close">&times;</button>
        </div>
        <form id="profileForm">
            <div class="modal-body">
                <input type="hidden" id="profile-id" name="id" value="">

                <div class="shs-section-title">Basics</div>
                <div class="form-group">
                    <label for="profile-name">Profile name</label>
                    <input type="text" id="profile-name" name="name" class="blocks-input" required placeholder="e.g. Customers to Contacts">
                </div>
                <div class="form-group">
                    <label for="profile-description">Description</label>
                    <textarea id="profile-description" name="description" class="blocks-input blocks-control-multiline" rows="2" placeholder="Optional notes"></textarea>
                </div>
                <div class="shs-form-grid">
                    <div class="form-group">
                        <label for="profile-direction">Sync direction</label>
                        <select id="profile-direction" name="direction" class="blocks-input">
                            <option value="shopify_to_hubspot">Shopify → HubSpot</option>
                            <option value="hubspot_to_shopify">HubSpot → Shopify</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="profile-frequency">Frequency</label>
                        <select id="profile-frequency" name="frequency" class="blocks-input">
                            <option value="manual">Manual only</option>
                            <option value="hourly">Hourly</option>
                            <option value="daily">Daily</option>
                            <option value="weekly">Weekly</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="profile-order">Sync order</label>
                        <input type="number" id="profile-order" name="sync_order" class="blocks-input" value="0" min="0">
                        <span class="help-text shs-muted">Lower numbers run first.</span>
                    </div>
                <div class="form-group self-end">
                        <label class="checkbox-container">
                            <input type="checkbox" id="profile-active" name="is_active" checked>
                            <span class="checkmark"></span>
                            Profile is active
                        </label>
                    </div>
                </div>

                <div class="shs-section-title">Object mapping</div>
                <div class="shs-object-row">
                    <div class="form-group">
                        <label for="shopify-object">Shopify object</label>
                        <select id="shopify-object" name="shopify_object" class="blocks-input" required>
                            <option value="">Loading…</option>
                        </select>
                    </div>
                    <div class="shs-object-arrow" aria-hidden="true">↔</div>
                    <div class="form-group">
                        <label for="hubspot-object">HubSpot object</label>
                        <select id="hubspot-object" name="hubspot_object" class="blocks-input" required>
                            <option value="">Loading…</option>
                        </select>
                    </div>
                </div>
                <button type="button" class="blocks-button blocks-button-secondary mt-2" id="shs-load-fields">
                    <i class="fas fa-columns"></i> Load fields for mapping
                </button>

                <div id="shs-field-panel" class="shs-field-panel hidden">
                    <div class="shs-section-title">Field mapping</div>
                    <p class="shs-muted">Choose match keys to identify the same record on both sides, then map additional fields.</p>
                    <table class="shs-mapping-table">
                        <thead>
                            <tr>
                                <th>Shopify field</th>
                                <th></th>
                                <th>HubSpot property</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="shs-match-body">
                            <tr class="shs-match-row">
                                <td>
                                    <select id="match-shopify-key" class="blocks-input shs-shopify-field-select">
                                        <option value="">— Match key —</option>
                                    </select>
                                </td>
                                <td class="shs-object-arrow">=</td>
                                <td>
                                    <select id="match-hubspot-key" class="blocks-input shs-hubspot-field-select">
                                        <option value="">— Match key —</option>
                                    </select>
                                </td>
                                <td><span class="shs-muted">Match key</span></td>
                            </tr>
                        </tbody>
                        <tbody id="shs-mapping-body"></tbody>
                    </table>
                    <button type="button" class="blocks-button blocks-button-secondary" id="shs-add-mapping">
                        <i class="fas fa-plus"></i> Add field mapping
                    </button>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="blocks-button blocks-button-secondary cancel-btn">Cancel</button>
                <button type="button" class="blocks-button blocks-button-secondary" id="shs-run-profile" hidden>
                    <i class="fas fa-play"></i> Run now
                </button>
                <button type="submit" class="blocks-button blocks-button-primary">Save profile</button>
            </div>
        </form>
    </div>
</div>

<div id="logModal" class="crud-modal" aria-hidden="true">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="logModalTitle">Sync Run Log</h2>
            <button type="button" class="close-btn" aria-label="Close">&times;</button>
        </div>
        <div class="modal-body">
            <div class="shs-log-block">
                <label>Status</label>
                <div id="log-status" class="shs-badge"></div>
            </div>
            <div class="shs-log-block">
                <label>Time</label>
                <div id="log-time" class="shs-muted"></div>
            </div>
            <div class="shs-log-block">
                <label>Stats</label>
                <pre id="log-stats"></pre>
            </div>
            <div class="shs-log-block">
                <label>Detailed Log</label>
                <pre id="log-details"></pre>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="blocks-button blocks-button-secondary close-log-btn">Close</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/shopify-hubspot-sync/assets/js/sync_profiles_list.js?v=8"></script>
<script src="/plugins/shopify-hubspot-sync/assets/js/sync_admin.js?v=8"></script>
{% endblock %}