import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ProgressCircleComponent } from '../../../../../ui-essentials/src/lib/components/feedback/progress-circle/progress-circle.component';

@Component({
  selector: 'ui-progress-circle-demo',
  standalone: true,
  imports: [CommonModule, FormsModule, ProgressCircleComponent],
  template: `
    <div class="demo-container">
      <h2>Progress Circle 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">
              <ui-progress-circle 
                [size]="size"
                [value]="75"
                [showLabel]="true"
                [labelContent]="'75%'">
              </ui-progress-circle>
              <p>{{ size }}</p>
            </div>
          }
        </div>
      </section>
      
      <!-- Color Variants -->
      <section class="demo-section">
        <h3>Variants</h3>
        <div class="demo-row">
          @for (variant of variants; track variant) {
            <div class="demo-item">
              <ui-progress-circle 
                [variant]="variant"
                [value]="65"
                [showLabel]="true"
                [labelContent]="'65%'">
              </ui-progress-circle>
              <p>{{ variant }}</p>
            </div>
          }
        </div>
      </section>

      <!-- Stroke Width Variants -->
      <section class="demo-section">
        <h3>Stroke Width</h3>
        <div class="demo-row">
          @for (stroke of strokes; track stroke) {
            <div class="demo-item">
              <ui-progress-circle 
                [stroke]="stroke"
                [value]="80"
                [showLabel]="true"
                [labelContent]="'80%'">
              </ui-progress-circle>
              <p>{{ stroke }}</p>
            </div>
          }
        </div>
      </section>
      
      <!-- States -->
      <section class="demo-section">
        <h3>States</h3>
        <div class="demo-row">
          <div class="demo-item">
            <ui-progress-circle 
              [value]="45"
              [showLabel]="true"
              [labelContent]="'45%'">
            </ui-progress-circle>
            <p>Default</p>
          </div>
          
          <div class="demo-item">
            <ui-progress-circle 
              [disabled]="true"
              [value]="45"
              [showLabel]="true"
              [labelContent]="'45%'">
            </ui-progress-circle>
            <p>Disabled</p>
          </div>
          
          <div class="demo-item">
            <ui-progress-circle 
              [indeterminate]="true"
              variant="primary">
            </ui-progress-circle>
            <p>Indeterminate</p>
          </div>
          
          <div class="demo-item">
            <ui-progress-circle 
              [value]="100"
              variant="success"
              [showLabel]="true"
              [labelContent]="'✓'">
            </ui-progress-circle>
            <p>Complete</p>
          </div>
        </div>
      </section>

      <!-- Label Variations -->
      <section class="demo-section">
        <h3>Label Variations</h3>
        <div class="demo-row">
          <div class="demo-item">
            <ui-progress-circle 
              [value]="75"
              size="lg">
            </ui-progress-circle>
            <p>No Label</p>
          </div>
          
          <div class="demo-item">
            <ui-progress-circle 
              [value]="75"
              size="lg"
              [showLabel]="true"
              [labelContent]="'75%'">
            </ui-progress-circle>
            <p>Percentage</p>
          </div>
          
          <div class="demo-item">
            <ui-progress-circle 
              [value]="45"
              [max]="60"
              size="lg"
              [showLabel]="true"
              [labelContent]="'45/60'">
            </ui-progress-circle>
            <p>Fraction</p>
          </div>
          
          <div class="demo-item">
            <ui-progress-circle 
              [value]="100"
              size="lg"
              variant="success"
              [showLabel]="true">
              ✓
            </ui-progress-circle>
            <p>Custom Content</p>
          </div>
        </div>
      </section>
      
      <!-- Interactive Example -->
      <section class="demo-section">
        <h3>Interactive</h3>
        <div class="demo-controls">
          <div class="control-group">
            <label>Value: {{ interactiveValue() }}</label>
            <input 
              type="range" 
              min="0" 
              max="100" 
              [value]="interactiveValue()"
              (input)="updateValue($event)" />
          </div>
          
          <div class="control-group">
            <label>Size:</label>
            <select [value]="interactiveSize()" (change)="updateSize($event)">
              @for (size of sizes; track size) {
                <option [value]="size">{{ size }}</option>
              }
            </select>
          </div>
          
          <div class="control-group">
            <label>Variant:</label>
            <select [value]="interactiveVariant()" (change)="updateVariant($event)">
              @for (variant of variants; track variant) {
                <option [value]="variant">{{ variant }}</option>
              }
            </select>
          </div>
          
          <div class="control-group">
            <label>
              <input 
                type="checkbox" 
                [checked]="interactiveShowLabel()"
                (change)="toggleLabel($event)" />
              Show Label
            </label>
          </div>
          
          <div class="control-group">
            <label>
              <input 
                type="checkbox" 
                [checked]="interactiveIndeterminate()"
                (change)="toggleIndeterminate($event)" />
              Indeterminate
            </label>
          </div>
        </div>
        
        <div class="demo-interactive-result">
          <ui-progress-circle 
            [value]="interactiveValue()"
            [size]="interactiveSize()"
            [variant]="interactiveVariant()"
            [showLabel]="interactiveShowLabel()"
            [labelContent]="interactiveValue() + '%'"
            [indeterminate]="interactiveIndeterminate()">
          </ui-progress-circle>
        </div>
      </section>

      <!-- Animation Demo -->
      <section class="demo-section">
        <h3>Animation Demo</h3>
        <div class="demo-controls">
          <button (click)="startProgress()" [disabled]="progressRunning()">
            Start Progress Animation
          </button>
          <button (click)="resetProgress()">
            Reset
          </button>
        </div>
        <div class="demo-row">
          <div class="demo-item">
            <ui-progress-circle 
              [value]="animatedValue()"
              size="xl"
              variant="primary"
              [showLabel]="true"
              [labelContent]="animatedValue() + '%'">
            </ui-progress-circle>
            <p>Animated Progress</p>
          </div>
        </div>
      </section>
    </div>
  `,
  styleUrl: './progress-circle-demo.component.scss'
})
export class ProgressCircleDemoComponent {
  sizes = ['sm', 'md', 'lg', 'xl'] as const;
  variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'] as const;
  strokes = ['thin', 'default', 'thick', 'extra-thick'] as const;

  // Interactive demo state
  interactiveValue = signal(75);
  interactiveSize = signal<'sm' | 'md' | 'lg' | 'xl'>('lg');
  interactiveVariant = signal<'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'>('primary');
  interactiveShowLabel = signal(true);
  interactiveIndeterminate = signal(false);

  // Animation demo state
  animatedValue = signal(0);
  progressRunning = signal(false);
  private animationInterval: any;

  updateValue(event: Event): void {
    const target = event.target as HTMLInputElement;
    this.interactiveValue.set(parseInt(target.value, 10));
  }

  updateSize(event: Event): void {
    const target = event.target as HTMLSelectElement;
    this.interactiveSize.set(target.value as any);
  }

  updateVariant(event: Event): void {
    const target = event.target as HTMLSelectElement;
    this.interactiveVariant.set(target.value as any);
  }

  toggleLabel(event: Event): void {
    const target = event.target as HTMLInputElement;
    this.interactiveShowLabel.set(target.checked);
  }

  toggleIndeterminate(event: Event): void {
    const target = event.target as HTMLInputElement;
    this.interactiveIndeterminate.set(target.checked);
  }

  startProgress(): void {
    if (this.progressRunning()) return;
    
    this.progressRunning.set(true);
    this.animatedValue.set(0);
    
    this.animationInterval = setInterval(() => {
      const currentValue = this.animatedValue();
      if (currentValue >= 100) {
        this.stopProgress();
        return;
      }
      this.animatedValue.set(currentValue + 2);
    }, 100);
  }

  resetProgress(): void {
    this.stopProgress();
    this.animatedValue.set(0);
  }

  private stopProgress(): void {
    if (this.animationInterval) {
      clearInterval(this.animationInterval);
      this.animationInterval = null;
    }
    this.progressRunning.set(false);
  }

  ngOnDestroy(): void {
    this.stopProgress();
  }
}