{% extends "base.html" %}
{% load static i18n %}

{% block title %}{{ title }} | {{ product_name }}{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- Breadcrumb & Header -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="/">{% translate "Accueil" %}</a></li>
                <li class="breadcrumb-item"><a href="{% url 'assets:index' %}">{% translate "Assets" %}</a></li>
                <li class="breadcrumb-item"><a href="{% url 'assets:management_zones_index' %}">{% translate "Zones de gestion" %}</a></li>
                {% if not is_create and zone %}
                    <li class="breadcrumb-item"><a href="{% url 'assets:management_zone_detail' zone.pk %}">{{ zone.code }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{% translate "Modifier" %}</li>
                {% else %}
                    <li class="breadcrumb-item active" aria-current="page">{% translate "Nouvelle zone" %}</li>
                {% endif %}
            </ol>
        </nav>
        <div>
            {% if not is_create and zone %}
                <a href="{% url 'assets:management_zone_detail' zone.pk %}" class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-arrow-left me-1"></i>{% translate "Annuler" %}
                </a>
            {% else %}
                <a href="{% url 'assets:management_zones_index' %}" class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-arrow-left me-1"></i>{% translate "Annuler" %}
                </a>
            {% endif %}
        </div>
    </div>

    <!-- Title -->
    <div class="mb-4">
        <h1 class="h3 mb-1">
            {% if is_create %}
                <i class="bi bi-plus-circle-fill text-success me-2"></i>{% translate "Créer une zone de gestion" %}
            {% else %}
                <i class="bi bi-pencil-square text-success me-2"></i>{% translate "Modifier la zone de gestion" %} {{ zone.code }}
            {% endif %}
        </h1>
        <p class="text-muted mb-0">
            {% translate "Définissez les paramètres d'entretien, les consignes et le périmètre géographique de la zone." %}
        </p>
    </div>

    {% if form.errors %}
        <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
            <i class="bi bi-exclamation-triangle-fill me-2"></i>
            <strong>{% translate "Certains champs contiennent des erreurs." %}</strong>
            {% translate "Veuillez vérifier les informations ci-dessous." %}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    {% endif %}

    <form method="post" action="" class="needs-validation" id="managementZoneForm" novalidate>
        {% csrf_token %}
        {{ form.geom_geojson }}

        <div class="row g-4">
            <!-- Left Column: Form Fields -->
            <div class="col-lg-6">
                <!-- Informations générales -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-light fw-bold">
                        <i class="bi bi-info-circle me-2 text-success"></i>{% translate "Informations générales" %}
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-5">
                                <label for="{{ form.code.id_for_label }}" class="form-label fw-semibold">
                                    {% translate "Code de la zone" %} <span class="text-danger">*</span>
                                </label>
                                {{ form.code }}
                                {% if form.code.errors %}<div class="text-danger small mt-1">{{ form.code.errors.0 }}</div>{% endif %}
                                <div class="form-text small">{% translate "Identifiant unique (ex: ZG-NAT-001)" %}</div>
                            </div>

                            <div class="col-md-7">
                                <label for="{{ form.thematic.id_for_label }}" class="form-label fw-semibold">
                                    {% translate "Thématique" %} <span class="text-danger">*</span>
                                </label>
                                {{ form.thematic }}
                                {% if form.thematic.errors %}<div class="text-danger small mt-1">{{ form.thematic.errors.0 }}</div>{% endif %}
                            </div>

                            <div class="col-md-6">
                                <label for="{{ form.name_fr.id_for_label }}" class="form-label fw-semibold">
                                    {% translate "Nom (FR)" %} <span class="text-danger">*</span>
                                </label>
                                {{ form.name_fr }}
                                {% if form.name_fr.errors %}<div class="text-danger small mt-1">{{ form.name_fr.errors.0 }}</div>{% endif %}
                            </div>

                            <div class="col-md-6">
                                <label for="{{ form.name_nl.id_for_label }}" class="form-label fw-semibold">
                                    {% translate "Nom (NL)" %}
                                </label>
                                {{ form.name_nl }}
                                {% if form.name_nl.errors %}<div class="text-danger small mt-1">{{ form.name_nl.errors.0 }}</div>{% endif %}
                            </div>

                            <div class="col-md-8">
                                <label for="{{ form.zone_type.id_for_label }}" class="form-label fw-semibold">
                                    {% translate "Type de zone de gestion" %}
                                </label>
                                {{ form.zone_type }}
                                {% if form.zone_type.errors %}<div class="text-danger small mt-1">{{ form.zone_type.errors.0 }}</div>{% endif %}
                            </div>

                            <div class="col-md-4">
                                <label for="{{ form.color.id_for_label }}" class="form-label fw-semibold">
                                    {% translate "Couleur" %}
                                </label>
                                <div class="d-flex align-items-center gap-2">
                                    {{ form.color }}
                                    <span class="small text-muted" id="colorHexLabel"></span>
                                </div>
                                {% if form.color.errors %}<div class="text-danger small mt-1">{{ form.color.errors.0 }}</div>{% endif %}
                            </div>

                            <div class="col-12">
                                <div class="form-check form-switch mt-2">
                                    {{ form.is_active }}
                                    <label class="form-check-label fw-semibold ms-2" for="{{ form.is_active.id_for_label }}">
                                        {% translate "Zone active (affichée sur les cartes d'exploitation)" %}
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Entretien, Calendrier & Consignes -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-light fw-bold">
                        <i class="bi bi-calendar-check me-2 text-success"></i>{% translate "Modalités d'entretien & Consignes" %}
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-5">
                                <label for="{{ form.target_frequency_days.id_for_label }}" class="form-label fw-semibold">
                                    {% translate "Fréquence cible (jours)" %}
                                </label>
                                <div class="input-group">
                                    {{ form.target_frequency_days }}
                                    <span class="input-group-text">{% translate "jours" %}</span>
                                </div>
                                <div class="form-text small">{% translate "Intervalle indicatif entre passages" %}</div>
                                {% if form.target_frequency_days.errors %}<div class="text-danger small mt-1">{{ form.target_frequency_days.errors.0 }}</div>{% endif %}
                            </div>

                            <div class="col-md-7">
                                <label for="{{ form.seasonality_notes.id_for_label }}" class="form-label fw-semibold">
                                    {% translate "Saisonnalité / Calendrier" %}
                                </label>
                                {{ form.seasonality_notes }}
                                <div class="form-text small">{% translate "Ex: Fauche en sept; interdiction taille mars-juillet" %}</div>
                                {% if form.seasonality_notes.errors %}<div class="text-danger small mt-1">{{ form.seasonality_notes.errors.0 }}</div>{% endif %}
                            </div>

                            <div class="col-12">
                                <label for="{{ form.instructions.id_for_label }}" class="form-label fw-semibold text-warning-emphasis">
                                    <i class="bi bi-exclamation-triangle me-1 text-warning"></i>{% translate "Consignes et points d'attention" %}
                                </label>
                                {{ form.instructions }}
                                <div class="form-text small">{% translate "Consignes cruciales : sécurité tramway, respect des zones humides, hauteur de coupe, etc." %}</div>
                                {% if form.instructions.errors %}<div class="text-danger small mt-1">{{ form.instructions.errors.0 }}</div>{% endif %}
                            </div>

                            <div class="col-12">
                                <label for="{{ form.description.id_for_label }}" class="form-label fw-semibold">
                                    {% translate "Description générale" %}
                                </label>
                                {{ form.description }}
                                {% if form.description.errors %}<div class="text-danger small mt-1">{{ form.description.errors.0 }}</div>{% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column: Interactive Map Polygon Drawer -->
            <div class="col-lg-6">
                <div class="card shadow-sm mb-4 sticky-top" style="top: 20px;">
                    <div class="card-header bg-light d-flex justify-content-between align-items-center">
                        <div>
                            <i class="bi bi-bounding-box-circles me-2 text-success"></i>
                            <span class="fw-bold">{% translate "Périmètre géographique" %}</span>
                            <small class="text-muted fw-normal">({% translate "polygone" %})</small>
                        </div>
                        <div class="d-flex gap-1">
                            <button type="button" id="polyPickerDrawBtn" class="btn btn-sm btn-outline-success">
                                <i class="bi bi-pentagon me-1"></i>{% translate "Dessiner" %}
                            </button>
                            <button type="button" id="polyPickerFinishBtn" class="btn btn-sm btn-success d-none">
                                <i class="bi bi-check-circle me-1"></i>{% translate "Terminer le polygone" %}
                            </button>
                            <button type="button" id="polyPickerClearBtn" class="btn btn-sm btn-outline-danger" title="{% translate 'Effacer le polygone' %}">
                                <i class="bi bi-x-circle"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body p-0 position-relative">
                        <div id="zonePickerMap" style="height: 480px; width: 100%;"></div>
                    </div>
                    <div class="card-footer bg-white border-top small text-muted d-flex justify-content-between align-items-center">
                        <span id="polyPickerHint">
                            {% translate "Cliquez sur « Dessiner » pour tracer les limites de la zone sur la carte." %}
                        </span>
                        <span id="polyStatusBadge" class="badge bg-secondary">
                            {% translate "Aucun tracé" %}
                        </span>
                    </div>
                </div>

                <!-- Form Submit Actions -->
                <div class="d-flex justify-content-end gap-2 mb-4">
                    {% if not is_create and zone %}
                        <a href="{% url 'assets:management_zone_detail' zone.pk %}" class="btn btn-outline-secondary">
                            {% translate "Annuler" %}
                        </a>
                    {% else %}
                        <a href="{% url 'assets:management_zones_index' %}" class="btn btn-outline-secondary">
                            {% translate "Annuler" %}
                        </a>
                    {% endif %}
                    <button type="submit" class="btn btn-success px-4">
                        <i class="bi bi-check-lg me-1"></i>
                        {% if is_create %}{% translate "Créer la zone de gestion" %}{% else %}{% translate "Enregistrer les modifications" %}{% endif %}
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
{% endblock content %}

{% block script %}
<script src="{% static 'common/layer-switcher-control.js' %}"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const mapDiv = document.getElementById("zonePickerMap");
    const geomInput = document.getElementById("id_geom_geojson");
    const thematicSelect = document.getElementById("id_thematic");
    const zoneTypeSelect = document.getElementById("id_zone_type");
    const colorInput = document.getElementById("id_color");
    const colorHexLabel = document.getElementById("colorHexLabel");

    if (colorInput && colorHexLabel) {
        colorHexLabel.textContent = colorInput.value;
        colorInput.addEventListener("input", () => {
            colorHexLabel.textContent = colorInput.value;
            if (map && map.getLayer("poly-preview-fill")) {
                map.setPaintProperty("poly-preview-fill", "fill-color", colorInput.value);
                map.setPaintProperty("poly-preview-line", "line-color", colorInput.value);
            }
        });
    }

    // Dynamic zone types when thematic changes
    if (thematicSelect && zoneTypeSelect) {
        thematicSelect.addEventListener("change", async function () {
            const thematicId = thematicSelect.value;
            if (!thematicId) return;

            try {
                const resp = await fetch("{% url 'assets:management_zone_types_ajax' %}?thematic_id=" + encodeURIComponent(thematicId));
                if (resp.ok) {
                    const data = await resp.json();
                    const currentVal = zoneTypeSelect.value;
                    zoneTypeSelect.innerHTML = '<option value="">-- {% translate "Sélectionner un type" %} --</option>';
                    (data.types || []).forEach(t => {
                        const opt = document.createElement("option");
                        opt.value = t.id;
                        opt.textContent = t.name;
                        if (String(t.id) === String(currentVal)) opt.selected = true;
                        zoneTypeSelect.appendChild(opt);
                    });
                }
            } catch (e) {
                console.error("Error updating zone types:", e);
            }
        });
    }

    // Interactive Map Polygon Drawer
    if (!mapDiv || typeof maplibregl === "undefined") return;

    let drawing = false;
    let vertices = [];
    let vertexMarkers = [];
    let map = null;

    const drawBtn = document.getElementById("polyPickerDrawBtn");
    const finishBtn = document.getElementById("polyPickerFinishBtn");
    const clearBtn = document.getElementById("polyPickerClearBtn");
    const hintEl = document.getElementById("polyPickerHint");
    const badgeEl = document.getElementById("polyStatusBadge");

    map = new maplibregl.Map({
        container: mapDiv,
        style: window.MAP_STYLE_LIGHT,
        center: window.MAP_DEFAULT_CENTER || [4.3572, 50.8477],
        zoom: 12
    });

    // 1. Fond de plan & Orthophotos (LayerSwitcherControl)
    if (typeof LayerSwitcherControl !== 'undefined') {
        const layerSwitcher = new LayerSwitcherControl({
            layers: [{
                id: 'basemap',
                name: "{% translate 'Fonds de plan & Orthophotos' %}",
                icon: 'satellite',
                group: 'basemap',
                beforeLayer: function (mapInstance) {
                    if (mapInstance && mapInstance.getLayer('poly-preview-fill')) {
                        return 'poly-preview-fill';
                    }
                    return undefined;
                },
                layer: {
                    type: 'raster',
                    paint: { 'raster-opacity': 1 }
                },
                basemaps: (window.MAP_BACKGROUNDS && window.MAP_BACKGROUNDS.length > 0) ? window.MAP_BACKGROUNDS : undefined,
                sublayers: [
                    {
                        id: 'urbis',
                        name: window.MAP_ORTHO_WMS_NAME || 'Urbis (Bruxelles)',
                        default: true,
                        source: {
                            type: 'raster',
                            tiles: [
                                window.MAP_ORTHO_WMS_URL || 'https://geoservices-urbis.irisnet.be/geoserver/urbisgrid/wms?service=WMS&version=1.3.0&request=GetMap&layers=Ortho&styles=&format=image/png&transparent=true&width=256&height=256&crs=EPSG:3857&bbox={bbox-epsg-3857}'
                            ],
                            tileSize: 256,
                            attribution: window.MAP_ORTHO_WMS_ATTRIBUTION || '© Brussels UrbIS'
                        }
                    },
                    {
                        id: 'vlaanderen',
                        name: 'Vlaanderen 2023',
                        source: {
                            type: 'raster',
                            tiles: [
                                'https://geo.api.vlaanderen.be/OMW/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=omwrgb23vl&STYLE=&FORMAT=image/png&TILEMATRIXSET=GoogleMapsVL&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}'
                            ],
                            tileSize: 256,
                            attribution: '© Digitaal Vlaanderen - Orthofoto 2023'
                        }
                    }
                ]
            }]
        });
        map.addControl(layerSwitcher, 'top-right');
    }

    // 2. Navigation Control (Zoom +/- & Pitch/Bearing)
    map.addControl(new maplibregl.NavigationControl({ visualizePitch: true }), 'top-right');

    // 3. Outil de recherche d'adresse
    if (typeof AddressSearchControl !== 'undefined') {
        const searchCtrl = new AddressSearchControl({
            autocompleteUrl: "{% url 'common:autocomplete_street' %}",
            placeholder: "{% translate 'Rechercher une adresse…' %}"
        });
        map.addControl(searchCtrl, 'top-left');
    }

    function getColor() {
        return colorInput ? colorInput.value : "#198754";
    }

    function initPolyLayers() {
        if (!map.getSource("poly-preview")) {
            map.addSource("poly-preview", {
                type: "geojson",
                data: { type: "Feature", geometry: { type: "Polygon", coordinates: [] } }
            });
            map.addLayer({
                id: "poly-preview-fill",
                type: "fill",
                source: "poly-preview",
                paint: {
                    "fill-color": getColor(),
                    "fill-opacity": 0.25
                }
            });
            map.addLayer({
                id: "poly-preview-line",
                type: "line",
                source: "poly-preview",
                paint: {
                    "line-color": getColor(),
                    "line-width": 2.5
                }
            });
        }
    }

    function clearMarkers() {
        vertexMarkers.forEach(m => m.remove());
        vertexMarkers = [];
    }

    function addVertexMarker(lng, lat, index) {
        const el = document.createElement("div");
        el.style.width = "10px";
        el.style.height = "10px";
        el.style.borderRadius = "50%";
        el.style.backgroundColor = index === 0 ? "#dc3545" : "#198754";
        el.style.border = "2px solid #ffffff";
        el.style.boxShadow = "0 0 3px rgba(0,0,0,0.5)";
        el.style.cursor = index === 0 && drawing && vertices.length >= 3 ? "pointer" : "default";

        if (index === 0) {
            el.title = "{% translate 'Cliquez pour clore le polygone' %}";
            el.addEventListener("click", (e) => {
                e.stopPropagation();
                if (drawing && vertices.length >= 3) {
                    finishPolygon();
                }
            });
        }

        const marker = new maplibregl.Marker({ element: el }).setLngLat([lng, lat]).addTo(map);
        vertexMarkers.push(marker);
    }

    function renderPoly(coords) {
        initPolyLayers();
        let geom;
        if (coords.length >= 3) {
            geom = {
                type: "Polygon",
                coordinates: [coords.concat([coords[0]])]
            };
        } else if (coords.length === 2) {
            geom = {
                type: "LineString",
                coordinates: coords
            };
        } else {
            geom = { type: "Point", coordinates: coords[0] || [0, 0] };
        }
        map.getSource("poly-preview").setData({ type: "Feature", geometry: geom });
    }

    function finishPolygon() {
        if (vertices.length < 3) {
            alert("{% translate 'Un polygone doit comporter au moins 3 sommets.' %}");
            return;
        }
        drawing = false;
        const closed = vertices.concat([vertices[0]]);
        const polyGeojson = {
            type: "Polygon",
            coordinates: [closed]
        };
        if (geomInput) {
            geomInput.value = JSON.stringify(polyGeojson);
        }
        renderPoly(vertices);
        updateUI(false);
        hintEl.textContent = "{% translate 'Polygone enregistré. Cliquez sur « Dessiner » pour le refaire.' %}";
        badgeEl.className = "badge bg-success";
        badgeEl.textContent = `{% translate 'Polygone défini' %} (${vertices.length} {% translate 'sommets' %})`;
    }

    function updateUI(isDrawing) {
        drawBtn.classList.toggle("d-none", isDrawing);
        finishBtn.classList.toggle("d-none", !isDrawing);
        map.getCanvas().style.cursor = isDrawing ? "crosshair" : "default";
    }

    function showExistingPolygon(geojsonStr) {
        if (!geojsonStr) return;
        try {
            const geom = JSON.parse(geojsonStr);
            let coords = null;
            if (geom.type === "Polygon") {
                coords = geom.coordinates[0];
            } else if (geom.type === "MultiPolygon") {
                coords = geom.coordinates[0][0];
            }
            if (!coords || coords.length === 0) return;

            // Strip closing duplicate vertex for marker tracking
            const rawVertices = (coords[0][0] === coords[coords.length - 1][0] && coords[0][1] === coords[coords.length - 1][1])
                ? coords.slice(0, coords.length - 1)
                : coords;

            vertices = rawVertices;
            clearMarkers();
            vertices.forEach((c, idx) => addVertexMarker(c[0], c[1], idx));
            renderPoly(vertices);

            // Fit bounds
            const bounds = new maplibregl.LngLatBounds();
            coords.forEach(c => bounds.extend(c));
            map.fitBounds(bounds, { padding: 50, maxZoom: 16 });

            badgeEl.className = "badge bg-success";
            badgeEl.textContent = `{% translate 'Polygone existant' %} (${vertices.length} {% translate 'sommets' %})`;
            hintEl.textContent = "{% translate 'Polygone actuel affiché. Cliquez sur « Dessiner » pour le modifier.' %}";
        } catch (e) {
            console.warn("Could not parse existing geometry:", e);
        }
    }

    map.on("load", function () {
        initPolyLayers();
        if (geomInput && geomInput.value) {
            showExistingPolygon(geomInput.value);
        }
    });

    map.on("click", function (e) {
        if (!drawing) return;
        const { lng, lat } = e.lngLat;
        vertices.push([lng, lat]);
        addVertexMarker(lng, lat, vertices.length - 1);
        renderPoly(vertices);

        hintEl.textContent = `{% translate 'Sommets posés' %} : ${vertices.length}. {% translate 'Cliquez sur le premier sommet ou sur « Terminer » pour clore.' %}`;
        badgeEl.className = "badge bg-warning text-dark";
        badgeEl.textContent = `{% translate 'Tracé en cours' %} (${vertices.length})`;
    });

    drawBtn.addEventListener("click", function (e) {
        e.preventDefault();
        drawing = true;
        vertices = [];
        clearMarkers();
        if (geomInput) geomInput.value = "";
        initPolyLayers();
        map.getSource("poly-preview").setData({ type: "Feature", geometry: { type: "Polygon", coordinates: [] } });
        updateUI(true);
        hintEl.textContent = "{% translate 'Cliquez sur la carte pour poser chaque sommet.' %}";
        badgeEl.className = "badge bg-warning text-dark";
        badgeEl.textContent = "{% translate 'Tracé en cours' %}";
    });

    finishBtn.addEventListener("click", function (e) {
        e.preventDefault();
        finishPolygon();
    });

    clearBtn.addEventListener("click", function (e) {
        e.preventDefault();
        drawing = false;
        vertices = [];
        clearMarkers();
        if (geomInput) geomInput.value = "";
        initPolyLayers();
        map.getSource("poly-preview").setData({ type: "Feature", geometry: { type: "Polygon", coordinates: [] } });
        updateUI(false);
        hintEl.textContent = "{% translate 'Périmètre effacé. Cliquez sur « Dessiner » pour recommencer.' %}";
        badgeEl.className = "badge bg-secondary";
        badgeEl.textContent = "{% translate 'Aucun tracé' %}";
    });
});
</script>
{% endblock script %}