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

/**
 * DatePickerDialogComponent - Date and time picker
 * FuseBase style (Image 6)
 */
@Component({
  selector: 'app-date-picker-dialog',
  standalone: true,
  imports: [CommonModule, FormsModule, CalendarGridComponent, TimeWheelPickerComponent],
  template: `
    <div class="dialog-overlay" (click)="close.emit()">
      <div class="dialog-content" (click)="$event.stopPropagation()">
        <!-- Calendar -->
        <app-calendar-grid
          [selectedDate]="selectedDate()"
          (dateSelected)="onDateSelected($event)" />
        
        <!-- Time Picker (visible when showTime is true) -->
        @if (showTime()) {
          <div class="time-picker-section">
            <div class="time-display">{{ formatTime() }}</div>
            
            <div class="time-wheels">
              <app-time-wheel-picker
                [min]="0"
                [max]="23"
                [value]="hours()"
                [padZero]="true"
                (valueChange)="hours.set($event)" />
              
              <span class="time-separator">:</span>
              
              <app-time-wheel-picker
                [min]="0"
                [max]="59"
                [value]="minutes()"
                [padZero]="true"
                (valueChange)="minutes.set($event)" />
            </div>
          </div>
        }
        
        <!-- When section -->
        <div class="when-section">
          <div class="when-row">
            <span class="when-label">When</span>
            <span class="when-value">{{ formatDateTime() }}</span>
          </div>
        </div>
        
        <!-- Show time toggle -->
        <div class="toggle-row">
          <span class="toggle-label">Show time</span>
          <button 
            class="toggle-btn"
            [class.toggle-btn-active]="showTime()"
            (click)="toggleShowTime()">
            <div class="toggle-slider"></div>
          </button>
        </div>
        
        <!-- Alert dropdown -->
        <div class="alert-section">
          <span class="alert-label">Alert</span>
          <select 
            class="alert-select"
            [(ngModel)]="alert">
            <option value="none">None</option>
            <option value="5min">5 minutes before</option>
            <option value="10min">10 minutes before</option>
            <option value="15min">15 minutes before</option>
            <option value="30min">30 minutes before</option>
            <option value="1hour">1 hour before</option>
            <option value="1day">1 day before</option>
          </select>
        </div>
        
        <!-- Actions -->
        <div class="dialog-actions">
          <button class="btn-cancel" (click)="close.emit()">
            Cancel
          </button>
          <button class="btn-done" (click)="onDone()">
            Done
          </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-[480px] max-w-[90vw] space-y-4;
    }
    
    .time-picker-section {
      @apply pt-4 border-t border-gray-700;
    }
    
    .time-display {
      @apply text-4xl font-bold text-blue-400 text-center mb-4;
    }
    
    .time-wheels {
      @apply flex items-center justify-center gap-2;
    }
    
    .time-separator {
      @apply text-3xl font-bold text-blue-400;
    }
    
    .when-section {
      @apply pt-4 border-t border-gray-700;
    }
    
    .when-row {
      @apply flex justify-between items-center;
    }
    
    .when-label {
      @apply text-sm font-medium text-gray-400;
    }
    
    .when-value {
      @apply text-sm text-white;
    }
    
    .toggle-row {
      @apply flex justify-between items-center py-2;
    }
    
    .toggle-label {
      @apply text-sm font-medium text-gray-300;
    }
    
    .toggle-btn {
      @apply relative w-12 h-6 bg-gray-600 rounded-full transition-colors;
    }
    
    .toggle-btn-active {
      @apply bg-blue-600;
    }
    
    .toggle-slider {
      @apply absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full
             transition-transform;
    }
    
    .toggle-btn-active .toggle-slider {
      @apply translate-x-6;
    }
    
    .alert-section {
      @apply flex justify-between items-center;
    }
    
    .alert-label {
      @apply text-sm font-medium text-gray-300;
    }
    
    .alert-select {
      @apply px-3 py-1.5 bg-[#3a3a3a] text-white rounded border border-gray-600
             focus:border-blue-500 outline-none text-sm;
    }
    
    .dialog-actions {
      @apply flex gap-3 pt-4 border-t border-gray-700;
    }
    
    .btn-cancel {
      @apply flex-1 px-4 py-2.5 bg-gray-700 hover:bg-gray-600 text-white
             rounded-lg transition-colors font-medium;
    }
    
    .btn-done {
      @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;
      }
      
      .time-picker-section,
      .when-section,
      .dialog-actions {
        @apply border-gray-200;
      }
      
      .when-label,
      .toggle-label,
      .alert-label {
        @apply text-gray-700;
      }
      
      .when-value {
        @apply text-gray-900;
      }
      
      .toggle-btn {
        @apply bg-gray-300;
      }
      
      .alert-select {
        @apply bg-gray-50 text-gray-900 border-gray-300;
      }
      
      .btn-cancel {
        @apply bg-gray-200 hover:bg-gray-300 text-gray-900;
      }
    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DatePickerDialogComponent {
  @Input() initialDate?: TaskDate;
  @Output() close = new EventEmitter<void>();
  @Output() dateSelected = new EventEmitter<TaskDate>();
  
  protected readonly selectedDate = signal(new Date());
  protected readonly hours = signal(12);
  protected readonly minutes = signal(0);
  protected readonly showTime = signal(false);
  protected alert: string = 'none';
  
  ngOnInit(): void {
    if (this.initialDate) {
      this.selectedDate.set(this.initialDate.date);
      this.showTime.set(this.initialDate.showTime);
      this.alert = this.initialDate.alert || 'none';
      
      if (this.initialDate.showTime) {
        this.hours.set(this.initialDate.date.getHours());
        this.minutes.set(this.initialDate.date.getMinutes());
      }
    }
  }
  
  protected onDateSelected(date: Date): void {
    this.selectedDate.set(date);
  }
  
  protected toggleShowTime(): void {
    this.showTime.update(v => !v);
  }
  
  protected formatTime(): string {
    const h = this.hours().toString().padStart(2, '0');
    const m = this.minutes().toString().padStart(2, '0');
    return `${h}:${m}`;
  }
  
  protected formatDateTime(): string {
    const date = this.selectedDate();
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    
    if (this.showTime()) {
      const period = this.hours() >= 12 ? 'p.m.' : 'a.m.';
      const displayHours = this.hours() % 12 || 12;
      const displayMinutes = this.minutes().toString().padStart(2, '0');
      return `${year}-${month}-${day}, ${displayHours}:${displayMinutes} ${period}`;
    }
    
    return `${year}-${month}-${day}`;
  }
  
  protected onDone(): void {
    const date = new Date(this.selectedDate());
    
    if (this.showTime()) {
      date.setHours(this.hours(), this.minutes());
    }
    
    const taskDate: TaskDate = {
      date,
      showTime: this.showTime(),
      alert: this.alert as any
    };
    
    this.dateSelected.emit(taskDate);
    this.close.emit();
  }
}