import { CommonModule, isPlatformBrowser } from '@angular/common';
import { Component, Input, SimpleChanges, PLATFORM_ID, inject } from '@angular/core';

@Component({
  selector: 'app-tooltip',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './tooltip.component.html',
})
export class TooltipComponent {
  @Input() id: string;
  @Input() text: string;
  @Input() isVisible: boolean = false;

  private platformId = inject(PLATFORM_ID);
  private isBrowser = isPlatformBrowser(this.platformId);

  ngOnInit() {
    this.initializeTooltip();
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['isVisible']) {
      this.updateTooltipVisibility();
    }
  }

  private initializeTooltip() {
    // Flowbite is now initialized once in AppComponent
  }

  private updateTooltipVisibility() {
    if (!this.isBrowser) return;

    const tooltipElement = document.getElementById(this.id);
    if (tooltipElement) {
      if (this.isVisible) {
        tooltipElement.classList.remove('invisible', 'opacity-0');
        tooltipElement.classList.add('visible', 'opacity-100');
      } else {
        tooltipElement.classList.remove('visible', 'opacity-100');
        tooltipElement.classList.add('invisible', 'opacity-0');
      }
    }
  }
}
