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

{% block page_title %}Build Marketing Catalog{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/static/css/tree-selection.css">
{% endblock %}

{% block admin_content %}
{{ mh::management_header_simple(title="Build Marketing Catalog", subtitle="Pick products and categories, brand it, export the PDF", back_href="/plugins/marketing-catalog/admin", back_label="All catalogs") }}

<div id="mc-builder"
     data-config-url="/plugins/marketing-catalog/assets/admin/catalog_form.json"
     data-catalog-id="{{ catalog.id | default(value=0) }}"
     data-selected-products="[{% for it in catalog.items | default(value=[]) %}{{ it.product_id }}{% if not loop.last %},{% endif %}{% endfor %}]"
     data-selected-cats="[{% for c in catalog.categories | default(value=[]) %}{{ c.category_id }}{% if not loop.last %},{% endif %}{% endfor %}]"
     data-tenant-name="{{ tenant.site_name | default(value='') }}"
     data-tenant-email="{{ tenant.contact_email | default(value='') }}"
     data-tenant-address="{{ tenant.contact_address | default(value='') }}"
     data-tenant-phone="{{ tenant.contact_phone | default(value='') }}">
    <div class="space-y-5" id="mc-builder-workspace">
    <section class="blocks-card space-y-5" aria-labelledby="mc-details-title">
        <div><h2 id="mc-details-title" class="text-lg font-semibold">Catalog details</h2><p class="mt-1 text-sm text-muted">Choose how this collection should look and what shoppers will see.</p></div>
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div class="space-y-2">
                <label class="blocks-label" for="mc-title">Catalog title</label>
                <input class="blocks-input" type="text" id="mc-title" data-mc-field="title" value="{{ catalog.title | default(value=defaults.default_cover_title) }}" placeholder="e.g. Festive Collection 2026">
            </div>
            <div class="space-y-2">
                <label class="blocks-label" for="mc-status">Status</label>
                <select class="blocks-input" id="mc-status" data-mc-field="status">
                    <option value="draft" {% if catalog.status | default(value='draft') == 'draft' %}selected{% endif %}>Draft</option>
                    <option value="ready" {% if catalog.status | default(value='draft') == 'ready' %}selected{% endif %}>Ready</option>
                    <option value="archived" {% if catalog.status | default(value='draft') == 'archived' %}selected{% endif %}>Archived</option>
                </select>
            </div>
        </div>
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div class="space-y-2">
                <label class="blocks-label" for="mc-cover-title">Cover headline</label>
                <input class="blocks-input" type="text" id="mc-cover-title" data-mc-field="cover_title" value="{{ catalog.cover_title | default(value=defaults.default_cover_title) }}" placeholder="Defaults to Default cover title setting">
            </div>
            <div class="space-y-2">
                <label class="blocks-label" for="mc-cover-sub">Cover sub-headline</label>
                <input class="blocks-input" type="text" id="mc-cover-sub" data-mc-field="cover_subtitle" value="{{ catalog.cover_subtitle | default(value='') }}" placeholder="Optional season or edition line">
            </div>
        </div>
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <div class="space-y-2">
                <label class="blocks-label" for="mc-theme">Theme</label>
                <select class="blocks-input" id="mc-theme" data-mc-field="theme">
                    <option value="classic" {% if catalog.theme | default(value='classic') == 'classic' %}selected{% endif %}>Classic</option>
                    <option value="modern" {% if catalog.theme | default(value='classic') == 'modern' %}selected{% endif %}>Modern</option>
                    <option value="minimal" {% if catalog.theme | default(value='classic') == 'minimal' %}selected{% endif %}>Minimal</option>
                </select>
            </div>
            <div class="space-y-2">
                <label class="blocks-label" for="mc-accent">Accent color</label>
                <div class="flex gap-2"><input class="blocks-input h-11 w-14 shrink-0 p-1" type="color" id="mc-accent-picker" aria-label="Choose accent color" value="{{ catalog.accent_color | default(value=defaults.accent_color) }}"><input class="blocks-input min-w-0" type="text" id="mc-accent" data-mc-field="accent_color" value="{{ catalog.accent_color | default(value=defaults.accent_color) }}" placeholder="#1e6b34" pattern="^#[0-9a-fA-F]{6}$"></div>
            </div>
            <div class="space-y-2">
                <label class="blocks-label" for="mc-page">Page size</label>
                <select class="blocks-input" id="mc-page" data-mc-field="page_size">
                    <option value="A4" {% if catalog.page_size | default(value='A4') == 'A4' %}selected{% endif %}>A4</option>
                    <option value="Letter" {% if catalog.page_size | default(value='A4') == 'Letter' %}selected{% endif %}>Letter</option>
                </select>
            </div>
            <div class="space-y-2">
                <label class="blocks-label" for="mc-orient">Orientation</label>
                <select class="blocks-input" id="mc-orient" data-mc-field="orientation">
                    <option value="portrait" {% if catalog.orientation | default(value='portrait') == 'portrait' %}selected{% endif %}>Portrait</option>
                    <option value="landscape" {% if catalog.orientation | default(value='portrait') == 'landscape' %}selected{% endif %}>Landscape</option>
                </select>
            </div>
            <div class="space-y-2">
                <label class="blocks-label" for="mc-per-row">Items per row</label>
                <select class="blocks-input" id="mc-per-row" data-mc-field="items_per_row">
                    <option value="1" {% if catalog.items_per_row | default(value=2) == 1 %}selected{% endif %}>1</option>
                    <option value="2" {% if catalog.items_per_row | default(value=2) == 2 %}selected{% endif %}>2</option>
                    <option value="3" {% if catalog.items_per_row | default(value=2) == 3 %}selected{% endif %}>3</option>
                    <option value="4" {% if catalog.items_per_row | default(value=2) == 4 %}selected{% endif %}>4</option>
                </select>
            </div>
        </div>
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div class="space-y-2">
                <label class="blocks-label" for="mc-price-source">Price to print</label>
                <select class="blocks-input" id="mc-price-source" data-mc-field="price_source">
                    <option value="mrp" {% if catalog.price_source | default(value='mrp') == 'mrp' %}selected{% endif %}>MRP</option>
                    <option value="sale" {% if catalog.price_source | default(value='mrp') == 'sale' %}selected{% endif %}>Collection sale price</option>
                    <option value="both" {% if catalog.price_source | default(value='mrp') == 'both' %}selected{% endif %}>Both (sale + struck MRP)</option>
                </select>
            </div>
        </div>
        <fieldset class="space-y-3">
            <legend class="blocks-label">Catalog sections</legend>
            <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
                <label class="flex items-center gap-3 rounded-lg border border-divider p-3 text-sm"><input class="blocks-checkbox" type="checkbox" data-mc-field="show_prices" {% if catalog.show_prices | default(value=1) == 1 %}checked{% endif %}> <span>Show prices</span></label>
                <label class="flex items-center gap-3 rounded-lg border border-divider p-3 text-sm"><input class="blocks-checkbox" type="checkbox" data-mc-field="show_descriptions" {% if catalog.show_descriptions | default(value=1) == 1 %}checked{% endif %}> <span>Show descriptions</span></label>
                <label class="flex items-center gap-3 rounded-lg border border-divider p-3 text-sm"><input class="blocks-checkbox" type="checkbox" data-mc-field="show_qr" {% if catalog.show_qr | default(value=1) == 1 %}checked{% endif %}> <span>Show QR code</span></label>
                <label class="flex items-center gap-3 rounded-lg border border-divider p-3 text-sm"><input class="blocks-checkbox" type="checkbox" data-mc-field="show_category_headers" {% if catalog.show_category_headers | default(value=1) == 1 %}checked{% endif %}> <span>Group by category</span></label>
                <label class="flex items-center gap-3 rounded-lg border border-divider p-3 text-sm"><input class="blocks-checkbox" type="checkbox" data-mc-field="show_card_categories" {% if catalog.show_card_categories | default(value=1) == 1 %}checked{% endif %}> <span>Show category on cards</span></label>
                <label class="flex items-center gap-3 rounded-lg border border-divider p-3 text-sm"><input class="blocks-checkbox" type="checkbox" data-mc-field="include_unavailable" {% if catalog.include_unavailable | default(value=0) == 1 %}checked{% endif %}> <span>Include unavailable products</span></label>
            </div>
        </fieldset>
    </section>

    <section class="blocks-card space-y-5" aria-labelledby="mc-branding-title">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"><div><h2 id="mc-branding-title" class="text-lg font-semibold">Branding</h2><p class="mt-1 text-sm text-muted">Empty overrides use your tenant or plugin branding settings.</p></div><button type="button" class="blocks-button blocks-button-secondary blocks-button-sm" data-mc-fill-tenant>Reset to tenant defaults</button></div>
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
            <div class="space-y-2">
                <label class="blocks-label" for="mc-company">Company name</label>
                <input class="blocks-input" type="text" id="mc-company" data-mc-field="company_name" value="{{ catalog.company_name | default(value=defaults.company_name) }}">
            </div>
            <div class="space-y-2">
                <label class="blocks-label" for="mc-logo">Logo URL</label>
                <input class="blocks-input" type="url" id="mc-logo" data-mc-field="logo_url" value="{{ catalog.logo_url | default(value=defaults.logo_url) }}">
            </div>
            <div class="space-y-2">
                <label class="blocks-label" for="mc-qr">QR target URL</label>
                <input class="blocks-input" type="url" id="mc-qr" data-mc-field="qr_target_url" value="{{ catalog.qr_target_url | default(value=defaults.qr_target_url) }}" placeholder="https://your-store.example">
            </div>
        </div>
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
            <div class="space-y-2">
                <label class="blocks-label" for="mc-addr">Address</label>
                <input class="blocks-input" type="text" id="mc-addr" data-mc-field="company_address" value="{{ catalog.company_address | default(value=defaults.company_address) }}">
            </div>
            <div class="space-y-2">
                <label class="blocks-label" for="mc-phone">Phone</label>
                <input class="blocks-input" type="tel" id="mc-phone" data-mc-field="company_phone" value="{{ catalog.company_phone | default(value=defaults.company_phone) }}">
            </div>
            <div class="space-y-2">
                <label class="blocks-label" for="mc-email">Email</label>
                <input class="blocks-input" type="email" id="mc-email" data-mc-field="company_email" value="{{ catalog.company_email | default(value=defaults.company_email) }}">
            </div>
            <div class="space-y-2">
                <label class="blocks-label" for="mc-web">Website</label>
                <input class="blocks-input" type="url" id="mc-web" data-mc-field="company_website" value="{{ catalog.company_website | default(value=defaults.company_website) }}">
            </div>
        </div>
        <div class="space-y-2">
            <label class="blocks-label" for="mc-footer">Footer line</label>
            <input class="blocks-input" type="text" id="mc-footer" data-mc-field="footer_text" value="{{ catalog.footer_text | default(value=defaults.default_footer_text) }}" placeholder="Printed on every page">
        </div>
    </section>

    <section class="blocks-card space-y-4" aria-labelledby="mc-products-title">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"><div><h2 id="mc-products-title" class="text-lg font-semibold">Products &amp; categories</h2><p class="mt-1 text-sm text-muted">Select categories for whole sections or pick individual products. If no products are selected, chosen categories are used.</p></div><div class="flex flex-wrap gap-2"><span class="blocks-status-pill is-neutral"><span data-mc-count>0</span>&nbsp;products</span><span class="blocks-status-pill is-neutral"><span data-mc-cat-count>0</span>&nbsp;categories</span></div></div>
        <div class="flex flex-wrap items-center gap-2">
            <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm" data-mc-tree-all>Select all</button>
            <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm" data-mc-tree-clear>Clear selection</button>
            <span class="text-sm text-muted" data-mc-status role="status" aria-live="polite"></span>
        </div>
        <div id="mc-tree" aria-live="polite"><div class="flex items-center gap-2 py-5 text-sm text-muted"><span class="h-4 w-4 animate-spin rounded-full border-2 border-divider border-t-brand" aria-hidden="true"></span>Loading catalog tree…</div></div>
    </section>

    <section class="blocks-card space-y-4" aria-labelledby="mc-order-title-heading">
        <div><h2 id="mc-order-title-heading" class="text-lg font-semibold">Print order <span class="blocks-status-pill is-neutral align-middle" data-mc-order-count>0</span></h2><p class="mt-1 text-sm text-muted">Top to bottom is the printed order. Drag items or use the arrow controls. Removing an item also clears it from the picker.</p></div>
        <ol id="mc-order-list" class="space-y-2" aria-label="Selected products in print order"></ol>
    </section>

    <div class="sticky bottom-0 z-10 -mx-4 flex flex-col-reverse gap-2 border-t border-divider bg-canvas/95 px-4 py-3 backdrop-blur sm:static sm:mx-0 sm:flex-row sm:justify-end sm:border-0 sm:bg-transparent sm:px-0">
        <button type="button" class="blocks-button blocks-button-secondary justify-center" data-mc-save>Save catalog</button>
        <button type="button" class="blocks-button blocks-button-primary justify-center" data-mc-generate>Save &amp; download PDF</button>
    </div>

    <!-- PDF generation progress (staged: save -> QR -> render -> download) -->
    <div id="mc-pdf-progress" class="fixed inset-0 z-[1200] hidden items-center justify-center bg-black/50 p-4" aria-hidden="true">
        <div class="w-full max-w-md space-y-4 rounded-2xl border border-divider bg-surface p-5 text-foreground shadow-xl sm:p-6" role="dialog" aria-modal="true" aria-labelledby="mc-pdf-title" aria-live="polite">
            <h2 id="mc-pdf-title" class="text-lg font-semibold">Generating PDF…</h2>
            <div class="text-sm text-muted" data-mc-pdf-stage>Preparing…</div>
            <div class="h-3 overflow-hidden rounded-full border border-divider bg-canvas" role="progressbar" aria-label="PDF generation progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-mc-pdf-track>
                <div class="h-full w-0 rounded-full bg-brand transition-[width] duration-300" data-mc-pdf-fill></div>
            </div>
            <div class="flex justify-between text-xs text-muted">
                <span class="tabular-nums" data-mc-pdf-pct>0%</span>
                <span data-mc-pdf-elapsed>0s elapsed</span>
            </div>
            <div class="min-h-5 text-sm text-muted" data-mc-pdf-detail role="status" aria-live="polite"></div>
            <div class="flex justify-end">
                <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm" data-mc-pdf-cancel>Cancel</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/tree-selection.js"></script>
<script src="/plugins/marketing-catalog/assets/js/marketing-catalog-builder.js"></script>
{% endblock %}