{% extends "indy_hub/base.html" %}
{% load i18n %}
{% load static %}
{% load humanize %}
{% load tz %}

{% block page_title %}{% trans "Sell Materials to Hub" %}{% endblock page_title %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'indy_hub/css/page_headers.css' %}">
<link rel="stylesheet" href="{% static 'indy_hub/css/blueprints.css' %}">
<link rel="stylesheet" href="{% static 'indy_hub/css/material_exchange.css' %}?v=20260418-1530">
{% endblock extra_css %}

{% block content %}
<div class="container-fluid py-4">
        <div class="page-header mb-4">
            <div class="d-flex flex-wrap align-items-stretch justify-content-between gap-3">
                <div class="d-flex flex-column h-100">
                    <h2 class="h3 mb-1">
                        <i class="fas fa-hand-holding-usd me-2"></i>
                        {% trans "Sell Materials to Hub" %}
                    </h2>
                    <p class="description">{% trans "Sell your materials to the Hub" %}</p>
                    <div class="mt-auto">
                        <span class="badge rounded-pill bg-info-subtle text-info border fs-6">
                            <i class="fas fa-tags me-1"></i>{% trans "Pricing Formula" %}:
                            {% if config.sell_markup_base == 'sell' %}
                                {% trans "Jita Sell Price" %}
                            {% else %}
                                {% trans "Jita Buy Price" %}
                            {% endif %}
                            {% if config.sell_markup_percent > 0 %}
                                +{{ config.sell_markup_percent }}%
                            {% elif config.sell_markup_percent < 0 %}
                                {{ config.sell_markup_percent }}%
                            {% else %}
                                ({% trans "no markup" %})
                            {% endif %}
                        </span>
                    </div>
                </div>
                <div class="d-flex gap-2 align-self-start">
                    <a href="{% url 'indy_hub:material_exchange_index' %}" class="btn btn-outline-light">
                        <i class="fas fa-arrow-left me-1"></i>{% trans "Back to Hub" %}
                    </a>
                </div>
            </div>
            <i class="fas fa-hand-holding-usd header-bg"></i>
        </div>
        <div id="sellPageDynamicContent">
            {% include "indy_hub/material_exchange/includes/sell_page_content.html" %}
        </div>
</div>

<script>
window.initMaterialExchangeSellPage = function initMaterialExchangeSellPage(root, persistedState) {
    if (!root) {
        return;
    }

    window.__indyHubSellPageState = window.__indyHubSellPageState || {
        initToken: 0,
        activePollToken: 0,
        pollTimer: null,
        swapTimer: null,
        swapRequestToken: 0,
        refreshCompleted: false
    };
    const sellPageState = window.__indyHubSellPageState;
    const initToken = ++sellPageState.initToken;
    if (sellPageState.pollTimer) {
        clearTimeout(sellPageState.pollTimer);
        sellPageState.pollTimer = null;
    }
    if (sellPageState.swapTimer) {
        clearTimeout(sellPageState.swapTimer);
        sellPageState.swapTimer = null;
    }

    const query = selector => root.querySelector(selector);
    const queryAll = selector => Array.from(root.querySelectorAll(selector));
    const cleanUrl = new URL(window.location.href);
    if (cleanUrl.searchParams.get('refreshed') === '1') {
        cleanUrl.searchParams.delete('refreshed');
        window.history.replaceState({}, document.title, cleanUrl.toString());
    }

    const qtyInputs = queryAll('.qty-input');
    const sellSearchInput = query('#sellSearchInput');
    const sellSearchModeInputs = queryAll('input[name="sellSearchMode"]');
    const stockRows = queryAll('.stock-row');
    const sellBulkButtons = queryAll('.qty-bulk-btn');
    const sellForm = query('#sellForm');
    const sellInputModeInputs = queryAll('input[name="sellInputModeSelector"]');
    const sellInputModeField = query('#sellInputModeField');
    const sellModePanels = queryAll('[data-sell-mode-panel]');
    const sellPasteTextarea = query('#sellPasteTextarea');
    const sellPasteClearButton = query('#sellPasteClearButton');
    const sellPasteQuantitiesJson = query('#sellPasteQuantitiesJson');
    const sellPasteResults = query('#sellPasteResults');
    const sellPasteCatalogNode = query('#sellPasteCatalogData');
    const sellCharacterSelect = query('#sellCharacterSelect');
    const sellPasteCatalog = new Map();
    const sellPasteResolvedDbItems = new Map();
    const sellPasteResolveQueue = new Map();
    const sellPasteResolvePending = new Set();
    let sellPasteResolveTimer = null;
    let sellPasteResolveToken = 0;
    const sellPasteResolveUrl = '{% url "indy_hub:material_exchange_sell_resolve_paste_items" %}';

    function registerSellPasteCatalogItem(item) {
        if (!item || !item.type_name) {
            return;
        }

        [item.name_key, item.type_name]
            .map(normalizePasteName)
            .filter(Boolean)
            .forEach(key => {
                if (!sellPasteCatalog.has(key)) {
                    sellPasteCatalog.set(key, item);
                }
            });
    }

    if (sellPasteCatalogNode) {
        try {
            const parsedCatalog = JSON.parse(sellPasteCatalogNode.textContent || '[]');
            if (Array.isArray(parsedCatalog)) {
                parsedCatalog.forEach(registerSellPasteCatalogItem);
            } else {
                console.error('Failed to parse sell paste catalog: expected an array');
            }
        } catch (error) {
            console.error('Failed to parse sell paste catalog:', error);
        }
    }

    stockRows.forEach(row => {
        const typeName = row.dataset.typeName || '';
        const typeId = Number.parseInt(row.dataset.typeId || '0', 10);
        const availableQty = Number.parseInt(row.dataset.maxQty || '0', 10) || 0;
        if (!typeName || !typeId || availableQty <= 0) {
            return;
        }

        registerSellPasteCatalogItem({
            type_id: typeId,
            type_name: typeName,
            name_key: normalizePasteName(typeName),
            group_name: row.dataset.groupName || 'Other',
            available_qty: availableQty,
            total_available_qty: availableQty,
            status: 'accepted',
            reason: '',
            unit_price: row.dataset.unitPrice || ''
        });
    });

    const sellPasteMessages = {
        notBought: '{% trans "Not bought by the hub" %}',
        notOnCharacter: '{% trans "Not available on this character" %}',
        insufficient: '{% trans "Quantity exceeds what is available on the selected character" %}',
        unknown: '{% trans "Unknown item or unsupported line" %}',
        parseError: '{% trans "Could not read this line" %}'
    };

    const sellSearchPlaceholderByMode = {
        item: '{% trans "Search item" %}',
        category: '{% trans "Search category" %}'
    };

    function updateSellSearchPlaceholder() {
        if (!sellSearchInput) {
            return;
        }
        const selectedMode = query('input[name="sellSearchMode"]:checked')?.value || 'item';
        const placeholder = sellSearchPlaceholderByMode[selectedMode] || sellSearchPlaceholderByMode.item;
        sellSearchInput.placeholder = placeholder;
        sellSearchInput.setAttribute('aria-label', placeholder);
    }

    function applySellFilter() {
        if (!sellSearchInput) {
            return;
        }

        const query = (sellSearchInput.value || '').trim().toLowerCase();
        const selectedMode = root.querySelector('input[name="sellSearchMode"]:checked')?.value || 'item';
        let visibleCount = 0;

        stockRows.forEach(row => {
            const typeName = (row.dataset.typeName || '').toLowerCase();
            const groupName = (row.dataset.groupName || '').toLowerCase();
            const matches = !query || (selectedMode === 'category' ? groupName.includes(query) : typeName.includes(query));
            row.classList.toggle('d-none', !matches);
            if (matches) {
                visibleCount += 1;
            }
        });

        const emptyState = querySelectorFromRoot('sellSearchEmpty');
        if (emptyState) {
            emptyState.classList.toggle('d-none', visibleCount > 0);
        }
    }

    function querySelectorFromRoot(id) {
        return query('#' + id);
    }

    if (sellSearchInput) {
        sellSearchInput.addEventListener('keydown', function(event) {
            if (event.key === 'Enter') {
                event.preventDefault();
            }
        });
        sellSearchInput.addEventListener('input', applySellFilter);
        sellSearchModeInputs.forEach(input => input.addEventListener('change', () => {
            updateSellSearchPlaceholder();
            applySellFilter();
        }));
        updateSellSearchPlaceholder();
        applySellFilter();
    }

    function applyBulkActionToVisibleRows(action) {
        stockRows.forEach(row => {
            if (row.classList.contains('d-none')) {
                return;
            }

            const input = row.querySelector('.qty-input');
            if (!input) {
                return;
            }

            if (action === 'clear-visible') {
                input.value = 0;
            } else if (action === 'max-visible') {
                input.value = input.dataset.max || 0;
            }
        });

        updateInvoice();
    }

    sellBulkButtons.forEach(button => {
        button.addEventListener('click', function() {
            applyBulkActionToVisibleRows(this.dataset.action);
        });
    });

    root.addEventListener('click', function(event) {
        const button = event.target.closest('.qty-btn');
        if (!button) {
            return;
        }
        const row = button.closest('tr');
        if (!row) {
            return;
        }
        const input = row.querySelector('.qty-input');
        if (!input) {
            return;
        }
        const action = button.dataset.action;
        if (action === 'zero') {
            input.value = 0;
        } else if (action === 'max') {
            input.value = input.dataset.max || 0;
        }
        updateInvoice();
    });

    function formatNumber(num) {
        return new Intl.NumberFormat('en-US', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        }).format(num);
    }

    function formatWholeISK(num) {
        return new Intl.NumberFormat('en-US', {
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        }).format(num);
    }

    function collapseWhitespace(value) {
        return String(value || '').replace(/\s+/g, ' ').trim();
    }

    function normalizePasteName(value) {
        return collapseWhitespace(value).toLocaleLowerCase();
    }

    function parseQuantityToken(value) {
        const token = String(value || '').trim();
        if (!token || !/^[\d\s,.\u00A0]+$/.test(token)) {
            return null;
        }
        const digits = token.replace(/\D/g, '');
        if (!digits) {
            return null;
        }
        const quantity = Number.parseInt(digits, 10);
        return Number.isFinite(quantity) && quantity > 0 ? quantity : null;
    }

    function extractQuantityCandidates(value) {
        const source = collapseWhitespace(value);
        if (!source) {
            return [];
        }

        return Array.from(source.matchAll(/\d{1,3}(?:[\s.,\u00A0]\d{3})+(?:[.,]\d{1,2})?|\d+[.,]\d{1,2}|\d+/g))
            .map(match => {
                const raw = collapseWhitespace(match[0]);
                const quantity = parseQuantityToken(raw);
                if (quantity === null) {
                    return null;
                }

                const compact = raw.replace(/[\s\u00A0]+/g, '');
                const trailingText = collapseWhitespace(source.slice(match.index + match[0].length));
                return {
                    quantity,
                    looksLikePrice: /[,.]\d{1,2}$/.test(compact),
                    followedByIsk: /^ISK\b/i.test(trailingText)
                };
            })
            .filter(Boolean);
    }

    function pickBestQuantityCandidate(candidates) {
        if (!candidates.length) {
            return null;
        }

        return candidates.find(candidate => !candidate.looksLikePrice && !candidate.followedByIsk)
            || candidates.find(candidate => !candidate.followedByIsk)
            || candidates.find(candidate => !candidate.looksLikePrice)
            || candidates[0];
    }

    function isCatalogBoundaryCharacter(value) {
        return !value || /[^\p{L}\p{N}]/u.test(value);
    }

    function findCatalogEntryInText(value) {
        const normalizedValue = normalizePasteName(value);
        if (!normalizedValue) {
            return null;
        }

        let bestMatch = null;
        sellPasteCatalog.forEach((item, key) => {
            if (!key) {
                return;
            }

            const matchIndex = normalizedValue.indexOf(key);
            if (matchIndex === -1) {
                return;
            }

            const beforeChar = normalizedValue[matchIndex - 1] || '';
            const afterChar = normalizedValue[matchIndex + key.length] || '';
            if (!isCatalogBoundaryCharacter(beforeChar) || !isCatalogBoundaryCharacter(afterChar)) {
                return;
            }

            if (!bestMatch || key.length > bestMatch.key.length) {
                bestMatch = { item, key, matchIndex };
            }
        });

        return bestMatch;
    }

    function parseKnownCatalogPasteLine(rawLine) {
        const normalizedLine = collapseWhitespace(rawLine);
        const catalogMatch = findCatalogEntryInText(normalizedLine);
        if (!catalogMatch) {
            return null;
        }

        const remainder = collapseWhitespace(
            normalizedLine.slice(0, catalogMatch.matchIndex)
            + ' '
            + normalizedLine.slice(catalogMatch.matchIndex + catalogMatch.key.length)
        );
        const quantityCandidate = pickBestQuantityCandidate(extractQuantityCandidates(remainder));
        if (!quantityCandidate) {
            if (!remainder) {
                return {
                    name: catalogMatch.item.type_name,
                    quantity: 1
                };
            }
            return null;
        }

        return {
            name: catalogMatch.item.type_name,
            quantity: quantityCandidate.quantity
        };
    }

    function parsePasteLine(rawLine) {
        const normalizedLine = collapseWhitespace(rawLine);
        if (!normalizedLine) {
            return null;
        }

        const knownCatalogLine = parseKnownCatalogPasteLine(rawLine);
        if (knownCatalogLine) {
            return knownCatalogLine;
        }

        const tabColumns = String(rawLine || '')
            .split('\t')
            .map(column => collapseWhitespace(column))
            .filter(Boolean);
        if (tabColumns.length >= 2) {
            const numericColumns = tabColumns
                .map((column, index) => ({ index, quantity: parseQuantityToken(column) }))
                .filter(column => column.quantity !== null);
            if (numericColumns.length === 1) {
                const quantityColumn = numericColumns[0];
                const name = collapseWhitespace(
                    tabColumns
                        .filter((column, index) => index !== quantityColumn.index)
                        .join(' ')
                );
                if (name) {
                    return { name, quantity: quantityColumn.quantity };
                }
            }

            const lastColumnQuantity = parseQuantityToken(tabColumns[tabColumns.length - 1]);
            if (lastColumnQuantity !== null) {
                const name = collapseWhitespace(tabColumns.slice(0, -1).join(' '));
                if (name) {
                    return { name, quantity: lastColumnQuantity };
                }
            }
        }

        let matched = normalizedLine.match(/^(.*?)\s+x\s+([\d\s,.\u00A0]+)$/i);
        if (matched) {
            const name = collapseWhitespace(matched[1]);
            const quantity = parseQuantityToken(matched[2]);
            if (name && quantity !== null) {
                return { name, quantity };
            }
        }

        matched = normalizedLine.match(/^([\d\s,.\u00A0]+)\s+x?\s+(.+)$/i);
        if (matched) {
            const quantity = parseQuantityToken(matched[1]);
            const name = collapseWhitespace(matched[2]);
            if (name && quantity !== null) {
                return { name, quantity };
            }
        }

        const lastSpaceIndex = normalizedLine.lastIndexOf(' ');
        if (lastSpaceIndex > 0) {
            const maybeQuantity = parseQuantityToken(normalizedLine.slice(lastSpaceIndex + 1));
            const name = collapseWhitespace(normalizedLine.slice(0, lastSpaceIndex));
            if (name && maybeQuantity !== null) {
                return { name, quantity: maybeQuantity };
            }
        }

        return { error: normalizedLine };
    }

    function buildPasteEntries(rawText) {
        const aggregatedEntries = new Map();
        const parseErrors = [];

        String(rawText || '')
            .replace(/\r/g, '')
            .split('\n')
            .forEach(rawLine => {
                const parsedLine = parsePasteLine(rawLine);
                if (!parsedLine) {
                    return;
                }
                if (parsedLine.error) {
                    parseErrors.push(parsedLine.error);
                    return;
                }

                const key = normalizePasteName(parsedLine.name);
                const existing = aggregatedEntries.get(key);
                if (existing) {
                    existing.quantity += parsedLine.quantity;
                    return;
                }

                aggregatedEntries.set(key, {
                    key,
                    label: parsedLine.name,
                    quantity: parsedLine.quantity
                });
            });

        return {
            entries: Array.from(aggregatedEntries.values()),
            parseErrors
        };
    }

    function renderPasteList(containerId, emptyId, items, formatter) {
        const container = query('#' + containerId);
        const emptyState = query('#' + emptyId);
        if (!container || !emptyState) {
            return;
        }

        if (!items.length) {
            container.innerHTML = '';
            emptyState.classList.remove('d-none');
            return;
        }

        emptyState.classList.add('d-none');
        container.innerHTML = items.map(item => formatter(item)).join('');
    }

    function syncPasteResultCard(cardId, itemCount) {
        const card = query('#' + cardId);
        if (!card) {
            return false;
        }

        const hasItems = itemCount > 0;
        card.classList.toggle('d-none', !hasItems);
        return hasItems;
    }

    function applyPasteQuantities(quantitiesByType) {
        qtyInputs.forEach(input => {
            input.value = 0;
            input.classList.remove('is-invalid');
            const errorDiv = query('#error-' + input.dataset.typeId);
            if (errorDiv) {
                errorDiv.style.display = 'none';
            }
        });

        Object.entries(quantitiesByType).forEach(([typeId, quantity]) => {
            const input = query('#qty-' + typeId);
            if (input) {
                input.value = quantity;
            }
        });

        if (sellPasteQuantitiesJson) {
            sellPasteQuantitiesJson.value = JSON.stringify(quantitiesByType);
        }
        updateInvoice();
    }

    function getSellPasteCsrfToken() {
        return query('input[name="csrfmiddlewaretoken"]')?.value || '';
    }

    function getSelectedCharacterId() {
        const url = new URL(window.location.href);
        const characterParam = url.searchParams.get('character') || '';
        if (/^\d+$/.test(characterParam)) {
            return characterParam;
        }

        const selectedUrl = sellCharacterSelect?.selectedOptions?.[0]?.value || '';
        if (selectedUrl) {
            try {
                const optionUrl = new URL(selectedUrl, window.location.origin);
                const optionCharacter = optionUrl.searchParams.get('character') || '';
                if (/^\d+$/.test(optionCharacter)) {
                    return optionCharacter;
                }
            } catch (error) {
                return '';
            }
        }
        return '';
    }

    function scheduleSellPasteDbResolution(entries) {
        entries.forEach(entry => {
            if (!entry || !entry.key || sellPasteResolvedDbItems.has(entry.key) || sellPasteResolvePending.has(entry.key)) {
                return;
            }
            sellPasteResolveQueue.set(entry.key, entry.label);
        });

        if (!sellPasteResolveQueue.size || !sellPasteResolveUrl) {
            return;
        }

        if (sellPasteResolveTimer) {
            window.clearTimeout(sellPasteResolveTimer);
        }
        const resolveToken = ++sellPasteResolveToken;
        sellPasteResolveTimer = window.setTimeout(async () => {
            sellPasteResolveTimer = null;
            const pendingEntries = Array.from(sellPasteResolveQueue.entries());
            sellPasteResolveQueue.clear();
            pendingEntries.forEach(([key]) => {
                sellPasteResolvePending.add(key);
            });
            const namesToResolve = pendingEntries.map(([, label]) => label);
            try {
                const response = await fetch(sellPasteResolveUrl, {
                    method: 'POST',
                    credentials: 'same-origin',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRFToken': getSellPasteCsrfToken()
                    },
                    body: JSON.stringify({
                        names: namesToResolve,
                        character_id: getSelectedCharacterId()
                    })
                });
                if (!response.ok) {
                    throw new Error('Paste item resolver request failed');
                }

                const payload = await response.json();
                const items = payload && typeof payload.items === 'object' ? payload.items : {};
                Object.entries(items).forEach(([key, result]) => {
                    sellPasteResolvePending.delete(key);
                    if (result && result.found && result.item) {
                        sellPasteResolvedDbItems.set(key, result.item);
                        registerSellPasteCatalogItem(result.item);
                    } else {
                        sellPasteResolvedDbItems.set(key, null);
                    }
                });
                pendingEntries.forEach(([key]) => {
                    if (sellPasteResolvePending.has(key)) {
                        sellPasteResolvePending.delete(key);
                        sellPasteResolvedDbItems.set(key, null);
                    }
                });
            } catch (error) {
                console.error('Failed to resolve pasted item names:', error);
                pendingEntries.forEach(([key]) => {
                    sellPasteResolvePending.delete(key);
                });
            } finally {
                if (resolveToken === sellPasteResolveToken) {
                    updatePasteImport();
                }
            }
        }, 150);
    }

    function updatePasteImport() {
        if (!sellPasteTextarea) {
            return;
        }

        const rawText = sellPasteTextarea.value || '';
        const collapsedText = collapseWhitespace(rawText);
        if (!collapsedText) {
            applyPasteQuantities({});
            if (sellPasteResults) {
                sellPasteResults.classList.add('d-none');
            }
            ['Accepted', 'Rejected', 'Unavailable', 'Unknown'].forEach(prefix => {
                const countNode = query('#sellPaste' + prefix + 'Count');
                const badgeNode = query('#sellPaste' + prefix + 'Badge');
                if (countNode) {
                    countNode.textContent = '0';
                }
                if (badgeNode) {
                    badgeNode.textContent = '0';
                }
            });
            const acceptedValueNode = query('#sellPasteAcceptedValue');
            if (acceptedValueNode) {
                acceptedValueNode.textContent = '0 ISK';
            }
            return;
        }

        const parsed = buildPasteEntries(rawText);
        const acceptedItems = [];
        const rejectedItems = [];
        const unavailableItems = [];
        const unknownItems = parsed.parseErrors.map(line => ({
            label: line,
            detail: sellPasteMessages.parseError
        }));
        const entriesNeedingDbResolution = [];
        const quantitiesByType = {};
        let acceptedTotalCents = 0;

        parsed.entries.forEach(entry => {
            let catalogItem = sellPasteCatalog.get(entry.key);
            if (!catalogItem) {
                const resolvedItem = sellPasteResolvedDbItems.get(entry.key);
                if (resolvedItem) {
                    catalogItem = resolvedItem;
                } else if (resolvedItem === null) {
                    unknownItems.push({
                        label: `${entry.label} x ${entry.quantity.toLocaleString()}`,
                        detail: sellPasteMessages.unknown
                    });
                    return;
                } else {
                    entriesNeedingDbResolution.push(entry);
                    return;
                }
            }

            if (!catalogItem) {
                unknownItems.push({
                    label: `${entry.label} x ${entry.quantity.toLocaleString()}`,
                    detail: sellPasteMessages.unknown
                });
                return;
            }

            if (catalogItem.status !== 'accepted') {
                if (catalogItem.status === 'unavailable') {
                    const totalOwned = Number.parseInt(catalogItem.total_available_qty || '0', 10) || 0;
                    unavailableItems.push({
                        label: `${catalogItem.type_name} x ${entry.quantity.toLocaleString()}`,
                        detail: totalOwned > 0
                            ? `${sellPasteMessages.notOnCharacter} (${totalOwned.toLocaleString()})`
                            : sellPasteMessages.notOnCharacter
                    });
                    return;
                }

                rejectedItems.push({
                    label: `${catalogItem.type_name} x ${entry.quantity.toLocaleString()}`,
                    detail: sellPasteMessages.notBought
                });
                return;
            }

            if (entry.quantity > Number.parseInt(catalogItem.available_qty, 10)) {
                rejectedItems.push({
                    label: `${catalogItem.type_name} x ${entry.quantity.toLocaleString()}`,
                    detail: `${sellPasteMessages.insufficient} (${catalogItem.available_qty.toLocaleString()})`
                });
                return;
            }

            const unitPriceCents = toCents(catalogItem.unit_price);
            const subtotalCents = unitPriceCents * entry.quantity;
            acceptedTotalCents += subtotalCents;
            quantitiesByType[String(catalogItem.type_id)] = entry.quantity;
            acceptedItems.push({
                label: catalogItem.type_name,
                quantity: entry.quantity,
                unitPrice: Number.parseFloat(catalogItem.unit_price || '0'),
                subtotalCents
            });
        });

        scheduleSellPasteDbResolution(entriesNeedingDbResolution);

        applyPasteQuantities(quantitiesByType);

        if (sellPasteResults) {
            sellPasteResults.classList.remove('d-none');
        }

        const acceptedCountNode = query('#sellPasteAcceptedCount');
        const rejectedCountNode = query('#sellPasteRejectedCount');
        const unavailableCountNode = query('#sellPasteUnavailableCount');
        const unknownCountNode = query('#sellPasteUnknownCount');
        const acceptedBadgeNode = query('#sellPasteAcceptedBadge');
        const rejectedBadgeNode = query('#sellPasteRejectedBadge');
        const unavailableBadgeNode = query('#sellPasteUnavailableBadge');
        const unknownBadgeNode = query('#sellPasteUnknownBadge');
        const acceptedValueNode = query('#sellPasteAcceptedValue');
        const resultsGrid = query('#sellPasteResultsGrid');

        if (acceptedCountNode) {
            acceptedCountNode.textContent = acceptedItems.length.toLocaleString();
        }
        if (rejectedCountNode) {
            rejectedCountNode.textContent = rejectedItems.length.toLocaleString();
        }
        if (unavailableCountNode) {
            unavailableCountNode.textContent = unavailableItems.length.toLocaleString();
        }
        if (unknownCountNode) {
            unknownCountNode.textContent = unknownItems.length.toLocaleString();
        }
        if (acceptedBadgeNode) {
            acceptedBadgeNode.textContent = acceptedItems.length.toLocaleString();
        }
        if (rejectedBadgeNode) {
            rejectedBadgeNode.textContent = rejectedItems.length.toLocaleString();
        }
        if (unavailableBadgeNode) {
            unavailableBadgeNode.textContent = unavailableItems.length.toLocaleString();
        }
        if (unknownBadgeNode) {
            unknownBadgeNode.textContent = unknownItems.length.toLocaleString();
        }
        if (acceptedValueNode) {
            acceptedValueNode.textContent = formatWholeISK(Math.ceil(acceptedTotalCents / 100)) + ' ISK';
        }

        const visibleCardCount = [
            syncPasteResultCard('sellPasteAcceptedCard', acceptedItems.length),
            syncPasteResultCard('sellPasteRejectedCard', rejectedItems.length),
            syncPasteResultCard('sellPasteUnavailableCard', unavailableItems.length),
            syncPasteResultCard('sellPasteUnknownCard', unknownItems.length)
        ].filter(Boolean).length;

        if (resultsGrid) {
            resultsGrid.classList.toggle('is-single-card', visibleCardCount <= 1);
        }

        renderPasteList('sellPasteAcceptedList', 'sellPasteAcceptedEmpty', acceptedItems, item => `
            <article class="me-paste-line me-paste-line-accepted">
                <div>
                    <div class="me-paste-line-title">${item.label}</div>
                    <div class="me-paste-line-meta">${item.quantity.toLocaleString()} × ${formatNumber(item.unitPrice)} ISK</div>
                </div>
                <div class="me-paste-line-value text-success">${formatNumber(item.subtotalCents / 100)} ISK</div>
            </article>
        `);
        renderPasteList('sellPasteRejectedList', 'sellPasteRejectedEmpty', rejectedItems, item => `
            <article class="me-paste-line me-paste-line-rejected">
                <div>
                    <div class="me-paste-line-title">${item.label}</div>
                    <div class="me-paste-line-meta">${item.detail}</div>
                </div>
            </article>
        `);
        renderPasteList('sellPasteUnavailableList', 'sellPasteUnavailableEmpty', unavailableItems, item => `
            <article class="me-paste-line me-paste-line-unknown">
                <div>
                    <div class="me-paste-line-title">${item.label}</div>
                    <div class="me-paste-line-meta">${item.detail}</div>
                </div>
            </article>
        `);
        renderPasteList('sellPasteUnknownList', 'sellPasteUnknownEmpty', unknownItems, item => `
            <article class="me-paste-line me-paste-line-unknown">
                <div>
                    <div class="me-paste-line-title">${item.label}</div>
                    <div class="me-paste-line-meta">${item.detail}</div>
                </div>
            </article>
        `);
    }

    function syncSellInputMode() {
        const selectedMode = document.querySelector('input[name="sellInputModeSelector"]:checked')?.value || 'manual';
        if (sellInputModeField) {
            sellInputModeField.value = selectedMode;
        }
        sellModePanels.forEach(panel => {
            panel.classList.toggle('d-none', panel.dataset.sellModePanel !== selectedMode);
        });
        if (selectedMode === 'paste') {
            updatePasteImport();
        }
    }

    function toCents(value) {
        const numeric = Number.parseFloat(value);
        if (!Number.isFinite(numeric)) {
            return 0;
        }
        return Math.round(numeric * 100);
    }

    function checkQuantityLimit(input) {
        const qty = parseInt(input.value) || 0;
        const max = parseInt(input.dataset.max);
        const typeId = input.dataset.typeId;
        const errorDiv = query('#error-' + typeId);

        if (qty > max) {
            input.classList.add('is-invalid');
            if (errorDiv) {
                errorDiv.style.display = 'block';
            }
            return false;
        } else {
            input.classList.remove('is-invalid');
            if (errorDiv) {
                errorDiv.style.display = 'none';
            }
            return true;
        }
    }

    function updateInvoice() {
        const selectedItems = [];
        let totalCents = 0;

        qtyInputs.forEach(input => {
            const qty = parseInt(input.value) || 0;
            const row = input.closest('tr');

            // Check limit but don't auto-correct during typing
            checkQuantityLimit(input);

            if (qty > 0) {
                const typeId = input.dataset.typeId;
                const typeName = row.dataset.typeName;
                const unitPrice = parseFloat(row.dataset.unitPrice);
                const max = parseInt(input.dataset.max);

                // Use actual qty or max, whichever is lower for calculation
                const effectiveQty = Math.min(qty, max);
                const unitPriceCents = toCents(row.dataset.unitPrice);
                const subtotalCents = unitPriceCents * effectiveQty;
                const subtotal = subtotalCents / 100;

                selectedItems.push({
                    name: typeName,
                    qty: effectiveQty,
                    unitPrice: unitPrice,
                    subtotal: subtotal
                });

                totalCents += subtotalCents;
                row.classList.add('selected');
            } else {
                row.classList.remove('selected');
            }
        });

        // Match server-side `MaterialExchangeSellOrder.total_price`: ceil to whole ISK.
        const total = Math.ceil(totalCents / 100);

        const emptyInvoice = query('#invoiceContent');
        const invoiceItems = query('#invoiceItems');
        const itemsList = query('#itemsList');
        const totalAmount = query('#totalAmount');

        if (selectedItems.length === 0) {
            emptyInvoice.classList.remove('d-none');
            invoiceItems.classList.add('d-none');
        } else {
            emptyInvoice.classList.add('d-none');
            invoiceItems.classList.remove('d-none');

            let itemsHTML = '';
            selectedItems.forEach(item => {
                itemsHTML += `
                    <div class="invoice-item">
                        <div class="d-flex justify-content-between mb-1">
                            <strong>${item.name}</strong>
                            <span class="text-success fw-semibold">${formatNumber(item.subtotal)} ISK</span>
                        </div>
                        <div class="d-flex justify-content-between small text-muted">
                            <span>${item.qty.toLocaleString()} × ${formatNumber(item.unitPrice)} ISK</span>
                        </div>
                    </div>
                `;
            });

            itemsList.innerHTML = itemsHTML;
            totalAmount.textContent = formatWholeISK(total) + ' ISK';
        }
    }

    qtyInputs.forEach(input => {
        input.addEventListener('input', function() {
            updateInvoice();
        });

        input.addEventListener('blur', function() {
            // Auto-correct on blur
            const qty = parseInt(this.value) || 0;
            const max = parseInt(this.dataset.max);
            if (qty > max) {
                this.value = max;
                updateInvoice();
            }
        });
    });

    sellInputModeInputs.forEach(input => {
        input.addEventListener('change', syncSellInputMode);
    });

    if (sellPasteTextarea) {
        sellPasteTextarea.addEventListener('input', updatePasteImport);
    }

    if (sellPasteClearButton) {
        sellPasteClearButton.addEventListener('click', function() {
            if (sellPasteTextarea) {
                sellPasteTextarea.value = '';
            }
            updatePasteImport();
        });
    }

    // Prevent form submission if any quantity exceeds stock
    if (sellForm) {
        sellForm.addEventListener('submit', function(e) {
            let hasError = false;
            const disabledForSubmit = [];
            qtyInputs.forEach(input => {
                const qty = parseInt(input.value) || 0;
                const max = parseInt(input.dataset.max);
                if (qty <= 0) {
                    input.disabled = true;
                    disabledForSubmit.push(input);
                    return;
                }
                if (qty > max) {
                    hasError = true;
                    input.value = max; // Auto-correct
                }
            });

            if (hasError) {
                e.preventDefault();
                disabledForSubmit.forEach(input => {
                    input.disabled = false;
                });
                alert('{% trans "Some quantities exceeded what you own and have been adjusted." %}');
                updateInvoice();
                return false;
            }
        });
    }

    // Initial update (only if invoice elements exist)
    const hasInvoice = query('#invoiceContent') && query('#invoiceItems');
    if (hasInvoice) {
        updateInvoice();
    }

    function applyPersistedState() {
        if (!persistedState) {
            return;
        }

        if (persistedState.searchMode) {
            const searchModeInput = query(`input[name="sellSearchMode"][value="${persistedState.searchMode}"]`);
            if (searchModeInput) {
                searchModeInput.checked = true;
            }
        }
        if (sellSearchInput && persistedState.searchQuery) {
            sellSearchInput.value = persistedState.searchQuery;
        }
        if (persistedState.inputMode) {
            const inputModeNode = query(`input[name="sellInputModeSelector"][value="${persistedState.inputMode}"]`);
            if (inputModeNode) {
                inputModeNode.checked = true;
            }
        }
        if (sellPasteTextarea && persistedState.pasteText) {
            sellPasteTextarea.value = persistedState.pasteText;
        }
    }

    applyPersistedState();
    syncSellInputMode();
    applySellFilter();

    function formatLocalTimes(container) {
        container.querySelectorAll('.js-local-time[data-utc]').forEach(function(node) {
            const utcValue = node.getAttribute('data-utc');
            if (!utcValue) {
                return;
            }
            const date = new Date(utcValue);
            if (Number.isNaN(date.getTime())) {
                return;
            }
            const formatted = new Intl.DateTimeFormat(undefined, {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                hour12: false
            }).format(date);
            node.textContent = formatted.replace(/\//g, '-');
        });
    }

    async function swapSellDynamicContent(url, stateToPersist) {
        const dynamicRoot = document.getElementById('sellPageDynamicContent');
        if (!dynamicRoot || !url) {
            window.location.href = url;
            return;
        }

        sellPageState.activePollToken = 0;
        if (sellPageState.pollTimer) {
            clearTimeout(sellPageState.pollTimer);
            sellPageState.pollTimer = null;
        }
        if (sellPageState.swapTimer) {
            clearTimeout(sellPageState.swapTimer);
            sellPageState.swapTimer = null;
        }
        const swapRequestToken = ++sellPageState.swapRequestToken;

        dynamicRoot.classList.add('opacity-50', 'pe-none');
        if (sellCharacterSelect) {
            sellCharacterSelect.disabled = true;
        }

        try {
            const response = await fetch(url, {
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
                credentials: 'same-origin'
            });
            if (!response.ok) {
                throw new Error('Fragment request failed');
            }

            const payload = await response.json();
            if (!payload || typeof payload.html !== 'string') {
                throw new Error('Invalid fragment payload');
            }
            if (swapRequestToken !== sellPageState.swapRequestToken) {
                return;
            }

            const wrapper = document.createElement('div');
            wrapper.innerHTML = `<div id="sellPageDynamicContent">${payload.html}</div>`;
            const replacementRoot = wrapper.firstElementChild;
            if (!replacementRoot) {
                throw new Error('Missing fragment root');
            }

            dynamicRoot.replaceWith(replacementRoot);
            window.history.replaceState({}, document.title, url);
            formatLocalTimes(replacementRoot);
            window.initMaterialExchangeSellPage(replacementRoot, stateToPersist || null);
        } catch (error) {
            console.error('Failed to refresh sell fragment:', error);
            window.location.href = url;
        }
    }

    if (sellCharacterSelect) {
        sellCharacterSelect.addEventListener('change', function() {
            if (!this.value) {
                return;
            }
            const stateToPersist = {
                inputMode: query('input[name="sellInputModeSelector"]:checked')?.value || 'manual',
                pasteText: sellPasteTextarea ? sellPasteTextarea.value || '' : '',
                searchQuery: sellSearchInput ? sellSearchInput.value || '' : '',
                searchMode: query('input[name="sellSearchMode"]:checked')?.value || 'item'
            };
            swapSellDynamicContent(this.value, stateToPersist);
        });
    }

    formatLocalTimes(root);

    // Live asset refresh progress (per character)
    {% if assets_refreshing %}
    if (!sellPageState.refreshCompleted) {
    sellPageState.activePollToken = initToken;
    const statusUrl = '{% url "indy_hub:material_exchange_sell_assets_refresh_status" %}';
    const lastUpdateNode = document.querySelector('.js-local-time[data-utc]');
    const initialLastUpdate = lastUpdateNode ? lastUpdateNode.getAttribute('data-utc') : null;

    function schedulePoll(delayMs) {
        if (sellPageState.activePollToken !== initToken) {
            return;
        }
        if (sellPageState.pollTimer) {
            clearTimeout(sellPageState.pollTimer);
        }
        sellPageState.pollTimer = window.setTimeout(pollAssetsProgress, delayMs);
    }

    async function pollAssetsProgress() {
        if (sellPageState.activePollToken !== initToken) {
            return;
        }

        try {
            const resp = await fetch(statusUrl, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
            if (!resp.ok) {
                return;
            }
            const data = await resp.json();
            if (sellPageState.activePollToken !== initToken) {
                return;
            }
            const total = parseInt(data.total || 0);
            const done = parseInt(data.done || 0);
            const error = data.error || null;
            const serverLastUpdate = data.last_update || null;

            if (data.running) {
                schedulePoll(1000);
                return;
            }

            sellPageState.activePollToken = 0;
            if (sellPageState.pollTimer) {
                clearTimeout(sellPageState.pollTimer);
                sellPageState.pollTimer = null;
            }

            if (data.finished && (!error || error === 'timeout' || error === 'no_assets_fetched')) {
                sellPageState.refreshCompleted = true;
                const url = new URL(window.location.href);
                if (url.searchParams.get('refreshed') !== '1') {
                    const initialTime = initialLastUpdate ? Date.parse(initialLastUpdate) : null;
                    const serverTime = serverLastUpdate ? Date.parse(serverLastUpdate) : null;
                    const hasNewTimestamp = serverTime && (!initialTime || serverTime > initialTime);
                    url.searchParams.set('refreshed', '1');
                    if (sellPageState.swapTimer) {
                        clearTimeout(sellPageState.swapTimer);
                    }
                    sellPageState.swapTimer = window.setTimeout(() => {
                        sellPageState.swapTimer = null;
                        swapSellDynamicContent(url.toString());
                    }, hasNewTimestamp ? 300 : 1200);
                }
                return;
            }

            if (error) {
                console.warn('Sell asset refresh finished with error:', error, { total, done });
            }
        } catch (e) {
            if (sellPageState.activePollToken === initToken) {
                schedulePoll(3000);
            }
        }
    }

    pollAssetsProgress();
    }
    {% endif %}
};

document.addEventListener('DOMContentLoaded', function() {
    const dynamicRoot = document.getElementById('sellPageDynamicContent');
    if (dynamicRoot && typeof window.initMaterialExchangeSellPage === 'function') {
        window.initMaterialExchangeSellPage(dynamicRoot, null);
    }
});
</script>
{% endblock content %}

{% block extra_javascript %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof window.initMaterialExchangeSellPage === 'function') {
        return;
    }
});
</script>
{% endblock extra_javascript %}