{% load static %}
{% load i18n %}

{# ──────────────────────────────────────────────────────────────────── #}
{# Shared form body — included by both intervention_add.html (desktop) #}
{# and intervention_add_mobile.html (mobile).                         #}
{# Expected context: form, thematic, maintain_type,                   #}
{#   redirect_to_project, observation, observation_photos             #}
{# ──────────────────────────────────────────────────────────────────── #}

<form method="post" id="intervention-form" enctype="multipart/form-data" class="needs-validation" novalidate>
    {% csrf_token %}
    {% if inspection_config %}
        <input type="hidden" name="type" value="inspection">
        <input type="hidden" name="inspection_config_id" value="{{ inspection_config.id }}">
    {% endif %}
    {{ form.non_field_errors }}
    <div id="form-error-summary" class="mb-2"></div>
    {% if redirect_to_project %}
        <input type="hidden" name="redirect_to_project" value="{{ redirect_to_project }}">
    {% endif %}

    <!-- ── Localisation card ── -->
    <div class="card mb-3 shadow">
        <div class="card-header">
            <i class="bi bi-geo-alt-fill me-2"></i>{% translate "Asset" %}
        </div>
        <div class="card-body">
            <div class="mb-3">
                <label for="location-input" class="form-label">{% translate "Localisation" %}</label>
                <div class="input-group">
                    <input type="text" id="location-input" class="form-control"
                           placeholder="{% translate 'Saisir une adresse, un nom ou un code' %}">
                    <button type="button" id="geocode-btn" class="btn btn-light d-none">{% translate "Localiser" %}</button>
                </div>
            </div>
            <div class="mb-3{% if inspection_config %} d-none{% endif %}">
                <label for="id_asset_category" class="form-label">{% translate "Catégorie d'assets" %} <span class="text-danger">*</span></label>
                {{ form.asset_category }}
                {{ form.asset_category.errors }}
            </div>
            <!-- Sous-catégorie (optionnelle, affichée dynamiquement si la catégorie a des enfants) -->
            <input type="hidden" name="interv_sub_category_id" id="id_interv_sub_category_id"
                   value="{{ initial_interv_sub_category_id|default:'' }}">
            <div class="mb-3" id="interv-sub-category-block"
                 style="{% if not initial_subcategories or inspection_config %}display:none !important;{% endif %}">
                <label for="id_interv_sub_category" class="form-label">{% translate "Sous-catégorie" %}</label>
                <select id="id_interv_sub_category" class="form-select">
                    <option value="">{% translate "--- Aucune (utiliser la catégorie parente) ---" %}</option>
                    {% for sub in initial_subcategories %}
                    <option value="{{ sub.id }}" {% if sub.selected %}selected{% endif %}>{{ sub.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="mb-3{% if inspection_config and not inspection_config.show_equipment %} d-none{% endif %}">
                <label for="equipment-input" class="form-label">{% translate "Equipement" %}</label>
                <div class="input-group">
                    <input type="text" id="equipment-input" class="form-control"
                           placeholder="{% translate 'Saisir un nom ou un code' %}">
                </div>
            </div>
            <div class="mb-3 row align-items-end g-2 d-none">
                <div class="col-auto">
                    <label for="id_lon" class="form-label">{% translate "Longitude" %}</label>
                    {{ form.lon }}
                </div>
                <div class="col-auto">
                    <label for="id_lat" class="form-label">{% translate "Latitude" %}</label>
                    {{ form.lat }}
                </div>
                <div class="col-auto">
                    <button type="button" id="center-map-btn" class="btn btn-light">{% translate "Centrer" %}</button>
                </div>
            </div>

            <!-- Nearby intervention badges -->
            <span class="ms-2 small">
                <a href="#" id="badge-location" class="badge text-bg-danger text-decoration-none d-none"
                    data-kind="location" data-list-type="ongoing"
                    title="{% translate 'Interventions en cours liées à la localisation' %}">0</a>
                <a href="#" id="badge-location-recent" class="badge text-bg-secondary text-decoration-none d-none"
                    data-kind="location" data-list-type="recent"
                    title="{% translate 'Interventions récentes (3 mois) liées à la localisation' %}">0</a>
            </span>
            <span class="ms-2 small">
                <a href="#" id="badge-address" class="badge text-bg-danger text-decoration-none d-none"
                    data-kind="address" data-list-type="ongoing"
                    title="{% translate 'Interventions en cours proches de cette adresse' %}">0</a>
                <a href="#" id="badge-address-recent" class="badge text-bg-secondary text-decoration-none d-none"
                    data-kind="address" data-list-type="recent"
                    title="{% translate 'Interventions récentes (3 mois) proches de cette adresse' %}">0</a>
            </span>
            <span class="ms-2 small">
                <a href="#" id="badge-equipment" class="badge text-bg-danger text-decoration-none d-none"
                    data-kind="equipment" data-list-type="ongoing"
                    title="{% translate 'Interventions en cours liées à cet équipement' %}">0</a>
                <a href="#" id="badge-equipment-recent" class="badge text-bg-secondary text-decoration-none d-none"
                    data-kind="equipment" data-list-type="recent"
                    title="{% translate 'Interventions récentes (3 mois) liées à cet équipement' %}">0</a>
            </span>

            <!-- ── Sublocation (thematic-specific) ── -->
            {% if thematic.code == 'structures' %}
                <div class="mb-1 fst-italic">
                    <label class="form-label">{% translate "Ouvrage" %}: </label>
                    <span class="" id="structure_result"></span>
                </div>
                <div class="mb-1 fst-italic">
                    <label class="form-label">{% translate "Localisation" %} <span class="text-danger">*</span> : </label>
                    <span class="" id="location_result"></span>
                </div>
                <div class="mb-3 fst-italic d-flex align-items-center">
                    <label class="form-label mb-0 me-2 pb-1">{% translate "Equipement" %}: </label>
                    <div id="equipment_result_summary" class="d-flex flex-wrap gap-2"></div>
                </div>

            {% elif thematic.code == 'trafficlights' %}
                <div class="mb-1 fst-italic">
                    <label class="form-label">{% translate "Intersection" %} <span class="text-danger">*</span> : </label>
                    <span class="badge text-bg-primary" id="location_result"></span>
                </div>
                <div class="mb-3 fst-italic d-flex align-items-center">
                    <label class="form-label mb-0 me-2 pb-1">{% translate "Equipement" %}: </label>
                    <div id="equipment_result_summary" class="d-flex flex-wrap gap-2"></div>
                </div>

            {% elif thematic.code == 'controlcenters' %}
                <div class="mb-1 fst-italic">
                    <label class="form-label">{% translate "Centre de contrôle" %}: </label>
                    <span class="" id="controlcenter_result"></span>
                </div>
                <div class="mb-1 fst-italic">
                    <label class="form-label">{% translate "Localisation" %} <span class="text-danger">*</span> : </label>
                    <span class="" id="location_result"></span>
                </div>
                <div class="mb-3 fst-italic d-flex align-items-center">
                    <label class="form-label mb-0 me-2 pb-1">{% translate "Equipement" %}: </label>
                    <div id="equipment_result_summary" class="d-flex flex-wrap gap-2"></div>
                </div>

            {% elif thematic.code == 'artworks' %}
                <div class="mb-1 fst-italic">
                    <label class="form-label">{% translate "Adresse" %}:</label>
                    <span class="badge text-bg-primary" id="address_result"></span>
                </div>
                <div class="mb-3 fst-italic d-flex align-items-center">
                    <label class="form-label mb-0 me-2 pb-1">{% translate "Equipement" %} <span class="text-danger">*</span>: </label>
                    <div id="equipment_result_summary" class="d-flex flex-wrap gap-2"></div>
                </div>

            {% elif thematic.code == 'nature' or thematic.code == 'water' %}
                <div class="mb-1 fst-italic">
                    <label class="form-label">
                        {% if inspection_config %}
                            {% translate "Numéro de zone" %}:
                        {% else %}
                            {% translate "Numéro de section" %}:
                        {% endif %}
                    </label>
                    <span class="badge text-bg-primary" id="location_result"></span>
                </div>
                <div class="mb-1 fst-italic">
                    <label class="form-label">{% translate "Adresse" %} <span class="text-danger">*</span> : </label>
                    <span class="badge text-bg-primary" id="address_result"></span>
                </div>
                <div class="mb-3 fst-italic d-flex align-items-center">
                    {% if not inspection_config %}
                        <label class="form-label mb-0 me-2 pb-1">{% translate "Equipement" %}: </label>
                    {% endif %}
                    <div id="equipment_result_summary" class="d-flex flex-wrap gap-2"></div>
                </div>

            {% elif thematic.code == 'roads' or thematic.code == 'publiclighting' or thematic.code == 'sign' or thematic.code == 'clean' %}
                <div class="mb-1 fst-italic">
                    <label class="form-label">{% translate "Numéro de voirie" %} <span class="text-danger">*</span> : </label>
                    <span class="badge text-bg-primary" id="location_result"></span>
                </div>
                <div class="mb-1 fst-italic">
                    <label class="form-label">{% translate "Adresse" %}: </label>
                    <span class="badge text-bg-primary" id="address_result"></span>
                </div>
                <div class="mb-3 fst-italic d-flex align-items-center">
                    <label class="form-label mb-0 me-2 pb-1">{% translate "Equipement" %}: </label>
                    <div id="equipment_result_summary" class="d-flex flex-wrap gap-2"></div>
                </div>

            {% elif thematic.code == 'its' %}
                <div class="mb-1 fst-italic">
                    <label class="form-label">{% translate "Localisation" %} : </label>
                    <span class="" id="location_result"></span>
                </div>
                <div class="mb-1 fst-italic">
                    <label class="form-label">{% translate "Adresse" %}: </label>
                    <span class="badge text-bg-primary" id="address_result"></span>
                </div>
                <div class="mb-3 fst-italic d-flex align-items-center">
                    <label class="form-label mb-0 me-2 pb-1">{% translate "Equipement" %}: </label>
                    <div id="equipment_result_summary" class="d-flex flex-wrap gap-2"></div>
                </div>

            {% else %}
                <!-- Generic fallback -->
                <div class="mb-3 fst-italic d-flex align-items-center">
                    <label class="form-label mb-0 me-2 pb-1">{% translate "Equipement" %}: </label>
                    <div id="equipment_result_summary" class="d-flex flex-wrap gap-2"></div>
                </div>
            {% endif %}

            <!-- Linked interventions modal -->
            <div class="modal fade" id="linkedIntervModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">{% translate "Interventions liées" %}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="{% translate 'Fermer' %}"></button>
                        </div>
                        <div class="modal-body">
                            <div class="table-responsive">
                                <table class="table table-sm align-middle">
                                    <thead>
                                        <tr>
                                            <th>{% translate "Code" %}</th>
                                            <th>{% translate "Titre" %}</th>
                                            <th>{% translate "Statut" %}</th>
                                            <th>{% translate "Début" %}</th>
                                        </tr>
                                    </thead>
                                    <tbody id="linkedIntervTbody"></tbody>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <small class="text-muted" id="linkedIntervMeta"></small>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                {% translate "Fermer" %}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- GPS status indicator (shown by GPS script on mobile) -->
            <div id="gps-status" class="mb-2 d-none">
                <i class="bi bi-crosshair me-1"></i>
                <span id="gps-status-text">{% translate "Localisation GPS en cours..." %}</span>
            </div>

            <!-- Map -->
            <div style="position: relative;">
                <div id="map" style="height: 400px;" class="mb-3 rounded"></div>
                <div style="position: absolute; top: 8px; right: 8px; z-index: 10;">
                    <button type="button" id="toggle-linked-layer" class="btn btn-sm btn-secondary"
                            title="{% translate 'Afficher/masquer les interventions liées' %}">
                        <i class="bi bi-layers-fill"></i> {% translate "Interventions" %}
                    </button>
                </div>
            </div>

            <!-- Hidden coordinate/location fields -->
            <input type="hidden" id="locations-field" name="locations">
            <input type="hidden" id="location_ct" name="location_ct">
            <input type="hidden" id="location_id" name="location_id">
            <input type="hidden" id="address_id" name="address">
            <input type="hidden" id="equipment_id" name="equipment_id">
            <input type="hidden" id="equipment_ct" name="equipment_ct">
            <input type="hidden" id="equipment_type" name="equipment_type">
            <input type="hidden" id="assets-field" name="assets">
            <span id="equipment_primary_label" class="visually-hidden"></span>
        </div>
    </div>

    <!-- ── Maintain type hidden ── -->
    {{ form.maintain_type }}

    {% if maintain_type == 'corrective' %}
        <!-- ── Source card ── -->
        <div class="card mb-3 shadow">
            <div class="card-header">
                {% translate "Source" %}
            </div>
            <div class="card-body">
                <div class="mb-3 d-none">
                    <label for="id_maintain_type" class="form-label">{% translate "Type de maintenance" %} <span class="text-danger">*</span></label>
                    {{ form.maintain_type }}
                </div>
                <div class="mb-3">
                    <label for="id_source_category" class="form-label">{% translate "Source" %} <span class="text-danger">*</span></label>
                    {{ form.source_category }}
                </div>
                <div class="mb-3 d-none" id="source-detail-container">
                    <label for="id_source_detail" class="form-label">{% translate "Détail de la source" %} <span class="text-danger">*</span></label>
                    {{ form.source_detail }}
                </div>
                <!-- Référence de la source -->
                <div class="mb-3 d-none" id="source-ref-container">
                    <label for="id_source_ref" class="form-label">{% translate "Référence de la source" %} <span class="text-danger">*</span></label>
                    {{ form.source_ref }}
                </div>
            </div>
        </div>

        <!-- ── Symptôme card ── -->
        <div class="card mb-3 shadow">
            <div class="card-header">
                {% translate "Symptôme" %}
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label for="id_symptom" class="form-label">
                        <span id="symptom-label-text"
                              data-category-suffix="{% translate 'pour la catégorie' %}">{% translate "Symptôme ou motif" %}</span>
                        <span class="text-danger">*</span>
                    </label>
                    {{ form.symptom }}
                    {{ form.symptom.errors }}
                </div>
                <div class="mb-3" id="priority-field-wrapper">
                    <label for="id_priority" class="form-label">{% translate "Priorité" %} <span class="text-danger">*</span></label>
                    {{ form.priority }}
                    {{ form.priority.errors }}
                    <div id="priority-check-warning" class="d-none mt-1">
                        <span class="badge bg-warning text-dark">
                            <i class="bi bi-exclamation-triangle-fill me-1"></i>{% translate "Attention : vérifiez bien la priorité pour ce symptôme" %}
                        </span>
                    </div>
                </div>
                <div class="mb-3">
                    <label for="id_origin_type" class="form-label">{% translate "Type d'origine" %} <span class="text-danger">*</span></label>
                    {{ form.origin_type }}
                    {{ form.origin_type.errors }}
                </div>
                <div class="mb-3">
                    <label for="id_type" class="form-label">{% translate "Type d'intervention" %}</label>
                    {{ form.type }}
                    {{ form.type.errors }}
                </div>
            </div>
        </div>
    {% endif %}

    {% if maintain_type == "ameliorative" %}

        <div class="mb-3">
            <label for="id_priority" class="form-label">{% translate "Priorité" %}</label>
            {{ form.priority }}
        </div>

        <div class="mb-4">
            <label for="id_asset_category" class="form-label">{% translate "Projet" %}</label>
            {{ form.project }}
        </div>

        {{ form.origin_type }}
    {% endif %}

    <!-- ── Description card ── -->
    <div class="card mb-3 shadow">
        <div class="card-header">
            {% translate "Description de l'intervention" %}
        </div>
        <div class="card-body">
            <div class="mb-3">
                <label for="id_title" class="form-label">{% translate "Titre" %} <span class="text-danger">*</span></label>
                {{ form.title }}
                {{ form.title.errors }}
            </div>
            <div class="mb-3">
                <label for="id_init_description" class="form-label">{% translate "Info complémentaire" %}</label>
                {{ form.init_description }}
            </div>
        </div>
    </div>

    <!-- ── Statut card ── -->
    {% if not form.status.is_hidden %}
    <div class="card mb-3 shadow">
        <div class="card-header">
            <i class="bi bi-info-circle-fill me-2"></i>{% translate "Statut" %}
        </div>
        <div class="card-body">
            <label class="form-label">{% translate "Sélectionner le statut de départ" %} <span class="text-danger">*</span></label>
            <div class="d-flex flex-wrap gap-2 mt-1" id="status-badges-container">
                {% for status_val, status_lbl in form.fields.status.choices %}
                    <button type="button" class="btn btn-sm status-badge-btn position-relative" 
                            data-status="{{ status_val }}"
                            style="border: 2px solid transparent; border-radius: 20px; padding: 0.35rem 0.85rem; font-weight: 500; transition: all 0.2s ease;">
                        {{ status_lbl }}
                    </button>
                {% endfor %}
            </div>
            <div class="d-none">
                {{ form.status }}
            </div>
            {{ form.status.errors }}
        </div>
    </div>
    {% else %}
        {{ form.status }}
    {% endif %}

    <!-- ── Documents card ── -->
    <div class="card mb-3 shadow">
        <div class="card-header">
            {% translate "Documents" %}
        </div>
        <div class="card-body">
            {% if observation_photos %}
            <div class="mb-3">
                <label class="form-label">{% translate "Photos de l'observation" %}</label>
                <div class="row g-2">
                    {% for ph in observation_photos %}
                        <div class="col-6 col-md-4 col-lg-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox"
                                       name="selected_obs_photos" id="obs_photo_{{ ph.id }}"
                                       value="{{ ph.id }}" checked>
                                <label class="form-check-label" for="obs_photo_{{ ph.id }}">#{{ ph.id }}</label>
                            </div>
                            <div class="ratio ratio-4x3 border rounded overflow-hidden">
                                <img src="{{ ph.url }}" alt="obs photo {{ ph.id }}"
                                     class="w-100 h-100 object-fit-cover">
                            </div>
                        </div>
                    {% endfor %}
                </div>
                {% if observation %}
                    <input type="hidden" name="observation_id" value="{{ observation.id }}">
                {% endif %}
                <hr>
            </div>
            {% endif %}
            <div class="mb-3">
                <label for="id_documents" class="form-label">{% translate "Documents" %}</label>
                {{ form.documents }}
                <ul id="selected-files" class="list-group list-group-flush mt-2"></ul>
            </div>
        </div>
    </div>

    <!-- Submit -->
    <button type="submit" class="btn btn-success mx-auto d-block mt-3">{% translate "Sauvegarder" %}</button>
</form>