import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ButtonComponent } from '../../../../../ui-essentials/src/lib/components/buttons/button.component';
import { TextButtonComponent } from '../../../../../ui-essentials/src/lib/components/buttons/text-button.component';
import { GhostButtonComponent } from '../../../../../ui-essentials/src/lib/components/buttons/ghost-button.component';
import { FabComponent } from '../../../../../ui-essentials/src/lib/components/buttons/fab.component';
import { SimpleButtonComponent } from '../../../../../ui-essentials/src/lib/components/buttons/simple-button.component';
import { 
  faDownload, 
  faPlus, 
  faShare, 
  faHeart, 
  faBookmark, 
  faEdit, 
  faTrash, 
  faSave,
  faArrowRight,
  faArrowLeft,
  faSearch,
  faUpload
} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'ui-button-demo',
  standalone: true,
  imports: [
    CommonModule,
    ButtonComponent,
    TextButtonComponent, 
    GhostButtonComponent,
    FabComponent,
    SimpleButtonComponent
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div style="padding: 2rem;">
      <h2>Button Component Showcase</h2>
      
      <!-- Filled Button Variants -->
      <section style="margin-bottom: 3rem;">
        <h3>Filled Buttons</h3>
        <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">
          <ui-button variant="filled" size="small" (clicked)="handleClick('small filled')">Small</ui-button>
          <ui-button variant="filled" size="medium" (clicked)="handleClick('medium filled')">Medium</ui-button>
          <ui-button variant="filled" size="large" (clicked)="handleClick('large filled')">Large</ui-button>
        </div>
        <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">
          <ui-button variant="filled" [disabled]="true">Disabled</ui-button>
          <ui-button variant="filled" [loading]="true">Loading</ui-button>
          <ui-button variant="filled" [fullWidth]="false">Full Width</ui-button>
        </div>
      </section>

      <!-- Tonal Button Variants -->
      <section style="margin-bottom: 3rem;">
        <h3>Tonal Buttons</h3>
        <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">
          <ui-button variant="tonal" size="small" (clicked)="handleClick('small tonal')">Small</ui-button>
          <ui-button variant="tonal" size="medium" (clicked)="handleClick('medium tonal')">Medium</ui-button>
          <ui-button variant="tonal" size="large" (clicked)="handleClick('large tonal')">Large</ui-button>
        </div>
        <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
          <ui-button variant="tonal" [disabled]="true">Disabled</ui-button>
          <ui-button variant="tonal" [loading]="true">Loading</ui-button>
        </div>
      </section>

      <!-- Outlined Button Variants -->
      <section style="margin-bottom: 3rem;">
        <h3>Outlined Buttons</h3>
        <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">
          <ui-button variant="outlined" size="small" (clicked)="handleClick('small outlined')">Small</ui-button>
          <ui-button variant="outlined" size="medium" (clicked)="handleClick('medium outlined')">Medium</ui-button>
          <ui-button variant="outlined" size="large" (clicked)="handleClick('large outlined')">Large</ui-button>
        </div>
        <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
          <ui-button variant="outlined" [disabled]="true">Disabled</ui-button>
          <ui-button variant="outlined" [loading]="true">Loading</ui-button>
        </div>
      </section>

      <!-- Text Buttons -->
      <section style="margin-bottom: 3rem;">
        <h3>Text Buttons</h3>
        <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">
          <ui-text-button size="small" (clicked)="handleClick('small text')">Small</ui-text-button>
          <ui-text-button size="medium" (clicked)="handleClick('medium text')">Medium</ui-text-button>
          <ui-text-button size="large" (clicked)="handleClick('large text')">Large</ui-text-button>
        </div>
        <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
          <ui-text-button [disabled]="true">Disabled</ui-text-button>
          <ui-text-button [loading]="true">Loading</ui-text-button>
        </div>
      </section>

      <!-- Ghost Buttons -->
      <section style="margin-bottom: 3rem;">
        <h3>Ghost Buttons</h3>
        <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">
          <ui-ghost-button size="small" (clicked)="handleClick('small ghost')">Small</ui-ghost-button>
          <ui-ghost-button size="medium" (clicked)="handleClick('medium ghost')">Medium</ui-ghost-button>
          <ui-ghost-button size="large" (clicked)="handleClick('large ghost')">Large</ui-ghost-button>
        </div>
        <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
          <ui-ghost-button [disabled]="true">Disabled</ui-ghost-button>
          <ui-ghost-button [loading]="true">Loading</ui-ghost-button>
          <ui-ghost-button [fullWidth]="false">Full Width</ui-ghost-button>
        </div>
      </section>

      <!-- FAB Components -->
      <section style="margin-bottom: 3rem;">
        <h3>Floating Action Buttons (FAB)</h3>
        
        <!-- FAB Sizes -->
        <div style="margin-bottom: 2rem;">
          <h4>Sizes</h4>
          <div style="display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;">
            <div style="text-align: center;">
              <ui-fab variant="primary" size="small" position="static" (clicked)="handleClick('small fab')">+</ui-fab>
              <p style="font-size: 12px; margin: 0.5rem 0;">Small</p>
            </div>
            <div style="text-align: center;">
              <ui-fab variant="primary" size="medium" position="static" (clicked)="handleClick('medium fab')">+</ui-fab>
              <p style="font-size: 12px; margin: 0.5rem 0;">Medium</p>
            </div>
            <div style="text-align: center;">
              <ui-fab variant="primary" size="large" position="static" (clicked)="handleClick('large fab')">✨</ui-fab>
              <p style="font-size: 12px; margin: 0.5rem 0;">Large</p>
            </div>
          </div>
        </div>

        <!-- FAB Variants -->
        <div style="margin-bottom: 2rem;">
          <h4>Variants</h4>
          <div style="display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;">
            <div style="text-align: center;">
              <ui-fab variant="primary" size="medium" position="static" (clicked)="handleClick('primary fab')">📧</ui-fab>
              <p style="font-size: 12px; margin: 0.5rem 0;">Primary</p>
            </div>
            <div style="text-align: center;">
              <ui-fab variant="secondary" size="medium" position="static" (clicked)="handleClick('secondary fab')">📞</ui-fab>
              <p style="font-size: 12px; margin: 0.5rem 0;">Secondary</p>
            </div>
            <div style="text-align: center;">
              <ui-fab variant="tertiary" size="medium" position="static" (clicked)="handleClick('tertiary fab')">💬</ui-fab>
              <p style="font-size: 12px; margin: 0.5rem 0;">Tertiary</p>
            </div>
          </div>
        </div>

        <!-- FAB States -->
        <div style="margin-bottom: 2rem;">
          <h4>States</h4>
          <div style="display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;">
            <div style="text-align: center;">
              <ui-fab variant="primary" size="medium" position="static" [pulse]="true" (clicked)="handleClick('pulse fab')">🔔</ui-fab>
              <p style="font-size: 12px; margin: 0.5rem 0;">Pulse</p>
            </div>
            <div style="text-align: center;">
              <ui-fab variant="primary" size="medium" position="static" [disabled]="true">⚙️</ui-fab>
              <p style="font-size: 12px; margin: 0.5rem 0;">Disabled</p>
            </div>
            <div style="text-align: center;">
              <ui-fab variant="primary" size="medium" position="static" [loading]="true">📤</ui-fab>
              <p style="font-size: 12px; margin: 0.5rem 0;">Loading</p>
            </div>
            <div style="text-align: center;">
              <ui-fab variant="primary" size="medium" position="static" [expandOnClick]="true" (clicked)="handleClick('expand fab')">✨</ui-fab>
              <p style="font-size: 12px; margin: 0.5rem 0;">Expand</p>
            </div>
          </div>
        </div>
      </section>

      <!-- Buttons with Icons -->
      <section style="margin-bottom: 3rem;">
        <h3>Buttons with Icons</h3>
        
        <!-- Left Icons -->
        <div style="margin-bottom: 2rem;">
          <h4>Icons on Left</h4>
          <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">
            <ui-button variant="filled" [icon]="faDownload" iconPosition="left" (clicked)="handleClick('download')">Download</ui-button>
            <ui-button variant="filled" [icon]="faPlus" iconPosition="left" (clicked)="handleClick('add new')">Add New</ui-button>
            <ui-button variant="filled" [icon]="faUpload" iconPosition="left" (clicked)="handleClick('upload')">Upload</ui-button>
          </div>
          <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">
            <ui-button variant="tonal" [icon]="faEdit" iconPosition="left" (clicked)="handleClick('edit')">Edit</ui-button>
            <ui-button variant="tonal" [icon]="faShare" iconPosition="left" (clicked)="handleClick('share')">Share</ui-button>
            <ui-button variant="tonal" [icon]="faSave" iconPosition="left" (clicked)="handleClick('save')">Save</ui-button>
          </div>
          <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
            <ui-button variant="outlined" [icon]="faBookmark" iconPosition="left" (clicked)="handleClick('bookmark')">Bookmark</ui-button>
            <ui-button variant="outlined" [icon]="faHeart" iconPosition="left" (clicked)="handleClick('favorite')">Favorite</ui-button>
            <ui-button variant="outlined" [icon]="faSearch" iconPosition="left" (clicked)="handleClick('search')">Search</ui-button>
          </div>
        </div>

        <!-- Right Icons -->
        <div style="margin-bottom: 2rem;">
          <h4>Icons on Right</h4>
          <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">
            <ui-button variant="filled" [icon]="faArrowRight" iconPosition="right" (clicked)="handleClick('next')">Next</ui-button>
            <ui-button variant="filled" [icon]="faArrowRight" iconPosition="right" (clicked)="handleClick('continue')">Continue</ui-button>
            <ui-button variant="filled" [icon]="faArrowRight" iconPosition="right" (clicked)="handleClick('proceed')">Proceed</ui-button>
          </div>
          <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">
            <ui-button variant="tonal" [icon]="faArrowLeft" iconPosition="right" (clicked)="handleClick('back')">Back</ui-button>
            <ui-button variant="outlined" [icon]="faTrash" iconPosition="right" (clicked)="handleClick('delete')">Delete</ui-button>
          </div>
        </div>

        <!-- Size Variants with Icons -->
        <div style="margin-bottom: 2rem;">
          <h4>Different Sizes with Icons</h4>
          <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
            <ui-button variant="filled" size="small" [icon]="faPlus" iconPosition="left" (clicked)="handleClick('small icon')">Small</ui-button>
            <ui-button variant="filled" size="medium" [icon]="faPlus" iconPosition="left" (clicked)="handleClick('medium icon')">Medium</ui-button>
            <ui-button variant="filled" size="large" [icon]="faPlus" iconPosition="left" (clicked)="handleClick('large icon')">Large</ui-button>
          </div>
        </div>

        <!-- Icon-only Style -->
        <div style="margin-bottom: 2rem;">
          <h4>Icon with Minimal Text</h4>
          <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
            <ui-button variant="filled" [icon]="faDownload" iconPosition="left" (clicked)="handleClick('dl')">DL</ui-button>
            <ui-button variant="tonal" [icon]="faEdit" iconPosition="left" (clicked)="handleClick('edit short')">Edit</ui-button>
            <ui-button variant="outlined" [icon]="faTrash" iconPosition="right" (clicked)="handleClick('del')">Del</ui-button>
          </div>
        </div>
      </section>

      <!-- Usage Examples -->
      <section style="margin-bottom: 3rem;">
        <h3>Usage Examples</h3>
        <div style="background: #f8f9fa; padding: 1.5rem; border-radius: 8px; border-left: 4px solid #007bff;">
          <h4>Basic Button:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-button 
  variant="filled" 
  size="medium"
  (clicked)="handleClick($event)"&gt;
  Click Me
&lt;/ui-button&gt;</code></pre>
          
          <h4>Text Button:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-text-button 
  size="large" 
  [disabled]="false"
  (clicked)="handleTextClick($event)"&gt;
  Text Action
&lt;/ui-text-button&gt;</code></pre>

          <h4>Button with Icon:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-button 
  variant="filled"
  [icon]="faDownload"
  iconPosition="left"
  (clicked)="downloadFile()"&gt;
  Download
&lt;/ui-button&gt;</code></pre>

          <h4>FAB with Position:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-fab 
  variant="primary"
  size="medium"
  position="bottom-right"
  [pulse]="true"
  (clicked)="openDialog()"&gt;
  +
&lt;/ui-fab&gt;</code></pre>
        </div>
      </section>

      <!-- UI Essentials Components -->
      <section style="margin-bottom: 3rem;">
        <h3>UI Essentials Library Components</h3>
        <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">
          <ui-simple-button variant="primary" (clicked)="handleClick('ui-essentials primary')">Primary</ui-simple-button>
          <ui-simple-button variant="secondary" (clicked)="handleClick('ui-essentials secondary')">Secondary</ui-simple-button>
          <ui-simple-button variant="primary" [disabled]="true">Disabled</ui-simple-button>
        </div>
      </section>

      <!-- Interactive Example -->
      <section style="margin-bottom: 3rem;">
        <h3>Interactive Actions</h3>
        <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
          <ui-button variant="filled" (clicked)="showAlert('Success!')">Show Alert</ui-button>
          <ui-button variant="tonal" (clicked)="toggleLoading()">{{ isLoading ? 'Stop Loading' : 'Start Loading' }}</ui-button>
          <ui-text-button (clicked)="resetDemo()">Reset Demo</ui-text-button>
        </div>
        
        @if (lastClickedButton) {
          <div style="margin-top: 1rem; padding: 1rem; background: #e3f2fd; border-radius: 4px;">
            <strong>Last clicked:</strong> {{ lastClickedButton }}
          </div>
        }
      </section>

      <!-- Fixed FAB Demo -->
      <ui-fab 
        variant="primary" 
        size="medium" 
        position="bottom-right" 
        [pulse]="shouldPulse"
        (clicked)="handleFabClick()">
        💡
      </ui-fab>
    </div>
  `,
  styles: [`
    h2 {
      color: hsl(279, 14%, 11%);
      font-size: 2rem;
      margin-bottom: 2rem;
      border-bottom: 2px solid hsl(258, 100%, 47%);
      padding-bottom: 0.5rem;
    }
    
    h3 {
      color: hsl(279, 14%, 25%);
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }
    
    h4 {
      color: hsl(287, 12%, 35%);
      font-size: 1.125rem;
      margin-bottom: 0.75rem;
    }
    
    section {
      border: 1px solid hsl(289, 14%, 90%);
      border-radius: 8px;
      padding: 1.5rem;
      background: hsl(286, 20%, 99%);
    }
    
    pre {
      font-size: 0.875rem;
      line-height: 1.5;
      margin: 0.5rem 0;
    }
    
    code {
      font-family: 'JetBrains Mono', monospace;
      color: #d63384;
    }
  `]
})
export class ButtonDemoComponent {
  lastClickedButton: string = '';
  isLoading: boolean = false;
  shouldPulse: boolean = true;

  // Font Awesome icons
  faDownload = faDownload;
  faPlus = faPlus;
  faShare = faShare;
  faHeart = faHeart;
  faBookmark = faBookmark;
  faEdit = faEdit;
  faTrash = faTrash;
  faSave = faSave;
  faArrowRight = faArrowRight;
  faArrowLeft = faArrowLeft;
  faSearch = faSearch;
  faUpload = faUpload;

  handleClick(buttonType: string): void {
    this.lastClickedButton = buttonType;
    console.log(`Clicked: ${buttonType}`);
  }

  showAlert(message: string): void {
    alert(message);
    this.handleClick('Alert button');
  }

  toggleLoading(): void {
    this.isLoading = !this.isLoading;
    this.handleClick(`Loading toggle - ${this.isLoading ? 'started' : 'stopped'}`);
  }

  resetDemo(): void {
    this.lastClickedButton = '';
    this.isLoading = false;
    this.shouldPulse = true;
    console.log('Demo reset');
  }

  handleFabClick(): void {
    this.shouldPulse = !this.shouldPulse;
    this.handleClick(`FAB - Pulse ${this.shouldPulse ? 'enabled' : 'disabled'}`);
  }
}