import { Component, inject } from '@angular/core';
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';

@Component({
  selector: 'app-home',
  imports: [
    Menu,
    AllEvents,
    EditForm
  ],
  templateUrl: './home.html',
  styleUrl: './home.scss'
})
export class Home {

  OedbApi = inject(OedbApi);
  features: Array<any> = [];
  selected: any | null = null;
  showTable = false;

  constructor() {
    this.OedbApi.getEvents({ when: 'now', limit: 500 }).subscribe((events: any) => {
      this.features = Array.isArray(events?.features) ? events.features : [];
    });
  }

  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 {
      this.selected = {
        id: null,
        properties: { label: '', description: '', what: '', where: '' },
        geometry: { type: 'Point', coordinates: [lon, lat] }
      };
    }
  }

  onSaved(_res: any) {
    // refresh list after update
    this.OedbApi.getEvents({ when: 'now', limit: 500 }).subscribe((events: any) => {
      this.features = Array.isArray(events?.features) ? events.features : [];
    });
  }

  onCreated(_res: any) {
    // refresh and clear selection after create
    this.selected = null;
    this.OedbApi.getEvents({ when: 'now', limit: 500 }).subscribe((events: any) => {
      this.features = Array.isArray(events?.features) ? events.features : [];
    });
  }

  onDeleted(_res: any) {
    this.selected = null;
    this.OedbApi.getEvents({ when: 'now', limit: 500 }).subscribe((events: any) => {
      this.features = Array.isArray(events?.features) ? events.features : [];
    });
  }

  // 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.features }, 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.features.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();
  }
}