import { Component, OnInit, NgZone } from '@angular/core';
import { NavController, LoadingController } from '@ionic/angular';
import { AuthService } from 'src/app/services/auth.service';
import { IchambaService } from 'src/app/services/ichamba.service';
import { AlertService } from 'src/app/services/alert.service';

declare var google: any;

@Component({
  selector: 'app-hero',
  templateUrl: './hero.page.html',
  styleUrls: ['./hero.page.scss'],
})
export class HeroPage implements OnInit {

  private loading: any;
  categories: any[] = [];
  categories_input: any[] = [];
  categories_rearranged: any[] = [];
  filteredCategories: any[] = [];
  categorySearchText: string = '';
  showCategoryDropdown: boolean = false;
  keywords: string[] = [];
  keywordInput: string = '';
  myPosition: any = {};
  myAddress: string | null = null;
  myIntnumber: string | null = null;
  reference: string | null = null;
  name: string | null = null;
  selectedReference: number = 0;
  addressAutocomplete: string = '';
  placesSearch: any = '';
  showinput: boolean = false;
  showif = true;

  constructor(
      private navCtrl: NavController,
      private loadingCtrl: LoadingController,
      private authService: AuthService,
      private alertService: AlertService,
      private ichambaService: IchambaService,
      private ngZone: NgZone,
  ) { }

  ngOnInit() {
    this.ichambaService.getCategories()
      .subscribe( categories => {
        this.categories = categories;
        this.filteredCategories = categories;
      })
  }

  // ========== CATEGORÍAS CON CHIPS ==========
  filterCategories(event: any) {
    const searchTerm = (event.detail?.value || event.target?.value || '').toLowerCase();
    this.categorySearchText = searchTerm;
    if (searchTerm.length > 0) {
      this.filteredCategories = this.categories.filter(cat =>
        cat.toLowerCase().includes(searchTerm) && !this.categories_input.includes(cat)
      );
      this.showCategoryDropdown = true;
    } else {
      this.filteredCategories = this.categories.filter(cat => !this.categories_input.includes(cat));
      this.showCategoryDropdown = false;
    }
  }

  selectCategory(category: string) {
    if (!this.categories_input.includes(category)) {
      this.categories_input.push(category);
    }
    this.categorySearchText = '';
    this.showCategoryDropdown = false;
    this.filteredCategories = this.categories.filter(cat => !this.categories_input.includes(cat));
  }

  removeCategory(category: string) {
    const index = this.categories_input.indexOf(category);
    if (index > -1) {
      this.categories_input.splice(index, 1);
    }
    this.filteredCategories = this.categories.filter(cat => !this.categories_input.includes(cat));
  }

  showCategoryList() {
    this.filteredCategories = this.categories.filter(cat => !this.categories_input.includes(cat));
    this.showCategoryDropdown = true;
  }

  hideCategoryList() {
    setTimeout(() => {
      this.showCategoryDropdown = false;
    }, 200);
  }

  // ========== PALABRAS CLAVE CON CHIPS ==========
  addKeyword(event?: any) {
    const value = this.keywordInput?.trim();
    if (value && value.length > 0) {
      // Separar por comas si hay varias palabras
      const newKeywords = value.split(',').map((k: string) => k.trim()).filter((k: string) => k.length > 0);
      newKeywords.forEach((keyword: string) => {
        if (!this.keywords.includes(keyword)) {
          this.keywords.push(keyword);
        }
      });
      this.keywordInput = '';
    }
  }

  onKeywordKeydown(event: KeyboardEvent) {
    if (event.key === 'Enter' || event.key === ',') {
      event.preventDefault();
      this.addKeyword();
    }
  }

  removeKeyword(keyword: string) {
    const index = this.keywords.indexOf(keyword);
    if (index > -1) {
      this.keywords.splice(index, 1);
    }
  }

  dismissHero() {
    this.navCtrl.navigateRoot('/landing');
  }

  autocomplete(ev: any) {
    if (!this.addressAutocomplete.trim().length) {
      this.placesSearch = null;
    }
    console.log(this.addressAutocomplete)
    new google.maps.places.AutocompleteService().getPredictions({ input: this.addressAutocomplete }, predictions => {
      this.ngZone.run(() => {
        this.placesSearch = predictions;
        console.log(predictions);
      });
    });
  }

  geoloc(place_id: string, place_description: string, place_intnumber: string) {
    this.myAddress = place_description;
    this.myIntnumber = place_intnumber;
    console.log(place_id);
    this.hidelist();
    new google.maps.Geocoder().geocode({ placeId: place_id }, coordinates  => {
      this.ngZone.run(() => {
        console.log(coordinates[0].geometry.location.lat() + ", " + coordinates[0].geometry.location.lng());
        this.myPosition = {
          latitude: coordinates[0].geometry.location.lat(),
          longitude: coordinates[0].geometry.location.lng()
        }
      });
    });
  }

  selected_reference(ev: any) {
    console.log(ev.target.value);
    this.selectedReference = ev.target.value;
    if (this.selectedReference == 5) {
      this.showinput = true;
    } else {
      this.showinput = false;
    }
  }

  addHero(){
    // Preparar categorías y keywords
    const categoriesString = this.categories_input.join(',');
    const keywordsString = this.keywords.length > 0 ? this.keywords.join(', ') : null;

    if (this.name && this.categories_input.length > 0 && this.myAddress && this.myPosition.latitude && this.myPosition.longitude && this.selectedReference){
      if (this.selectedReference == 5 && this.reference) {
        this.loadingCtrl.create().then((overlay) => {
          this.loading = overlay;
          this.loading.present();
        });

        this.ichambaService.addHero(this.name, categoriesString, keywordsString, this.myAddress, this.myPosition.latitude, this.myPosition.longitude, this.selectedReference, this.reference).subscribe(
          data => {
            this.loading.dismiss();
              this.alertService.presentToast(data['message']);
              this.navCtrl.navigateRoot('/dashboard');
          }, error => {
            this.loading.dismiss();
            this.alertService.presentToast("Por favor contacte a soporte técnico, Estatus:" + error['status']);
          });
      } else if (this.selectedReference !== 5) {
        this.loadingCtrl.create().then((overlay) => {
          this.loading = overlay;
          this.loading.present();
        });

        this.ichambaService.addHero(this.name, categoriesString, keywordsString, this.myAddress, this.myPosition.latitude, this.myPosition.longitude, this.selectedReference, this.reference).subscribe(
          data => {
            this.loading.dismiss();
              this.alertService.presentToast(data['message']);
              this.navCtrl.navigateRoot('/dashboard');
          }, error => {
            this.loading.dismiss();
            this.alertService.presentToast("Por favor contacte a soporte técnico, Estatus:" + error['status']);
          });
      } else {
        this.alertService.presentToast("Por favor, específique cómo supo de nosotros");
      }
    } else {
      this.alertService.presentToast("Llene todos los datos solicitados");
    }
  }

  showlist() {
    this.showif = true;
  }

  hidelist() {
    this.showif = false;
  }

}