import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TimeWheelPickerComponent } from '../time-wheel-picker/time-wheel-picker.component';
import { TaskTime } from '../../models/kanban.types';

/**
 * EstimatedTimeDialogComponent - Estimated time picker
 * FuseBase style (Image 8)
 */
@Component({
  selector: 'app-estimated-time-dialog',
  standalone: true,
  imports: [CommonModule, TimeWheelPickerComponent],
  template: `
    <div class="dialog-overlay" (click)="close.emit()">
      <div class="dialog-content" (click)="$event.stopPropagation()">
        <!-- Title -->
        <h3 class="dialog-title">Estimated time</h3>
        
        <!-- Time Wheels -->
        <div class="time-wheels-container">
          <div class="wheel-group">
            <app-time-wheel-picker
              [min]="0"
              [max]="365"
              [value]="days()"
              suffix="d"
              (valueChange)="days.set($event)" />
          </div>
          
          <div class="wheel-group">
            <app-time-wheel-picker
              [min]="0"
              [max]="23"
              [value]="hours()"
              suffix="h"
              (valueChange)="hours.set($event)" />
          </div>
          
          <div class="wheel-group">
            <app-time-wheel-picker
              [min]="0"
              [max]="59"
              [value]="minutes()"
              suffix="m"
              (valueChange)="minutes.set($event)" />
          </div>
        </div>
        
        <!-- Actions -->
        <div class="dialog-actions">
          <button class="btn-cancel" (click)="close.emit()">
            Cancel
          </button>
          <button class="btn-save" (click)="onSave()">
            Save
          </button>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .dialog-overlay {
      @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
    }
    
    .dialog-content {
      @apply bg-[#2b2b2b] rounded-lg shadow-2xl p-6 w-96 max-w-[90vw] space-y-6;
    }
    
    .dialog-title {
      @apply text-xl font-semibold text-white text-center;
    }
    
    .time-wheels-container {
      @apply flex items-center justify-center gap-4;
    }
    
    .wheel-group {
      @apply flex flex-col items-center;
    }
    
    .dialog-actions {
      @apply flex gap-3;
    }
    
    .btn-cancel {
      @apply flex-1 px-4 py-2.5 bg-transparent hover:bg-gray-700 text-blue-400
             rounded-lg transition-colors font-medium;
    }
    
    .btn-save {
      @apply flex-1 px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white
             rounded-lg transition-colors font-medium;
    }
    
    :host-context(.light-theme) {
      .dialog-content {
        @apply bg-white;
      }
      
      .dialog-title {
        @apply text-gray-900;
      }
      
      .btn-cancel {
        @apply hover:bg-gray-100 text-blue-600;
      }
    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class EstimatedTimeDialogComponent {
  @Input() initialTime?: TaskTime;
  @Output() close = new EventEmitter<void>();
  @Output() timeSelected = new EventEmitter<TaskTime>();
  
  protected readonly days = signal(0);
  protected readonly hours = signal(0);
  protected readonly minutes = signal(0);
  
  ngOnInit(): void {
    if (this.initialTime) {
      this.days.set(this.initialTime.days);
      this.hours.set(this.initialTime.hours);
      this.minutes.set(this.initialTime.minutes);
    }
  }
  
  protected onSave(): void {
    const time: TaskTime = {
      days: this.days(),
      hours: this.hours(),
      minutes: this.minutes()
    };
    
    this.timeSelected.emit(time);
    this.close.emit();
  }
}