import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OverlayContainerComponent } from '../../../../../ui-essentials/src/lib/components/overlays/overlay-container/overlay-container.component';

@Component({
  selector: 'ui-overlay-container-demo',
  standalone: true,
  imports: [CommonModule, OverlayContainerComponent],
  template: `
    <div class="demo-container">
      <h2>Overlay Container Demo</h2>
      
      <!-- Position Variants -->
      <section class="demo-section">
        <h3>Positions</h3>
        <div class="demo-row">
          @for (position of positions; track position) {
            <button 
              class="demo-button" 
              (click)="showOverlay(position, 'auto', 'default')"
            >
              {{ position }} position
            </button>
          }
        </div>
      </section>
      
      <!-- Size Variants -->
      <section class="demo-section">
        <h3>Sizes</h3>
        <div class="demo-row">
          @for (size of sizes; track size) {
            <button 
              class="demo-button" 
              (click)="showOverlay('center', size, 'default')"
            >
              {{ size }} size
            </button>
          }
        </div>
      </section>
      
      <!-- Variant Types -->
      <section class="demo-section">
        <h3>Variants</h3>
        <div class="demo-row">
          @for (variant of variants; track variant) {
            <button 
              class="demo-button" 
              (click)="showOverlay('center', 'md', variant)"
            >
              {{ variant }}
            </button>
          }
        </div>
      </section>
      
      <!-- Features -->
      <section class="demo-section">
        <h3>Features</h3>
        <div class="demo-row">
          <button 
            class="demo-button" 
            (click)="showFeatureOverlay('no-backdrop')"
          >
            No Backdrop
          </button>
          <button 
            class="demo-button" 
            (click)="showFeatureOverlay('backdrop-blur')"
          >
            Backdrop Blur
          </button>
          <button 
            class="demo-button" 
            (click)="showFeatureOverlay('focus-trap')"
          >
            Focus Trap
          </button>
          <button 
            class="demo-button" 
            (click)="showFeatureOverlay('no-escape')"
          >
            No ESC Close
          </button>
        </div>
      </section>
      
      <!-- Offset Example -->
      <section class="demo-section">
        <h3>Offset Positioning</h3>
        <div class="demo-row">
          <button 
            class="demo-button" 
            (click)="showOffsetOverlay()"
          >
            Offset Overlay
          </button>
        </div>
      </section>
      
      <!-- Interactive Stats -->
      <section class="demo-section">
        <h3>Stats</h3>
        <div class="demo-stats">
          <p>Overlays shown: {{ overlayCount }}</p>
          <p>Backdrop clicks: {{ backdropClickCount }}</p>
          <p>ESC key presses: {{ escapeCount }}</p>
        </div>
      </section>
    </div>

    <!-- Overlay Instances -->
    <ui-overlay-container
      [visible]="currentOverlay.visible"
      [position]="currentOverlay.position"
      [size]="currentOverlay.size"
      [variant]="currentOverlay.variant"
      [showBackdrop]="currentOverlay.showBackdrop"
      [backdropBlur]="currentOverlay.backdropBlur"
      [focusTrap]="currentOverlay.focusTrap"
      [escapeClosable]="currentOverlay.escapeClosable"
      [offsetX]="currentOverlay.offsetX"
      [offsetY]="currentOverlay.offsetY"
      (visibleChange)="handleVisibilityChange($event)"
      (backdropClicked)="handleBackdropClick()"
      (escapePressed)="handleEscapePress()"
    >
      <div class="overlay-content">
        <h3>{{ currentOverlay.title }}</h3>
        <p>{{ currentOverlay.description }}</p>
        @if (currentOverlay.focusTrap) {
          <div class="focus-trap-demo">
            <button>First Button</button>
            <input type="text" placeholder="Input field">
            <button>Second Button</button>
            <button (click)="closeOverlay()">Close</button>
          </div>
        } @else {
          <button (click)="closeOverlay()">Close Overlay</button>
        }
      </div>
    </ui-overlay-container>
  `,
  styleUrl: './overlay-container-demo.component.scss'
})
export class OverlayContainerDemoComponent {
  positions = ['center', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'] as const;
  sizes = ['auto', 'sm', 'md', 'lg', 'xl', 'fullscreen'] as const;
  variants = ['default', 'elevated', 'floating', 'modal', 'popover'] as const;

  // Stats
  overlayCount = 0;
  backdropClickCount = 0;
  escapeCount = 0;

  // Current overlay state
  currentOverlay = {
    visible: false,
    position: 'center' as typeof this.positions[number],
    size: 'auto' as typeof this.sizes[number],
    variant: 'default' as typeof this.variants[number],
    showBackdrop: true,
    backdropBlur: false,
    focusTrap: false,
    escapeClosable: true,
    offsetX: 0,
    offsetY: 0,
    title: 'Overlay Title',
    description: 'This is an overlay container demonstration.'
  };

  showOverlay(position: typeof this.positions[number], size: typeof this.sizes[number], variant: typeof this.variants[number]): void {
    this.currentOverlay = {
      ...this.currentOverlay,
      visible: true,
      position,
      size,
      variant,
      showBackdrop: true,
      backdropBlur: false,
      focusTrap: false,
      escapeClosable: true,
      offsetX: 0,
      offsetY: 0,
      title: `${variant} Overlay`,
      description: `Position: ${position}, Size: ${size}, Variant: ${variant}`
    };
    this.overlayCount++;
  }

  showFeatureOverlay(feature: string): void {
    let config = {
      visible: true,
      position: 'center' as const,
      size: 'md' as const,
      variant: 'default' as const,
      showBackdrop: true,
      backdropBlur: false,
      focusTrap: false,
      escapeClosable: true,
      offsetX: 0,
      offsetY: 0,
      title: 'Feature Demo',
      description: 'Demonstrating overlay features.'
    };

    switch (feature) {
      case 'no-backdrop':
        config.showBackdrop = false;
        config.title = 'No Backdrop';
        config.description = 'This overlay has no backdrop.';
        break;
      case 'backdrop-blur':
        config.backdropBlur = true;
        config.title = 'Backdrop Blur';
        config.description = 'This overlay has a blurred backdrop effect.';
        break;
      case 'focus-trap':
        config.focusTrap = true;
        config.title = 'Focus Trap';
        config.description = 'Try pressing Tab - focus is trapped within this overlay.';
        break;
      case 'no-escape':
        config.escapeClosable = false;
        config.title = 'No ESC Close';
        config.description = 'ESC key will not close this overlay.';
        break;
    }

    this.currentOverlay = { ...this.currentOverlay, ...config };
    this.overlayCount++;
  }

  showOffsetOverlay(): void {
    this.currentOverlay = {
      ...this.currentOverlay,
      visible: true,
      position: 'top-right',
      size: 'sm',
      variant: 'floating',
      showBackdrop: false,
      backdropBlur: false,
      focusTrap: false,
      escapeClosable: true,
      offsetX: -20,
      offsetY: 20,
      title: 'Offset Overlay',
      description: 'This overlay is positioned with X and Y offsets.'
    };
    this.overlayCount++;
  }

  closeOverlay(): void {
    this.currentOverlay.visible = false;
  }

  handleVisibilityChange(visible: boolean): void {
    this.currentOverlay.visible = visible;
  }

  handleBackdropClick(): void {
    this.backdropClickCount++;
    console.log('Backdrop clicked');
  }

  handleEscapePress(): void {
    this.escapeCount++;
    console.log('ESC key pressed');
  }
}