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

{% block title %}
    {% if step == 'upload' %}
        {% translate "Importer une offre" %}
    {% else %}
        {% translate "Validation de l'offre" %}
    {% endif %}
{% endblock title %}

{% block upleft %}
    {% if step == 'upload' %}
        <a href="{% url 'mobile:stock_purchases_mobile' %}" class="nav-link" style="color: white;">
            <i class="bi bi-arrow-left fs-3"></i>
        </a>
    {% else %}
        {% translate "Voulez-vous recommencer l'analyse ?" as confirm_restart_txt %}
        <a href="{% url 'mobile:purchase_order_from_pdf_mobile' %}" class="nav-link" style="color: white;" onclick="return confirm('{{ confirm_restart_txt|escapejs }}');">
            <i class="bi bi-arrow-left fs-3"></i>
        </a>
    {% endif %}
{% endblock upleft %}

{% block upright %}
    {% if step == 'review' %}
        <a href="{% url 'mobile:purchase_order_from_pdf_mobile' %}" class="btn btn-sm btn-outline-light text-white" title="{% translate 'Recommencer' %}">
            <i class="bi bi-arrow-repeat"></i>
        </a>
    {% endif %}
{% endblock upright %}

{% block extra_head %}
<style>
    .mobile-upload-box {
        border: 2px dashed #0d6efd;
        border-radius: 1rem;
        background: #f8faff;
        padding: 1.5rem 1rem;
        text-align: center;
        cursor: pointer;
        transition: background 0.2s, border-color 0.2s;
    }
    .mobile-upload-box:active {
        background: #e8f0fe;
    }
    .mobile-item-card {
        border-radius: 0.75rem;
        border: 1px solid #dee2e6;
        background: #fff;
        margin-bottom: 0.85rem;
        box-shadow: 0 1px 4px rgba(0,0,0,0.05);
        overflow: hidden;
    }
    .mobile-item-card.unassociated {
        border-color: #ffc107;
        background: #fffdf5;
    }
    .mobile-item-card.excluded {
        opacity: 0.55;
        background: #f8f9fa;
    }
    .sticky-bottom-summary {
        position: sticky;
        bottom: 3.5rem;
        z-index: 1020;
        background: #ffffff;
        border-top: 1px solid #dee2e6;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
        border-radius: 1rem 1rem 0 0;
        padding: 0.75rem 1rem;
        margin: 0 -0.75rem -0.75rem -0.75rem;
    }
    .product-search-result-item {
        cursor: pointer;
        transition: background-color 0.15s ease-in-out;
    }
    .product-search-result-item:active {
        background-color: #eef5ff;
    }
    .keyword-chip {
        cursor: pointer;
        font-size: 0.75rem;
        padding: 0.2rem 0.55rem;
        border-radius: 50rem;
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        color: #495057;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
    }
    .keyword-chip:active {
        background-color: #0d6efd;
        border-color: #0d6efd;
        color: #fff;
    }
</style>
{% endblock extra_head %}

{% block content %}

{% if messages %}
<div class="mb-3">
    {% for message in messages %}
    <div class="alert alert-{% if message.tags == 'error' %}danger{% elif message.tags %}{{ message.tags }}{% else %}info{% endif %} alert-dismissible fade show small" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    {% endfor %}
</div>
{% endif %}

{% if step == 'upload' %}
<!-- ÉTAPE 1 : TÉLÉVERSEMENT MOBILE (PHOTOS OU PDF) -->
<form method="post" enctype="multipart/form-data" id="mobile-upload-form">
    {% csrf_token %}
    <input type="hidden" name="action" value="parse_pdf">

    <!-- Choix de l'entrepôt -->
    <div class="card mb-3 border-0 shadow-sm">
        <div class="card-body p-3">
            <label for="id_warehouse" class="form-label fw-semibold small text-muted mb-1">
                <i class="bi bi-building me-1 text-primary"></i> {% translate "Entrepôt de livraison" %} <span class="text-danger">*</span>
            </label>
            <select name="warehouse" id="id_warehouse" class="form-select" required>
                {% for w in warehouses %}
                    <option value="{{ w.id }}" {% if forloop.first %}selected{% endif %}>{{ w.name }}</option>
                {% endfor %}
            </select>
        </div>
    </div>

    <!-- Zone de capture / sélection de photo(s) -->
    <div class="card mb-3 border-0 shadow-sm">
        <div class="card-body p-3">
            <label class="form-label fw-semibold small text-muted mb-2">
                <i class="bi bi-camera me-1 text-primary"></i> {% translate "Photos ou document de l'offre" %} <span class="text-danger">*</span>
            </label>

            <div class="mobile-upload-box" id="drop-zone">
                <div class="mb-2">
                    <span class="d-inline-flex align-items-center justify-content-center bg-primary bg-opacity-10 text-primary rounded-circle" style="width: 56px; height: 56px;">
                        <i class="bi bi-camera fs-2"></i>
                    </span>
                </div>
                <div class="fw-bold text-dark fs-6 mb-1">
                    {% translate "Prendre en photo / Importer" %}
                </div>
                <div class="text-muted small mb-2">
                    {% translate "Prenez une photo de chaque page ou importez vos photos/PDF (sélection multiple autorisée)." %}
                </div>

                <input type="file" name="pdf_file" id="id_pdf_file" class="d-none" accept=".pdf,image/*,.png,.jpg,.jpeg,.webp,.bmp,.tiff,.tif" multiple required>
            </div>

            <!-- Liste des fichiers sélectionnés -->
            <div id="selected-files-container" class="mt-3 d-none">
                <div class="small fw-semibold text-primary mb-1 d-flex align-items-center">
                    <i class="bi bi-check-circle-fill me-1"></i>
                    <span id="selected-files-summary"></span>
                </div>
                <div id="selected-files-pills" class="d-flex flex-wrap gap-1"></div>
            </div>
        </div>
    </div>

    <!-- Info règle de gestion -->
    <div class="alert alert-info border-0 shadow-sm py-2 px-3 small d-flex align-items-start mb-3">
        <i class="bi bi-info-circle-fill text-primary fs-5 me-2 flex-shrink-0 mt-1"></i>
        <div>
            <strong>{% translate "Rapprochement automatique :" %}</strong><br>
            {% translate "Les lignes détectées sont automatiquement rapprochées de vos produits en stock. Si le fournisseur est nouveau, vous pourrez confirmer sa création." %}
        </div>
    </div>

    <!-- Bouton d'analyse -->
    <div class="d-grid mb-4">
        <button type="submit" class="btn btn-primary btn-lg py-3 fw-bold shadow-sm" id="btn-submit-parse">
            <i class="bi bi-cpu me-2"></i> {% translate "Analyser l'offre" %}
        </button>
    </div>
</form>

{% elif step == 'review' %}
<!-- ÉTAPE 2 : REVUE ET VALIDATION DU BON DE COMMANDE -->
<form method="post" id="mobile-confirm-order-form" onsubmit="return validateMobileOrderForm()">
    {% csrf_token %}
    <input type="hidden" name="action" value="confirm_order">
    <input type="hidden" name="warehouse_id" value="{{ selected_warehouse.id }}">
    <input type="hidden" name="temp_pdf_path" value="{{ temp_pdf_path }}">
    <input type="hidden" name="orig_pdf_name" value="{{ orig_pdf_name }}">
    <input type="hidden" name="temp_files_json" value="{{ temp_files_json }}">
    <input type="hidden" name="item_count" value="{{ parse_result.items|length }}">

    <!-- Carte Document & Fournisseur -->
    <div class="card mb-3 border-0 shadow-sm">
        <div class="card-header bg-white py-2 d-flex justify-content-between align-items-center">
            <span class="fw-bold small text-dark"><i class="bi bi-building text-primary me-1"></i>{% translate "Fournisseur" %}</span>
            {% if parse_result.matched_supplier %}
                <span class="badge bg-success-subtle text-success border border-success-subtle">
                    <i class="bi bi-check-circle me-1"></i>{% translate "Identifié" %}
                </span>
            {% else %}
                <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle">
                    <i class="bi bi-exclamation-circle me-1"></i>{% translate "Non trouvé" %}
                </span>
            {% endif %}
        </div>
        <div class="card-body p-3">
            {% if parse_result.matched_supplier %}
                <div class="form-check mb-2">
                    <input class="form-check-input" type="radio" name="supplier_choice" id="sup_choice_existing" value="existing" checked>
                    <label class="form-check-label fw-bold" for="sup_choice_existing">
                        {{ parse_result.matched_supplier.name }}
                    </label>
                </div>
                <div class="small text-muted ps-4">
                    {% if parse_result.matched_supplier.enterprise_number %}
                        <div><strong>{% translate "TVA" %} :</strong> {{ parse_result.matched_supplier.enterprise_number }}</div>
                    {% endif %}
                </div>
            {% else %}
                <div class="border rounded-3 p-2 bg-light mb-2">
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="radio" name="supplier_choice" id="sup_choice_new" value="new" checked onchange="toggleMobileSupplierChoice()">
                        <label class="form-check-label fw-bold text-success" for="sup_choice_new">
                            <i class="bi bi-plus-circle me-1"></i> {% translate "Créer ce nouveau fournisseur" %}
                        </label>
                    </div>
                    <div id="box-create-supplier" class="ps-3">
                        <div class="mb-2">
                            <label class="form-label small fw-semibold mb-0">{% translate "Nom du fournisseur" %} *</label>
                            <input type="text" name="new_supplier_name" id="id_new_supplier_name" class="form-control form-control-sm" value="{{ parse_result.metadata.supplier_name }}" placeholder="{% translate "Nom de l'entreprise" %}" required>
                        </div>
                        <div class="row g-2 mb-2">
                            <div class="col-6">
                                <label class="form-label small text-muted mb-0">{% translate "TVA / Entreprise" %}</label>
                                <input type="text" name="new_supplier_vat" class="form-control form-control-sm" value="{{ parse_result.metadata.supplier_vat }}">
                            </div>
                            <div class="col-6">
                                <label class="form-label small text-muted mb-0">{% translate "Téléphone" %}</label>
                                <input type="text" name="new_supplier_phone" class="form-control form-control-sm" value="{{ parse_result.metadata.supplier_phone }}">
                            </div>
                        </div>
                        <div class="mb-2">
                            <label class="form-label small text-muted mb-0">{% translate "Email" %}</label>
                            <input type="email" name="new_supplier_email" class="form-control form-control-sm" value="{{ parse_result.metadata.supplier_email }}">
                        </div>
                    </div>
                </div>

                <div class="border rounded-3 p-2 bg-white">
                    <div class="form-check mb-1">
                        <input class="form-check-input" type="radio" name="supplier_choice" id="sup_choice_pick" value="existing" onchange="toggleMobileSupplierChoice()">
                        <label class="form-check-label fw-bold text-secondary small" for="sup_choice_pick">
                            {% translate "Ou rattacher à un fournisseur existant :" %}
                        </label>
                    </div>
                    <div class="ps-3">
                        <select name="supplier_id" id="id_supplier_id" class="form-select form-select-sm" onfocus="document.getElementById('sup_choice_pick').checked = true; toggleMobileSupplierChoice();">
                            <option value="">{% translate "— Sélectionner un fournisseur —" %}</option>
                            {% for s in suppliers %}
                                <option value="{{ s.id }}">{{ s.name }}{% if s.enterprise_number %} ({{ s.enterprise_number }}){% endif %}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>

    <!-- Carte Détails Commande -->
    <div class="card mb-3 border-0 shadow-sm">
        <div class="card-body p-3">
            <div class="row g-2 small">
                <div class="col-6">
                    <span class="text-muted d-block">{% translate "Entrepôt :" %}</span>
                    <strong>{{ selected_warehouse.name }}</strong>
                </div>
                <div class="col-6">
                    <span class="text-muted d-block">{% translate "N° Devis :" %}</span>
                    <strong class="font-monospace">{{ parse_result.metadata.quote_number|default:"—" }}</strong>
                </div>
                <div class="col-6">
                    <span class="text-muted d-block">{% translate "Statut initial :" %}</span>
                    <select name="order_status" class="form-select form-select-sm py-0 mt-1">
                        <option value="pending" selected>{% translate "En attente" %}</option>
                        <option value="ordered">{% translate "Envoyée" %}</option>
                    </select>
                </div>
                <div class="col-6">
                    <span class="text-muted d-block">{% translate "Date de l'offre :" %}</span>
                    <strong>{{ parse_result.metadata.date|default:"—" }}</strong>
                </div>
            </div>

            <!-- Badges des photos/pages analysées -->
            <div class="mt-2 pt-2 border-top d-flex align-items-center flex-wrap gap-1">
                {% if parse_result.is_multi_image %}
                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle">
                        <i class="bi bi-images me-1"></i>{% blocktranslate with count=parse_result.image_count %}{{ count }} photos combinées{% endblocktranslate %}
                    </span>
                {% elif parse_result.is_image %}
                    <span class="badge bg-info-subtle text-info-emphasis border border-info-subtle">
                        <i class="bi bi-camera me-1"></i>{% translate "Photo" %}
                    </span>
                {% else %}
                    <span class="badge bg-secondary-subtle text-secondary border">
                        <i class="bi bi-file-earmark-pdf me-1"></i>{% translate "PDF" %}
                    </span>
                {% endif %}
                {% if saved_temp_files and saved_temp_files|length > 1 %}
                    {% for f in saved_temp_files %}
                        <span class="badge bg-light text-dark border small">{{ f.name }}</span>
                    {% endfor %}
                {% endif %}
            </div>
        </div>
    </div>

    <!-- En-tête de section articles & boutons cocher tout -->
    <div class="d-flex justify-content-between align-items-center mb-2 px-1">
        <div class="fw-bold small text-dark">
            <i class="bi bi-box-seam text-primary me-1"></i>
            {% translate "Articles extraits" %} ({{ parse_result.items|length }})
        </div>
        <div class="d-flex gap-1">
            <button type="button" class="btn btn-xs btn-outline-secondary py-0 px-2" style="font-size: 0.75rem;" onclick="toggleSelectAllMobile(true)">
                {% translate "Tout cocher" %}
            </button>
            <button type="button" class="btn btn-xs btn-outline-secondary py-0 px-2" style="font-size: 0.75rem;" onclick="toggleSelectAllMobile(false)">
                {% translate "Tout décocher" %}
            </button>
        </div>
    </div>

    <!-- LISTE DES ARTICLES EXTRAITS (CARTE PAR ARTICLE) -->
    <div id="mobile-items-container">
        {% for item in parse_result.items %}
            {% with idx=forloop.counter0 %}
            <div class="mobile-item-card {% if not item.matched_product %}unassociated{% endif %}" id="mobile-item-card-{{ idx }}">
                <!-- En-tête de carte article -->
                <div class="p-2 border-bottom bg-light-subtle d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center gap-2">
                        <input class="form-check-input item-include-cb m-0" type="checkbox" name="item_{{ idx }}_include" id="item_{{ idx }}_include" data-idx="{{ idx }}" checked onchange="toggleItemCardState({{ idx }})">
                        <label class="form-check-label fw-bold small m-0" for="item_{{ idx }}_include">
                            #{{ forloop.counter }}
                            {% if item.reference %}
                                <span class="badge bg-light text-dark border ms-1 font-monospace">{{ item.reference }}</span>
                            {% endif %}
                        </label>
                    </div>
                    <div>
                        <span class="badge bg-primary-subtle text-primary border border-primary-subtle fw-semibold item-total-badge" id="badge-total-{{ idx }}" data-total="{{ item.total_amount|default:0 }}" data-vat="{{ item.vat_rate|default:21 }}">
                            {{ item.total_amount|stringformat:".2f" }} €
                        </span>
                    </div>
                </div>

                <!-- Corps de carte article -->
                <div class="p-2">
                    <!-- Désignation extraite -->
                    <div class="small fw-semibold text-dark mb-1">
                        {{ item.name }}
                    </div>

                    <!-- Hidden fields nécessaires pour la soumission -->
                    <input type="hidden" name="item_{{ idx }}_ref" value="{{ item.reference }}">
                    <input type="hidden" name="item_{{ idx }}_name" value="{{ item.name }}">

                    <!-- Rapprochement produit du catalogue -->
                    <div class="mb-2">
                        {% if item.matched_product_id %}
                            <div class="badge bg-success-subtle text-success border border-success-subtle mb-1 w-100 text-start text-truncate" id="matched-label-{{ idx }}">
                                <i class="bi bi-check-circle me-1"></i>{% translate "Associé à :" %} {{ item.matched_product_name }}
                            </div>
                        {% else %}
                            <div class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle mb-1 w-100 text-start text-truncate" id="matched-label-{{ idx }}">
                                <i class="bi bi-exclamation-triangle me-1"></i>{% translate "Produit non associé — Sélectionner ci-dessous :" %}
                            </div>
                        {% endif %}

                        <div class="input-group input-group-sm">
                            <select name="item_{{ idx }}_product_id" 
                                    id="item_{{ idx }}_product_id" 
                                    class="form-select form-select-sm" 
                                    data-idx="{{ idx }}" 
                                    data-item-ref="{{ item.reference|default:'' }}"
                                    data-item-name="{{ item.name|default:'' }}"
                                    onchange="handleMobileProductChange({{ idx }})">
                                <option value="">{% translate "— Choisir un produit du catalogue —" %}</option>
                                {% for p in products %}
                                    <option value="{{ p.id }}" {% if item.matched_product_id == p.id %}selected{% endif %}>
                                        {{ p.code }} — {{ p.name }}
                                    </option>
                                {% endfor %}
                            </select>
                            <button type="button" 
                                    class="btn btn-outline-secondary" 
                                    onclick="openProductSearchModalMobile({{ idx }})" 
                                    title="{% translate 'Rechercher un produit (code ou libellé)' %}">
                                <i class="bi bi-search"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Quantité, Prix unitaire, Emplacement -->
                    <div class="row g-2">
                        <div class="col-4">
                            <label class="form-label text-muted mb-0" style="font-size: 0.75rem;">{% translate "Qté" %}</label>
                            <input type="number" step="any" min="1" name="item_{{ idx }}_qty" id="item_{{ idx }}_qty" class="form-control form-control-sm item-qty-input" data-idx="{{ idx }}" value="{{ item.quantity|default:1 }}" onchange="recalcMobileItemTotal({{ idx }})">
                        </div>
                        <div class="col-4">
                            <label class="form-label text-muted mb-0" style="font-size: 0.75rem;">{% translate "P.U. HT (€)" %}</label>
                            <input type="text" name="item_{{ idx }}_price" id="item_{{ idx }}_price" class="form-control form-control-sm item-price-input" data-idx="{{ idx }}" value="{{ item.unit_price|stringformat:'.2f' }}" onchange="recalcMobileItemTotal({{ idx }})">
                        </div>
                        <div class="col-4">
                            <label class="form-label text-muted mb-0" style="font-size: 0.75rem;">{% translate "TVA %" %}</label>
                            <input type="text" name="item_{{ idx }}_vat" id="item_{{ idx }}_vat" class="form-control form-control-sm item-vat-input" data-idx="{{ idx }}" value="{{ item.vat_rate|default:21 }}" onchange="recalcMobileItemTotal({{ idx }})">
                        </div>
                        <div class="col-12 mt-1">
                            <label class="form-label text-muted mb-0" style="font-size: 0.75rem;">{% translate "Emplacement de stockage" %}</label>
                            <select name="item_{{ idx }}_location" id="item_{{ idx }}_location" class="form-select form-select-sm">
                                {% for loc in locations %}
                                    <option value="{{ loc.id }}" {% if loc.id == item.suggested_location_id or not item.suggested_location_id and default_location and default_location.id == loc.id %}selected{% endif %}>{{ loc.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            {% endwith %}
        {% endfor %}
    </div>

    <!-- RÉSUMÉ FIXE DU TOTAL ET BOUTON DE VALIDATION -->
    <div class="sticky-bottom-summary">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <div class="small">
                <span class="text-muted">{% translate "Total HT :" %}</span> <strong id="summary-total-ht">0.00 €</strong>
                <span class="text-muted ms-2">{% translate "TVA :" %}</span> <span id="summary-total-tva">0.00 €</span>
            </div>
            <div class="text-end">
                <span class="small text-muted">{% translate "Total TTC :" %}</span>
                <span class="fw-bold fs-5 text-primary ms-1" id="summary-total-ttc">0.00 €</span>
            </div>
        </div>
        <div class="d-grid">
            <button type="submit" class="btn btn-success btn-lg py-3 fw-bold shadow" id="btn-submit-confirm">
                <i class="bi bi-cart-check me-2"></i> {% translate "Créer le bon de commande" %}
            </button>
        </div>
    </div>
</form>

<!-- Modal Recherche Mobile de Produit Catalogue -->
<div class="modal fade" id="productSearchModalMobile" tabindex="-1" aria-labelledby="productSearchModalMobileLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content shadow border-0">
            <div class="modal-header bg-light py-2 px-3 border-bottom">
                <div>
                    <h6 class="modal-title fw-bold mb-0 text-dark" id="productSearchModalMobileLabel">
                        <i class="bi bi-search text-primary me-2"></i>{% translate "Rechercher un produit" %}
                    </h6>
                    <div class="text-muted small mt-1" id="mobile-modal-target-item-info"></div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
            </div>
            <div class="modal-body p-3">
                <div class="input-group mb-2">
                    <span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-muted"></i></span>
                    <input type="text" 
                           id="mobileModalProductSearchInput" 
                           class="form-control border-start-0 border-end-0 ps-0" 
                           placeholder="{% translate 'Code, nom, réf. ou SKU...' %}" 
                           autocomplete="off">
                    <button class="btn btn-outline-secondary border-start-0" type="button" id="mobileModalProductSearchClear" title="{% translate 'Effacer' %}">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>

                <div class="d-flex align-items-center flex-wrap gap-1 mb-2" id="mobileModalQuickKeywordsContainer">
                    <span class="small text-muted me-1" style="font-size: 0.75rem;"><i class="bi bi-lightbulb text-warning me-1"></i>{% translate "Suggestions :" %}</span>
                    <div id="mobileModalQuickKeywordsList" class="d-inline-flex flex-wrap gap-1"></div>
                </div>

                <div id="mobileModalSearchLoading" class="text-center py-4 d-none">
                    <div class="spinner-border text-primary spinner-border-sm me-2" role="status"></div>
                    <span class="text-muted small">{% translate "Recherche en cours..." %}</span>
                </div>
                <div id="mobileModalSearchEmpty" class="text-center py-4 text-muted d-none">
                    <i class="bi bi-inbox fs-2 d-block mb-1 text-secondary opacity-50"></i>
                    {% translate "Aucun produit correspondant trouvé." %}
                </div>

                <div id="mobileModalSearchResults" class="list-group list-group-flush border rounded-3 overflow-auto" style="max-height: 350px;">
                </div>
            </div>
            <div class="modal-footer py-2 px-3 bg-light d-flex justify-content-between">
                <span class="small text-muted" id="mobileModalResultsCount"></span>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{% translate "Fermer" %}</button>
            </div>
        </div>
    </div>
</div>
{% endif %}

<script>
const PRODUCT_LOCATIONS_MAP = {{ product_locations_json|default:'{}'|safe }};
const PRODUCTS_AUTOCOMPLETE_URL = "{% url 'stock:products_autocomplete_api' %}";
let currentMobileModalTargetIdx = null;
let mobileSearchDebounceTimer = null;

document.addEventListener('DOMContentLoaded', function() {
    // ── GESTION DE L'UPLOAD EN ÉTAPE 1 ──
    const dropZone = document.getElementById('drop-zone');
    const fileInput = document.getElementById('id_pdf_file');
    const filesContainer = document.getElementById('selected-files-container');
    const filesSummary = document.getElementById('selected-files-summary');
    const filesPills = document.getElementById('selected-files-pills');
    const uploadForm = document.getElementById('mobile-upload-form');
    const btnSubmitParse = document.getElementById('btn-submit-parse');

    if (dropZone && fileInput) {
        dropZone.addEventListener('click', () => fileInput.click());

        fileInput.addEventListener('change', function() {
            if (fileInput.files.length > 0) {
                const count = fileInput.files.length;
                let totalBytes = 0;
                filesPills.innerHTML = '';

                for (let i = 0; i < count; i++) {
                    const f = fileInput.files[i];
                    totalBytes += f.size;
                    const pill = document.createElement('span');
                    pill.className = 'badge bg-light text-dark border';
                    pill.innerHTML = '<i class="bi bi-file-earmark-image text-primary me-1"></i>' + f.name;
                    filesPills.appendChild(pill);
                }

                const totalSizeStr = (totalBytes / 1024 > 1024)
                    ? (totalBytes / (1024 * 1024)).toFixed(2) + ' MB'
                    : (totalBytes / 1024).toFixed(1) + ' KB';

                filesSummary.textContent = count + ' {% translate "photo(s) / document(s) sélectionné(s)" %} (' + totalSizeStr + ')';
                filesContainer.classList.remove('d-none');
            }
        });

        if (uploadForm && btnSubmitParse) {
            uploadForm.addEventListener('submit', function() {
                btnSubmitParse.disabled = true;
                btnSubmitParse.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status"></span>{% translate "Analyse en cours..." %}';
            });
        }
    }

    // ── GESTION DE LA RECHERCHE PRODUIT EN MODAL ──
    const mobileModalInput = document.getElementById('mobileModalProductSearchInput');
    const mobileModalClear = document.getElementById('mobileModalProductSearchClear');
    if (mobileModalInput) {
        mobileModalInput.addEventListener('input', function() {
            clearTimeout(mobileSearchDebounceTimer);
            mobileSearchDebounceTimer = setTimeout(() => {
                runMobileModalSearch(mobileModalInput.value);
            }, 250);
        });

        mobileModalInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                clearTimeout(mobileSearchDebounceTimer);
                runMobileModalSearch(mobileModalInput.value);
            }
        });
    }

    if (mobileModalClear && mobileModalInput) {
        mobileModalClear.addEventListener('click', function() {
            mobileModalInput.value = '';
            mobileModalInput.focus();
            runMobileModalSearch('');
        });
    }

    const mobileModalEl = document.getElementById('productSearchModalMobile');
    if (mobileModalEl) {
        mobileModalEl.addEventListener('shown.bs.modal', function() {
            if (mobileModalInput) {
                mobileModalInput.focus();
                mobileModalInput.select();
            }
        });
    }

    // ── GESTION DE LA REVUE EN ÉTAPE 2 ──
    updateMobileTotals();
});

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

function openProductSearchModalMobile(idx) {
    currentMobileModalTargetIdx = idx;
    const select = document.getElementById('item_' + idx + '_product_id');
    const itemRef = select ? (select.getAttribute('data-item-ref') || '') : '';
    const itemName = select ? (select.getAttribute('data-item-name') || '') : '';

    const infoEl = document.getElementById('mobile-modal-target-item-info');
    if (infoEl) {
        let html = '<span class="badge bg-secondary me-1">#' + (idx + 1) + '</span>';
        if (itemRef) {
            html += '<span class="badge bg-light text-dark border font-monospace me-1">' + escapeHtml(itemRef) + '</span> ';
        }
        html += '<span class="fw-semibold text-dark">' + escapeHtml(itemName) + '</span>';
        infoEl.innerHTML = html;
    }

    const quickList = document.getElementById('mobileModalQuickKeywordsList');
    if (quickList) {
        quickList.innerHTML = '';
        const keywords = [];
        if (itemRef && itemRef.trim().length > 1) {
            keywords.push(itemRef.trim());
        }
        const stopWords = new Set(['pour', 'avec', 'sans', 'dans', 'type', 'prix', 'par', 'les', 'des', 'une', 'sur']);
        const words = itemName.split(/[\s,;\/\-—\(\)\+]+/).filter(w => {
            const clean = w.trim().toLowerCase();
            return clean.length >= 3 && !stopWords.has(clean);
        });
        words.forEach(w => {
            if (keywords.length < 4 && !keywords.some(k => k.toLowerCase() === w.toLowerCase())) {
                keywords.push(w);
            }
        });
        keywords.forEach(kw => {
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'keyword-chip';
            btn.textContent = kw;
            btn.onclick = function() {
                const input = document.getElementById('mobileModalProductSearchInput');
                if (input) {
                    input.value = kw;
                    runMobileModalSearch(kw);
                }
            };
            quickList.appendChild(btn);
        });
    }

    const input = document.getElementById('mobileModalProductSearchInput');
    let initialQuery = '';
    if (itemRef && itemRef.trim().length > 1) {
        initialQuery = itemRef.trim();
    } else {
        const parts = itemName.split(/[\s,;\/\-—\(\)\+]+/).filter(w => w.trim().length >= 3);
        if (parts.length > 0) {
            initialQuery = parts.slice(0, 2).join(' ');
        }
    }
    if (input) {
        input.value = initialQuery;
    }

    const modalEl = document.getElementById('productSearchModalMobile');
    const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
    modal.show();

    runMobileModalSearch(initialQuery);
}

function runMobileModalSearch(query) {
    const loading = document.getElementById('mobileModalSearchLoading');
    const empty = document.getElementById('mobileModalSearchEmpty');
    const resultsContainer = document.getElementById('mobileModalSearchResults');
    const countEl = document.getElementById('mobileModalResultsCount');

    if (loading) loading.classList.remove('d-none');
    if (empty) empty.classList.add('d-none');
    if (resultsContainer) resultsContainer.innerHTML = '';
    if (countEl) countEl.textContent = '';

    const url = PRODUCTS_AUTOCOMPLETE_URL + '?q=' + encodeURIComponent(query ? query.trim() : '');

    fetch(url)
        .then(response => {
            if (!response.ok) throw new Error('Erreur réseau');
            return response.json();
        })
        .then(data => {
            if (loading) loading.classList.add('d-none');
            const items = data.results || [];
            if (items.length === 0) {
                if (empty) empty.classList.remove('d-none');
                if (countEl) countEl.textContent = '0 ' + "{% translate 'résultat' %}";
                return;
            }
            if (countEl) {
                countEl.textContent = items.length + ' ' + (items.length > 1 ? "{% translate 'résultats' %}" : "{% translate 'résultat' %}");
            }

            items.forEach(p => {
                const itemDiv = document.createElement('div');
                itemDiv.className = 'list-group-item list-group-item-action d-flex justify-content-between align-items-center p-2 product-search-result-item';
                const stockBadgeClass = (p.total_stock > 0) ? 'bg-success-subtle text-success border border-success-subtle' : 'bg-secondary-subtle text-muted border';

                itemDiv.innerHTML = `
                    <div class="me-2 text-truncate">
                        <div class="d-flex align-items-center gap-1 mb-1 flex-wrap">
                            <span class="badge bg-primary-subtle text-primary border border-primary-subtle font-monospace fw-bold">${escapeHtml(p.code)}</span>
                            ${p.supplier_reference ? `<span class="badge bg-light text-dark border font-monospace small"><i class="bi bi-tag me-1"></i>${escapeHtml(p.supplier_reference)}</span>` : ''}
                            <span class="badge ${stockBadgeClass} small">
                                <i class="bi bi-box-seam me-1"></i>${p.total_stock} ${escapeHtml(p.unit_display || '')}
                            </span>
                        </div>
                        <div class="fw-semibold text-dark text-truncate small">${escapeHtml(p.text)}</div>
                    </div>
                    <div>
                        <button type="button" class="btn btn-sm btn-success px-2 text-nowrap">
                            <i class="bi bi-check-lg me-1"></i>{% translate "Associer" %}
                        </button>
                    </div>
                `;

                itemDiv.onclick = function() {
                    applyMobileProductAssociation(p.id, p.code, p.text);
                };

                resultsContainer.appendChild(itemDiv);
            });
        })
        .catch(() => {
            if (loading) loading.classList.add('d-none');
            if (resultsContainer) {
                resultsContainer.innerHTML = '<div class="p-3 text-center text-danger small"><i class="bi bi-exclamation-triangle me-1"></i>' + "{% translate 'Erreur lors de la recherche.' %}" + '</div>';
            }
        });
}

function applyMobileProductAssociation(productId, productCode, productName) {
    if (currentMobileModalTargetIdx === null) return;
    const idx = currentMobileModalTargetIdx;
    const select = document.getElementById('item_' + idx + '_product_id');
    if (!select) return;

    let existingOpt = select.querySelector('option[value="' + productId + '"]');
    if (!existingOpt) {
        const optText = productCode + ' — ' + productName;
        const newOpt = new Option(optText, productId, true, true);
        select.appendChild(newOpt);
    }

    select.value = productId;
    handleMobileProductChange(idx);

    const modalEl = document.getElementById('productSearchModalMobile');
    const modal = bootstrap.Modal.getInstance(modalEl);
    if (modal) {
        modal.hide();
    }
}

function toggleMobileSupplierChoice() {
    const isNew = document.getElementById('sup_choice_new') && document.getElementById('sup_choice_new').checked;
    const boxCreate = document.getElementById('box-create-supplier');
    const inputName = document.getElementById('id_new_supplier_name');
    if (boxCreate) {
        if (isNew) {
            boxCreate.classList.remove('d-none');
            if (inputName) inputName.required = true;
        } else {
            boxCreate.classList.add('d-none');
            if (inputName) inputName.required = false;
        }
    }
}

function toggleSelectAllMobile(checked) {
    document.querySelectorAll('.item-include-cb').forEach(cb => {
        cb.checked = checked;
        const idx = cb.dataset.idx;
        toggleItemCardState(idx);
    });
    updateMobileTotals();
}

function toggleItemCardState(idx) {
    const cb = document.getElementById('item_' + idx + '_include');
    const card = document.getElementById('mobile-item-card-' + idx);
    if (card && cb) {
        if (cb.checked) {
            card.classList.remove('excluded');
        } else {
            card.classList.add('excluded');
        }
    }
    updateMobileTotals();
}

function handleMobileProductChange(idx) {
    const select = document.getElementById('item_' + idx + '_product_id');
    const cb = document.getElementById('item_' + idx + '_include');
    const card = document.getElementById('mobile-item-card-' + idx);
    const label = document.getElementById('matched-label-' + idx);

    if (select && select.value && select.value.trim() !== '') {
        if (cb) cb.checked = true;
        if (card) {
            card.classList.remove('unassociated', 'excluded');
        }
        if (label) {
            const selectedText = select.options[select.selectedIndex].text;
            label.className = 'badge bg-success-subtle text-success border border-success-subtle mb-1 w-100 text-start text-truncate';
            label.innerHTML = '<i class="bi bi-check-circle me-1"></i>{% translate "Associé à :" %} ' + selectedText;
        }

        // Adapter automatiquement l'emplacement de destination au produit sélectionné
        const pid = parseInt(select.value, 10);
        const targetLocId = PRODUCT_LOCATIONS_MAP[pid];
        const locSelect = document.getElementById('item_' + idx + '_location');
        if (locSelect && targetLocId) {
            locSelect.value = targetLocId;
        }
    } else {
        if (card) card.classList.add('unassociated');
        if (label) {
            label.className = 'badge bg-warning-subtle text-warning-emphasis border border-warning-subtle mb-1 w-100 text-start text-truncate';
            label.innerHTML = '<i class="bi bi-exclamation-triangle me-1"></i>{% translate "Produit non associé" %}';
        }
    }
    updateMobileTotals();
}

function recalcMobileItemTotal(idx) {
    const qtyInput = document.getElementById('item_' + idx + '_qty');
    const priceInput = document.getElementById('item_' + idx + '_price');
    const vatInput = document.getElementById('item_' + idx + '_vat');
    const badge = document.getElementById('badge-total-' + idx);

    const qty = parseFloat(qtyInput ? qtyInput.value : 1) || 1;
    const price = parseFloat(priceInput ? priceInput.value.replace(',', '.') : 0) || 0;
    const vat = parseFloat(vatInput ? vatInput.value.replace(',', '.') : 21) || 21;
    const total = qty * price;

    if (badge) {
        badge.setAttribute('data-total', total.toFixed(2));
        badge.setAttribute('data-vat', vat);
        badge.textContent = total.toFixed(2) + ' €';
    }
    updateMobileTotals();
}

function updateMobileTotals() {
    let totalHt = 0;
    let totalTva = 0;

    document.querySelectorAll('.item-include-cb:checked').forEach(cb => {
        const idx = cb.dataset.idx;
        const badge = document.getElementById('badge-total-' + idx);
        if (badge) {
            const total = parseFloat(badge.getAttribute('data-total')) || 0;
            const vat = parseFloat(badge.getAttribute('data-vat')) || 21;
            totalHt += total;
            totalTva += total * (vat / 100.0);
        }
    });

    const htEl = document.getElementById('summary-total-ht');
    const tvaEl = document.getElementById('summary-total-tva');
    const ttcEl = document.getElementById('summary-total-ttc');

    if (htEl) htEl.textContent = totalHt.toFixed(2) + ' €';
    if (tvaEl) tvaEl.textContent = totalTva.toFixed(2) + ' €';
    if (ttcEl) ttcEl.textContent = (totalHt + totalTva).toFixed(2) + ' €';
}

function validateMobileOrderForm() {
    // 1. Fournisseur
    const supChoiceNew = document.getElementById('sup_choice_new');
    const supChoicePick = document.getElementById('sup_choice_pick');
    if (supChoiceNew && supChoiceNew.checked) {
        const nameInput = document.getElementById('id_new_supplier_name');
        if (!nameInput || !nameInput.value.trim()) {
            alert("{% translate 'Veuillez saisir le nom du nouveau fournisseur.' %}");
            if (nameInput) nameInput.focus();
            return false;
        }
    } else if (supChoicePick && supChoicePick.checked) {
        const supSelect = document.getElementById('id_supplier_id');
        if (!supSelect || !supSelect.value.trim()) {
            {% translate "Veuillez sélectionner un fournisseur existant dans la liste." as msg_m_sup_pick %}
            alert("{{ msg_m_sup_pick|escapejs }}");
            if (supSelect) supSelect.focus();
            return false;
        }
    }

    // 2. Articles cochés
    const checkedBoxes = document.querySelectorAll('.item-include-cb:checked');
    if (checkedBoxes.length === 0) {
        {% translate "Veuillez cocher au moins une ligne d'article à inclure dans la commande." as msg_m_no_item %}
        alert("{{ msg_m_no_item|escapejs }}");
        return false;
    }

    // 3. Articles non associés
    let unassociatedCount = 0;
    let firstInvalid = null;

    checkedBoxes.forEach(cb => {
        const idx = cb.dataset.idx;
        const select = document.getElementById('item_' + idx + '_product_id');
        if (!select || !select.value || select.value.trim() === '') {
            unassociatedCount++;
            if (select) select.classList.add('is-invalid');
            if (!firstInvalid) firstInvalid = select;
        }
    });

    if (unassociatedCount > 0) {
        {% translate "Certaines lignes cochées ne sont associées à aucun produit du catalogue. Veuillez sélectionner un produit pour chaque ligne cochée, ou la décocher." as msg_m_unassoc %}
        alert("{{ msg_m_unassoc|escapejs }}");
        if (firstInvalid) firstInvalid.focus();
        return false;
    }

    const btnSubmit = document.getElementById('btn-submit-confirm');
    if (btnSubmit) {
        btnSubmit.disabled = true;
        btnSubmit.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status"></span>{% translate "Création du bon de commande..." %}';
    }

    return true;
}
</script>
{% endblock content %}