{% 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' %}">
{% 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-center justify-content-between gap-3">
                <div>
                    <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 corp" %}</p>
                </div>
                <div class="d-flex gap-2">
                    <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 class="glass-panel p-4 mb-4">
            <div class="d-flex align-items-start gap-3">
                <i class="fas fa-info-circle text-info mt-1 info-icon-fixed"></i>
                <div class="info-body-flex">
                    <p class="mb-2 small text-muted text-uppercase">{% trans "Pricing Formula" %}</p>
                    <div class="d-flex align-items-baseline gap-2 flex-wrap">
                        <span class="fw-semibold">
                            {% if config.sell_markup_base == 'sell' %}
                                {% trans "Jita Sell Price" %}
                            {% else %}
                                {% trans "Jita Buy Price" %}
                            {% endif %}
                        </span>
                        {% if config.sell_markup_percent > 0 %}
                        <span class="text-success">+</span>
                        <span class="text-success fw-bold h5 mb-0">{{ config.sell_markup_percent }}%</span>
                        {% elif config.sell_markup_percent < 0 %}
                        <span class="text-success fw-bold h5 mb-0">{{ config.sell_markup_percent }}%</span>
                        {% else %}
                        <span class="text-muted small">({% trans "no markup" %})</span>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="alert alert-info mt-3 mb-0">
                <i class="fas fa-exclamation-circle me-2"></i>
                <small>{% trans "Enter the quantities you want to sell. Make sure you have the items in your hangar." %}</small>
            </div>
            {% if sell_assets_progress.error == "missing_assets_scope" %}
            <div class="alert alert-danger mt-3 mb-0">
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                    <div>
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        {% trans "Missing assets token: add the ESI assets scope to load your assets." %}
                    </div>
                    <a class="btn btn-outline-light btn-sm" href="{% url 'indy_hub:authorize_assets' %}">
                        <i class="fas fa-key me-1"></i>{% trans "Add assets token" %}
                    </a>
                </div>
            </div>
            {% endif %}
            {% if assets_refreshing %}
            <div class="alert alert-warning mt-3 mb-0">
                <i class="fas fa-sync fa-spin me-2"></i>
                {% trans "Loading your asset inventory. This may take a moment..." %}
            </div>
            {% endif %}
                <p class="text-sm opacity-70">
                    {% trans "Last update" %}:
                    {% if sell_last_update %}
                        {{ sell_last_update|timezone:"UTC"|date:"Y-m-d H:i" }} EVE
                    {% else %}
                        {% trans "Never" %}
                    {% endif %}
                </p>
        </div>

        {% if materials %}
        <div class="row g-4">
            <div class="col-lg-8">
                <div class="glass-panel p-4">
                    <h5 class="mb-4">
                        <i class="fas fa-warehouse me-2"></i>
                        {% trans "Your Materials at" %} {{ config.structure_name }}
                    </h5>
                    <form method="post" id="sellForm">
                        {% csrf_token %}
                        <input type="hidden" id="hidden_order_reference" name="order_reference" value="">
                        <div class="table-responsive">
                            <table class="table table-hover stock-table align-middle">
                                <thead>
                                    <tr>
                                        <th class="stock-col-icon"></th>
                                        <th>{% trans "Item" %}</th>
                                        <th class="text-end">{% trans "You Own" %}</th>
                                        <th class="text-end">{% trans "Unit Price" %}</th>
                                        <th class="text-center stock-col-qty">{% trans "Quantity" %}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for item in materials %}
                                    <tr class="stock-row"
                                        data-type-id="{{ item.type_id }}"
                                        data-type-name="{{ item.type_name }}"
                                        data-unit-price="{{ item.buy_price_from_member }}"
                                        data-max-qty="{{ item.user_quantity }}">
                                        <td>
                                            <img
                                                src="https://images.evetech.net/types/{{ item.type_id }}/icon?size=64"
                                                alt="{{ item.type_name }}"
                                                class="item-icon">
                                        </td>
                                        <td>
                                            <strong>{{ item.type_name }}</strong>
                                        </td>
                                        <td class="text-end">
                                            <span class="badge bg-success">{{ item.user_quantity|intcomma }}</span>
                                        </td>
                                        <td class="text-end text-success fw-semibold">
                                            {{ item.buy_price_from_member|floatformat:2|intcomma }} ISK
                                        </td>
                                        <td class="text-center">
                                            <div>
                                                <input
                                                    type="number"
                                                    name="qty_{{ item.type_id }}"
                                                    id="qty-{{ item.type_id }}"
                                                    class="form-control qty-input"
                                                    min="0"
                                                    max="{{ item.user_quantity }}"
                                                    value="0"
                                                    data-type-id="{{ item.type_id }}"
                                                    data-max="{{ item.user_quantity }}">
                                                <div class="qty-error" id="error-{{ item.type_id }}">
                                                    {% trans "Max:" %} {{ item.user_quantity|intcomma }}
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </form>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="invoice-panel">
                    <div class="glass-panel p-4">
                        <h5 class="mb-3">
                            <i class="fas fa-receipt me-2"></i>{% trans "Sell Summary" %}
                        </h5>
                        <div id="invoiceContent">
                            <div class="empty-invoice">
                                <i class="fas fa-hand-holding-usd fa-3x mb-3 opacity-25"></i>
                                <p class="mb-0">{% trans "Enter quantities to see your payout" %}</p>
                            </div>
                        </div>
                        <div id="invoiceItems" class="d-none">
                            <div id="itemsList"></div>
                            <div class="invoice-total">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="fw-bold">{% trans "Total Payout" %}</span>
                                    <span class="h4 mb-0 text-success" id="totalAmount">0 ISK</span>
                                </div>
                                <button type="button" class="btn btn-success w-100 mt-3" data-bs-toggle="modal" data-bs-target="#contractDetailsModal">
                                    <i class="fas fa-paper-plane me-2"></i>{% trans "Submit Sell Order" %}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Contract Details Modal -->
        <div class="modal fade" id="contractDetailsModal" tabindex="-1" aria-labelledby="contractDetailsModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="contractDetailsModalLabel">
                            <i class="fas fa-file-contract me-2 text-info"></i>
                            {% trans "Create In-Game Contract" %}
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-info mb-4">
                            <i class="fas fa-exclamation-circle me-2"></i>
                            <strong>{% trans "Important:" %}</strong> {% trans "Create an in-game contract with the following details to match your sell order. Copy the Reference ID into the contract title." %}
                        </div>

                        <div class="alert alert-warning mb-4">
                            <i class="fas fa-map-marker-alt me-2"></i>
                            <strong>{% trans "Location:" %}</strong> {{ config.structure_name }} <small class="text-muted">(ID: {{ config.structure_id }})</small>
                        </div>

                        <div class="contract-details">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="detail-card">
                                        <label class="fw-bold text-muted small">{% trans "Contract Type" %}</label>
                                        <div class="detail-value">Item Exchange</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="detail-card">
                                        <label class="fw-bold text-muted small">{% trans "Availability" %}</label>
                                        <div class="detail-value">{% trans "Private" %} - {{ corporation_name }}</div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="detail-card">
                                        <label class="fw-bold text-muted small">{% trans "Items to Sell" %}</label>
                                        <div class="items-list modal-items-list" id="modalItemsList">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="detail-card">
                                        <label class="fw-bold text-muted small">{% trans "You Will Receive" %}</label>
                                        <div class="detail-value text-success fw-bold" id="modalTotalAmount">0 ISK</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="detail-card">
                                        <label class="fw-bold text-muted small">{% trans "Contract Duration" %}</label>
                                        <div class="detail-value">4 Weeks</div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="detail-card">
                                        <label class="fw-bold text-muted small">{% trans "Description / Title" %}</label>
                                        <div class="alert alert-info" role="alert">
                                            <small>
                                                {% trans "You will receive your order reference ID after submission. Please note it down and include it in the contract title." %}
                                            </small>
                                        </div>
                                        <div class="detail-value text-warning fw-monospace contract-ref-tag" id="modalRefId">
                                            INDY-[will be generated after submission]
                                        </div>
                                        <small class="text-muted mt-2">{% trans "Copy and paste this into the contract title/description field in-game" %}</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            {% trans "Cancel" %}
                        </button>
                        <button type="submit" form="sellForm" class="btn btn-success">
                            <i class="fas fa-check me-1"></i>{% trans "I Understand, Create Sell Order" %}
                        </button>
                    </div>
                </div>
            </div>
        </div>


        {% else %}
        {% if not assets_refreshing %}
        <div class="glass-panel p-4">
            <div class="alert alert-warning mb-0">
                <i class="fas fa-exclamation-triangle me-2"></i>
                {% trans "No materials available for selling. Please contact an admin." %}
            </div>
        </div>
        {% endif %}
        {% endif %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const qtyInputs = document.querySelectorAll('.qty-input');

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

    function checkQuantityLimit(input) {
        const qty = parseInt(input.value) || 0;
        const max = parseInt(input.dataset.max);
        const typeId = input.dataset.typeId;
        const errorDiv = document.getElementById('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 total = 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 subtotal = unitPrice * effectiveQty;

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

                total += subtotal;
                row.classList.add('selected');
            } else {
                row.classList.remove('selected');
            }
        });

        const emptyInvoice = document.getElementById('invoiceContent');
        const invoiceItems = document.getElementById('invoiceItems');
        const itemsList = document.getElementById('itemsList');
        const totalAmount = document.getElementById('totalAmount');
        const modalItemsList = document.getElementById('modalItemsList');
        const modalTotalAmount = document.getElementById('modalTotalAmount');

        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 = formatNumber(total) + ' ISK';

            // Update modal with same items
            let modalItemsHTML = '';
            selectedItems.forEach(item => {
                modalItemsHTML += `
                    <div class="item-row">
                        <span class="item-name">${item.name}</span>
                        <span class="item-qty">${item.qty.toLocaleString()}x</span>
                    </div>
                `;
            });
            modalItemsList.innerHTML = modalItemsHTML;
            modalTotalAmount.textContent = formatNumber(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();
            }
        });
    });

    // Handle modal display
    const contractModal = document.getElementById('contractDetailsModal');
    if (contractModal) {
        contractModal.addEventListener('show.bs.modal', function() {
            // Generate order reference immediately when modal opens
            const orderRef = generateOrderReference();
            document.getElementById('modalRefId').textContent = orderRef;
            // Store reference in hidden form field
            const hiddenRefField = document.getElementById('hidden_order_reference');
            if (hiddenRefField) {
                hiddenRefField.value = orderRef;
            }
        });
    }

    // Generate order reference (same format as server-side)
    function generateOrderReference() {
        const min = 1000000000;
        const max = 9999999999;
        const randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
        return `INDY-${randomNum}`;
    }

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

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

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

    // Live asset refresh progress (per character)
    {% if assets_refreshing %}
    const statusUrl = '{% url "indy_hub:material_exchange_sell_assets_refresh_status" %}';
    console.log('Asset polling enabled. Current assets_refreshing:', {{ assets_refreshing|lower }});

    async function pollAssetsProgress() {
        try {
            const resp = await fetch(statusUrl, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
            if (!resp.ok) {
                return;
            }
            const data = await resp.json();
            console.log('Poll status response:', data);
            const total = parseInt(data.total || 0);
            const done = parseInt(data.done || 0);
            const error = data.error || null;

            if (data.running) {
                console.log('Task still running, will poll again in 1s');
                setTimeout(pollAssetsProgress, 1000);
                return;
            }

            // When finished successfully, hide the loading alert and reload to show updated materials
            if (data.finished && !error && total > 0 && done >= total) {
                console.log('Task finished successfully! Reloading page with refreshed=1');
                // Find and hide the assets loading alert
                const alerts = document.querySelectorAll('.alert-warning');
                alerts.forEach(alert => {
                    if (alert.textContent.includes('Loading your asset inventory')) {
                        alert.style.display = 'none';
                    }
                });

                // Guard against loops if the page was already reloaded
                const url = new URL(window.location.href);
                if (url.searchParams.get('refreshed') !== '1') {
                    url.searchParams.set('refreshed', '1');
                    setTimeout(() => window.location.replace(url.toString()), 300);
                }
            } else {
                console.log('Task not yet finished or has error. finished:', data.finished, 'error:', error, 'total:', total, 'done:', done);
            }
        } catch (e) {
            console.error('Poll error:', e);
        }
    }

    pollAssetsProgress();
    {% else %}
    console.log('Asset polling DISABLED - assets_refreshing is False');
    {% endif %}
});
</script>
{% endblock content %}