import { Component, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Subscription } from 'rxjs';
import { ConfirmationService, ConfirmationState, ConfirmationConfig } from '../../services/confirmation/confirmation.service';

@Component({
  selector: 'app-confirmation-dialog',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div 
      *ngIf="state.isVisible" 
      class="confirmation-overlay"
      (click)="onOverlayClick($event)">
      
      <div class="confirmation-dialog" (click)="$event.stopPropagation()">
        
        <!-- Header -->
        <div class="dialog-header" [class]="'dialog-header-' + (state.config?.type || 'warning')">
          <div class="header-content">
            <i 
              *ngIf="state.config?.showIcon && state.config?.icon" 
              class="dialog-icon fas {{ state.config?.icon }}">
            </i>
            <h3 class="dialog-title">{{ state.config?.title || '' }}</h3>
          </div>
        </div>
        
        <!-- Body -->
        <div class="dialog-body">
          <p class="dialog-message">{{ state.config?.message || '' }}</p>
        </div>
        
        <!-- Footer -->
        <div class="dialog-footer">
          <button 
            type="button"
            class="btn btn-secondary"
            (click)="cancel()">
            {{ state.config?.cancelText || 'Cancelar' }}
          </button>
          
          <button 
            type="button"
            class="btn"
            [class]="'btn-' + (state.config?.type || 'warning')"
            (click)="confirm()">
            {{ state.config?.confirmText || 'Confirmar' }}
          </button>
        </div>
        
      </div>
    </div>
  `,
  styles: [`
    .confirmation-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      animation: fadeIn 0.2s ease-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .confirmation-dialog {
      background: var(--background);
      border-radius: 12px;
      box-shadow: 
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
      max-width: 480px;
      width: 90%;
      max-height: 90vh;
      overflow: hidden;
      animation: slideIn 0.3s ease-out;
      border: 1px solid var(--divider);
    }

    @keyframes slideIn {
      from { 
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
      }
      to { 
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* Header */
    .dialog-header {
      padding: 24px 24px 16px 24px;
      border-bottom: 1px solid var(--divider);
    }

    .dialog-header-warning {
      background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.05) 100%);
      border-bottom-color: rgba(255, 193, 7, 0.2);
    }

    .dialog-header-danger {
      background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%);
      border-bottom-color: rgba(220, 53, 69, 0.2);
    }

    .dialog-header-info {
      background: linear-gradient(135deg, rgba(13, 110, 253, 0.1) 0%, rgba(13, 110, 253, 0.05) 100%);
      border-bottom-color: rgba(13, 110, 253, 0.2);
    }

    .dialog-header-success {
      background: linear-gradient(135deg, rgba(25, 135, 84, 0.1) 0%, rgba(25, 135, 84, 0.05) 100%);
      border-bottom-color: rgba(25, 135, 84, 0.2);
    }

    .header-content {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .dialog-icon {
      font-size: 24px;
      flex-shrink: 0;
    }

    .dialog-header-warning .dialog-icon {
      color: #ff6b35;
    }

    .dialog-header-danger .dialog-icon {
      color: #dc3545;
    }

    .dialog-header-info .dialog-icon {
      color: #0d6efd;
    }

    .dialog-header-success .dialog-icon {
      color: #198754;
    }

    .dialog-title {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1.3;
    }

    /* Body */
    .dialog-body {
      padding: 20px 24px;
    }

    .dialog-message {
      margin: 0;
      font-size: 16px;
      line-height: 1.5;
      color: var(--text-secondary);
    }

    /* Footer */
    .dialog-footer {
      padding: 16px 24px 24px 24px;
      display: flex;
      gap: 12px;
      justify-content: flex-end;
    }

    /* Buttons */
    .btn {
      padding: 10px 20px;
      border-radius: 8px;
      border: none;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      min-width: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .btn:active {
      transform: translateY(0);
    }

    .btn-secondary {
      background: var(--surface);
      color: var(--text-secondary);
      border: 1px solid var(--divider);
    }

    .btn-secondary:hover {
      background: var(--hover-bg);
      color: var(--text-primary);
      border-color: var(--text-secondary);
    }

    .btn-warning {
      background: linear-gradient(135deg, #ff6b35 0%, #f39c12 100%);
      color: white;
      box-shadow: 0 2px 4px rgba(255, 107, 53, 0.3);
    }

    .btn-warning:hover {
      background: linear-gradient(135deg, #e55a2b 0%, #e67e22 100%);
      box-shadow: 0 4px 8px rgba(255, 107, 53, 0.4);
    }

    .btn-danger {
      background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
      color: white;
      box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
    }

    .btn-danger:hover {
      background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
      box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
    }

    .btn-info {
      background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
      color: white;
      box-shadow: 0 2px 4px rgba(13, 110, 253, 0.3);
    }

    .btn-info:hover {
      background: linear-gradient(135deg, #0b5ed7 0%, #0a58ca 100%);
      box-shadow: 0 4px 8px rgba(13, 110, 253, 0.4);
    }

    .btn-success {
      background: linear-gradient(135deg, #198754 0%, #157347 100%);
      color: white;
      box-shadow: 0 2px 4px rgba(25, 135, 84, 0.3);
    }

    .btn-success:hover {
      background: linear-gradient(135deg, #157347 0%, #146c43 100%);
      box-shadow: 0 4px 8px rgba(25, 135, 84, 0.4);
    }

    /* Responsive */
    @media (max-width: 768px) {
      .confirmation-dialog {
        margin: 16px;
        width: calc(100% - 32px);
      }

      .dialog-header,
      .dialog-body,
      .dialog-footer {
        padding-left: 20px;
        padding-right: 20px;
      }

      .dialog-footer {
        flex-direction: column-reverse;
      }

      .btn {
        width: 100%;
      }
    }
  `]
})
export class ConfirmationDialogComponent implements OnInit, OnDestroy {
  state: ConfirmationState = {
    isVisible: false,
    config: null,
    resolve: null
  };

  private subscription?: Subscription;

  constructor(private confirmationService: ConfirmationService) {}

  ngOnInit(): void {
    this.subscription = this.confirmationService.state$.subscribe(state => {
      this.state = state;
    });
  }

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

  confirm(): void {
    this.confirmationService.confirmAction();
  }

  cancel(): void {
    this.confirmationService.cancelAction();
  }

  onOverlayClick(event: Event): void {
    // Fechar ao clicar no overlay (fora do diálogo)
    this.cancel();
  }
} 