oedb-backend/frontend/src/app/pages/home/home.ts

import { Component, inject, OnDestroy, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormsModule } from '@angular/forms';
import {Menu} from './menu/menu';
import { AllEvents } from '../../maps/all-events/all-events';
import { EditForm } from '../../forms/edit-form/edit-form';
import { OedbApi } from '../../services/oedb-api';
import { UnlocatedEvents } from '../../shared/unlocated-events/unlocated-events';
import { OsmAuth } from '../../services/osm-auth';
import { Osm } from '../../forms/osm/osm';
@Component({
  selector: 'app-home',
  standalone: true,
  imports: [
    Menu,
    AllEvents,
    UnlocatedEvents,
    EditForm,
    Osm,
    FormsModule
  ],
  templateUrl: './home.html',
  styleUrl: './home.scss'
})
export class Home implements OnInit, OnDestroy {

  OedbApi = inject(OedbApi);
  private router = inject(Router);
  private osmAuth = inject(OsmAuth);
  
  features: Array<any> = [];
  filteredFeatures: Array<any> = [];
  selected: any | null = null;
  showTable = false;
  showFilters = false;
  showEditForm = true;
  
  // Nouvelles propriétés pour le rechargement automatique et la sélection de jours
  autoReloadEnabled = true;
  autoReloadInterval: any = null;
  daysAhead = 7; // Nombre de jours dans le futur par défaut
  isLoading = false;
  
  // Propriétés pour les filtres
  searchText = '';
  selectedWhatFilter = '';
  availableWhatTypes: string[] = [];

  ngOnInit() {
    this.loadEvents();
    this.startAutoReload();
  }

  ngOnDestroy() {
    this.stopAutoReload();
  }

  createEvent() {
    this.selected = null;
    //this.showTable = false;
    //this.showFilters = true;
    this.showEditForm = true;
    
  }

  loadEvents() {
    this.isLoading = true;
    const today = new Date();
    const endDate = new Date(today);
    endDate.setDate(today.getDate() + this.daysAhead);
    
    const params = {
      start: today.toISOString().split('T')[0],
      end: endDate.toISOString().split('T')[0],
      limit: 1000
    };

    this.OedbApi.getEvents(params).subscribe((events: any) => {
      this.features = Array.isArray(events?.features) ? events.features : [];
      this.updateAvailableWhatTypes();
      this.applyFilters();
      this.isLoading = false;
    });
  }

  startAutoReload() {
    if (this.autoReloadEnabled && !this.autoReloadInterval) {
      this.autoReloadInterval = setInterval(() => {
        this.loadEvents();
      }, 60000); // 1 minute
    }
  }

  stopAutoReload() {
    if (this.autoReloadInterval) {
      clearInterval(this.autoReloadInterval);
      this.autoReloadInterval = null;
    }
  }

  toggleAutoReload() {
    this.autoReloadEnabled = !this.autoReloadEnabled;
    if (this.autoReloadEnabled) {
      this.startAutoReload();
    } else {
      this.stopAutoReload();
    }
  }

  onDaysAheadChange() {
    this.loadEvents();
  }

  updateAvailableWhatTypes() {
    const whatTypes = new Set<string>();
    this.features.forEach(feature => {
      if (feature?.properties?.what) {
        whatTypes.add(feature.properties.what);
      }
    });
    this.availableWhatTypes = Array.from(whatTypes).sort();
  }

  onSearchChange() {
    this.applyFilters();
  }

  onWhatFilterChange() {
    this.applyFilters();
  }

  applyFilters() {
    let filtered = [...this.features];

    // Filtre par texte de recherche
    if (this.searchText.trim()) {
      const searchLower = this.searchText.toLowerCase();
      filtered = filtered.filter(feature => {
        const label = feature?.properties?.label || feature?.properties?.name || '';
        const description = feature?.properties?.description || '';
        const what = feature?.properties?.what || '';
        return label.toLowerCase().includes(searchLower) ||
               description.toLowerCase().includes(searchLower) ||
               what.toLowerCase().includes(searchLower);
      });
    }

    // Filtre par type d'événement
    if (this.selectedWhatFilter) {
      filtered = filtered.filter(feature => 
        feature?.properties?.what === this.selectedWhatFilter
      );
    }

    this.filteredFeatures = filtered;
  }

  goToNewCategories() {
    this.router.navigate(['/nouvelles-categories']);
  }

  onSelect(feature: any) {
    this.selected = feature;
  }

  onPickCoords(coords: [number, number]) {
    // Autofill lat/lon in the form selection or prepare a new feature shell
    const [lon, lat] = coords;
    if (this.selected && this.selected.properties) {
      this.selected = {
        ...this.selected,
        geometry: { type: 'Point', coordinates: [lon, lat] }
      };
    } else {
      const osmUsername = this.osmAuth.getUsername();
      this.selected = {
        id: null,
        properties: { 
          label: '', 
          description: '', 
          what: '', 
          where: '',
          ...(osmUsername && { last_modified_by: osmUsername })
        },
        geometry: { type: 'Point', coordinates: [lon, lat] }
      };
    }
  }

  onSaved(_res: any) {
    // refresh list after update
    this.loadEvents();
  }

  onCreated(_res: any) {
    // refresh and clear selection after create
    this.selected = null;
    this.loadEvents();
  }

  onDeleted(_res: any) {
    this.selected = null;
    this.loadEvents();
  }

  onCanceled() {
    this.showEditForm = false;
  }

  // Menu callbacks
  ngAfterViewInit() {
    // Wire menu callbacks if needed via querySelector; left simple for now
    // We keep logic here: toggling and downloads
  }

  toggleView() {
    this.showTable = !this.showTable;
  }

  downloadGeoJSON() {
    const blob = new Blob([JSON.stringify({ type: 'FeatureCollection', features: this.filteredFeatures }, null, 2)], { type: 'application/geo+json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'events.geojson';
    document.body.appendChild(a);
    a.click();
    URL.revokeObjectURL(url);
    a.remove();
  }

  downloadCSV() {
    const header = ['id', 'what', 'label', 'start', 'stop', 'lon', 'lat'];
    const rows = this.filteredFeatures.map((f: any) => [
      JSON.stringify(f?.properties?.id ?? f?.id ?? ''),
      JSON.stringify(f?.properties?.what ?? ''),
      JSON.stringify(f?.properties?.label ?? f?.properties?.name ?? ''),
      JSON.stringify(f?.properties?.start ?? f?.properties?.when ?? ''),
      JSON.stringify(f?.properties?.stop ?? ''),
      JSON.stringify(f?.geometry?.coordinates?.[0] ?? ''),
      JSON.stringify(f?.geometry?.coordinates?.[1] ?? '')
    ].join(','));
    const csv = [header.join(','), ...rows].join('\n');
    const blob = new Blob([csv], { type: 'text/csv' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'events.csv';
    document.body.appendChild(a);
    a.click();
    URL.revokeObjectURL(url);
    a.remove();
  }
}