import { Component, OnInit, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import Map from 'ol/Map';
import View from 'ol/View';
import LayerGroup from 'ol/layer/Group';
import LayerTile from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import LayerSwitcher, {
  BaseLayerOptions,
  GroupLayerOptions,
} from 'ol-layerswitcher';
import MousePosition from 'ol/control/MousePosition';
import FullScreen from 'ol/control/FullScreen';
import ZoomToExtent from 'ol/control/ZoomToExtent';
import ImageLayer from 'ol/layer/Image';
import GeoJSON from 'ol/format/GeoJSON';
import Zoom from 'ol/control/Zoom';
import ZoomSlider from 'ol/control/ZoomSlider';
import { FormBuilder, FormGroup } from '@angular/forms';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import Feature from 'ol/Feature';
import Icon from 'ol/style/Icon';
import Point from 'ol/geom/Point';
import {
  Circle as CircleStyle,
  Fill,
  RegularShape,
  Stroke,
  Style,
  Text,
} from 'ol/style';
import { Draw, Modify, MouseWheelZoom, defaults as defaultInteractions, DoubleClickZoom } from 'ol/interaction';
import LineString from 'ol/geom/LineString';
import { getArea, getLength } from 'ol/sphere';
import { fromLonLat, transform } from 'ol/proj';
import { Router } from '@angular/router';
import { circular } from 'ol/geom/Polygon';
import { take } from 'rxjs';
import { CrudService } from 'src/app/crud.service';
import { NzModalService } from 'ng-zorro-antd/modal';
import { NzMessageService } from 'ng-zorro-antd/message';
import { GlobalService } from 'src/app/global.service';
import { HttpErrorResponse } from '@angular/common/http';
import { NzTreeNodeOptions } from 'ng-zorro-antd/tree';
import { TokenStorage } from 'src/app/utilitaire/token-storage';
import { JwtHelperService } from '@auth0/angular-jwt';

declare var $: any;
declare var NioApp: any;

/* déclaration pour outils de mesure */
const style = new Style({
  fill: new Fill({
    color: 'rgba(255, 255, 255, 0.2)',
  }),
  stroke: new Stroke({
    color: 'rgba(0, 0, 0, 0.5)',
    lineDash: [10, 10],
    width: 2,
  }),
  image: new CircleStyle({
    radius: 5,
    stroke: new Stroke({
      color: 'rgba(0, 0, 0, 0.7)',
    }),
    fill: new Fill({
      color: 'rgba(255, 255, 255, 0.2)',
    }),
  }),
});

const labelStyle = new Style({
  text: new Text({
    font: '14px Calibri,sans-serif',
    fill: new Fill({
      color: 'rgba(255, 255, 255, 1)',
    }),
    backgroundFill: new Fill({
      color: 'rgba(26, 88, 144, 1)',
    }),
    padding: [3, 3, 3, 3],
    textBaseline: 'bottom',
    offsetY: -15,
  }),
  image: new RegularShape({
    radius: 8,
    points: 3,
    angle: Math.PI,
    displacement: [0, 10],
    fill: new Fill({
      //color: 'rgba(0, 0, 0, 0.7)',
      color: 'rgba(26, 88, 144, 1)',
    }),
  }),
});

const tipStyle = new Style({
  text: new Text({
    font: '12px Calibri,sans-serif',
    fill: new Fill({
      color: 'rgba(255, 255, 255, 1)',
    }),
    backgroundFill: new Fill({
      color: 'rgba(0, 0, 0, 0.4)',
    }),
    padding: [2, 2, 2, 2],
    textAlign: 'left',
    offsetX: 15,
  }),
});

const modifyStyle = new Style({
  image: new CircleStyle({
    radius: 5,
    stroke: new Stroke({
      color: 'rgba(0, 0, 0, 0.7)',
    }),
    fill: new Fill({
      color: 'rgba(0, 0, 0, 0.4)',
    }),
  }),
  text: new Text({
    text: 'Drag to modify',
    font: '12px Calibri,sans-serif',
    fill: new Fill({
      color: 'rgba(255, 255, 255, 1)',
    }),
    backgroundFill: new Fill({
      color: 'rgba(0, 0, 0, 0.7)',
    }),
    padding: [2, 2, 2, 2],
    textAlign: 'left',
    offsetX: 15,
  }),
});

const segmentStyle = new Style({
  text: new Text({
    font: '12px Calibri,sans-serif',
    fill: new Fill({
      color: 'rgba(255, 255, 255, 1)',
    }),
    backgroundFill: new Fill({
      color: 'rgba(0, 0, 0, 0.4)',
    }),
    padding: [2, 2, 2, 2],
    textBaseline: 'bottom',
    offsetY: -12,
  }),
  image: new RegularShape({
    radius: 6,
    points: 3,
    angle: Math.PI,
    displacement: [0, 8],
    fill: new Fill({
      color: 'rgba(0, 0, 0, 0.4)',
    }),
  }),
});

const segmentStyles = [segmentStyle];

const formatLength = function (line: any) {
  const length = getLength(line, { projection: 'EPSG:4326' });
  let output;
  if (length > 100) {
    output = Math.round((length / 1000) * 100) / 100 + ' km';
  } else {
    output = Math.round(length * 100) / 100 + ' m';
  }
  return output;
};

const formatArea = function (polygon: any) {
  const area = getArea(polygon, { projection: 'EPSG:4326' });
  let output;
  if (area > 10000) {
    output = Math.round((area / 1000000) * 100) / 100 + ' km\xB2';
  } else {
    output = Math.round(area * 100) / 100 + ' m\xB2';
  }
  return output;
};

const sourceDrawOutil = new VectorSource();

const modify = new Modify({ source: sourceDrawOutil, style: modifyStyle });

let tipPoint: any;

function styleFunction(feature: any, segments: any, drawType: any, tip: any) {
  const styles = [style];
  const geometry = feature.getGeometry();
  const type = geometry.getType();
  let point, label, line;
  if (!drawType || drawType === type) {
    if (type === 'Polygon') {
      point = geometry.getInteriorPoint();
      label = formatArea(geometry);
      line = new LineString(geometry.getCoordinates()[0]);
    } else if (type === 'LineString') {
      point = new Point(geometry.getLastCoordinate());
      label = formatLength(geometry);
      line = geometry;
    }
  }
  if (segments && line) {
    let count = 0;
    line.forEachSegment(function (a: any, b: any) {
      const segment = new LineString([a, b]);
      //transform('EPSG:4326', 'EPSG:3413')
      /*const aLbalel = transform(a, 'EPSG:4326', 'EPSG:3857');
      const bLbalel = transform(b, 'EPSG:4326', 'EPSG:3857');
      const segmentLabel = new LineString([aLbalel, bLbalel]);*/
      const label = formatLength(segment);
      if (segmentStyles.length - 1 < count) {
        segmentStyles.push(segmentStyle.clone());
      }
      const segmentPoint = new Point(segment.getCoordinateAt(0.5));
      segmentStyles[count].setGeometry(segmentPoint);
      segmentStyles[count]?.getText()?.setText(label);
      styles.push(segmentStyles[count]);
      count++;
    });
  }
  if (label) {
    labelStyle.setGeometry(point);
    labelStyle.getText()?.setText(label);
    styles.push(labelStyle);
  }
  if (
    tip &&
    type === 'Point' &&
    !modify.getOverlay()?.getSource()?.getFeatures().length
  ) {
    tipPoint = geometry;
    tipStyle.getText()?.setText(tip);
    styles.push(tipStyle);
  }
  return styles;
}

@Component({
  selector: 'app-cartographie-fiscale-tfu',
  templateUrl: './cartographie-fiscale-tfu.component.html',
  styleUrls: ['./cartographie-fiscale-tfu.component.css'],
  encapsulation: ViewEncapsulation.None   // ← ajouter cette ligne
})
export class CartographieFiscaleTfuComponent implements OnInit {
  iconImagePosition = new Style({
    image: new Icon({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: 'assets/static/images/marker-icon.png',
      size: [25, 45], // [25, 45],
    }),
  });

  styleDelimiterLayer = new Style({
    stroke: new Stroke({
      color: 'black',
      width: 3,
    }),
    fill: new Fill({
      color: 'transparent',
    }),
  });

  baseOSM = new LayerTile({
    title: 'OSM',
    type: 'base',
    visible: true,
    source: new OSM(),
  } as BaseLayerOptions);

  baseMaps = new LayerGroup({
    title: 'Base maps',
    layers: [this.baseOSM],
  } as GroupLayerOptions);

  view = new View({
    projection: 'EPSG:4326',
    center: [2.315834, 9.307690],//[2.237783, 8.993058],
    zoom: 7.2,
    minZoom: 7.2,
    /*extent: [
      -1.3114703249183064, 5.3826768040185105, 8.825820324918308,
      12.48591919598149,
    ],*/
  });

  map!: Map;

  mouse_position = new MousePosition();
  full_sc = new FullScreen({ label: 'F' });
  zoom = new Zoom({ zoomInLabel: '+', zoomOutLabel: '-' });
  slider = new ZoomSlider();

  zoom_ex = new ZoomToExtent({
    extent: [
      -1.3114703249183064, 5.3826768040185105, 8.825820324918308,
      12.48591919598149,
    ],
  });

  departementList: any[] = [];
  communeList: any[] = [];
  arrondissementList: any[] = [];
  villageQuartierList: any[] = [];
  parcelleList: any[] = [];
  parcelleFilteredList: any[] = [];
  parcelleSearchFilteredList: any[] = [];

  filterForm!: FormGroup;

  sourceDecoupage: VectorSource = new VectorSource();
  vectorDecoupage: any;
  sourceParcelle: VectorSource = new VectorSource();
  vectorParcelle: any;
  circleMarkerVector: any;
  iconVectorLayer: any;
  globalSearch = '';

  coordinate1 = { longitude: null, latitude: null };
  rayon = 0;

  /* outils de dessins */
  isDrawing = false;
  sketch: any;
  typeSelect: string = 'LineString';
  showSegments: boolean = true;
  clearPrevious: boolean = true;
  vectorDrawOutil = new VectorLayer({
    source: sourceDrawOutil,
    style: (feature: any) => {
      return styleFunction(
        feature,
        this.showSegments,
        this.typeSelect,
        'Click to start measuring'
      );
    },
    zIndex: 7,
  });

  draw: any;
  /* fin outils de dessins */

  mapDataInfo: any = null;
  batimentList: any[] = [];
  uniteLogementList: any[] = [];
  visibleMapData = false;
  keyFilter: any = null;
  activeTab: string = 'legende';  // ← ajouter ici
  // ── Cartes pliables ───────────────────────────────────────────────────
  collapsedCards: { [key: string]: boolean } = {
    localisation: false, // false = déplié par défaut
    propriete: false,
    representant: false,
    fiscal: false
  };

  activeInfoTab: string = 'batiment';

  keyFliterList: any[] = [
    { couleur: '#333', code: 'ALL', libelle: 'Toutes les parcelles' },
    { couleur: '#94a3b8', code: 'NON_ENQUETE_NON_BATIE', libelle: 'Parcelles non enquêtées — Non bâties', batie: false, status: 'NON_ENQUETE' },
    { couleur: '#8b5cf6', code: 'NON_ENQUETE_BATIE', libelle: 'Parcelles non enquêtées — Bâties', batie: true, status: 'NON_ENQUETE' },
    { couleur: '#06b6d4', code: 'ENQUETE_NON_BATIE_AJOUR', libelle: 'Non bâties — À jour', batie: false, status: 'AJOUR' },
    { couleur: '#22c55e', code: 'ENQUETE_BATIE_AJOUR', libelle: 'Bâties — À jour', batie: true, status: 'AJOUR' },
    { couleur: '#f59e0b', code: 'ENQUETE_NON_BATIE_NON_AJOUR', libelle: 'Non bâties — Non à jour', batie: false, status: 'NON_AJOUR' },
    { couleur: '#f97316', code: 'ENQUETE_BATIE_NON_AJOUR', libelle: 'Bâties — Non à jour', batie: true, status: 'NON_AJOUR' },
    { couleur: '#ef4444', code: 'PARCELLE_NON_ENQUETER', libelle: 'Parcelles non enquêtées', status: 'NON_ENQUETE' },
    { couleur: '#ef4444', code: 'PARCELLE_ENDETTE', libelle: 'Parcelles endettées', status: 'NON_AJOUR' },
    { couleur: '#393542', code: 'PARCELLE_A_JOUR_DU_FISC', libelle: 'Parcelles à jour du fisc', status: 'AJOUR' },
  ];

  commune: any;

  nodes: NzTreeNodeOptions[] = [];
  quartierSelected: any = null;

  arbreUtilisateurCourant: any[] = [];

  user: any = null;

  // ── Filtre boîte flottante ────────────────────────────
  filterBoxVisible = false;
  filterApplied = false;
  filterCritere = '';
  filterValue = '';
  filterQlotissement = '';
  filterIlotLotissement = '';
  filterPlotissement = '';
  filterPersonneNom: string = '';
  filterPersonnePrenom: string = '';

  constructor(
    private router: Router,
    private fb: FormBuilder,
    private crudService: CrudService,
    private modal: NzModalService,
    private message: NzMessageService,
    private globalService: GlobalService,
    private tokenStorage: TokenStorage,
  ) { }

  ngOnInit(): void {
    this.globalService.setLodingSuccess(false);
    const token = this.tokenStorage.getToken() != null ? this.tokenStorage.getToken() : '';
    const helper = new JwtHelperService();
    const decodeToken = helper.decodeToken(token ? token : '');
    this.user = decodeToken?.user;
    if (this.user) {
      this.crudService.getAll('secteur-decoupage/arbre/user-id/' + this.user?.id).subscribe(
        (data: any) => {
          this.arbreUtilisateurCourant = data.object ? data.object : [];
          if (this.arbreUtilisateurCourant && this.arbreUtilisateurCourant.length > 0) {
            this.constructionArbreUtilisateurs();
          }
          this.message.success(`Chargement des découpages de l'utilisateur ${this.user?.nom} réussi`);
        },
        (error: any) => {
          this.message.error(`Chargement des découpages de l'utilisateur ${this.user?.nom} échoué`);
        });
    }
    this.map = new Map({
      target: 'map',
      view: this.view,
      interactions: defaultInteractions().getArray().filter(
        (interaction: any) => !(interaction instanceof DoubleClickZoom) &&
          !(interaction instanceof MouseWheelZoom)   // ← ajouter cette ligne
      ),
    });

    this.map.addLayer(this.baseMaps);

    this.map.addControl(this.mouse_position);

    //this.map.addControl(this.overview);

    this.map.addControl(this.full_sc);

    this.map.addControl(this.zoom);

    this.map.addControl(this.slider);

    this.map.addControl(this.zoom_ex);

    this.globalService.setLodingSuccess(false);

  }


  chargerParcelleListByQuartier(quartier: any): void {
    if (quartier) {
      console.log("data quartier ===> ", quartier);
      this.message.loading('Chargement des parcelles en cours ...');
      this.globalService.setLodingSuccess(true);

      //this.crudService.getAll('parcelle-geom/by-quartier/' + quartier.code).subscribe(
      this.crudService.getAll('parcelle-geom/by-quartier-id/' + quartier.quartierId).subscribe(
        (data: any) => {
          console.log('data parcelle ==>', data);
          if (data.object) {
            //dessiner les parcelles
            this.parcelleList = data.object.filter((el: any) => el.ilot != null);
            this.parcelleFilteredList = data.object.filter((el: any) => el.ilot != null);
            this.parcelleSearchFilteredList = data.object.filter((el: any) => el.ilot != null);;
            if (this.parcelleList && this.parcelleList.length > 0) {
              if (this.parcelleList[0].longitude && this.parcelleList[0].latitude) {
                this.map.getView().setCenter([this.parcelleList[0].longitude, this.parcelleList[0].latitude]);
                this.map.getView().setZoom(17);
              }
            }
            this.doMapCPS();
            //}
          }
          this.message.remove();
          this.globalService.setLodingSuccess(false);
        },
        (error: HttpErrorResponse) => {
          this.message.create('error', `Erreur de connexion internet ou du système`);
          this.globalService.setLodingSuccess(false);
          this.message.remove();
        }
      );
    }
  }

  doMapCPS(): void {
    this.map.removeLayer(this.vectorParcelle);
    if (this.parcelleFilteredList.length > 0 && this.map) {
      this.globalService.setLodingSuccess(true);
      this.sourceParcelle = new VectorSource({
        features: new GeoJSON().readFeatures(
          {
            type: 'FeatureCollection',
            name: 'Parcelle',
            features: this.buildFeatureFormatData(this.parcelleFilteredList),
          },
          { dataProjection: 'EPSG:32631', featureProjection: 'EPSG:4326' }
        ),
      });
      console.log(this.sourceParcelle);
      this.vectorParcelle = new VectorLayer({
        source: this.sourceParcelle,
        zIndex: 6,
      });
      this.sourceParcelle
        .getFeatures()
        .forEach((feature: any, index: number) => {
          feature.setStyle(this.getDynamiqueStyleParcelle(this.parcelleFilteredList[index]));
          feature.setProperties({
            parcelle: this.parcelleFilteredList[index],
          });
        });
      this.map.addLayer(this.vectorParcelle);

      this.message.remove();
      this.globalService.setLodingSuccess(false);
      //console.log('map must draw layer ===> ', this.sourceParcelle);
    }
  }

  initMap(): void {
    this.map.removeLayer(this.vectorDecoupage);
    this.map.removeLayer(this.vectorParcelle);
    this.map.removeLayer(this.iconVectorLayer);
    this.map.removeLayer(this.circleMarkerVector);
    this.map.getView().setCenter([2.237783, 8.993058]);
    this.map.getView().setZoom(7.3);
  }


  onMouseEnter(): void {
    console.log(this.globalSearch);
    this.globalService.setLodingSuccess(true);
    if (this.globalSearch != '' && this.globalSearch != undefined && this.parcelleList.length > 0) {
      this.parcelleFilteredList = this.parcelleList.filter(
        (element: any) => (element.ilot && element.ilot.toLowerCase().indexOf(this.globalSearch.toLowerCase()) > -1) ||
          (element.p && element.p.toLowerCase().indexOf(this.globalSearch.toLowerCase()) > -1) ||
          (element.nomEtPrenoms && element.nomEtPrenoms.toLowerCase().indexOf(this.globalSearch.toLowerCase()) > -1) ||
          (element.q && element.q.toLowerCase().indexOf(this.globalSearch.toLowerCase()) > -1)
      );
      this.map.getView().setCenter([this.parcelleFilteredList[0].longitude, this.parcelleFilteredList[0].latitude]);
      this.map.getView().setZoom(19);
      this.doMapCPS();
    } else {
      this.parcelleFilteredList = this.parcelleList;

      this.map.getView().setZoom(17);
      this.doMapCPS();
    }
    this.globalService.setLodingSuccess(false);
  }

  compareFn = (o1: any, o2: any) => (o1 && o2 ? o1.code === o2.code : o1 === o2);

  keyFilterAction(value: any): void {
    console.log('keyFilterAction', value);
    this.filterCritere = '';
    this.filterValue = '';
    this.filterQlotissement = '';
    this.filterIlotLotissement = '';
    this.filterPlotissement = '';
    this.filterPersonneNom = '';   // ← ajouter
    this.filterPersonnePrenom = '';   // ← ajouter
    this.filterApplied = false;

    this.globalService.setLodingSuccess(true);
    this.parcelleFilteredList = [];
    if (value && value?.code == 'ALL') {
      this.parcelleFilteredList = this.parcelleList;
      this.doMapCPS();
      this.globalService.setLodingSuccess(false);
      return;
    }
    if (value && (value?.code == 'PARCELLE_ENDETTE' || value?.code == 'PARCELLE_NON_ENQUETER' || value?.code == 'PARCELLE_A_JOUR_DU_FISC')) {
      this.parcelleFilteredList = this.parcelleList.filter((element: any) => (element.statutParcelle == value.status));
      this.doMapCPS();
      this.globalService.setLodingSuccess(false);
      return;
    }
    if (value && value?.code != 'ALL' && value?.code != 'PARCELLE_A_JOUR_DU_FISC' && value?.code != 'PARCELLE_ENDETTE' && value?.code != 'PARCELLE_NON_ENQUETER') {
      this.parcelleFilteredList = this.parcelleList.filter((element: any) => (element.batie == value.batie && element.statutParcelle == value.status));
      this.doMapCPS();
      this.globalService.setLodingSuccess(false);
      return;
    }
    console.log(' this.parcelleFilteredList ==>', this.parcelleFilteredList);
  }

  buildFeatureFormatData(dataList: any[]): any[] {
    dataList.forEach((element) => {
      Object.defineProperty(element, 'type', {
        value: 'Feature',
        writable: false,
      });
      //element.geometry.coordinates = element.geometry.coordinates = transform(element.geometry.coordinates, 'EPSG:3857', 'EPSG:4326');

    });
    console.log('dataList ==>', dataList);
    return dataList;
  }

  positionActuelle(): void {
    this.crudService.getPosition().then(
      (res: any) => {
        console.log('res', res);
        this.coordinate1.longitude = res.lng;
        this.coordinate1.latitude = res.lat;
      },
      (failure: any) => {
        console.error(failure); //expected output: Oopsy...
      }
    );
  }

  resetSimulation(): void {
    this.coordinate1.longitude = null;
    this.coordinate1.latitude = null;
    this.map.removeLayer(this.circleMarkerVector);
    this.map.removeLayer(this.iconVectorLayer);
  }

  lancerSimulation(): void {
    if (
      this.coordinate1.longitude != null &&
      this.coordinate1.latitude != null &&
      this.rayon > 0
    ) {
      this.map.removeLayer(this.circleMarkerVector);
      this.map.removeLayer(this.iconVectorLayer);
      const circleFeature = new Feature({
        geometry: circular(
          [this.coordinate1.longitude, this.coordinate1.latitude],
          this.rayon
        ),
      });
      this.circleMarkerVector = new VectorLayer({
        source: new VectorSource({
          features: [circleFeature],
        }),
      });

      circleFeature.setStyle(this.styleDelimiterLayer);

      this.map.addLayer(this.circleMarkerVector);
      this.circleMarkerVector.setZIndex(8);

      this.makeIconeToLongLat(this.coordinate1.longitude, this.coordinate1.latitude);

      const circleGeometry: any = circleFeature.getGeometry();
      //const size = this.map.getSize();
      this.view.fit(circleGeometry, { padding: [170, 50, 30, 150] });
    } else {
      this.message.create('error', 'Formulaire invalid !');
    }
  }

  makeIconeToLongLat(long: any, lat: any): void {
    const iconFeature = new Feature({
      geometry: new Point([long, lat]),
    });
    iconFeature.setStyle(this.iconImagePosition);
    const iconVectorSource = new VectorSource({
      features: [iconFeature],
    });
    this.iconVectorLayer = new VectorLayer({
      source: iconVectorSource,
    });
    this.map.addLayer(this.iconVectorLayer);
    this.iconVectorLayer.setZIndex(1000);
  }

  getDynamiqueStyleParcelle(parcelle: any): Style {
    const element = this.keyFliterList.find((e: any) => e.status == parcelle.statutParcelle && e.batie == parcelle.batie);
    //console.log('element ===>', element);
    return new Style({
      stroke: new Stroke({ color: 'black', width: 1 }),
      fill: new Fill({
        color: element ? element.couleur : '#94a3b8',
        //color:  '#94a3b8',
      }),
    });
  }

  /* dessin de distance */
  onChangeTypeSelectDrawing(): void {
    this.map.removeInteraction(this.draw);
    this.addInteraction();
  }

  onChangeShowSegmentDrawing(valueEvent: any): void {
    this.showSegments = valueEvent;
    console.log('this.showSegments', this.showSegments);
    this.vectorDrawOutil.changed();
    this.draw.getOverlay().changed();
  }

  showOutilsMeasure(): void {
    this.isDrawing = true;
    //this.vectorDrawOutil.setZIndex(7);
    this.map.addLayer(this.vectorDrawOutil);
    this.map.addInteraction(modify);

    this.addInteraction();
  }

  hideOutilsMeasure(): void {
    this.isDrawing = false;
    //this.vectorDrawOutil.setZIndex(0);
    sourceDrawOutil.clear();
    this.draw.dispose();
    //this.map.removeLayer(this.vectorDrawOutil);
    this.map.removeInteraction(this.draw);
  }

  addInteraction(): void {
    const drawType: any = this.typeSelect;
    const activeTip =
      'Click to continue drawing the ' +
      (drawType === 'Polygon' ? 'polygon' : 'line');
    const idleTip = 'Click to start measuring';
    let tip = idleTip;
    this.draw = new Draw({
      source: sourceDrawOutil,
      type: drawType,
      style: (feature: any) => {
        //console.log("this.showSegments", this.showSegments);
        return styleFunction(feature, this.showSegments, drawType, tip);
      },
    });
    this.draw.on('drawstart', () => {
      console.log('this.clearPrevious ==>', this.clearPrevious);
      if (this.clearPrevious == true) {
        sourceDrawOutil.clear();
      }
      modify.setActive(false);
      tip = activeTip;
    });
    this.draw.on('drawend', () => {
      modifyStyle.setGeometry(tipPoint);
      modify.setActive(true);
      if (this.map != undefined) {
        this.map.once('pointermove', () => {
          modifyStyle.setGeometry('');
        });
      }

      tip = idleTip;
    });
    modify.setActive(true);
    this.map.addInteraction(this.draw);
  }

  /* fin dessin de distance */

  getInformationFromCoord(event: any) {
    if (this.isDrawing == false) {
      //this.parcelle = null;
      this.batimentList = [];
      this.uniteLogementList = [];
      const coordinate: any = this.map.getEventCoordinate(event);
      const pixels = this.map.getEventPixel(event);
      var features = this.map.getFeaturesAtPixel(pixels);
      if (features && features.length > 0) {
        features.forEach((element: any) => {
          console.log("element['values_']", element['values_']);
          const result: any = element ? element?.values_ : null;
          console.log('result.values_', result.values_);
          if (result != null) {
            this.mapDataInfo = result?.parcelle;
            if (this.mapDataInfo != null) {
              this.visibleMapData = true;
              this.crudService.getAll('batiment/all/by-parcelle-id/' + this.mapDataInfo?.parcelleId).subscribe(
                (data: any) => {
                  this.batimentList = data.object ? data.object : [];
                  console.log(' this.batimentList ==> ', this.batimentList);
                }
              );
              this.crudService.getAll('unite-logement/by-parcelle-id/' + this.mapDataInfo?.parcelleId).subscribe(
                (data: any) => {
                  this.uniteLogementList = data.object ? data.object : [];
                  console.log(' this.uniteLogementList ==> ', this.uniteLogementList);
                }
              );
            }
            /*console.log('this.parcelle', this.parcelle);
            if(this.parcelle != null) {
              this.parcelleService
              .getListProprietaire(this.parcelle?.id)
              .pipe(take(1))
              .subscribe((dataAppartenir: any) => {
                console.log('dataAppartenir ==> ', dataAppartenir);
                this.appartenirList = dataAppartenir.object
                  ? dataAppartenir.object
                  : [];
              });
              this.parcelleService
              .getBatiementListOfParcelle(this.parcelle.id)
              .subscribe((data: any) => {
                this.batimentList = data.object;
              });
            this.parcelleService
              .getUniteLogementListOfParcelle(this.parcelle.id)
              .subscribe((data: any) => {
                this.uniteLogementList = data.object;
              });
            }*/
          }
        });
      }
    }
  }

  formatMontant(val: number): string {
    if (!val && val !== 0) return '—';
    return new Intl.NumberFormat('fr-FR').format(val) + ' FCFA';
  }

  close(): void {
    this.visibleMapData = false;
  }

  detailByNup(): void {
    if (this.mapDataInfo && this.mapDataInfo.parcelleId) {
      //const urlBase = this.router.url
       const baseUrl = window.location.origin;
      console.log('baseUrl ==>', baseUrl);
      window.open(baseUrl+'/core/cartographie/data/detail-parcelle/' + this.mapDataInfo.parcelleId)
      //this.router.navigate(['/core/cartographie/data/detail-information-parcelle/' + this.mapDataInfo.parcelleId]);
    } else {
      this.modal.error({
        nzTitle: 'Erreur',
        nzContent: "Cette parcelle ne comporte pas de données fiscale d'enquête"
      });
    }
  }


  openGoogleMap(mode: 'driving' | 'walking' | 'bicycling' | 'transit'): void {
    if (this.mapDataInfo && this.mapDataInfo.longitude && this.mapDataInfo.latitude) {

      const destinationLat = this.mapDataInfo.latitude;
      const destinationLng = this.mapDataInfo.longitude;

      navigator.geolocation.getCurrentPosition(
        (position) => {
          const originLat = position.coords.latitude;
          const originLng = position.coords.longitude;

          const url = `https://www.google.com/maps/dir/?api=1&origin=${originLat},${originLng}&destination=${destinationLat},${destinationLng}&travelmode=${mode}`;

          window.open(url, '_blank');
        },
        (error) => {
          console.error("Erreur de géolocalisation", error);
          alert("Impossible d'obtenir votre position.");
        }
      );

    } else {
      this.modal.error({
        nzTitle: 'Erreur',
        nzContent: 'Les coordonnées géographique de la parcelle ne sont pas disponibles.'
      });
    }
  }


  constructionArbreUtilisateurs() {
    const data: any[] = this.arbreUtilisateurCourant;

    // Grouper par département — objet indexé par id
    const deptObj: { [id: number]: any } = {};

    data.forEach(item => {

      // Niveau département
      if (!deptObj[item.departementId]) {
        deptObj[item.departementId] = {
          ...item,
          communes: {} as { [id: number]: any }
        };
      }
      const dept = deptObj[item.departementId];

      // Niveau commune
      if (!dept.communes[item.communeId]) {
        dept.communes[item.communeId] = {
          ...item,
          arrondissements: {} as { [id: number]: any }
        };
      }
      const commune = dept.communes[item.communeId];

      // Niveau arrondissement
      if (!commune.arrondissements[item.arrondissementId]) {
        commune.arrondissements[item.arrondissementId] = {
          ...item,
          quartiers: [] as any[]
        };
      }
      const arr = commune.arrondissements[item.arrondissementId];

      // Niveau quartier
      arr.quartiers.push(item);
    });

    // Construire les nœuds nz-tree
    this.nodes = Object.values(deptObj).map((dept: any) => ({
      title: `${dept.departementCode} — ${dept.departementNom}`,
      key: `dept-${dept.departementId}`,
      icon: 'bank',
      isLeaf: false,
      expanded: false,
      nbParcelles: dept.nbParcellesDepartement,
      children: Object.values(dept.communes).map((comm: any) => ({
        title: `${comm.communeCode} — ${comm.communeNom}`,
        key: `comm-${comm.communeId}`,
        icon: 'home',
        isLeaf: false,
        expanded: false,
        nbParcelles: comm.nbParcellesCommune,
        children: Object.values(comm.arrondissements).map((arr: any) => ({
          title: arr.arrondissementNom,
          key: `arr-${arr.arrondissementId}`,
          icon: 'apartment',
          isLeaf: false,
          expanded: false,
          nbParcelles: arr.nbParcellesArrondissement,
          children: arr.quartiers.map((quart: any) => ({
            title: quart.quartierNom,
            key: `quart-${quart.quartierId}`,
            icon: 'environment',
            isLeaf: true,
            nbParcelles: quart.nbParcellesQuartier,
            quartier: quart
          }))
        }))
      }))
    }));
  }


  onNodeClick(event: any) {
    const node = event.node;
    if (node.isLeaf && node.key.startsWith('quart-')) {
      this.quartierSelected = node.origin.quartier;
      console.log(' this.quartierSelected ==>', this.quartierSelected);
      this.message.create('success', `Quartier ${this.quartierSelected.quartierNom} sélectionné.`);
      // votre logique de sélection...
      if (this.quartierSelected) {
        this.chargerParcelleListByQuartier(this.quartierSelected);
      }
    }
  }

  getBadgeColor(niveau: string): string {
    const colors: any = {
      'dept': '#204e10',
      'comm': '#10b981',
      'arr': '#f59e0b',
      'quart': '#ef6972'
    };
    return colors[niveau] ?? '#6b7280';
  }

  getNiveau(key: string): string {
    if (key.startsWith('dept')) return 'dept';
    if (key.startsWith('comm')) return 'comm';
    if (key.startsWith('arr')) return 'arr';
    if (key.startsWith('quart')) return 'quart';
    return '';
  }

  toggleCard(key: string): void {
    this.collapsedCards[key] = !this.collapsedCards[key];
  }


  toggleFilterBox(): void {
    this.filterBoxVisible = !this.filterBoxVisible;
  }

  getFilterPlaceholder(critere: string): string {
    const map: { [key: string]: string } = {
      nup: 'ex: NUP-COT-001',
      numeroTitreFoncier: 'ex: TF-2023-412',
      telephone: 'ex: +229 97...',
      ifu: 'ex: IFU-000...',
      npi: 'ex: NPI-...',
      raisonSociale: 'ex: SARL BÉNIN...',
    };
    return map[critere] ?? 'Entrer une valeur…';
  }

  appliquerFiltre(): void {
    if (!this.filterCritere) return;

    this.globalService.setLodingSuccess(true);

    if (this.filterCritere === 'qip_lotissement') {

      this.parcelleFilteredList = this.parcelleList.filter(item => {
        const ilotItem = (item.ilotLotissement || item.ilot || '').trim().toLowerCase();
        const plotItem = (item.plotissement || item.p || '').trim().toLowerCase();

        const filterIlot = this.filterIlotLotissement?.trim().toLowerCase() || '';
        const filterPlot = this.filterPlotissement?.trim().toLowerCase() || '';

        // Si filtre îlot → champ doit exister et matcher
        if (filterIlot && (!ilotItem || ilotItem !== filterIlot)) {
          return false;
        }

        // Si filtre plot → champ doit exister et matcher
        if (filterPlot && (!plotItem || plotItem !== filterPlot)) {
          return false;
        }

        // Si on arrive ici → ok
        return true;
      });

    } else if (this.filterCritere === 'personne_nom_prenom') {

      // ── Nom & Prénom : correspondance exacte sur chaque champ renseigné ──────
      const nom = this.filterPersonneNom.trim().toLowerCase();
      const prenom = this.filterPersonnePrenom.trim().toLowerCase();

      this.parcelleFilteredList = this.parcelleList.filter(item => {
        const itemNom = (item.nomEtPrenoms || item.nom || '').toLowerCase();
        const itemPrenom = (item.nomEtPrenoms || item.prenom || '').toLowerCase();

        const nomOk = !nom || itemNom === nom || itemNom.startsWith(nom);
        const prenomOk = !prenom || itemPrenom === prenom || itemPrenom.indexOf(prenom) > -1;

        return nomOk && prenomOk;
      });

    } else {

      // ── Champ unique : correspondance exacte ──────────────────────────────────
      const val = this.filterValue.trim().toLowerCase();
      if (!val) {
        this.globalService.setLodingSuccess(false);
        return;
      }

      this.parcelleFilteredList = this.parcelleList.filter(item => {
        const champ = (item[this.filterCritere] || '').toString().toLowerCase();
        return champ === val || champ.startsWith(val);
      });

    }
    if (this.parcelleFilteredList && this.parcelleFilteredList.length != this.parcelleList.length) {
      if (this.parcelleFilteredList[0].longitude && this.parcelleFilteredList[0].latitude) {
        this.map.getView().setCenter([this.parcelleFilteredList[0].longitude, this.parcelleFilteredList[0].latitude]);
        this.map.getView().setZoom(18);
      }
    }

    this.doMapCPS();
    this.globalService.setLodingSuccess(false);
    this.filterApplied = true;
  }

  reinitialiserFiltre(): void {
    this.filterCritere = '';
    this.filterValue = '';
    this.filterQlotissement = '';
    this.filterIlotLotissement = '';
    this.filterPlotissement = '';
    this.filterPersonneNom = '';   // ← ajouter
    this.filterPersonnePrenom = '';   // ← ajouter
    this.keyFilter = '';
    this.filterApplied = false;
    this.globalService.setLodingSuccess(true);
    this.parcelleFilteredList = [...this.parcelleList];
    this.doMapCPS();
    this.globalService.setLodingSuccess(false);
  }

}