import { Component, Input, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-notification',
  standalone: true,
  imports: [CommonModule],
  template: `
    @if (visible) {
      <div class="fixed bottom-4 right-4 z-50 glass-panel ghost-border rounded-sm px-4 py-3 min-w-[300px] flex items-start gap-3 shadow-lg transition-all duration-300"
           [ngClass]="type === 'error' ? 'border-red-500/50' : 'border-[var(--color-primary)]/50'">
        
        <!-- Icon -->
        <div [ngClass]="type === 'error' ? 'text-red-400' : 'text-[var(--color-primary)]'" class="mt-0.5">
          @if (type === 'success') {
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          }
          @if (type === 'error') {
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
          }
        </div>

      <!-- Content -->
      <div class="flex-1">
        <h4 class="text-[var(--color-on-surface)] font-inter font-medium text-sm m-0">{{ title }}</h4>
        <p class="text-[var(--color-on-surface-variant)] font-inter text-sm m-0 mt-0.5">{{ message }}</p>
      </div>

      <!-- Close -->
      <button (click)="close()" class="text-[var(--color-outline-variant)] hover:text-[var(--color-on-surface)] transition-colors">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
      </div>
    }
  `
})
export class NotificationComponent implements OnInit {
  @Input() title = '';
  @Input() message = '';
  @Input() type: 'success' | 'error' = 'success';
  @Input() duration = 5000;
  
  visible = true;

  ngOnInit() {
    if (this.duration > 0) {
      setTimeout(() => this.close(), this.duration);
    }
  }

  close() {
    this.visible = false;
  }
}