import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TimelineComponent, TimelineItem } from "../../../../../ui-essentials/src/public-api";

@Component({
  selector: 'ui-timeline-demo',
  standalone: true,
  imports: [CommonModule, TimelineComponent],
  template: `
    <div class="demo-container">
      <h2>Timeline Demo</h2>
      
      <!-- Size Variants -->
      <section class="demo-section">
        <h3>Sizes</h3>
        <div class="demo-grid">
          @for (size of sizes; track size) {
            <div class="demo-item">
              <h4>{{ size }} size</h4>
              <ui-timeline 
                [size]="size" 
                [items]="basicItems">
              </ui-timeline>
            </div>
          }
        </div>
      </section>
      
      <!-- Color Variants -->
      <section class="demo-section">
        <h3>Variants</h3>
        <div class="demo-grid">
          @for (variant of variants; track variant) {
            <div class="demo-item">
              <h4>{{ variant }}</h4>
              <ui-timeline 
                [variant]="variant" 
                [items]="basicItems">
              </ui-timeline>
            </div>
          }
        </div>
      </section>
      
      <!-- Orientation -->
      <section class="demo-section">
        <h3>Orientation</h3>
        <div class="demo-column">
          <div class="demo-item">
            <h4>Vertical (Default)</h4>
            <ui-timeline 
              orientation="vertical"
              [items]="basicItems">
            </ui-timeline>
          </div>
          
          <div class="demo-item">
            <h4>Horizontal</h4>
            <ui-timeline 
              orientation="horizontal"
              [items]="shortItems">
            </ui-timeline>
          </div>
        </div>
      </section>
      
      <!-- Status Examples -->
      <section class="demo-section">
        <h3>Status Examples</h3>
        <div class="demo-item">
          <h4>Various Status States</h4>
          <ui-timeline [items]="statusItems"></ui-timeline>
        </div>
      </section>
      
      <!-- Complete Example -->
      <section class="demo-section">
        <h3>Complete Project Timeline</h3>
        <div class="demo-item">
          <ui-timeline 
            size="lg"
            variant="primary"
            [items]="projectItems"
            ariaLabel="Project development timeline">
          </ui-timeline>
        </div>
      </section>
      
      <!-- Interactive Example -->
      <section class="demo-section">
        <h3>Interactive</h3>
        <div class="demo-controls">
          <button (click)="addTimelineItem()" class="demo-button">
            Add Item
          </button>
          <button (click)="toggleOrientation()" class="demo-button">
            Toggle Orientation
          </button>
          <button (click)="cycleSize()" class="demo-button">
            Cycle Size
          </button>
        </div>
        
        <div class="demo-item">
          <h4>Dynamic Timeline ({{ currentOrientation }} / {{ currentSize }})</h4>
          <ui-timeline 
            [size]="currentSize"
            [orientation]="currentOrientation"
            [items]="dynamicItems">
          </ui-timeline>
        </div>
        
        <p>Items: {{ dynamicItems.length }}</p>
      </section>
    </div>
  `,
  styleUrl: './timeline-demo.component.scss'
})
export class TimelineDemoComponent {
  sizes = ['sm', 'md', 'lg'] as const;
  variants = ['primary', 'secondary', 'success'] as const;
  
  currentSize: 'sm' | 'md' | 'lg' = 'md';
  currentOrientation: 'vertical' | 'horizontal' = 'vertical';
  itemCounter = 1;

  basicItems: TimelineItem[] = [
    {
      id: '1',
      title: 'Project Started',
      description: 'Initial setup and planning phase',
      timestamp: '2 hours ago',
      status: 'completed'
    },
    {
      id: '2',
      title: 'Development Phase',
      description: 'Building core features and functionality',
      timestamp: '1 hour ago',
      status: 'active'
    },
    {
      id: '3',
      title: 'Testing',
      description: 'Quality assurance and bug fixes',
      timestamp: 'In 30 minutes',
      status: 'pending'
    }
  ];

  shortItems: TimelineItem[] = [
    {
      id: '1',
      title: 'Plan',
      status: 'completed'
    },
    {
      id: '2',
      title: 'Build',
      status: 'active'
    },
    {
      id: '3',
      title: 'Test',
      status: 'pending'
    },
    {
      id: '4',
      title: 'Deploy',
      status: 'pending'
    }
  ];

  statusItems: TimelineItem[] = [
    {
      id: '1',
      title: 'Completed Task',
      description: 'This task has been successfully finished',
      timestamp: '2 days ago',
      status: 'completed'
    },
    {
      id: '2',
      title: 'Active Task',
      description: 'This task is currently in progress',
      timestamp: 'Now',
      status: 'active'
    },
    {
      id: '3',
      title: 'Failed Task',
      description: 'This task encountered an error',
      timestamp: '1 hour ago',
      status: 'error'
    },
    {
      id: '4',
      title: 'Pending Task',
      description: 'This task is waiting to be started',
      timestamp: 'Tomorrow',
      status: 'pending'
    }
  ];

  projectItems: TimelineItem[] = [
    {
      id: '1',
      title: 'Requirements Gathering',
      description: 'Collected and analyzed project requirements from stakeholders',
      timestamp: 'March 1, 2024',
      status: 'completed'
    },
    {
      id: '2',
      title: 'Design Phase',
      description: 'Created wireframes, mockups, and technical specifications',
      timestamp: 'March 15, 2024',
      status: 'completed'
    },
    {
      id: '3',
      title: 'Development Sprint 1',
      description: 'Implemented core functionality and user authentication',
      timestamp: 'April 1, 2024',
      status: 'completed'
    },
    {
      id: '4',
      title: 'Development Sprint 2',
      description: 'Building dashboard and data visualization features',
      timestamp: 'April 15, 2024',
      status: 'active'
    },
    {
      id: '5',
      title: 'Testing & QA',
      description: 'Comprehensive testing and bug fixing phase',
      timestamp: 'May 1, 2024',
      status: 'pending'
    },
    {
      id: '6',
      title: 'Deployment',
      description: 'Production deployment and go-live activities',
      timestamp: 'May 15, 2024',
      status: 'pending'
    }
  ];

  dynamicItems: TimelineItem[] = [...this.basicItems];

  addTimelineItem(): void {
    const newItem: TimelineItem = {
      id: `dynamic-${this.itemCounter}`,
      title: `Dynamic Item ${this.itemCounter}`,
      description: `This is a dynamically added item #${this.itemCounter}`,
      timestamp: `${this.itemCounter} minutes ago`,
      status: 'active'
    };
    
    this.dynamicItems = [...this.dynamicItems, newItem];
    this.itemCounter++;
  }

  toggleOrientation(): void {
    this.currentOrientation = this.currentOrientation === 'vertical' ? 'horizontal' : 'vertical';
  }

  cycleSize(): void {
    const currentIndex = this.sizes.indexOf(this.currentSize);
    const nextIndex = (currentIndex + 1) % this.sizes.length;
    this.currentSize = this.sizes[nextIndex];
  }
}