import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TabsContainerComponent, Tab } from '../../../../../ui-essentials/src/lib/components/layout/tabs-container/tabs-container.component';

@Component({
  selector: 'ui-tabs-container-demo',
  standalone: true,
  imports: [CommonModule, FormsModule, TabsContainerComponent],
  template: `
    <div class="demo-container">
      <h2>Tabs Container 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 | titlecase }} Size</h4>
              <ui-tabs-container 
                [tabs]="basicTabs()"
                [size]="size"
                (tabSelected)="handleTabSelect('size-' + size, $event)">
                <div>Content for {{ size }} tabs. Use tab selection to see different content.</div>
              </ui-tabs-container>
            </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 }} Variant</h4>
              <ui-tabs-container 
                [tabs]="basicTabs()"
                [variant]="variant"
                (tabSelected)="handleTabSelect('variant-' + variant, $event)">
                <div>{{ variant | titlecase }} variant tabs with different styling approaches.</div>
              </ui-tabs-container>
            </div>
          }
        </div>
      </section>
      
      <!-- Position Variants -->
      <section class="demo-section">
        <h3>Tab Positions</h3>
        <div class="demo-row">
          @for (position of positions; track position) {
            <div class="demo-item" [style.height]="position === 'left' || position === 'right' ? '300px' : 'auto'">
              <h4>{{ position | titlecase }} Position</h4>
              <ui-tabs-container 
                [tabs]="basicTabs()"
                [position]="position"
                (tabSelected)="handleTabSelect('position-' + position, $event)">
                <div>Tabs positioned {{ position }} with appropriate navigation layout.</div>
              </ui-tabs-container>
            </div>
          }
        </div>
      </section>
      
      <!-- Closeable Tabs -->
      <section class="demo-section">
        <h3>Closeable Tabs</h3>
        <div class="demo-item">
          <ui-tabs-container 
            [tabs]="closeableTabs()"
            (tabSelected)="handleTabSelect('closeable', $event)"
            (tabClosed)="handleTabClose($event)">
            <div>Closeable tabs demo - try closing tabs with the × button. Some tabs cannot be closed.</div>
          </ui-tabs-container>
          <p class="demo-info">Close tabs by clicking the × button. Some tabs cannot be closed.</p>
        </div>
      </section>
      
      <!-- Tabs with Icons -->
      <section class="demo-section">
        <h3>Tabs with Icons</h3>
        <div class="demo-item">
          <ui-tabs-container 
            [tabs]="iconTabs()"
            (tabSelected)="handleTabSelect('icons', $event)">
            <div>Tabs with icons provide visual context and better user experience.</div>
          </ui-tabs-container>
        </div>
      </section>
      
      <!-- Scrollable Tabs -->
      <section class="demo-section">
        <h3>Scrollable Tabs</h3>
        <div class="demo-item">
          <ui-tabs-container 
            [tabs]="manyTabs()"
            [scrollable]="true"
            (tabSelected)="handleTabSelect('scrollable', $event)">
            <div>Scrollable tabs for when you have many tabs that exceed container width.</div>
          </ui-tabs-container>
          <p class="demo-info">Use scroll controls when tabs overflow the container width.</p>
        </div>
      </section>
      
      <!-- Reorderable Tabs -->
      <section class="demo-section">
        <h3>Reorderable Tabs</h3>
        <div class="demo-item">
          <ui-tabs-container 
            [tabs]="reorderableTabs()"
            [reorderable]="true"
            (tabSelected)="handleTabSelect('reorderable', $event)"
            (tabsReordered)="handleTabsReorder($event)">
            <div>Drag and drop reorderable tabs - try dragging tabs to rearrange them.</div>
          </ui-tabs-container>
          <p class="demo-info">Drag tabs to reorder them. Order changes: {{ reorderCount() }}</p>
        </div>
      </section>
      
      <!-- Lazy Loading -->
      <section class="demo-section">
        <h3>Lazy Loading</h3>
        <div class="demo-item">
          <ui-tabs-container 
            [tabs]="lazyTabs()"
            [lazyLoad]="true"
            (tabSelected)="handleTabSelect('lazy', $event)">
            <div>Lazy loading tabs optimize performance by loading content only when needed.</div>
          </ui-tabs-container>
          <p class="demo-info">Lazy tabs only load content when first selected.</p>
        </div>
      </section>
      
      <!-- Disabled Tabs -->
      <section class="demo-section">
        <h3>Disabled States</h3>
        <div class="demo-item">
          <ui-tabs-container 
            [tabs]="disabledTabs()"
            (tabSelected)="handleTabSelect('disabled', $event)">
            <div>Disabled tabs prevent user interaction while maintaining visual hierarchy.</div>
          </ui-tabs-container>
          <p class="demo-info">Disabled tabs cannot be selected or interacted with.</p>
        </div>
      </section>
      
      <!-- Interactive Example -->
      <section class="demo-section">
        <h3>Interactive Example</h3>
        <div class="demo-item">
          <div class="demo-controls">
            <label>
              Size:
              <select [(ngModel)]="interactiveSize" (change)="updateInteractiveConfig()">
                @for (size of sizes; track size) {
                  <option [value]="size">{{ size | titlecase }}</option>
                }
              </select>
            </label>
            <label>
              Variant:
              <select [(ngModel)]="interactiveVariant" (change)="updateInteractiveConfig()">
                @for (variant of variants; track variant) {
                  <option [value]="variant">{{ variant | titlecase }}</option>
                }
              </select>
            </label>
            <label>
              Position:
              <select [(ngModel)]="interactivePosition" (change)="updateInteractiveConfig()">
                @for (position of positions; track position) {
                  <option [value]="position">{{ position | titlecase }}</option>
                }
              </select>
            </label>
            <label>
              <input type="checkbox" [(ngModel)]="interactiveScrollable" (change)="updateInteractiveConfig()">
              Scrollable
            </label>
            <label>
              <input type="checkbox" [(ngModel)]="interactiveReorderable" (change)="updateInteractiveConfig()">
              Reorderable
            </label>
          </div>
          
          <ui-tabs-container 
            [tabs]="interactiveTabs()"
            [size]="interactiveSize"
            [variant]="interactiveVariant"
            [position]="interactivePosition"
            [scrollable]="interactiveScrollable"
            [reorderable]="interactiveReorderable"
            (tabSelected)="handleTabSelect('interactive', $event)"
            (tabClosed)="handleInteractiveTabClose($event)"
            (tabsReordered)="handleInteractiveTabsReorder($event)">
            <div>Interactive demo with configurable options - use controls above to customize behavior.</div>
          </ui-tabs-container>
          
          <div class="demo-status">
            <p><strong>Current tab:</strong> {{ activeTab() || 'None' }}</p>
            <p><strong>Tab selections:</strong> {{ tabSelectCount() }}</p>
          </div>
        </div>
      </section>
    </div>
  `,
  styleUrl: './tabs-container-demo.component.scss'
})
export class TabsContainerDemoComponent {
  sizes = ['sm', 'md', 'lg'] as const;
  variants = ['default', 'filled', 'pills', 'underlined'] as const;
  positions = ['top', 'bottom', 'left', 'right'] as const;
  
  // Demo state
  activeTab = signal<string>('');
  tabSelectCount = signal(0);
  reorderCount = signal(0);
  
  // Interactive demo controls
  interactiveSize: 'sm' | 'md' | 'lg' = 'md';
  interactiveVariant: 'default' | 'filled' | 'pills' | 'underlined' = 'default';
  interactivePosition: 'top' | 'bottom' | 'left' | 'right' = 'top';
  interactiveScrollable = false;
  interactiveReorderable = false;
  
  // Tab collections
  private _closeableTabs = signal<Tab[]>([
    { id: 'doc1', label: 'Document 1', closeable: true },
    { id: 'doc2', label: 'Document 2', closeable: true },
    { id: 'doc3', label: 'Important Doc', closeable: false },
    { id: 'doc4', label: 'Temp File', closeable: true }
  ]);
  
  private _reorderableTabs = signal<Tab[]>([
    { id: 'order1', label: 'First' },
    { id: 'order2', label: 'Second' },
    { id: 'order3', label: 'Third' },
    { id: 'order4', label: 'Fourth' }
  ]);
  
  private _interactiveTabs = signal<Tab[]>([
    { id: 'int1', label: 'Tab One', closeable: true, icon: '1️⃣' },
    { id: 'int2', label: 'Tab Two', closeable: true, icon: '2️⃣' },
    { id: 'int3', label: 'Tab Three', closeable: false, icon: '3️⃣' },
    { id: 'int4', label: 'Tab Four', closeable: true, icon: '4️⃣' }
  ]);
  
  basicTabs(): Tab[] {
    return [
      { id: 'tab1', label: 'Tab 1' },
      { id: 'tab2', label: 'Tab 2' },
      { id: 'tab3', label: 'Tab 3' }
    ];
  }
  
  iconTabs(): Tab[] {
    return [
      { id: 'home', label: 'Home', icon: '🏠' },
      { id: 'settings', label: 'Settings', icon: '⚙️' },
      { id: 'profile', label: 'Profile', icon: '👤' },
      { id: 'notifications', label: 'Notifications', icon: '🔔' }
    ];
  }
  
  manyTabs(): Tab[] {
    return Array.from({ length: 12 }, (_, i) => ({
      id: `many${i + 1}`,
      label: `Tab ${i + 1}`,
      closeable: i > 2
    }));
  }
  
  lazyTabs(): Tab[] {
    return [
      { id: 'eager', label: 'Eager Load', lazyLoad: false },
      { id: 'lazy1', label: 'Lazy Tab 1', lazyLoad: true },
      { id: 'lazy2', label: 'Lazy Tab 2', lazyLoad: true }
    ];
  }
  
  disabledTabs(): Tab[] {
    return [
      { id: 'enabled1', label: 'Enabled' },
      { id: 'disabled', label: 'Disabled', disabled: true },
      { id: 'enabled2', label: 'Also Enabled' }
    ];
  }
  
  closeableTabs = this._closeableTabs.asReadonly();
  reorderableTabs = this._reorderableTabs.asReadonly();
  interactiveTabs = this._interactiveTabs.asReadonly();
  
  handleTabSelect(context: string, tabId: string): void {
    console.log(`Tab selected in ${context}:`, tabId);
    this.activeTab.set(tabId);
    this.tabSelectCount.update(count => count + 1);
  }
  
  handleTabClose(tabId: string): void {
    console.log('Tab closed:', tabId);
    this._closeableTabs.update(tabs => tabs.filter(tab => tab.id !== tabId));
  }
  
  handleTabsReorder(newTabs: Tab[]): void {
    console.log('Tabs reordered:', newTabs);
    this._reorderableTabs.set(newTabs);
    this.reorderCount.update(count => count + 1);
  }
  
  handleInteractiveTabClose(tabId: string): void {
    console.log('Interactive tab closed:', tabId);
    this._interactiveTabs.update(tabs => tabs.filter(tab => tab.id !== tabId));
  }
  
  handleInteractiveTabsReorder(newTabs: Tab[]): void {
    console.log('Interactive tabs reordered:', newTabs);
    this._interactiveTabs.set(newTabs);
  }
  
  updateInteractiveConfig(): void {
    // Trigger change detection for interactive demo
    console.log('Interactive config updated:', {
      size: this.interactiveSize,
      variant: this.interactiveVariant,
      position: this.interactivePosition,
      scrollable: this.interactiveScrollable,
      reorderable: this.interactiveReorderable
    });
  }
}