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

{% block extra_head %}
{% endblock %}

{% block page_title %}Shopify Catalog Import{% endblock %}

{% block admin_content %}
<main class="mx-auto max-w-7xl px-4 pb-8 text-foreground sm:px-6" id="sci-root" data-plugin="shopify-catalog-import">

    {{ mh::management_header_simple(
        title="Shopify Catalog Import",
        subtitle="Selectively import collections (categories) and products from Shopify into your Blocks Catalog."
    ) }}

    <div class="mb-6 flex flex-col items-stretch gap-3 sm:flex-row sm:flex-wrap sm:items-center">
        <button type="button" class="blocks-button blocks-button-primary" id="sci-btn-enumerate">
            <i class="fas fa-search"></i> Enumerate Shopify Catalog
        </button>
        <button type="button" class="blocks-button blocks-button-secondary" id="sci-btn-sync-mapped">
            <i class="fas fa-sync-alt"></i> Sync All Mapped Items
        </button>
        <a href="/plugins/core-settings/settings#settings-shopify-catalog-import" class="inline-flex min-h-11 items-center px-2 font-medium text-muted underline-offset-4  hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand">Plugin Settings</a>
    </div>

    <div id="sci-banner" class="mb-5 hidden rounded-lg border p-3 font-medium" role="status" aria-live="polite"></div>

    <!-- Tabs -->
    <section class="overflow-hidden rounded-xl border border-divider bg-surface shadow-sm">
        <div class="flex overflow-x-auto border-b border-divider bg-canvas" role="tablist" aria-label="Shopify catalog workspace">
            <button id="tab-tree-button" type="button" role="tab" aria-selected="true" aria-controls="tab-tree" tabindex="0" class="sci-tab-btn inline-flex min-h-12 shrink-0 items-center border-b-2 border-brand px-4 text-sm font-semibold text-brand transition hover:bg-surface focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-brand sm:px-5" data-tab="tab-tree">Interactive Import Tree</button>
            <button id="tab-logs-button" type="button" role="tab" aria-selected="false" aria-controls="tab-logs" tabindex="-1" class="sci-tab-btn inline-flex min-h-12 shrink-0 items-center border-b-2 border-transparent px-4 text-sm font-semibold text-muted transition hover:bg-surface  focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-brand sm:px-5" data-tab="tab-logs">Sync Logs &amp; Runs</button>
        </div>

        <div class="sci-tab-content p-4 sm:p-6" id="tab-tree" role="tabpanel" aria-labelledby="tab-tree-button" tabindex="0">
            <div id="sci-tree-placeholder" class="px-4 py-12 text-center text-muted sm:px-8">
                <i class="fas fa-cloud-download-alt mb-4 text-4xl opacity-70" aria-hidden="true"></i>
                <p>Click <strong>Enumerate Shopify Catalog</strong> above to retrieve collections and products from your store.</p>
            </div>
            
            <div id="sci-tree-view-wrapper" class="hidden">
                <div class="mb-4 flex flex-col gap-3 border-b border-divider pb-4 sm:flex-row sm:items-center sm:justify-between">
                    <span class="font-semibold" id="sci-selected-count" aria-live="polite">0 items selected</span>
                    <button type="button" class="blocks-button blocks-button-primary" id="sci-btn-import-selected">
                        <i class="fas fa-file-import"></i> Import Selected
                    </button>
                </div>
                <!-- Core Tree Selection Component Container -->
                <div id="sci-tree-mount"></div>
            </div>
        </div>

        <div class="sci-tab-content hidden p-4 sm:p-6" id="tab-logs" role="tabpanel" aria-labelledby="tab-logs-button" tabindex="0">
            {{ crud::shell_open(config_url="/plugins/shopify-catalog-import/assets/admin/runs_list.json", mount_id="sci-runs-list", custom_mount=true) }}
            <div class="overflow-x-auto">
                <table class="min-w-full">
                    <thead></thead>
                    <tbody>
                        <tr><td colspan="6" class="crud-empty-state p-5 text-center text-muted">Loading sync runs…</td></tr>
                    </tbody>
                </table>
            </div>
            {{ crud::shell_close() }}
        </div>
    </div>
</section>
</main>

<!-- Modal for Viewing Detailed Log Output -->
{{ modal::modal(id="sci-log-modal", title="Detailed Sync Logs", size="lg", body_html='<pre id="sci-log-output" class="max-h-[60vh] overflow-auto whitespace-pre-wrap break-all rounded-lg border border-divider bg-canvas p-4 font-mono text-xs text-foreground"></pre>', footer_html='<button type="button" class="blocks-button blocks-button-secondary" id="sci-modal-btn-close">Close</button>', extra_class="w-[calc(100vw-2rem)] max-w-3xl", close_attrs='id="sci-modal-close"') }}

<script src="/static/js/tree-selection.js"></script>
<script src="/static/js/blocks-admin-modal.js"></script>
<script src="/plugins/shopify-catalog-import/assets/js/import_admin.js"></script>
{% endblock %}