{% extends 'mobile/mobile_base.html' %}
{% load static %}
{% load i18n %}

{% block title %}{{ product.name }}{% endblock title %}

{% block upleft %}
<a href="{% url 'mobile:stock_products_mobile' %}" class="nav-link" style="color: white;">
    <i class="bi bi-arrow-left fs-3"></i>
</a>
{% endblock upleft %}

{% block extra_head %}
<style>
    .info-card {
        border-radius: 0.75rem;
        border: 1px solid #dee2e6;
        background: #fff;
        padding: 0.9rem 1rem;
        margin-bottom: 0.75rem;
        box-shadow: 0 2px 6px rgba(47,62,139,0.06);
    }
    .info-label {
        font-size: 0.78rem;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: 0.2rem;
    }
    .info-value {
        font-size: 1rem;
        font-weight: 600;
        color: #212529;
    }
    .section-title {
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #6c757d;
        margin: 1.1rem 0 0.5rem;
    }
    .stock-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.55rem 0;
        border-bottom: 1px solid #f0f0f0;
        font-size: 0.92rem;
    }
    .stock-row:last-child { border-bottom: none; }
    .qr-container {
        text-align: center;
        padding: 1.1rem;
        background: #fff;
        border-radius: 0.75rem;
        border: 1px solid #dee2e6;
        margin-bottom: 0.75rem;
        box-shadow: 0 2px 6px rgba(47,62,139,0.06);
    }
    .qr-img {
        width: 180px;
        height: 180px;
        display: block;
        margin: 0 auto 0.75rem;
    }
</style>
{% endblock extra_head %}

{% block content %}

<!-- En-tête produit -->
<div class="info-card d-flex justify-content-between align-items-start">
    <div>
        <div class="info-label">{% translate "Code" %} / SKU</div>
        <div class="info-value">{{ product.code }}{% if product.sku %} · {{ product.sku }}{% endif %}</div>
        <div class="mt-1" style="font-size:1.05rem;font-weight:600;">{{ product.name }}</div>
        {% if product.category %}
        <span class="badge bg-secondary mt-1" style="font-size:0.78rem;">{{ product.category.name_fr }}</span>
        {% endif %}
    </div>
    <div class="text-end">
        {% if product.total_stock <= product.threshold %}
        <span class="badge bg-danger fs-6">{{ product.total_stock }} {{ product.unit }}</span>
        {% else %}
        <span class="badge bg-success fs-6">{{ product.total_stock }} {{ product.unit }}</span>
        {% endif %}
    </div>
</div>

<!-- Indicateurs de stock -->
<div class="row g-2 mb-1">
    <div class="col-6">
        <div class="info-card text-center py-2">
            <div class="info-label">{% translate "Stock total" %}</div>
            <div class="info-value fs-4">{{ product.total_stock }}<small class="text-muted fs-6 ms-1">{{ product.unit }}</small></div>
        </div>
    </div>
    <div class="col-6">
        <div class="info-card text-center py-2">
            <div class="info-label">{% translate "Seuil d'alerte" %}</div>
            <div class="info-value fs-4">{{ product.threshold }}<small class="text-muted fs-6 ms-1">{{ product.unit }}</small></div>
        </div>
    </div>
    {% if product.price %}
    <div class="col-6">
        <div class="info-card text-center py-2">
            <div class="info-label">{% translate "Prix unitaire" %}</div>
            <div class="info-value">{{ product.price|floatformat:2 }} €</div>
        </div>
    </div>
    {% endif %}
    <div class="col-{% if product.price %}6{% else %}12{% endif %}">
        <div class="info-card text-center py-2">
            <div class="info-label">{% translate "Unité" %}</div>
            <div class="info-value"><span class="badge bg-info">{{ product.get_unit_display }}</span></div>
        </div>
    </div>
</div>

<!-- Description -->
{% if product.description %}
<div class="info-card">
    <div class="info-label">{% translate "Description" %}</div>
    <div style="font-size:0.93rem;color:#444;">{{ product.description }}</div>
</div>
{% endif %}

<hr>

<!-- Stocks par emplacement -->
<div class="section-title"><i class="bi bi-box-seam me-1"></i>{% translate "Stocks par emplacement" %}</div>
<div class="info-card">
    {% for stock in stocks %}
    <div class="stock-row">
        <div>
            <div style="font-weight:600;font-size:0.93rem;">{{ stock.location.warehouse.name }}</div>
            <div style="font-size:0.8rem;color:#6c757d;">{{ stock.location.name }}</div>
        </div>
        <div class="d-flex align-items-center gap-2">
            <span class="badge {% if stock.quantity > 0 %}bg-success{% elif stock.quantity < 0 %}bg-danger{% else %}bg-secondary{% endif %} stock-qty-badge"
                  id="mob-stock-qty-{{ stock.location.id }}">
                {{ stock.quantity }} {{ product.unit }}
            </span>
            {% if is_stock_manager %}
            {% if stock.can_administer %}
            <button type="button" class="btn btn-sm btn-outline-secondary mob-adjust-btn"
                    data-location-id="{{ stock.location.id }}"
                    data-location-name="{{ stock.location.warehouse.name }} — {{ stock.location.name }}"
                    data-current-qty="{{ stock.quantity }}"
                    title="{% translate 'Ajuster la quantité' %}">
                <i class="bi bi-sliders"></i>
            </button>
            {% endif %}
            {% endif %}
        </div>
    </div>
    {% empty %}
    <div class="text-center text-muted py-3" style="font-size:0.9rem;">
        {% translate "Aucun stock enregistré." %}
    </div>
    {% endfor %}
</div>

{% if is_stock_manager %}
<!-- Bottom-sheet ajustement stock -->
<div class="modal fade" id="mobAdjustModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius:1rem;">
            <div class="modal-header border-0 pb-0">
                <h6 class="modal-title fw-bold">
                    <i class="bi bi-sliders me-1"></i>{% translate "Ajuster le stock" %}
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body pt-2">
                <input type="hidden" id="mob-adj-location-id">
                <div class="mb-2">
                    <div class="info-label">{% translate "Emplacement" %}</div>
                    <div class="fw-semibold" id="mob-adj-location-name"></div>
                </div>
                <div class="mb-3">
                    <div class="info-label">{% translate "Quantité actuelle" %}</div>
                    <div class="fs-5 fw-bold" id="mob-adj-current-qty"></div>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold" for="mob-adj-new-qty">
                        {% translate "Nouvelle quantité" %} <span class="text-danger">*</span>
                    </label>
                    <input type="number" id="mob-adj-new-qty" class="form-control form-control-lg" required>
                    <div class="form-text" id="mob-adj-diff-hint"></div>
                </div>
                <div class="mb-1">
                    <label class="form-label fw-semibold" for="mob-adj-reason">
                        {% translate "Raison" %}
                    </label>
                    <input type="text" id="mob-adj-reason" class="form-control"
                           placeholder="{% translate 'Correction manuelle…' %}">
                </div>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                <button type="button" class="btn btn-primary" id="mob-adj-submit-btn">
                    <i class="bi bi-check-circle me-1"></i>{% translate "Valider" %}
                </button>
            </div>
        </div>
    </div>
</div>
{% endif %}

{% if product.is_serialized and serialized_items is not None %}
<hr>

<!-- Articles tracés -->
<div class="section-title d-flex justify-content-between align-items-center"
     data-bs-toggle="collapse" data-bs-target="#collapseSerializedItems" role="button"
     aria-expanded="true" aria-controls="collapseSerializedItems" style="cursor:pointer;">
    <span>
        <i class="bi bi-upc-scan me-1"></i>{% translate "Articles tracés" %}
        <span class="badge bg-info ms-1" style="font-size:0.75rem;">{{ serialized_items|length }}</span>
    </span>
    <i class="bi bi-chevron-down" style="font-size:0.8rem;"></i>
</div>
<div class="collapse show" id="collapseSerializedItems">
    <div class="info-card">
        {% for si in serialized_items %}
        <a href="{% url 'mobile:stock_serialized_item_detail_mobile' si.pk %}"
           class="stock-row text-decoration-none" style="color:inherit;display:flex;justify-content:space-between;align-items:center;">
            <div>
                <div style="font-weight:600;font-size:0.93rem;font-family:monospace;">{{ si.serial_number }}</div>
                <div style="font-size:0.8rem;color:#6c757d;">
                    {% if si.current_holder %}
                        <i class="bi bi-person me-1"></i>{{ si.current_holder.name }}
                    {% elif si.current_location %}
                        <i class="bi bi-geo-alt me-1"></i>{{ si.current_location.warehouse.name }} — {{ si.current_location.name }}
                    {% else %}
                        <span class="fst-italic">{% translate "Non assigné" %}</span>
                    {% endif %}
                </div>
            </div>
            <div class="d-flex align-items-center gap-1">
                {% if si.status == 'available' %}
                    <span class="badge bg-success" style="font-size:0.75rem;">{{ si.get_status_display }}</span>
                {% elif si.status == 'assigned' %}
                    <span class="badge bg-primary" style="font-size:0.75rem;">{{ si.get_status_display }}</span>
                {% elif si.status == 'lost' %}
                    <span class="badge bg-danger" style="font-size:0.75rem;">{{ si.get_status_display }}</span>
                {% else %}
                    <span class="badge bg-secondary" style="font-size:0.75rem;">{{ si.get_status_display }}</span>
                {% endif %}
                <i class="bi bi-chevron-right text-muted" style="font-size:0.75rem;"></i>
            </div>
        </a>
        {% empty %}
        <div class="text-center text-muted py-3" style="font-size:0.9rem;">
            {% translate "Aucun article tracé enregistré." %}
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<hr>

<!-- Mouvements récents -->
<div class="section-title d-flex justify-content-between align-items-center"
     data-bs-toggle="collapse" data-bs-target="#collapseMouvements" role="button"
     aria-expanded="false" aria-controls="collapseMouvements" style="cursor:pointer;">
    <span><i class="bi bi-arrow-left-right me-1"></i>{% translate "Mouvements récents" %}</span>
    <i class="bi bi-chevron-down" style="font-size:0.8rem;"></i>
</div>
<div class="collapse" id="collapseMouvements">
    <div class="info-card" id="mob-movements-container">
        {% for mv in recent_movements %}
        <div class="stock-row">
            <div>
                <div style="font-weight:600;font-size:0.93rem;">
                    {% if mv.source_location and mv.destination_location %}
                        <span class="badge bg-info text-dark">{% translate "Transfert" %}</span>
                        {{ mv.source_location.warehouse.name }} → {{ mv.destination_location.warehouse.name }}
                    {% elif mv.destination_location %}
                        <span class="badge bg-success">{% translate "Entrée" %}</span>
                        {{ mv.destination_location.warehouse.name }}
                    {% else %}
                        <span class="badge bg-danger">{% translate "Sortie" %}</span>
                        {% if mv.source_location %}{{ mv.source_location.warehouse.name }}{% endif %}
                    {% endif %}
                </div>
                <div style="font-size:0.8rem;color:#6c757d;">
                    {{ mv.date|date:"d/m/Y H:i" }}
                    {% if mv.reason %} · {{ mv.reason }}{% endif %}
                </div>
                {% if mv.batch %}
                <div style="font-size:0.78rem;margin-top:0.2rem;">
                    <a href="{% url 'mobile:stock_movement_batch_detail_mobile' mv.batch.pk %}" class="badge bg-light text-primary border" style="text-decoration:none;">
                        <i class="bi bi-layers me-1"></i>Lot #{{ mv.batch.pk }}
                        {% if mv.batch.preparation_order %} · BP #{{ mv.batch.preparation_order.order_number }}{% endif %}
                        {% if mv.batch.purchase_order %} · {{ mv.batch.purchase_order.code }}{% endif %}
                    </a>
                </div>
                {% endif %}
            </div>
            <span class="badge {% if mv.destination_location %}bg-success{% else %}bg-danger{% endif %}">
                {% if mv.destination_location %}+{% else %}-{% endif %}{{ mv.quantity|floatformat:0 }} {{ product.unit }}
            </span>
        </div>
        {% empty %}
        <div class="text-center text-muted py-3" id="mob-no-movements" style="font-size:0.9rem;">
            {% translate "Aucun mouvement enregistré." %}
        </div>
        {% endfor %}
    </div>
</div>

<hr>

<!-- Commandes en cours -->
<div class="section-title d-flex justify-content-between align-items-center"
     data-bs-toggle="collapse" data-bs-target="#collapseCommandes" role="button"
     aria-expanded="false" aria-controls="collapseCommandes" style="cursor:pointer;">
    <span>
        <i class="bi bi-clock-history me-1"></i>{% translate "Commandes en cours" %}
        {% if pending_orders %}<span class="badge bg-primary ms-1" style="font-size:0.75rem;">{{ pending_orders|length }}</span>{% endif %}
    </span>
    <i class="bi bi-chevron-down" style="font-size:0.8rem;"></i>
</div>
<div class="collapse" id="collapseCommandes">
    <div class="info-card">
        {% for item in pending_orders %}
        <div class="stock-row">
            <div>
                <div style="font-weight:600;font-size:0.93rem;">{{ item.purchase_order.supplier.name }}</div>
                <div style="font-size:0.8rem;color:#6c757d;">
                    {{ item.purchase_order.date_ordered|date:"d/m/Y" }} · {{ item.purchase_order.warehouse.name }}
                    <span class="badge bg-warning text-dark ms-1" style="font-size:0.7rem;">{{ item.purchase_order.get_status_display }}</span>
                </div>
            </div>
            <span class="badge bg-primary">{{ item.quantity }} {{ product.unit }}</span>
        </div>
        {% empty %}
        <div class="text-center text-muted py-3" style="font-size:0.9rem;">
            {% translate "Aucune commande en cours." %}
        </div>
        {% endfor %}
    </div>
</div>

<hr>

<!-- Historique de commandes -->
<div class="section-title d-flex justify-content-between align-items-center"
     data-bs-toggle="collapse" data-bs-target="#collapseHistorique" role="button"
     aria-expanded="false" aria-controls="collapseHistorique" style="cursor:pointer;">
    <span><i class="bi bi-journal-text me-1"></i>{% translate "Historique de commandes" %}</span>
    <i class="bi bi-chevron-down" style="font-size:0.8rem;"></i>
</div>
<div class="collapse" id="collapseHistorique">
    <div class="info-card">
        {% for item in order_history %}
        <div class="stock-row">
            <div>
                <div style="font-weight:600;font-size:0.93rem;">{{ item.purchase_order.supplier.name }}</div>
                <div style="font-size:0.8rem;color:#6c757d;">
                    {{ item.purchase_order.date_ordered|date:"d/m/Y" }} · {{ item.purchase_order.warehouse.name }}
                    {% if item.purchase_order.status == 'received' %}
                    <span class="badge bg-success ms-1" style="font-size:0.7rem;">{% translate "Reçue" %}</span>
                    {% else %}
                    <span class="badge bg-secondary ms-1" style="font-size:0.7rem;">{{ item.purchase_order.get_status_display }}</span>
                    {% endif %}
                </div>
            </div>
            <span class="badge bg-secondary">{{ item.quantity }} {{ product.unit }}</span>
        </div>
        {% empty %}
        <div class="text-center text-muted py-3" style="font-size:0.9rem;">
            {% translate "Aucun historique de commande." %}
        </div>
        {% endfor %}
    </div>
</div>

<hr>

<!-- QR Code (en bas) -->
{% if product.qr_code %}
<div class="section-title"><i class="bi bi-qr-code me-1"></i>{% translate "QR Code" %}</div>
<div class="qr-container mb-3">
    <img src="{{ product.qr_code.url }}" alt="QR Code {{ product.code }}" class="qr-img">
    <div class="text-muted" style="font-size:0.82rem;">{{ product.code }}</div>
</div>
{% endif %}

{% endblock content %}

{% if is_stock_manager %}
{% block extra_scripts %}
<script>
(function () {
    const ADJUST_URL = '{% url "stock:quick_stock_adjustment" %}';
    const CSRF_TOKEN = '{{ csrf_token }}';
    const PRODUCT_ID = '{{ product.pk }}';
    const UNIT = '{{ product.unit }}';

    function escapeHtml(str) {
        if (!str) return '-';
        return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
    }

    const modal        = document.getElementById('mobAdjustModal');
    const locationIdEl = document.getElementById('mob-adj-location-id');
    const locationName = document.getElementById('mob-adj-location-name');
    const currentQtyEl = document.getElementById('mob-adj-current-qty');
    const newQtyInput  = document.getElementById('mob-adj-new-qty');
    const reasonInput  = document.getElementById('mob-adj-reason');
    const diffHint     = document.getElementById('mob-adj-diff-hint');
    const submitBtn    = document.getElementById('mob-adj-submit-btn');

    document.querySelectorAll('.mob-adjust-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            locationIdEl.value       = this.dataset.locationId;
            locationName.textContent = this.dataset.locationName;
            currentQtyEl.textContent = this.dataset.currentQty + ' ' + UNIT;
            newQtyInput.value  = this.dataset.currentQty;
            reasonInput.value  = '';
            diffHint.textContent = '';
            diffHint.className   = 'form-text';
            const bsModal = new bootstrap.Modal(modal);
            bsModal.show();
        });
    });

    newQtyInput.addEventListener('input', function () {
        const current = parseInt(currentQtyEl.textContent, 10) || 0;
        const next    = parseInt(this.value, 10);
        if (isNaN(next)) { diffHint.textContent = ''; return; }
        const diff = next - current;
        if (diff > 0) {
            diffHint.textContent = '+' + diff + ' {% translate "(entrée)" %}';
            diffHint.className   = 'form-text text-success fw-semibold';
        } else if (diff < 0) {
            diffHint.textContent = diff + ' {% translate "(sortie)" %}';
            diffHint.className   = 'form-text text-danger fw-semibold';
        } else {
            diffHint.textContent = '{% translate "Aucune modification" %}';
            diffHint.className   = 'form-text text-muted';
        }
    });

    submitBtn.addEventListener('click', function () {
        const locId  = locationIdEl.value;
        const newQty = parseInt(newQtyInput.value, 10);
        const reason = reasonInput.value.trim() || '{% translate "Correction manuelle" %}';

        if (!locId || isNaN(newQty)) {
            newQtyInput.classList.add('is-invalid');
            return;
        }
        newQtyInput.classList.remove('is-invalid');
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>{% translate "Enregistrement…" %}';

        const body = new URLSearchParams({
            product_id: PRODUCT_ID,
            location_id: locId,
            quantity: newQty,
            reason: reason,
            csrfmiddlewaretoken: CSRF_TOKEN,
        });

        fetch(ADJUST_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: body.toString(),
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<i class="bi bi-check-circle me-1"></i>{% translate "Valider" %}';
            if (data.success) {
                const badge = document.getElementById('mob-stock-qty-' + locId);
                if (badge) {
                    badge.textContent = newQty + ' ' + UNIT;
                    badge.className = 'badge stock-qty-badge ' + (newQty > 0 ? 'bg-success' : (newQty < 0 ? 'bg-danger' : 'bg-secondary'));
                }
                const btn = document.querySelector('.mob-adjust-btn[data-location-id="' + locId + '"]');
                const oldQty = btn ? parseInt(btn.dataset.currentQty, 10) || 0 : 0;
                if (btn) btn.dataset.currentQty = newQty;

                // Prepend new movement to the mobile list
                const diff = newQty - oldQty;
                if (diff !== 0) {
                    const container = document.getElementById('mob-movements-container');
                    const noMovements = document.getElementById('mob-no-movements');
                    if (noMovements) {
                        noMovements.remove();
                    }

                    if (container) {
                        const now = new Date();
                        const dateStr = now.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' }) + ' ' +
                                        now.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });

                        const typeBadge = diff > 0 
                            ? `<span class="badge bg-success">{% translate "Entrée" %}</span>` 
                            : `<span class="badge bg-danger">{% translate "Sortie" %}</span>`;

                        const warehouseName = locationName.textContent.split(' — ')[0];
                        const displayWarehouse = escapeHtml(warehouseName);

                        const qtyBadgeClass = diff > 0 ? 'bg-success' : 'bg-danger';
                        const qtySign = diff > 0 ? '+' : '-';

                        const batchEl = data.batch_id ? `
                            <div style="font-size:0.78rem;margin-top:0.2rem;">
                                <a href="/mobile/stock/movements/${data.batch_id}/" class="badge bg-light text-primary border" style="text-decoration:none;">
                                    <i class="bi bi-layers me-1"></i>Lot #${data.batch_id}
                                </a>
                            </div>
                        ` : '';

                        const reasonStr = reason ? ` · ${escapeHtml(reason)}` : '';

                        const div = document.createElement('div');
                        div.className = 'stock-row';
                        div.innerHTML = `
                            <div>
                                <div style="font-weight:600;font-size:0.93rem;">
                                    ${typeBadge} ${displayWarehouse}
                                </div>
                                <div style="font-size:0.8rem;color:#6c757d;">
                                    ${dateStr}${reasonStr}
                                </div>
                                ${batchEl}
                            </div>
                            <span class="badge ${qtyBadgeClass}">
                                ${qtySign}${Math.abs(diff)} ${UNIT}
                            </span>
                        `;
                        container.insertBefore(div, container.firstChild);
                    }
                }

                bootstrap.Modal.getInstance(modal).hide();
            } else {
                alert('{% translate "Erreur" %} : ' + (data.error || '{% translate "Une erreur est survenue." %}'));
            }
        })
        .catch(function () {
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<i class="bi bi-check-circle me-1"></i>{% translate "Valider" %}';
            alert('{% translate "Une erreur réseau est survenue." %}');
        });
    });
})();
</script>
{% endblock extra_scripts %}
{% endif %}