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

{% block title %}
    {% if action == 'edit' %}{% translate "Modifier bon de confection" %}
    {% else %}{% translate "Nouveau bon de confection" %}
    {% endif %}
{% endblock title %}

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

{% block extra_head %}
<style>
    .search-dropdown {
        position: absolute;
        z-index: 1050;
        max-height: 220px;
        overflow-y: auto;
        width: 100%;
    }
    .component-card {
        border: 1px solid #dee2e6;
        border-radius: 0.6rem;
        padding: 0.75rem;
        background: #f8f9fa;
        margin-bottom: 0.5rem;
    }
</style>
{% endblock extra_head %}

{% block content %}
{% if other_item_context %}
<div class="alert alert-info alert-sm mb-3 py-2 small">
    <i class="bi bi-info-circle me-1"></i>
    <strong>{% translate "Issu du bon de préparation" %} #{{ other_item_context.preparation_order.order_number }}</strong><br>
    {{ other_item_context.description }} ({{ other_item_context.quantity }} {% translate "unité(s)" %})
</div>
{% endif %}

{% if prep_item_context %}
<div class="alert alert-info alert-sm mb-3 py-2 small">
    <i class="bi bi-info-circle me-1"></i>
    <strong>{% translate "Issu du bon de préparation" %} #{{ prep_item_context.preparation_order.order_number }}</strong><br>
    {{ prep_item_context.product.name }} ({{ prep_item_context.quantity }} {% translate "unité(s)" %})
</div>
{% endif %}

<form method="post" enctype="multipart/form-data" id="production-form">
    {% csrf_token %}

    {% if form.non_field_errors %}
    <div class="alert alert-danger small py-2">
        {% for error in form.non_field_errors %}{{ error }}{% endfor %}
    </div>
    {% endif %}

    <!-- ── Informations générales ── -->
    <div class="card mb-3">
        <div class="card-header fw-semibold small bg-primary text-white">
            <i class="bi bi-info-circle me-1"></i>{% translate "Informations générales" %}
        </div>
        <div class="card-body p-2">

            <!-- Entrepôt -->
            <div class="mb-2">
                <label for="{{ form.warehouse.id_for_label }}" class="form-label small fw-semibold mb-1">
                    {% translate "Entrepôt" %} <span class="text-danger">*</span>
                </label>
                {{ form.warehouse }}
                {% if form.warehouse.errors %}
                    <div class="text-danger small mt-1">{{ form.warehouse.errors }}</div>
                {% endif %}
            </div>

            <!-- Quantité -->
            <div class="mb-2">
                <label for="{{ form.quantity.id_for_label }}" class="form-label small fw-semibold mb-1">
                    {% translate "Quantité" %} <span class="text-danger">*</span>
                </label>
                {{ form.quantity }}
                {% if form.quantity.errors %}
                    <div class="text-danger small mt-1">{{ form.quantity.errors }}</div>
                {% endif %}
            </div>

            <!-- Statut -->
            <div class="mb-2">
                <label for="{{ form.status.id_for_label }}" class="form-label small fw-semibold mb-1">
                    {% translate "Statut" %}
                </label>
                {{ form.status }}
                {% if form.status.errors %}
                    <div class="text-danger small mt-1">{{ form.status.errors }}</div>
                {% endif %}
            </div>

            <!-- Destination -->
            <div class="mb-2">
                <label for="{{ form.destination.id_for_label }}" class="form-label small fw-semibold mb-1">
                    {% translate "Destination" %} <span class="text-danger">*</span>
                </label>
                {{ form.destination }}
                {% if form.destination.errors %}
                    <div class="text-danger small mt-1">{{ form.destination.errors }}</div>
                {% endif %}
            </div>

        </div>
    </div>

    <!-- ── Composants requis ── -->
    <div class="card mb-3">
        <div class="card-header fw-semibold small bg-success text-white d-flex align-items-center justify-content-between">
            <span><i class="bi bi-boxes me-1"></i>{% translate "Composants requis" %}</span>
        </div>
        <div class="card-body p-2">

            <!-- Recherche + ajout d'un composant -->
            <div class="mb-2">
                <label class="form-label small fw-semibold mb-1">{% translate "Rechercher un produit" %}</label>
                <div class="position-relative">
                    <input type="text" id="component-search" class="form-control form-control-sm"
                           placeholder="{% translate 'Tapez pour rechercher…' %}" autocomplete="off">
                    <div id="component-results" class="list-group search-dropdown" style="display:none;"></div>
                </div>
            </div>
            <div class="row g-2 mb-2">
                <div class="col-5">
                    <label class="form-label small fw-semibold mb-1">{% translate "Quantité" %}</label>
                    <input type="number" id="component-quantity" class="form-control form-control-sm" value="1" min="1">
                </div>
                <div class="col-7">
                    <label class="form-label small fw-semibold mb-1">{% translate "Notes" %}</label>
                    <input type="text" id="component-notes" class="form-control form-control-sm"
                           placeholder="{% translate 'Optionnel…' %}">
                </div>
            </div>
            <button type="button" id="add-component-btn" class="btn btn-sm btn-success w-100 mb-3">
                <i class="bi bi-plus-circle me-1"></i>{% translate "Ajouter le composant" %}
            </button>

            <!-- Liste des composants -->
            <div id="components-container">
                <p class="text-muted text-center small" id="components-empty">
                    <i class="bi bi-inbox"></i> {% translate "Aucun composant ajouté" %}
                </p>
            </div>

            <!-- Formset caché -->
            <div style="display:none;">
                {{ formset.management_form }}
                <div id="formset-container"></div>
            </div>
        </div>
    </div>

    <!-- ── Bon de préparation lié ── -->
    <div class="card mb-3">
        <div class="card-header fw-semibold small">
            <i class="bi bi-clipboard me-1"></i>{% translate "Bon de préparation" %}
        </div>
        <div class="card-body p-2">
            <div class="mb-1">
                <label for="{{ form.preparation_order.id_for_label }}" class="form-label small fw-semibold mb-1">
                    {% translate "Bon de préparation lié" %}
                </label>
                {{ form.preparation_order }}
                {% if form.preparation_order.errors %}
                    <div class="text-danger small mt-1">{{ form.preparation_order.errors }}</div>
                {% endif %}
                <div class="form-text small text-muted">{% translate "Optionnel" %}</div>
            </div>
        </div>
    </div>

    <!-- ── Produit fini ── -->
    <div class="card mb-3">
        <div class="card-header fw-semibold small bg-warning text-dark">
            <i class="bi bi-box-seam me-1"></i>{% translate "Produit fini à ajouter au stock" %}
        </div>
        <div class="card-body p-2">
            <p class="text-muted small mb-2">{% translate "Quand ce bon est terminé, le produit fini sera automatiquement ajouté au stock." %}</p>

            <!-- Produit existant (autocomplete) -->
            <div class="mb-2">
                <label class="form-label small fw-semibold mb-1">{% translate "Produit existant à réapprovisionner" %}</label>
                <div class="position-relative">
                    <input type="text" id="output-product-search" class="form-control form-control-sm"
                           placeholder="{% translate 'Tapez pour rechercher un produit…' %}" autocomplete="off">
                    <div id="output-product-results" class="list-group search-dropdown" style="display:none;"></div>
                </div>
                <input type="hidden" name="output_product" id="output_product_id"
                       value="{{ form.output_product.value|default:'' }}">
                {% if form.output_product.errors %}
                    <div class="text-danger small mt-1">{{ form.output_product.errors }}</div>
                {% endif %}
                <div class="form-text small text-muted">{% translate "Si le produit existe déjà dans le stock." %}</div>
            </div>

            <!-- Nouveau nom -->
            <div class="mb-2">
                <label for="{{ form.output_product_name.id_for_label }}" class="form-label small fw-semibold mb-1">
                    {% translate "Nom du nouveau produit (si non existant)" %}
                </label>
                {{ form.output_product_name }}
                {% if form.output_product_name.errors %}
                    <div class="text-danger small mt-1">{{ form.output_product_name.errors }}</div>
                {% endif %}
            </div>

            <!-- Emplacement de sortie -->
            <div class="mb-1">
                <label for="{{ form.output_location.id_for_label }}" class="form-label small fw-semibold mb-1">
                    {% translate "Emplacement de stockage" %}
                </label>
                {{ form.output_location }}
                {% if form.output_location.errors %}
                    <div class="text-danger small mt-1">{{ form.output_location.errors }}</div>
                {% endif %}
                <div class="form-text small text-muted">{% translate "Laisser vide pour l'emplacement par défaut." %}</div>
            </div>
        </div>
    </div>

    <!-- ── Notes ── -->
    <div class="card mb-3">
        <div class="card-body p-2">
            <div class="mb-1">
                <label for="{{ form.notes.id_for_label }}" class="form-label small fw-semibold mb-1">
                    <i class="bi bi-sticky me-1"></i>{% translate "Notes" %}
                </label>
                {{ form.notes }}
            </div>
        </div>
    </div>

    <!-- ── Documents ── -->
    <div class="card mb-3">
        <div class="card-header fw-semibold small">
            <i class="bi bi-paperclip me-1"></i>{% translate "Documents" %}
        </div>
        <div class="card-body p-2">
            <label for="mobileDocInput" class="btn btn-sm btn-outline-secondary mb-0">
                <i class="bi bi-paperclip me-1"></i>{% translate "Ajouter des documents..." %}
            </label>
            <input type="file" id="mobileDocInput" name="new_documents" multiple class="d-none"
                   accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.odt,.ods,.txt">
            <div id="mobileDocList" class="mt-2"></div>
            <div class="form-text small text-muted">{% translate "Les fichiers seront joints au bon après la sauvegarde." %}</div>
        </div>
    </div>

    <!-- ── Actions ── -->
    <div class="d-flex gap-2 mb-4">
        <a href="{% url 'mobile:stock_production_orders_mobile' %}" class="btn btn-secondary flex-fill">{% translate "Annuler" %}</a>
        <button type="submit" class="btn btn-primary flex-fill">
            <i class="bi bi-check-circle me-1"></i>
            {% if action == 'edit' %}{% translate "Enregistrer" %}
            {% else %}{% translate "Créer" %}
            {% endif %}
        </button>
    </div>
</form>
{% endblock content %}

{% block extra_scripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const AUTOCOMPLETE_URL = '{% url "stock:products_autocomplete_api" %}';
    const DESIGN_API_URL   = null; // désactivé (ProductDesign supprimé)

    function escHtml(str) {
        const d = document.createElement('div');
        d.textContent = str;
        return d.innerHTML;
    }

    // ── Gestion des composants ──────────────────────────────

    const compSearch    = document.getElementById('component-search');
    const compResults   = document.getElementById('component-results');
    const compQuantity  = document.getElementById('component-quantity');
    const compNotes     = document.getElementById('component-notes');
    const addCompBtn    = document.getElementById('add-component-btn');
    const compContainer = document.getElementById('components-container');
    const compEmpty     = document.getElementById('components-empty');
    const formsetCont   = document.getElementById('formset-container');
    const mgmtForm      = formsetCont.parentElement;
    const totalFormsInput = mgmtForm.querySelector('[id$="-TOTAL_FORMS"]');
    const formPrefix = totalFormsInput
        ? totalFormsInput.id.replace('-TOTAL_FORMS', '').replace('id_', '')
        : 'components';

    let selectedComponent = null;
    let componentsAdded = [];
    let compSearchTimeout = null;

    // Charger les composants existants (édition / erreur de validation)
    function loadExistingComponents() {
        const compIds = [];
        const compData = {};
        {% for comp_form in formset %}
            {% if comp_form.product.value and comp_form.quantity.value %}
                compIds.push({{ comp_form.product.value }});
                compData[{{ comp_form.product.value }}] = {
                    quantity: {{ comp_form.quantity.value }},
                    notes: '{{ comp_form.notes.value|default:""|escapejs }}',
                    formId: '{{ comp_form.id.value|default:""|escapejs }}'
                };
            {% endif %}
        {% endfor %}

        if (compIds.length > 0) {
            fetch(`${AUTOCOMPLETE_URL}?ids=${compIds.join(',')}`)
                .then(r => r.json())
                .then(data => {
                    data.results.forEach(p => {
                        const cd = compData[p.id] || {};
                        componentsAdded.push({
                            id: p.id,
                            text: p.text,
                            code: p.code,
                            total_stock: p.total_stock,
                            unit_display: p.unit_display || 'Pièce(s)',
                            quantity: cd.quantity || 1,
                            notes: cd.notes || '',
                            formId: cd.formId || ''
                        });
                    });
                    renderComponents();
                })
                .catch(() => {});
        }
    }
    loadExistingComponents();

    // Autocomplete composants
    compSearch.addEventListener('input', function () {
        clearTimeout(compSearchTimeout);
        selectedComponent = null;
        const q = this.value.trim();
        if (q.length < 2) { compResults.style.display = 'none'; return; }
        compSearchTimeout = setTimeout(() => {
            fetch(`${AUTOCOMPLETE_URL}?q=${encodeURIComponent(q)}`)
                .then(r => r.json())
                .then(data => {
                    compResults.innerHTML = '';
                    if (!data.results.length) {
                        compResults.innerHTML = '<div class="list-group-item text-muted small">{% translate "Aucun produit trouvé" %}</div>';
                    } else {
                        data.results.forEach(p => {
                            const item = document.createElement('div');
                            item.className = 'list-group-item list-group-item-action py-2';
                            const badge = p.total_stock > 0
                                ? `<span class="badge bg-success ms-1">${p.total_stock}</span>`
                                : `<span class="badge bg-secondary ms-1">0</span>`;
                            item.innerHTML = `<strong>${escHtml(p.text)}</strong> <small class="text-muted">${escHtml(p.code || '')}</small>${badge}`;
                            item.addEventListener('mousedown', e => {
                                e.preventDefault();
                                selectedComponent = p;
                                compSearch.value = p.text + (p.code ? ' (' + p.code + ')' : '');
                                compResults.style.display = 'none';
                                compQuantity.focus();
                            });
                            compResults.appendChild(item);
                        });
                    }
                    compResults.style.display = 'block';
                })
                .catch(() => { compResults.style.display = 'none'; });
        }, 280);
    });

    compSearch.addEventListener('blur', () => {
        setTimeout(() => { compResults.style.display = 'none'; }, 150);
    });

    // Ajouter un composant
    addCompBtn.addEventListener('click', function () {
        if (!selectedComponent) {
            alert('{% translate "Veuillez sélectionner un produit dans la liste." %}');
            compSearch.focus();
            return;
        }
        const qty = parseInt(compQuantity.value);
        if (!qty || qty < 1) {
            alert('{% translate "Veuillez entrer une quantité valide." %}');
            compQuantity.focus();
            return;
        }
        const notes = compNotes.value.trim();
        const existing = componentsAdded.findIndex(c => c.id === selectedComponent.id);
        if (existing !== -1) {
            componentsAdded[existing].quantity += qty;
            if (notes) componentsAdded[existing].notes = notes;
        } else {
            componentsAdded.push({
                id: selectedComponent.id,
                text: selectedComponent.text,
                code: selectedComponent.code,
                total_stock: selectedComponent.total_stock,
                unit_display: selectedComponent.unit_display || 'Pièce(s)',
                quantity: qty,
                notes: notes,
                formId: ''
            });
        }
        compSearch.value = '';
        compQuantity.value = '1';
        compNotes.value = '';
        selectedComponent = null;
        renderComponents();
    });

    compQuantity.addEventListener('keypress', function (e) {
        if (e.key === 'Enter') { e.preventDefault(); addCompBtn.click(); }
    });

    // Afficher les composants
    function renderComponents() {
        compContainer.innerHTML = '';
        if (componentsAdded.length === 0) {
            compEmpty.style.display = 'block';
            updateFormset();
            return;
        }
        compEmpty.style.display = 'none';
        componentsAdded.forEach((comp, index) => {
            const card = document.createElement('div');
            card.className = 'component-card d-flex justify-content-between align-items-start';
            card.innerHTML = `
                <div class="flex-grow-1 small">
                    <div class="fw-semibold">${escHtml(comp.text)}</div>
                    <div class="text-muted">${escHtml(comp.code || '')}</div>
                    <div class="${comp.total_stock > 0 ? 'text-success' : 'text-danger'}">
                        <i class="bi bi-box-seam"></i> {% translate "Stock" %} : ${comp.total_stock}
                    </div>
                    ${comp.notes ? `<div class="text-muted fst-italic"><i class="bi bi-sticky me-1"></i>${escHtml(comp.notes)}</div>` : ''}
                </div>
                <div class="text-end ms-2 flex-shrink-0">
                    <div class="fw-bold">${comp.quantity} <small class="text-muted">${escHtml(comp.unit_display)}</small></div>
                    <button type="button" class="btn btn-sm btn-outline-danger mt-1 py-0 px-2 remove-comp-btn" data-idx="${index}">
                        <i class="bi bi-trash3"></i>
                    </button>
                </div>
            `;
            compContainer.appendChild(card);
        });
        compContainer.querySelectorAll('.remove-comp-btn').forEach(btn => {
            btn.addEventListener('click', function () {
                componentsAdded.splice(parseInt(this.dataset.idx), 1);
                renderComponents();
            });
        });
        updateFormset();
    }

    // Mettre à jour le formset caché
    function updateFormset() {
        formsetCont.innerHTML = '';
        totalFormsInput.value = componentsAdded.length;
        componentsAdded.forEach((comp, i) => {
            const f = (name, val) => {
                const inp = document.createElement('input');
                inp.type = 'hidden';
                inp.name = `${formPrefix}-${i}-${name}`;
                inp.value = val !== null && val !== undefined ? val : '';
                formsetCont.appendChild(inp);
            };
            f('product', comp.id);
            f('quantity', comp.quantity);
            f('notes', comp.notes || '');
            f('id', comp.formId || '');
            f('DELETE', '');
        });
    }

    // ── Produit fini (autocomplete) ─────────────────────────

    const outSearch  = document.getElementById('output-product-search');
    const outResults = document.getElementById('output-product-results');
    const outId      = document.getElementById('output_product_id');
    let outTimeout   = null;

    // Charger le nom du produit fini existant (édition)
    const existingOutId = outId.value;
    if (existingOutId) {
        fetch(`${AUTOCOMPLETE_URL}?ids=${existingOutId}`)
            .then(r => r.json())
            .then(data => {
                if (data.results && data.results.length) {
                    const p = data.results[0];
                    outSearch.value = p.text + (p.code ? ' (' + p.code + ')' : '');
                }
            })
            .catch(() => {});
    }

    outSearch.addEventListener('input', function () {
        clearTimeout(outTimeout);
        outId.value = '';
        const q = this.value.trim();
        if (q.length < 2) { outResults.style.display = 'none'; return; }
        outTimeout = setTimeout(() => {
            fetch(`${AUTOCOMPLETE_URL}?q=${encodeURIComponent(q)}`)
                .then(r => r.json())
                .then(data => {
                    outResults.innerHTML = '';
                    if (!data.results.length) {
                        outResults.innerHTML = '<div class="list-group-item text-muted small">{% translate "Aucun produit trouvé" %}</div>';
                    } else {
                        data.results.forEach(p => {
                            const item = document.createElement('div');
                            item.className = 'list-group-item list-group-item-action py-2';
                            const badge = p.total_stock > 0
                                ? `<span class="badge bg-success ms-1">${p.total_stock}</span>`
                                : `<span class="badge bg-secondary ms-1">0</span>`;
                            item.innerHTML = `<strong>${escHtml(p.text)}</strong> <small class="text-muted">${escHtml(p.code || '')}</small>${badge}`;
                            item.addEventListener('mousedown', e => {
                                e.preventDefault();
                                outId.value = p.id;
                                outSearch.value = p.text + (p.code ? ' (' + p.code + ')' : '');
                                outResults.style.display = 'none';
                            });
                            outResults.appendChild(item);
                        });
                    }
                    outResults.style.display = 'block';
                })
                .catch(() => { outResults.style.display = 'none'; });
        }, 250);
    });

    outSearch.addEventListener('blur', () => {
        setTimeout(() => { outResults.style.display = 'none'; }, 150);
    });

    outSearch.addEventListener('change', function () {
        if (!this.value.trim()) outId.value = '';
    });

    // ── Ajustement des selects pour mobile ─────────────────
    document.querySelectorAll('#production-form select').forEach(sel => {
        if (!sel.classList.contains('form-select-sm')) {
            sel.classList.remove('form-select');
            sel.classList.add('form-select', 'form-select-sm');
        }
    });
    document.querySelectorAll('#production-form input[type="text"], #production-form input[type="number"], #production-form textarea').forEach(inp => {
        if (!inp.classList.contains('form-control-sm') && !inp.id.startsWith('component-') && !inp.id.startsWith('output-')) {
            inp.classList.remove('form-control');
            inp.classList.add('form-control', 'form-control-sm');
        }
    });

    // Preview des fichiers sélectionnés
    const mobileDocInput = document.getElementById('mobileDocInput');
    const mobileDocList = document.getElementById('mobileDocList');
    if (mobileDocInput && mobileDocList) {
        mobileDocInput.addEventListener('change', function () {
            mobileDocList.innerHTML = '';
            for (const f of mobileDocInput.files) {
                const item = document.createElement('div');
                item.className = 'd-flex align-items-center gap-2 border rounded p-1 mb-1';
                item.innerHTML = `<i class="bi bi-file-earmark text-secondary fs-5"></i><span class="small text-truncate flex-grow-1">${f.name}</span><small class="text-muted">${(f.size/1024).toFixed(0)} Ko</small>`;
                mobileDocList.appendChild(item);
            }
        });
    }
});
</script>
{% endblock extra_scripts %}