import { Component, inject } from '@angular/core';
import { NgIcon } from '@ng-icons/core';
import { ToastService } from '@core/toast.service';

/** Toast stack overlay; shared by the main window and editor windows. */
@Component({
  selector: 'app-toasts',
  imports: [NgIcon],
  template: `
    <div class="pointer-events-none fixed right-3 bottom-8 z-50 flex w-80 flex-col gap-2">
      @for (t of toast.toasts(); track t.id) {
        <div
          (mouseenter)="toast.pause(t.id)"
          (mouseleave)="toast.resume(t.id)"
          class="group pointer-events-auto relative flex items-start gap-2 overflow-hidden rounded-lg border border-border bg-card p-3 text-xs text-card-foreground shadow-lg"
        >
          <ng-icon
            [name]="toastIcon(t.kind)"
            size="1rem"
            [class]="t.kind === 'error' ? 'shrink-0 text-destructive' : 'shrink-0 text-success'"
          />
          <span class="min-w-0 flex-1 wrap-break-word">{{ t.text }}</span>
          <button
            (click)="toast.dismiss(t.id)"
            class="shrink-0 text-muted-foreground hover:text-foreground"
          >
            <ng-icon name="mynaX" size="0.9rem" />
          </button>
          <!-- auto-dismiss countdown; freezes with the timer while hovered -->
          <div
            class="toast-countdown absolute inset-x-0 bottom-0 h-0.5 origin-left"
            [class.bg-destructive]="t.kind === 'error'"
            [class.bg-success]="t.kind === 'success'"
            [class.bg-primary]="t.kind === 'info'"
            [style.animation-duration.ms]="t.ttlMs"
          ></div>
        </div>
      }
    </div>
  `,
})
export class Toasts {
  readonly toast = inject(ToastService);

  toastIcon(kind: 'error' | 'info' | 'success'): string {
    if (kind === 'error') return 'mynaXCircle';
    if (kind === 'success') return 'mynaCheckCircle';
    return 'mynaCheck';
  }
}