import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faBars, faUser, faCog, faHome, faChartLine, faEnvelope, faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
import { ButtonComponent, DrawerComponent } from '../../../../../ui-essentials/src/public-api';

@Component({
  selector: 'ui-drawer-demo',
  standalone: true,
  imports: [CommonModule, FormsModule, FontAwesomeModule, ButtonComponent, DrawerComponent],
  template: `
    <div class="demo-container">
      <h2>Drawer Demo</h2>
      
      <!-- Basic Usage -->
      <section class="demo-section">
        <h3>Basic Usage</h3>
        <div class="demo-row">
          <ui-button (clicked)="basicDrawer.set(true)">
            <fa-icon [icon]="faBars"></fa-icon>
            Open Basic Drawer
          </ui-button>
        </div>
      </section>

      <!-- Position Variants -->
      <section class="demo-section">
        <h3>Positions</h3>
        <div class="demo-row">
          <ui-button (clicked)="leftDrawer.set(true)">Left Drawer</ui-button>
          <ui-button (clicked)="rightDrawer.set(true)">Right Drawer</ui-button>
          <ui-button (clicked)="topDrawer.set(true)">Top Drawer</ui-button>
          <ui-button (clicked)="bottomDrawer.set(true)">Bottom Drawer</ui-button>
        </div>
      </section>

      <!-- Size Variants -->
      <section class="demo-section">
        <h3>Sizes</h3>
        <div class="demo-row">
          <ui-button (clicked)="smallDrawer.set(true)">Small Drawer</ui-button>
          <ui-button (clicked)="mediumDrawer.set(true)">Medium Drawer</ui-button>
          <ui-button (clicked)="largeDrawer.set(true)">Large Drawer</ui-button>
          <ui-button (clicked)="xlDrawer.set(true)">XL Drawer</ui-button>
        </div>
      </section>

      <!-- Configuration Options -->
      <section class="demo-section">
        <h3>Configuration Options</h3>
        <div class="demo-row">
          <ui-button (clicked)="noHeaderDrawer.set(true)">No Header</ui-button>
          <ui-button (clicked)="withFooterDrawer.set(true)">With Footer</ui-button>
          <ui-button (clicked)="noPaddingDrawer.set(true)">No Padding</ui-button>
          <ui-button (clicked)="persistentDrawer.set(true)">Persistent</ui-button>
          <ui-button (clicked)="notClosableDrawer.set(true)">Not Closable</ui-button>
        </div>
      </section>

      <!-- Interactive Features -->
      <section class="demo-section">
        <h3>Interactive Features</h3>
        <div class="demo-row">
          <ui-button (clicked)="loadingDrawer.set(true)">Loading Drawer</ui-button>
          <ui-button (clicked)="scrollableDrawer.set(true)">Scrollable Content</ui-button>
          <ui-button (clicked)="navigationDrawer.set(true)">Navigation Drawer</ui-button>
        </div>
      </section>

      <!-- Configuration Panel -->
      <section class="demo-section">
        <h3>Try It Yourself</h3>
        <div class="config-panel">
          <div class="config-row">
            <label>Size:</label>
            <select [(ngModel)]="customConfig.size">
              <option value="sm">Small</option>
              <option value="md">Medium</option>
              <option value="lg">Large</option>
              <option value="xl">Extra Large</option>
            </select>
          </div>
          
          <div class="config-row">
            <label>Position:</label>
            <select [(ngModel)]="customConfig.position">
              <option value="left">Left</option>
              <option value="right">Right</option>
              <option value="top">Top</option>
              <option value="bottom">Bottom</option>
            </select>
          </div>
          
          <div class="config-row">
            <label>
              <input type="checkbox" [(ngModel)]="customConfig.closable">
              Closable
            </label>
            <label>
              <input type="checkbox" [(ngModel)]="customConfig.backdropClosable">
              Backdrop Closable
            </label>
          </div>
          
          <div class="config-row">
            <label>
              <input type="checkbox" [(ngModel)]="customConfig.showHeader">
              Show Header
            </label>
            <label>
              <input type="checkbox" [(ngModel)]="customConfig.showFooter">
              Show Footer
            </label>
          </div>
          
          <div class="config-row">
            <label>
              <input type="checkbox" [(ngModel)]="customConfig.persistent">
              Persistent
            </label>
          </div>
          
          <ui-button (clicked)="customDrawer.set(true)">Open Custom Drawer</ui-button>
        </div>
      </section>

      <!-- Event Log -->
      <section class="demo-section">
        <h3>Event Log</h3>
        <div class="event-log">
          @for (event of eventLog; track $index) {
            <div class="event-item">{{ event }}</div>
          }
          @if (eventLog.length === 0) {
            <div class="event-item">No events yet...</div>
          }
        </div>
        <ui-button (clicked)="clearEventLog()" variant="outlined">Clear Log</ui-button>
      </section>
    </div>

    <!-- Basic Drawer -->
    <ui-drawer
      [open]="basicDrawer()"
      (openChange)="basicDrawer.set($event); logEvent('Basic drawer: ' + ($event ? 'opened' : 'closed'))"
      title="Basic Drawer"
      (opened)="logEvent('Basic drawer opened')"
      (closed)="logEvent('Basic drawer closed')"
    >
      <p>This is a basic drawer with default settings.</p>
      <p>You can close it by clicking the X button, pressing Escape, or clicking outside the drawer.</p>
    </ui-drawer>

    <!-- Position Drawers -->
    <ui-drawer
      [open]="leftDrawer()"
      (openChange)="leftDrawer.set($event)"
      position="left"
      title="Left Drawer"
    >
      <p>This drawer slides in from the left side.</p>
      <p>Default position for navigation menus and sidebars.</p>
    </ui-drawer>

    <ui-drawer
      [open]="rightDrawer()"
      (openChange)="rightDrawer.set($event)"
      position="right"
      title="Right Drawer"
    >
      <p>This drawer slides in from the right side.</p>
      <p>Great for secondary actions, filters, or settings panels.</p>
    </ui-drawer>

    <ui-drawer
      [open]="topDrawer()"
      (openChange)="topDrawer.set($event)"
      position="top"
      title="Top Drawer"
    >
      <p>This drawer slides down from the top.</p>
      <p>Perfect for notifications, announcements, or quick access panels.</p>
    </ui-drawer>

    <ui-drawer
      [open]="bottomDrawer()"
      (openChange)="bottomDrawer.set($event)"
      position="bottom"
      title="Bottom Drawer"
    >
      <p>This drawer slides up from the bottom.</p>
      <p>Commonly used for mobile interfaces and action sheets.</p>
    </ui-drawer>

    <!-- Size Drawers -->
    <ui-drawer
      [open]="smallDrawer()"
      (openChange)="smallDrawer.set($event)"
      size="sm"
      title="Small Drawer (280px)"
    >
      <p>This is a small drawer (280px width).</p>
      <p>Perfect for simple navigation or minimal content.</p>
    </ui-drawer>

    <ui-drawer
      [open]="mediumDrawer()"
      (openChange)="mediumDrawer.set($event)"
      size="md"
      title="Medium Drawer (360px)"
    >
      <p>This is a medium drawer (360px width) - the default size.</p>
      <p>Good balance between content space and screen real estate.</p>
    </ui-drawer>

    <ui-drawer
      [open]="largeDrawer()"
      (openChange)="largeDrawer.set($event)"
      size="lg"
      title="Large Drawer (480px)"
    >
      <p>This is a large drawer (480px width).</p>
      <p>Ideal for detailed content, forms, or complex interfaces.</p>
    </ui-drawer>

    <ui-drawer
      [open]="xlDrawer()"
      (openChange)="xlDrawer.set($event)"
      size="xl"
      title="Extra Large Drawer (640px)"
    >
      <p>This is an extra large drawer (640px width).</p>
      <p>Use for very detailed interfaces or when you need more space.</p>
    </ui-drawer>

    <!-- Configuration Drawers -->
    <ui-drawer
      [open]="noHeaderDrawer()"
      (openChange)="noHeaderDrawer.set($event)"
      [showHeader]="false"
    >
      <div style="padding: 16px; text-align: center;">
        <fa-icon [icon]="faBars" style="font-size: 48px; color: #6750a4; margin-bottom: 16px;"></fa-icon>
        <h3 style="margin: 0 0 16px 0;">Drawer without header</h3>
        <p>This drawer doesn't have a header section.</p>
        <ui-button (clicked)="noHeaderDrawer.set(false)" style="margin-top: 16px;">Close</ui-button>
      </div>
    </ui-drawer>

    <ui-drawer
      [open]="withFooterDrawer()"
      (openChange)="withFooterDrawer.set($event)"
      title="Drawer with Footer"
      [showFooter]="true"
      footerAlignment="between"
    >
      <p>This drawer has a footer with buttons.</p>
      <p>The footer stays at the bottom even if the content is scrollable.</p>
      
      <ng-container slot="footer">
        <div>
          <ui-button (clicked)="logEvent('Help clicked')" variant="outlined">Help</ui-button>
        </div>
        <div style="display: flex; gap: 8px;">
          <ui-button (clicked)="withFooterDrawer.set(false)" variant="outlined">Cancel</ui-button>
          <ui-button (clicked)="withFooterDrawer.set(false)" variant="filled">Save</ui-button>
        </div>
      </ng-container>
    </ui-drawer>

    <ui-drawer
      [open]="noPaddingDrawer()"
      (openChange)="noPaddingDrawer.set($event)"
      title="No Padding Drawer"
      [bodyPadding]="false"
    >
      <div style="padding: 0; background: linear-gradient(45deg, #6750a4, #7c3aed); height: 200px; display: flex; align-items: center; justify-content: center; color: white;">
        <p style="margin: 0; text-align: center;">This content spans the full width<br>with no padding constraints.</p>
      </div>
      <div style="padding: 16px;">
        <p>Content below can still have its own padding.</p>
      </div>
    </ui-drawer>

    <ui-drawer
      [open]="persistentDrawer()"
      (openChange)="persistentDrawer.set($event)"
      title="Persistent Drawer"
      [persistent]="true"
    >
      <p>This is a persistent drawer that doesn't have a backdrop.</p>
      <p>It stays open until explicitly closed and doesn't block interaction with the rest of the page.</p>
      <p>Perfect for navigation menus that should remain visible.</p>
      <ui-button (clicked)="persistentDrawer.set(false)" style="margin-top: 16px;">Close Drawer</ui-button>
    </ui-drawer>

    <ui-drawer
      [open]="notClosableDrawer()"
      (openChange)="notClosableDrawer.set($event)"
      title="Not Closable Drawer"
      [closable]="false"
      [backdropClosable]="false"
      [escapeClosable]="false"
      [showFooter]="true"
    >
      <p>This drawer cannot be closed by clicking the X, pressing Escape, or clicking the backdrop.</p>
      <p>You must use the Close button below.</p>
      
      <ng-container slot="footer">
        <ui-button (clicked)="notClosableDrawer.set(false)" variant="filled">Close</ui-button>
      </ng-container>
    </ui-drawer>

    <!-- Interactive Drawers -->
    <ui-drawer
      [open]="loadingDrawer()"
      (openChange)="loadingDrawer.set($event)"
      title="Loading Data"
      [loading]="true"
    >
      <!-- Content will be replaced by loading spinner -->
    </ui-drawer>

    <ui-drawer
      [open]="scrollableDrawer()"
      (openChange)="scrollableDrawer.set($event)"
      title="Scrollable Content"
      size="md"
    >
      <div style="height: 800px;">
        <h4>Long Content</h4>
        @for (item of longContent; track $index) {
          <p>{{ item }}</p>
        }
      </div>
    </ui-drawer>

    <ui-drawer
      [open]="navigationDrawer()"
      (openChange)="navigationDrawer.set($event)"
      title="Navigation"
      size="sm"
      [showFooter]="true"
    >
      <nav style="margin: -16px 0;">
        <div class="nav-item" (click)="logEvent('Home clicked')">
          <fa-icon [icon]="faHome"></fa-icon>
          <span>Home</span>
        </div>
        <div class="nav-item" (click)="logEvent('Dashboard clicked')">
          <fa-icon [icon]="faChartLine"></fa-icon>
          <span>Dashboard</span>
        </div>
        <div class="nav-item" (click)="logEvent('Profile clicked')">
          <fa-icon [icon]="faUser"></fa-icon>
          <span>Profile</span>
        </div>
        <div class="nav-item" (click)="logEvent('Messages clicked')">
          <fa-icon [icon]="faEnvelope"></fa-icon>
          <span>Messages</span>
        </div>
        <div class="nav-item" (click)="logEvent('Settings clicked')">
          <fa-icon [icon]="faCog"></fa-icon>
          <span>Settings</span>
        </div>
      </nav>
      
      <ng-container slot="footer">
        <ui-button (clicked)="logEvent('Help clicked')" variant="outlined">
          <fa-icon [icon]="faQuestionCircle"></fa-icon>
          Help
        </ui-button>
      </ng-container>
    </ui-drawer>

    <!-- Custom Configuration Drawer -->
    <ui-drawer
      [open]="customDrawer()"
      (openChange)="customDrawer.set($event)"
      [size]="customConfig.size"
      [position]="customConfig.position"
      [closable]="customConfig.closable"
      [backdropClosable]="customConfig.backdropClosable"
      [showHeader]="customConfig.showHeader"
      [showFooter]="customConfig.showFooter"
      [persistent]="customConfig.persistent"
      title="Custom Configured Drawer"
    >
      <p>This drawer is configured based on your selections:</p>
      <ul>
        <li>Size: {{ customConfig.size }}</li>
        <li>Position: {{ customConfig.position }}</li>
        <li>Closable: {{ customConfig.closable ? 'Yes' : 'No' }}</li>
        <li>Backdrop Closable: {{ customConfig.backdropClosable ? 'Yes' : 'No' }}</li>
        <li>Show Header: {{ customConfig.showHeader ? 'Yes' : 'No' }}</li>
        <li>Show Footer: {{ customConfig.showFooter ? 'Yes' : 'No' }}</li>
        <li>Persistent: {{ customConfig.persistent ? 'Yes' : 'No' }}</li>
      </ul>
      
      @if (customConfig.showFooter) {
        <ng-container slot="footer">
          <ui-button (clicked)="customDrawer.set(false)" variant="filled">Close</ui-button>
        </ng-container>
      }
    </ui-drawer>
  `,
  styleUrl: './drawer-demo.component.scss'
})
export class DrawerDemoComponent {
  // Icons
  readonly faBars = faBars;
  readonly faUser = faUser;
  readonly faCog = faCog;
  readonly faHome = faHome;
  readonly faChartLine = faChartLine;
  readonly faEnvelope = faEnvelope;
  readonly faQuestionCircle = faQuestionCircle;

  // Drawer states
  basicDrawer = signal(false);
  
  leftDrawer = signal(false);
  rightDrawer = signal(false);
  topDrawer = signal(false);
  bottomDrawer = signal(false);
  
  smallDrawer = signal(false);
  mediumDrawer = signal(false);
  largeDrawer = signal(false);
  xlDrawer = signal(false);
  
  noHeaderDrawer = signal(false);
  withFooterDrawer = signal(false);
  noPaddingDrawer = signal(false);
  persistentDrawer = signal(false);
  notClosableDrawer = signal(false);
  
  loadingDrawer = signal(false);
  scrollableDrawer = signal(false);
  navigationDrawer = signal(false);
  customDrawer = signal(false);

  // Demo data
  eventLog: string[] = [];
  
  customConfig = {
    size: 'md' as any,
    position: 'left' as any,
    closable: true,
    backdropClosable: true,
    showHeader: true,
    showFooter: false,
    persistent: false
  };

  longContent = Array.from({ length: 50 }, (_, i) => 
    `This is paragraph ${i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`
  );

  // Simulate loading
  constructor() {
    setTimeout(() => {
      if (this.loadingDrawer()) {
        this.loadingDrawer.set(false);
        this.logEvent('Loading completed');
      }
    }, 3000);
  }

  logEvent(event: string): void {
    const timestamp = new Date().toLocaleTimeString();
    this.eventLog.unshift(`[${timestamp}] ${event}`);
    if (this.eventLog.length > 10) {
      this.eventLog = this.eventLog.slice(0, 10);
    }
  }

  clearEventLog(): void {
    this.eventLog = [];
  }
}