import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faPlay, faUndo } from '@fortawesome/free-solid-svg-icons';
import { StepperComponent, StepperStep } from '../../../../../ui-essentials/src/lib/components/navigation/stepper';

@Component({
  selector: 'ui-stepper-demo',
  standalone: true,
  imports: [CommonModule, StepperComponent, FontAwesomeModule],
  template: `
    <div class="demo-container">
      <h2>Stepper Demo</h2>
      
      <!-- Orientation Variants -->
      <section class="demo-section">
        <h3>Orientation</h3>
        <div class="demo-subsection">
          <h4>Horizontal Stepper</h4>
          <ui-stepper 
            [steps]="horizontalSteps"
            orientation="horizontal"
            [clickable]="true"
            (stepClick)="onStepClick('horizontal', $event)"
            (stepChange)="onStepChange('horizontal', $event)">
          </ui-stepper>
        </div>
        
        <div class="demo-subsection">
          <h4>Vertical Stepper</h4>
          <div class="vertical-stepper-container">
            <ui-stepper 
              [steps]="verticalSteps"
              orientation="vertical"
              [clickable]="true"
              (stepClick)="onStepClick('vertical', $event)"
              (stepChange)="onStepChange('vertical', $event)">
            </ui-stepper>
          </div>
        </div>
      </section>

      <!-- 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 }} Size</h4>
              <ui-stepper 
                [steps]="sizeSteps"
                [size]="size"
                orientation="horizontal">
              </ui-stepper>
            </div>
          }
        </div>
      </section>

      <!-- Style Variants -->
      <section class="demo-section">
        <h3>Variants</h3>
        <div class="demo-row">
          <div class="demo-item">
            <h4>Default</h4>
            <ui-stepper 
              [steps]="variantSteps"
              variant="default">
            </ui-stepper>
          </div>
          <div class="demo-item">
            <h4>Outlined</h4>
            <ui-stepper 
              [steps]="variantSteps"
              variant="outlined">
            </ui-stepper>
          </div>
        </div>
      </section>

      <!-- Dense Variant -->
      <section class="demo-section">
        <h3>Dense Layout</h3>
        <div class="demo-row">
          <div class="demo-item">
            <h4>Normal</h4>
            <ui-stepper 
              [steps]="denseSteps"
              [dense]="false">
            </ui-stepper>
          </div>
          <div class="demo-item">
            <h4>Dense</h4>
            <ui-stepper 
              [steps]="denseSteps"
              [dense]="true">
            </ui-stepper>
          </div>
        </div>
      </section>

      <!-- Step States -->
      <section class="demo-section">
        <h3>Step States</h3>
        <div class="demo-subsection">
          <h4>All States</h4>
          <ui-stepper 
            [steps]="stateSteps"
            orientation="horizontal">
          </ui-stepper>
        </div>
      </section>

      <!-- Linear vs Non-Linear -->
      <section class="demo-section">
        <h3>Navigation Modes</h3>
        <div class="demo-row">
          <div class="demo-item">
            <h4>Linear (Default)</h4>
            <ui-stepper 
              [steps]="linearSteps"
              [clickable]="true"
              [linear]="true"
              (stepClick)="onStepClick('linear', $event)">
            </ui-stepper>
            <div class="demo-controls">
              <button (click)="nextLinearStep()" class="demo-button">
                <fa-icon [icon]="playIcon"></fa-icon>
                Next Step
              </button>
              <button (click)="resetLinearStepper()" class="demo-button">
                <fa-icon [icon]="resetIcon"></fa-icon>
                Reset
              </button>
            </div>
          </div>
          
          <div class="demo-item">
            <h4>Non-Linear</h4>
            <ui-stepper 
              [steps]="nonLinearSteps"
              [clickable]="true"
              [linear]="false"
              (stepClick)="onStepClick('non-linear', $event)">
            </ui-stepper>
          </div>
        </div>
      </section>

      <!-- Interactive Example -->
      <section class="demo-section">
        <h3>Interactive Example</h3>
        <div class="interactive-example">
          <ui-stepper 
            #interactiveStepper
            [steps]="interactiveSteps"
            [clickable]="true"
            [linear]="false"
            orientation="horizontal"
            (stepClick)="onInteractiveStepClick($event)"
            (stepChange)="onInteractiveStepChange($event)">
          </ui-stepper>
          
          <div class="demo-controls">
            <button (click)="markCurrentCompleted()" class="demo-button">
              Mark Current Completed
            </button>
            <button (click)="markCurrentError()" class="demo-button">
              Mark Current Error
            </button>
            <button (click)="nextInteractiveStep()" class="demo-button">
              <fa-icon [icon]="playIcon"></fa-icon>
              Next
            </button>
            <button (click)="resetInteractiveStepper()" class="demo-button">
              <fa-icon [icon]="resetIcon"></fa-icon>
              Reset
            </button>
          </div>
          
          <div class="step-info">
            <p><strong>Current Step:</strong> {{ getCurrentStepInfo() }}</p>
            <p><strong>Completed Steps:</strong> {{ getCompletedStepsCount() }}</p>
            <p><strong>Last Action:</strong> {{ lastAction }}</p>
          </div>
        </div>
      </section>
    </div>
  `,
  styleUrl: './stepper-demo.component.scss'
})
export class StepperDemoComponent {
  sizes = ['sm', 'md', 'lg'] as const;
  playIcon = faPlay;
  resetIcon = faUndo;
  
  lastAction = 'None';

  // Horizontal stepper data
  horizontalSteps: StepperStep[] = [
    { id: 'h1', title: 'Account Info', description: 'Enter your personal details', current: true },
    { id: 'h2', title: 'Verification', description: 'Verify your email address' },
    { id: 'h3', title: 'Preferences', description: 'Set up your preferences' },
    { id: 'h4', title: 'Complete', description: 'Account setup finished' }
  ];

  // Vertical stepper data
  verticalSteps: StepperStep[] = [
    { id: 'v1', title: 'Project Setup', description: 'Initialize your new project', completed: true },
    { id: 'v2', title: 'Configuration', description: 'Configure project settings', current: true },
    { id: 'v3', title: 'Dependencies', description: 'Install required dependencies' },
    { id: 'v4', title: 'Testing', description: 'Run initial tests' },
    { id: 'v5', title: 'Deployment', description: 'Deploy to production' }
  ];

  // Size demonstration
  sizeSteps: StepperStep[] = [
    { id: 's1', title: 'Step 1', completed: true },
    { id: 's2', title: 'Step 2', current: true },
    { id: 's3', title: 'Step 3' }
  ];

  // Variant demonstration
  variantSteps: StepperStep[] = [
    { id: 'var1', title: 'Design', completed: true },
    { id: 'var2', title: 'Development', current: true },
    { id: 'var3', title: 'Testing' },
    { id: 'var4', title: 'Launch' }
  ];

  // Dense demonstration
  denseSteps: StepperStep[] = [
    { id: 'd1', title: 'Upload', completed: true },
    { id: 'd2', title: 'Process', current: true },
    { id: 'd3', title: 'Review' },
    { id: 'd4', title: 'Publish' }
  ];

  // State demonstration
  stateSteps: StepperStep[] = [
    { id: 'st1', title: 'Completed', description: 'This step is done', completed: true },
    { id: 'st2', title: 'Current', description: 'Currently active step', current: true },
    { id: 'st3', title: 'Error', description: 'This step has an error', error: true },
    { id: 'st4', title: 'Disabled', description: 'This step is disabled', disabled: true },
    { id: 'st5', title: 'Pending', description: 'This step is pending' }
  ];

  // Linear stepper
  linearSteps: StepperStep[] = [
    { id: 'l1', title: 'Start', description: 'Begin the process', current: true },
    { id: 'l2', title: 'Middle', description: 'Continue the process' },
    { id: 'l3', title: 'End', description: 'Finish the process' }
  ];

  // Non-linear stepper
  nonLinearSteps: StepperStep[] = [
    { id: 'nl1', title: 'Overview', description: 'Click any step', completed: true },
    { id: 'nl2', title: 'Details', description: 'Add more information', current: true },
    { id: 'nl3', title: 'Review', description: 'Check your work' }
  ];

  // Interactive example
  interactiveSteps: StepperStep[] = [
    { id: 'i1', title: 'Planning', description: 'Plan your approach', current: true },
    { id: 'i2', title: 'Implementation', description: 'Build the solution' },
    { id: 'i3', title: 'Testing', description: 'Test thoroughly' },
    { id: 'i4', title: 'Deployment', description: 'Go live' }
  ];

  onStepClick(type: string, event: {step: StepperStep, index: number}): void {
    this.lastAction = `${type}: Clicked step "${event.step.title}" (index ${event.index})`;
    console.log(`${type} stepper - Step clicked:`, event);
  }

  onStepChange(type: string, event: {step: StepperStep, index: number}): void {
    this.lastAction = `${type}: Changed to step "${event.step.title}" (index ${event.index})`;
    console.log(`${type} stepper - Step changed:`, event);
  }

  nextLinearStep(): void {
    const currentIndex = this.linearSteps.findIndex(step => step.current);
    if (currentIndex >= 0 && currentIndex < this.linearSteps.length - 1) {
      // Mark current as completed
      this.linearSteps[currentIndex].completed = true;
      this.linearSteps[currentIndex].current = false;
      
      // Move to next
      this.linearSteps[currentIndex + 1].current = true;
      
      this.lastAction = `Linear: Advanced to step ${currentIndex + 2}`;
    }
  }

  resetLinearStepper(): void {
    this.linearSteps.forEach((step, index) => {
      step.current = index === 0;
      step.completed = false;
      step.error = false;
    });
    this.lastAction = 'Linear: Reset to beginning';
  }

  onInteractiveStepClick(event: {step: StepperStep, index: number}): void {
    this.lastAction = `Interactive: Clicked "${event.step.title}"`;
  }

  onInteractiveStepChange(event: {step: StepperStep, index: number}): void {
    this.lastAction = `Interactive: Changed to "${event.step.title}"`;
  }

  markCurrentCompleted(): void {
    const currentStep = this.interactiveSteps.find(step => step.current);
    if (currentStep) {
      currentStep.completed = true;
      currentStep.error = false;
      this.lastAction = `Interactive: Marked "${currentStep.title}" as completed`;
    }
  }

  markCurrentError(): void {
    const currentStep = this.interactiveSteps.find(step => step.current);
    if (currentStep) {
      currentStep.error = true;
      currentStep.completed = false;
      this.lastAction = `Interactive: Marked "${currentStep.title}" as error`;
    }
  }

  nextInteractiveStep(): void {
    const currentIndex = this.interactiveSteps.findIndex(step => step.current);
    if (currentIndex >= 0 && currentIndex < this.interactiveSteps.length - 1) {
      // Mark current as completed if not in error
      if (!this.interactiveSteps[currentIndex].error) {
        this.interactiveSteps[currentIndex].completed = true;
      }
      this.interactiveSteps[currentIndex].current = false;
      
      // Move to next
      this.interactiveSteps[currentIndex + 1].current = true;
      
      this.lastAction = `Interactive: Advanced to step ${currentIndex + 2}`;
    }
  }

  resetInteractiveStepper(): void {
    this.interactiveSteps.forEach((step, index) => {
      step.current = index === 0;
      step.completed = false;
      step.error = false;
    });
    this.lastAction = 'Interactive: Reset to beginning';
  }

  getCurrentStepInfo(): string {
    const currentStep = this.interactiveSteps.find(step => step.current);
    return currentStep ? `${currentStep.title} (${this.interactiveSteps.indexOf(currentStep) + 1} of ${this.interactiveSteps.length})` : 'None';
  }

  getCompletedStepsCount(): number {
    return this.interactiveSteps.filter(step => step.completed).length;
  }
}