import { Component, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AccordionComponent, AccordionItemComponent, AccordionItem, AccordionExpandEvent } from '../../../../../ui-essentials/src/public-api';

@Component({
  selector: 'ui-accordion-demo',
  standalone: true,
  imports: [CommonModule, AccordionComponent, AccordionItemComponent],
  template: `
    <div class="demo-container">
      <h2>Accordion Demo</h2>
      
      <!-- Basic Usage -->
      <section class="demo-section">
        <h3>Basic Usage</h3>
        <div class="demo-row">
          <div class="demo-column">
            <div class="demo-item">
              <h5>Single Expand (Default)</h5>
              <div class="demo-accordion-container">
                <ui-accordion>
                  <ui-accordion-item id="basic-1" title="Getting Started">
                    <div class="sample-content">
                      <p>Welcome to our comprehensive guide on getting started with our platform.</p>
                      <p>This section covers the essential steps you need to know to begin your journey.</p>
                    </div>
                  </ui-accordion-item>
                  <ui-accordion-item id="basic-2" title="Advanced Features">
                    <div class="sample-content">
                      <p>Explore our advanced features designed for power users.</p>
                      <ul>
                        <li>Advanced analytics and reporting</li>
                        <li>Custom integrations and APIs</li>
                        <li>Enterprise-grade security features</li>
                      </ul>
                    </div>
                  </ui-accordion-item>
                  <ui-accordion-item id="basic-3" title="Troubleshooting">
                    <div class="sample-content">
                      <p>Common issues and their solutions:</p>
                      <ul>
                        <li>Login and authentication problems</li>
                        <li>Performance optimization tips</li>
                        <li>Data import and export issues</li>
                      </ul>
                    </div>
                  </ui-accordion-item>
                </ui-accordion>
              </div>
            </div>
          </div>
          
          <div class="demo-column">
            <div class="demo-item">
              <h5>Multiple Expand</h5>
              <div class="demo-accordion-container">
                <ui-accordion [multiple]="true">
                  <ui-accordion-item id="multi-1" title="Account Settings">
                    <div class="sample-content">
                      <p>Manage your account preferences and personal information.</p>
                      <p>Update your profile, change password, and configure notification settings.</p>
                    </div>
                  </ui-accordion-item>
                  <ui-accordion-item id="multi-2" title="Privacy Controls">
                    <div class="sample-content">
                      <p>Control how your data is used and shared:</p>
                      <ul>
                        <li>Data sharing preferences</li>
                        <li>Visibility settings</li>
                        <li>Third-party integrations</li>
                      </ul>
                    </div>
                  </ui-accordion-item>
                  <ui-accordion-item id="multi-3" title="Notifications">
                    <div class="sample-content">
                      <p>Customize your notification preferences to stay informed about what matters most to you.</p>
                    </div>
                  </ui-accordion-item>
                </ui-accordion>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Size Variants -->
      <section class="demo-section">
        <h3>Size Variants</h3>
        <div class="demo-row">
          @for (size of sizes; track size) {
            <div class="demo-column">
              <div class="demo-item">
                <h5>Size: {{ size | titlecase }}</h5>
                <div class="demo-accordion-container">
                  <ui-accordion [size]="size">
                    <ui-accordion-item [id]="'size-' + size + '-1'" title="Sample Header">
                      <div class="sample-content">
                        <p>This is {{ size }} sized accordion content. The padding and font sizes adjust based on the size variant.</p>
                      </div>
                    </ui-accordion-item>
                    <ui-accordion-item [id]="'size-' + size + '-2'" title="Another Section">
                      <div class="sample-content">
                        <p>More content to demonstrate the {{ size }} size variant styling.</p>
                      </div>
                    </ui-accordion-item>
                  </ui-accordion>
                </div>
              </div>
            </div>
          }
        </div>
      </section>

      <!-- Variants -->
      <section class="demo-section">
        <h3>Style Variants</h3>
        <div class="demo-row">
          @for (variant of variants; track variant) {
            <div class="demo-column">
              <div class="demo-item">
                <h5>{{ variant | titlecase }}</h5>
                <div class="demo-accordion-container">
                  <ui-accordion [variant]="variant">
                    <ui-accordion-item [id]="'variant-' + variant + '-1'" title="Design System">
                      <div class="sample-content">
                        <p>This {{ variant }} variant shows different visual styling approaches for the accordion component.</p>
                      </div>
                    </ui-accordion-item>
                    <ui-accordion-item [id]="'variant-' + variant + '-2'" title="Component Library">
                      <div class="sample-content">
                        <p>Each variant provides a different visual weight and emphasis level.</p>
                      </div>
                    </ui-accordion-item>
                  </ui-accordion>
                </div>
              </div>
            </div>
          }
        </div>
      </section>

      <!-- Programmatic API -->
      <section class="demo-section">
        <h3>Programmatic Control</h3>
        <div class="demo-item">
          <div class="demo-controls">
            <button (click)="expandItem('api-1')" class="button--primary">Expand Item 1</button>
            <button (click)="expandItem('api-2')" class="button--primary">Expand Item 2</button>
            <button (click)="expandItem('api-3')" class="button--primary">Expand Item 3</button>
            <button (click)="expandAll()">Expand All</button>
            <button (click)="collapseAll()">Collapse All</button>
          </div>
          
          <div class="demo-accordion-container">
            <ui-accordion 
              #programmaticAccordion
              [multiple]="true"
              [items]="programmaticItems"
              (itemToggle)="handleItemToggle($event)"
              (expandedItemsChange)="handleExpandedItemsChange($event)">
            </ui-accordion>
          </div>
          
          <div class="code-example">
Current expanded items: {{ expandedItemIds | json }}
Last toggled: {{ lastToggledItem | json }}
          </div>
        </div>
      </section>

      <!-- States -->
      <section class="demo-section">
        <h3>States</h3>
        <div class="demo-row">
          <div class="demo-column">
            <div class="demo-item">
              <h5>Disabled Accordion</h5>
              <div class="demo-accordion-container">
                <ui-accordion [disabled]="true">
                  <ui-accordion-item id="disabled-1" title="Disabled Section">
                    <div class="sample-content">
                      <p>This entire accordion is disabled and cannot be interacted with.</p>
                    </div>
                  </ui-accordion-item>
                  <ui-accordion-item id="disabled-2" title="Another Disabled Section">
                    <div class="sample-content">
                      <p>All items in this accordion are disabled.</p>
                    </div>
                  </ui-accordion-item>
                </ui-accordion>
              </div>
            </div>
          </div>
          
          <div class="demo-column">
            <div class="demo-item">
              <h5>Individual Disabled Items</h5>
              <div class="demo-accordion-container">
                <ui-accordion>
                  <ui-accordion-item id="mixed-1" title="Active Section">
                    <div class="sample-content">
                      <p>This section is active and can be expanded/collapsed normally.</p>
                    </div>
                  </ui-accordion-item>
                  <ui-accordion-item id="mixed-2" title="Disabled Section" [disabled]="true">
                    <div class="sample-content">
                      <p>This individual section is disabled.</p>
                    </div>
                  </ui-accordion-item>
                  <ui-accordion-item id="mixed-3" title="Another Active Section">
                    <div class="sample-content">
                      <p>This section is also active and functional.</p>
                    </div>
                  </ui-accordion-item>
                </ui-accordion>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Custom Content -->
      <section class="demo-section">
        <h3>Custom Content</h3>
        <div class="demo-item">
          <div class="demo-accordion-container">
            <ui-accordion>
              <ui-accordion-item id="custom-1" title="">
                <div slot="header" class="icon-demo">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                    <path d="M8 1l2.5 5h5.5l-4.5 3.5 1.5 5.5L8 12l-4.5 3.5L5 10 0.5 6h5.5L8 1z"/>
                  </svg>
                  Custom Header with Icon
                </div>
                <div class="sample-content">
                  <p>This accordion item uses custom header content with an icon.</p>
                  <p>The header slot allows for complete customization of the trigger area.</p>
                </div>
              </ui-accordion-item>
              
              <ui-accordion-item id="custom-2" title="">
                <div slot="header">
                  <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                    <strong>Rich Header Content</strong>
                    <span style="background: #e3f2fd; color: #1976d2; padding: 2px 8px; border-radius: 12px; font-size: 12px;">
                      New
                    </span>
                  </div>
                </div>
                <div class="sample-content">
                  <p>Complex header layouts are possible with custom slot content.</p>
                  <p>This example shows a header with a badge indicator.</p>
                </div>
              </ui-accordion-item>
            </ui-accordion>
          </div>
        </div>
      </section>

      <!-- Interactive Example -->
      <section class="demo-section">
        <h3>Interactive Example</h3>
        <div class="demo-item">
          <h4>Event Handling</h4>
          <div class="demo-accordion-container">
            <ui-accordion (itemToggle)="handleInteractiveToggle($event)">
              <ui-accordion-item id="interactive-1" title="Click to Track Events">
                <div class="sample-content">
                  <p>This accordion tracks all toggle events. Check the event log below.</p>
                </div>
              </ui-accordion-item>
              <ui-accordion-item id="interactive-2" title="Another Trackable Item">
                <div class="sample-content">
                  <p>Each interaction will be logged with detailed event information.</p>
                </div>
              </ui-accordion-item>
            </ui-accordion>
          </div>
          
          <div class="code-example">
Event Log ({{ eventLog.length }} events):
{{ eventLog.length > 0 ? (eventLog | json) : 'No events yet...' }}
          </div>
        </div>
      </section>
    </div>
  `,
  styleUrl: './accordion-demo.component.scss'
})
export class AccordionDemoComponent {
  @ViewChild('programmaticAccordion') programmaticAccordion!: AccordionComponent;

  sizes = ['sm', 'md', 'lg'] as const;
  variants = ['elevated', 'outlined', 'filled'] as const;
  
  programmaticItems: AccordionItem[] = [
    {
      id: 'api-1',
      title: 'API Documentation',
      content: 'Complete API reference with examples and best practices for integration.',
      expanded: false
    },
    {
      id: 'api-2',
      title: 'SDK Downloads',
      content: 'Download our SDKs for various programming languages and frameworks.',
      expanded: false
    },
    {
      id: 'api-3',
      title: 'Code Examples',
      content: 'Real-world code examples and implementation patterns.',
      expanded: false
    }
  ];

  expandedItemIds: string[] = [];
  lastToggledItem: AccordionExpandEvent | null = null;
  eventLog: AccordionExpandEvent[] = [];

  handleItemToggle(event: AccordionExpandEvent): void {
    this.lastToggledItem = event;
    console.log('Accordion item toggled:', event);
  }

  handleExpandedItemsChange(expandedIds: string[]): void {
    this.expandedItemIds = expandedIds;
    console.log('Expanded items changed:', expandedIds);
  }

  handleInteractiveToggle(event: AccordionExpandEvent): void {
    this.eventLog.unshift({
      ...event,
      // Add timestamp for demonstration
      timestamp: new Date().toLocaleTimeString()
    } as any);
    
    // Keep only last 5 events
    if (this.eventLog.length > 5) {
      this.eventLog = this.eventLog.slice(0, 5);
    }
  }

  expandItem(itemId: string): void {
    this.programmaticAccordion?.expandItem(itemId);
  }

  expandAll(): void {
    this.programmaticAccordion?.expandAll();
  }

  collapseAll(): void {
    this.programmaticAccordion?.collapseAll();
  }
}