import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TimePickerComponent, TimeValue } from '../../../../../ui-essentials/src/lib/components/forms/time-picker/time-picker.component';

@Component({
  selector: 'ui-time-picker-demo',
  standalone: true,
  imports: [CommonModule, FormsModule, TimePickerComponent],
  template: `
    <div class="demo-container">
      <h2>Time Picker Demo</h2>
      
      <!-- Size Variants -->
      <section class="demo-section">
        <h3>Sizes</h3>
        <div class="demo-row">
          @for (size of sizes; track size) {
            <div class="demo-item">
              <h4>{{ size | uppercase }}</h4>
              <ui-time-picker 
                [size]="size"
                [label]="size + ' Time Picker'"
                [placeholder]="'Select time'"
                [(ngModel)]="sampleValues[size]">
              </ui-time-picker>
            </div>
          }
        </div>
      </section>
      
      <!-- Variant Styles -->
      <section class="demo-section">
        <h3>Variants</h3>
        <div class="demo-row">
          @for (variant of variants; track variant) {
            <div class="demo-item">
              <h4>{{ variant | titlecase }}</h4>
              <ui-time-picker 
                [variant]="variant"
                [label]="variant + ' Variant'"
                [placeholder]="'Select time'"
                [(ngModel)]="variantValues[variant]">
              </ui-time-picker>
            </div>
          }
        </div>
      </section>
      
      <!-- Time Formats -->
      <section class="demo-section">
        <h3>Time Formats</h3>
        <div class="demo-row">
          <div class="demo-item">
            <h4>12-Hour Format</h4>
            <ui-time-picker 
              label="12-Hour Time"
              placeholder="Select time"
              timeFormat="12"
              helperText="Uses AM/PM format"
              [(ngModel)]="formatValues['twelve']">
            </ui-time-picker>
          </div>
          
          <div class="demo-item">
            <h4>24-Hour Format</h4>
            <ui-time-picker 
              label="24-Hour Time"
              placeholder="Select time"
              timeFormat="24"
              helperText="Military time format"
              [(ngModel)]="formatValues['twentyFour']">
            </ui-time-picker>
          </div>
          
          <div class="demo-item">
            <h4>With Seconds</h4>
            <ui-time-picker 
              label="Time with Seconds"
              placeholder="Select time"
              [showSeconds]="true"
              helperText="Includes seconds picker"
              [(ngModel)]="formatValues['withSeconds']">
            </ui-time-picker>
          </div>
          
          <div class="demo-item">
            <h4>Custom Steps</h4>
            <ui-time-picker 
              label="Custom Minute Steps"
              placeholder="Select time"
              [minuteStep]="15"
              [secondStep]="30"
              [showSeconds]="true"
              helperText="15-minute and 30-second steps"
              [(ngModel)]="formatValues['customSteps']">
            </ui-time-picker>
          </div>
        </div>
      </section>
      
      <!-- States -->
      <section class="demo-section">
        <h3>States</h3>
        <div class="demo-row">
          <div class="demo-item">
            <h4>Default</h4>
            <ui-time-picker 
              label="Default State"
              placeholder="Select time"
              helperText="Choose your preferred time"
              [(ngModel)]="stateValues['default']">
            </ui-time-picker>
          </div>
          
          <div class="demo-item">
            <h4>Error</h4>
            <ui-time-picker 
              label="Error State"
              placeholder="Select time"
              state="error"
              errorMessage="Please select a valid time"
              [(ngModel)]="stateValues['error']">
            </ui-time-picker>
          </div>
          
          <div class="demo-item">
            <h4>Success</h4>
            <ui-time-picker 
              label="Success State"
              placeholder="Select time"
              state="success"
              helperText="Perfect timing!"
              [(ngModel)]="stateValues['success']">
            </ui-time-picker>
          </div>
          
          <div class="demo-item">
            <h4>Warning</h4>
            <ui-time-picker 
              label="Warning State"
              placeholder="Select time"
              state="warning"
              helperText="Time is outside business hours"
              [(ngModel)]="stateValues['warning']">
            </ui-time-picker>
          </div>
        </div>
      </section>
      
      <!-- Special Features -->
      <section class="demo-section">
        <h3>Features</h3>
        <div class="demo-row">
          <div class="demo-item">
            <h4>Required Field</h4>
            <ui-time-picker 
              label="Required Time"
              placeholder="Select time"
              [required]="true"
              helperText="This field is required"
              [(ngModel)]="featureValues['required']">
            </ui-time-picker>
          </div>
          
          <div class="demo-item">
            <h4>Disabled</h4>
            <ui-time-picker 
              label="Disabled Time Picker"
              placeholder="Cannot select"
              [disabled]="true"
              helperText="This field is disabled"
              [(ngModel)]="featureValues['disabled']">
            </ui-time-picker>
          </div>
          
          <div class="demo-item">
            <h4>Not Clearable</h4>
            <ui-time-picker 
              label="No Clear Button"
              placeholder="Select time"
              [clearable]="false"
              helperText="Clear button is hidden"
              [(ngModel)]="featureValues['notClearable']">
            </ui-time-picker>
          </div>
          
          <div class="demo-item">
            <h4>With Presets</h4>
            <ui-time-picker 
              label="Quick Time Selection"
              placeholder="Select time"
              [presetTimes]="presetTimes"
              helperText="Includes common time presets"
              [(ngModel)]="featureValues['presets']">
            </ui-time-picker>
          </div>
        </div>
      </section>
      
      <!-- Interactive Example -->
      <section class="demo-section">
        <h3>Interactive Example</h3>
        <div class="demo-interactive">
          <ui-time-picker 
            label="Meeting Time"
            placeholder="Select meeting time"
            helperText="Choose a time for your meeting"
            [showSeconds]="true"
            [(ngModel)]="interactiveValue"
            (timeChange)="onTimeChange($event)">
          </ui-time-picker>
          
          <div class="demo-output">
            <h4>Selected Time:</h4>
            <p>{{ interactiveValue ? formatTime(interactiveValue) : 'No time selected' }}</p>
            <p><strong>24-hour format:</strong> {{ interactiveValue ? format24Hour(interactiveValue) : 'N/A' }}</p>
            <p><strong>Change count:</strong> {{ changeCount }}</p>
          </div>
        </div>
      </section>
      
      <!-- Form Integration -->
      <section class="demo-section">
        <h3>Form Integration</h3>
        <form (ngSubmit)="onSubmit()" #demoForm="ngForm" class="demo-form">
          <div class="form-row">
            <ui-time-picker 
              label="Start Time"
              name="startTime"
              placeholder="Select start time"
              [(ngModel)]="formValues.startTime"
[required]="true"
              #startTime="ngModel">
            </ui-time-picker>
            
            <ui-time-picker 
              label="End Time"
              name="endTime"
              placeholder="Select end time"
              [(ngModel)]="formValues.endTime"
[required]="true"
              #endTime="ngModel">
            </ui-time-picker>
          </div>
          
          <div class="form-row">
            <ui-time-picker 
              label="Break Time"
              name="breakTime"
              placeholder="Select break time"
              [presetTimes]="breakPresets"
              [(ngModel)]="formValues.breakTime"
              #breakTime="ngModel">
            </ui-time-picker>
            
            <ui-time-picker 
              label="Meeting Duration"
              name="duration"
              placeholder="Select duration"
              [showSeconds]="true"
              [minuteStep]="15"
              [(ngModel)]="formValues.duration"
              #duration="ngModel">
            </ui-time-picker>
          </div>
          
          <div class="form-actions">
            <button type="submit" [disabled]="!demoForm.valid" class="submit-btn">
              Submit Form
            </button>
            <button type="button" (click)="resetForm(demoForm)" class="reset-btn">
              Reset
            </button>
          </div>
          
          <div class="form-status">
            <p><strong>Form Valid:</strong> {{ demoForm.valid }}</p>
            <p><strong>Form Values:</strong></p>
            <pre>{{ formValues | json }}</pre>
          </div>
        </form>
      </section>
    </div>
  `,
  styleUrl: './time-picker-demo.component.scss'
})
export class TimePickerDemoComponent {
  sizes = ['sm', 'md', 'lg'] as const;
  variants = ['outlined', 'filled', 'underlined'] as const;
  
  sampleValues: Record<string, TimeValue | null> = {
    sm: null,
    md: null,
    lg: null
  };
  
  variantValues: Record<string, TimeValue | null> = {
    outlined: null,
    filled: null,
    underlined: null
  };
  
  formatValues: Record<string, TimeValue | null> = {
    twelve: null,
    twentyFour: null,
    withSeconds: null,
    customSteps: null
  };
  
  stateValues: Record<string, TimeValue | null> = {
    default: null,
    error: null,
    success: { hours: 9, minutes: 30, seconds: 0 },
    warning: null
  };
  
  featureValues: Record<string, TimeValue | null> = {
    required: null,
    disabled: { hours: 12, minutes: 0, seconds: 0 },
    notClearable: null,
    presets: null
  };
  
  interactiveValue: TimeValue | null = null;
  changeCount = 0;
  
  formValues = {
    startTime: null as TimeValue | null,
    endTime: null as TimeValue | null,
    breakTime: null as TimeValue | null,
    duration: null as TimeValue | null
  };
  
  // Preset times for demo
  presetTimes = [
    { label: '9:00 AM', value: { hours: 9, minutes: 0, seconds: 0 } },
    { label: '12:00 PM', value: { hours: 12, minutes: 0, seconds: 0 } },
    { label: '1:00 PM', value: { hours: 13, minutes: 0, seconds: 0 } },
    { label: '5:00 PM', value: { hours: 17, minutes: 0, seconds: 0 } }
  ];
  
  breakPresets = [
    { label: '15 min', value: { hours: 0, minutes: 15, seconds: 0 } },
    { label: '30 min', value: { hours: 0, minutes: 30, seconds: 0 } },
    { label: '1 hour', value: { hours: 1, minutes: 0, seconds: 0 } }
  ];
  
  onTimeChange(time: TimeValue | null): void {
    this.changeCount++;
    console.log('Time changed:', time);
  }
  
  onSubmit(): void {
    console.log('Form submitted:', this.formValues);
    alert('Form submitted! Check console for values.');
  }
  
  resetForm(form: any): void {
    form.resetForm();
    this.formValues = {
      startTime: null,
      endTime: null,
      breakTime: null,
      duration: null
    };
  }
  
  formatTime(time: TimeValue): string {
    const hours = time.hours;
    const displayHour = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
    const period = hours >= 12 ? 'PM' : 'AM';
    const minutes = time.minutes.toString().padStart(2, '0');
    
    if (time.seconds !== undefined && time.seconds > 0) {
      const seconds = time.seconds.toString().padStart(2, '0');
      return `${displayHour}:${minutes}:${seconds} ${period}`;
    }
    
    return `${displayHour}:${minutes} ${period}`;
  }
  
  format24Hour(time: TimeValue): string {
    const hours = time.hours.toString().padStart(2, '0');
    const minutes = time.minutes.toString().padStart(2, '0');
    
    if (time.seconds !== undefined && time.seconds > 0) {
      const seconds = time.seconds.toString().padStart(2, '0');
      return `${hours}:${minutes}:${seconds}`;
    }
    
    return `${hours}:${minutes}`;
  }
}