import { Component, OnInit, OnDestroy, ChangeDetectorRef, inject } from '@angular/core';
import { PluginManifest, PluginService } from '@services/plugin.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-plugins',
  templateUrl: './plugins.component.html',
  styleUrls: ['./plugins.component.css']
})
export class PluginsComponent implements OnInit, OnDestroy {
  plugins: PluginManifest[] = [];
  selectedTabIndex: number = 0;
  isLoading: boolean = true;
  private pluginSub?: Subscription;
  private cdr = inject(ChangeDetectorRef);

  get activePluginsCount(): number {
    return this.plugins.filter(p => p.enabled).length;
  }

  constructor(public pluginService: PluginService) {}

  ngOnInit(): void {
    // 1. Asignar estado actual en memoria si ya existe
    this.plugins = this.pluginService.getAllPlugins();
    if (this.plugins.length > 0) {
      this.isLoading = false;
    }

    // 2. Suscribirse reactivamente al flujo de plugins
    this.pluginSub = this.pluginService.plugins$.subscribe(plugins => {
      this.plugins = plugins || [];
      if (this.plugins.length > 0) {
        this.isLoading = false;
      }
      this.cdr.markForCheck();
    });

    // 3. Forzar refresco desde el backend para garantizar datos actualizados
    this.pluginService.refreshPlugins().subscribe({
      next: (plugins) => {
        this.plugins = plugins || [];
        this.isLoading = false;
        this.cdr.markForCheck();
      },
      error: () => {
        this.isLoading = false;
        this.cdr.markForCheck();
      }
    });
  }

  ngOnDestroy(): void {
    this.pluginSub?.unsubscribe();
  }
}