import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IconButtonComponent } from '../../../../../ui-essentials/src/lib/components/buttons/icon-button/icon-button.component';
import { 
  faHeart, 
  faBookmark, 
  faShare, 
  faDownload,
  faEdit, 
  faTrash, 
  faSave,
  faSearch,
  faPlus,
  faMinus,
  faHome,
  faUser,
  faCog,
  faClose,
  faCheck,
  faChevronLeft,
  faChevronRight,
  faEllipsisV,
  faStar
} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'ui-icon-button-demo',
  standalone: true,
  imports: [
    CommonModule,
    IconButtonComponent
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div style="padding: 2rem;">
      <h2>Icon Button Component Showcase</h2>
      
      <!-- Size Variants -->
      <section style="margin-bottom: 3rem;">
        <h3>Size Variants</h3>
        <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
          <ui-icon-button 
            [icon]="faHeart" 
            size="small" 
            ariaLabel="Like (small)"
            (clicked)="handleClick('small heart')">
          </ui-icon-button>
          <ui-icon-button 
            [icon]="faHeart" 
            size="medium" 
            ariaLabel="Like (medium)"
            (clicked)="handleClick('medium heart')">
          </ui-icon-button>
          <ui-icon-button 
            [icon]="faHeart" 
            size="large" 
            ariaLabel="Like (large)"
            (clicked)="handleClick('large heart')">
          </ui-icon-button>
        </div>
      </section>

      <!-- Filled Variant -->
      <section style="margin-bottom: 3rem;">
        <h3>Filled Variant</h3>
        <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">
          <ui-icon-button 
            [icon]="faHeart" 
            variant="filled" 
            ariaLabel="Like"
            title="Add to favorites"
            (clicked)="handleClick('filled heart')">
          </ui-icon-button>
          <ui-icon-button 
            [icon]="faBookmark" 
            variant="filled" 
            ariaLabel="Bookmark"
            title="Save for later"
            (clicked)="handleClick('filled bookmark')">
          </ui-icon-button>
          <ui-icon-button 
            [icon]="faShare" 
            variant="filled" 
            ariaLabel="Share"
            title="Share this item"
            (clicked)="handleClick('filled share')">
          </ui-icon-button>
          <ui-icon-button 
            [icon]="faDownload" 
            variant="filled" 
            ariaLabel="Download"
            title="Download file"
            (clicked)="handleClick('filled download')">
          </ui-icon-button>
        </div>
      </section>

      <!-- Tonal Variant -->
      <section style="margin-bottom: 3rem;">
        <h3>Tonal Variant</h3>
        <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">
          <ui-icon-button 
            [icon]="faEdit" 
            variant="tonal" 
            ariaLabel="Edit"
            title="Edit item"
            (clicked)="handleClick('tonal edit')">
          </ui-icon-button>
          <ui-icon-button 
            [icon]="faSave" 
            variant="tonal" 
            ariaLabel="Save"
            title="Save changes"
            (clicked)="handleClick('tonal save')">
          </ui-icon-button>
          <ui-icon-button 
            [icon]="faSearch" 
            variant="tonal" 
            ariaLabel="Search"
            title="Search items"
            (clicked)="handleClick('tonal search')">
          </ui-icon-button>
          <ui-icon-button 
            [icon]="faCog" 
            variant="tonal" 
            ariaLabel="Settings"
            title="Open settings"
            (clicked)="handleClick('tonal settings')">
          </ui-icon-button>
        </div>
      </section>

      <!-- Outlined Variant -->
      <section style="margin-bottom: 3rem;">
        <h3>Outlined Variant</h3>
        <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">
          <ui-icon-button 
            [icon]="faPlus" 
            variant="outlined" 
            ariaLabel="Add"
            title="Add new item"
            (clicked)="handleClick('outlined add')">
          </ui-icon-button>
          <ui-icon-button 
            [icon]="faMinus" 
            variant="outlined" 
            ariaLabel="Remove"
            title="Remove item"
            (clicked)="handleClick('outlined remove')">
          </ui-icon-button>
          <ui-icon-button 
            [icon]="faHome" 
            variant="outlined" 
            ariaLabel="Home"
            title="Go home"
            (clicked)="handleClick('outlined home')">
          </ui-icon-button>
          <ui-icon-button 
            [icon]="faUser" 
            variant="outlined" 
            ariaLabel="Profile"
            title="View profile"
            (clicked)="handleClick('outlined profile')">
          </ui-icon-button>
        </div>
      </section>

      <!-- States -->
      <section style="margin-bottom: 3rem;">
        <h3>States</h3>
        <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">
          <ui-icon-button 
            [icon]="faHeart" 
            variant="filled" 
            [disabled]="true"
            ariaLabel="Disabled button">
          </ui-icon-button>
          <ui-icon-button 
            [icon]="faDownload" 
            variant="filled" 
            [loading]="true"
            ariaLabel="Loading button">
          </ui-icon-button>
          <ui-icon-button 
            [icon]="faStar" 
            variant="tonal" 
            [pressed]="isPressed"
            ariaLabel="Toggle star"
            title="Toggle favorite"
            (clicked)="togglePressed()">
          </ui-icon-button>
        </div>
        <p style="margin-top: 0.5rem; color: #666; font-size: 0.9rem;">
          Star button pressed state: {{ isPressed ? 'ON' : 'OFF' }}
        </p>
      </section>

      <!-- Navigation Icons -->
      <section style="margin-bottom: 3rem;">
        <h3>Navigation Examples</h3>
        <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
          <ui-icon-button 
            [icon]="faChevronLeft" 
            variant="outlined" 
            ariaLabel="Previous"
            title="Go to previous page"
            (clicked)="handleClick('previous')">
          </ui-icon-button>
          <ui-icon-button 
            [icon]="faChevronRight" 
            variant="outlined" 
            ariaLabel="Next"
            title="Go to next page"
            (clicked)="handleClick('next')">
          </ui-icon-button>
          <ui-icon-button 
            [icon]="faClose" 
            variant="tonal" 
            ariaLabel="Close"
            title="Close dialog"
            (clicked)="handleClick('close')">
          </ui-icon-button>
          <ui-icon-button 
            [icon]="faCheck" 
            variant="filled" 
            ariaLabel="Confirm"
            title="Confirm action"
            (clicked)="handleClick('confirm')">
          </ui-icon-button>
          <ui-icon-button 
            [icon]="faEllipsisV" 
            variant="tonal" 
            ariaLabel="More options"
            title="Show more options"
            (clicked)="handleClick('more')">
          </ui-icon-button>
        </div>
      </section>

      <!-- Destructive Actions -->
      <section style="margin-bottom: 3rem;">
        <h3>Destructive Actions</h3>
        <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
          <ui-icon-button 
            [icon]="faTrash" 
            variant="outlined" 
            ariaLabel="Delete"
            title="Delete item (destructive action)"
            class="danger-button"
            (clicked)="handleClick('delete')">
          </ui-icon-button>
        </div>
        <p style="margin-top: 0.5rem; color: #666; font-size: 0.9rem;">
          Use outlined variant for destructive actions to reduce accidental clicks
        </p>
      </section>

      <!-- Click Counter -->
      <section style="margin-bottom: 2rem;">
        <h3>Interaction Test</h3>
        <p>Total clicks: {{ clickCount }}</p>
        <p>Last clicked: {{ lastClicked || 'None' }}</p>
      </section>
    </div>
  `,
  styleUrl: './icon-button-demo.component.scss'
})
export class IconButtonDemoComponent {
  // FontAwesome icons
  faHeart = faHeart;
  faBookmark = faBookmark;
  faShare = faShare;
  faDownload = faDownload;
  faEdit = faEdit;
  faTrash = faTrash;
  faSave = faSave;
  faSearch = faSearch;
  faPlus = faPlus;
  faMinus = faMinus;
  faHome = faHome;
  faUser = faUser;
  faCog = faCog;
  faClose = faClose;
  faCheck = faCheck;
  faChevronLeft = faChevronLeft;
  faChevronRight = faChevronRight;
  faEllipsisV = faEllipsisV;
  faStar = faStar;

  // Demo state
  clickCount = 0;
  lastClicked = '';
  isPressed = false;

  handleClick(action: string): void {
    this.clickCount++;
    this.lastClicked = action;
    console.log('Icon button clicked:', action);
  }

  togglePressed(): void {
    this.isPressed = !this.isPressed;
    this.handleClick(`toggle star ${this.isPressed ? 'on' : 'off'}`);
  }
}