import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChipComponent } from '../../../../../ui-essentials/src/lib/components/data-display/chip/chip.component';
import { ButtonComponent } from '../../../../../ui-essentials/src/lib/components/buttons/button.component';
import { 
  faHeart, 
  faUser, 
  faStar,
  faTag,
  faHome,
  faEnvelope,
  faPhone,
  faMapMarker,
  faCalendar,
  faCog,
  faTimes,
  faPlus,
  faCheck
} from '@fortawesome/free-solid-svg-icons';

interface ChipData {
  id: string;
  label: string;
  selected: boolean;
  disabled: boolean;
}

@Component({
  selector: 'ui-chip-demo',
  standalone: true,
  imports: [
    CommonModule,
    ChipComponent,
    ButtonComponent
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div style="padding: 2rem;">
      <h2>Chip Component Showcase</h2>
      
      <!-- Basic Chip Variants -->
      <section style="margin-bottom: 3rem;">
        <h3>Chip Variants</h3>
        <div class="ui-chip-set" style="margin-bottom: 1.5rem;">
          <ui-chip variant="filled" label="Filled Chip" [clickable]="true" (chipClick)="handleChipClick('filled')"></ui-chip>
          <ui-chip variant="outlined" label="Outlined Chip" [clickable]="true" (chipClick)="handleChipClick('outlined')"></ui-chip>
          <ui-chip variant="elevated" label="Elevated Chip" [clickable]="true" (chipClick)="handleChipClick('elevated')"></ui-chip>
        </div>
        
        <h4>Selected State</h4>
        <div class="ui-chip-set" style="margin-bottom: 1.5rem;">
          <ui-chip variant="filled" label="Selected Filled" [selected]="true" [clickable]="true"></ui-chip>
          <ui-chip variant="outlined" label="Selected Outlined" [selected]="true" [clickable]="true"></ui-chip>
          <ui-chip variant="elevated" label="Selected Elevated" [selected]="true" [clickable]="true"></ui-chip>
        </div>
      </section>

      <!-- Size Variants -->
      <section style="margin-bottom: 3rem;">
        <h3>Size Variants</h3>
        <div class="ui-chip-set" style="margin-bottom: 1.5rem;">
          <ui-chip variant="filled" size="sm" label="Small" [clickable]="true" (chipClick)="handleChipClick('small')"></ui-chip>
          <ui-chip variant="filled" size="md" label="Medium" [clickable]="true" (chipClick)="handleChipClick('medium')"></ui-chip>
          <ui-chip variant="filled" size="lg" label="Large" [clickable]="true" (chipClick)="handleChipClick('large')"></ui-chip>
        </div>
        
        <h4>With Icons</h4>
        <div class="ui-chip-set" style="margin-bottom: 1.5rem;">
          <ui-chip variant="outlined" size="sm" label="Small" [leadingIcon]="faHeart" [clickable]="true"></ui-chip>
          <ui-chip variant="outlined" size="md" label="Medium" [leadingIcon]="faStar" [clickable]="true"></ui-chip>
          <ui-chip variant="outlined" size="lg" label="Large" [leadingIcon]="faUser" [clickable]="true"></ui-chip>
        </div>
      </section>

      <!-- Radius Variants -->
      <section style="margin-bottom: 3rem;">
        <h3>Corner Radius Variants</h3>
        <div class="ui-chip-set" style="margin-bottom: 1.5rem;">
          <ui-chip variant="filled" radius="none" label="No Radius" [clickable]="true"></ui-chip>
          <ui-chip variant="filled" radius="sm" label="Small" [clickable]="true"></ui-chip>
          <ui-chip variant="filled" radius="md" label="Medium" [clickable]="true"></ui-chip>
          <ui-chip variant="filled" radius="lg" label="Large" [clickable]="true"></ui-chip>
          <ui-chip variant="filled" radius="capsule" label="Capsule" [clickable]="true"></ui-chip>
        </div>
      </section>

      <!-- Icons and Avatars -->
      <section style="margin-bottom: 3rem;">
        <h3>Chips with Icons</h3>
        
        <h4>Leading Icons</h4>
        <div class="ui-chip-set" style="margin-bottom: 1.5rem;">
          <ui-chip variant="outlined" label="Home" [leadingIcon]="faHome" [clickable]="true" (chipClick)="handleChipClick('home')"></ui-chip>
          <ui-chip variant="outlined" label="Email" [leadingIcon]="faEnvelope" [clickable]="true" (chipClick)="handleChipClick('email')"></ui-chip>
          <ui-chip variant="outlined" label="Phone" [leadingIcon]="faPhone" [clickable]="true" (chipClick)="handleChipClick('phone')"></ui-chip>
          <ui-chip variant="outlined" label="Location" [leadingIcon]="faMapMarker" [clickable]="true" (chipClick)="handleChipClick('location')"></ui-chip>
        </div>
        
        <h4>Trailing Icons</h4>
        <div class="ui-chip-set" style="margin-bottom: 1.5rem;">
          <ui-chip variant="filled" label="Settings" [trailingIcon]="faCog" [clickable]="true" (chipClick)="handleChipClick('settings')"></ui-chip>
          <ui-chip variant="filled" label="Calendar" [trailingIcon]="faCalendar" [clickable]="true" (chipClick)="handleChipClick('calendar')"></ui-chip>
          <ui-chip variant="filled" label="Favorite" [trailingIcon]="faHeart" [clickable]="true" (chipClick)="handleChipClick('favorite')"></ui-chip>
        </div>
        
        <h4>With Avatars</h4>
        <div class="ui-chip-set" style="margin-bottom: 1.5rem;">
          <ui-chip 
            variant="outlined" 
            label="John Doe" 
            avatar="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face" 
            avatarAlt="John Doe"
            [clickable]="true" 
            (chipClick)="handleChipClick('john')">
          </ui-chip>
          <ui-chip 
            variant="outlined" 
            label="Jane Smith" 
            avatar="https://images.unsplash.com/photo-1494790108755-2616b612b786?w=100&h=100&fit=crop&crop=face"
            avatarAlt="Jane Smith"
            [clickable]="true" 
            (chipClick)="handleChipClick('jane')">
          </ui-chip>
          <ui-chip 
            variant="outlined" 
            label="Alex Johnson" 
            avatar="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face"
            avatarAlt="Alex Johnson"
            [clickable]="true" 
            (chipClick)="handleChipClick('alex')">
          </ui-chip>
        </div>
      </section>

      <!-- Removable Chips -->
      <section style="margin-bottom: 3rem;">
        <h3>Removable Chips</h3>
        <div class="ui-chip-set" style="margin-bottom: 1.5rem;">
          @for (tag of removableTags; track tag.id) {
            <ui-chip 
              variant="filled" 
              [label]="tag.label" 
              [removable]="true"
              [closeIcon]="faTimes"
              [clickable]="true"
              (chipClick)="handleChipClick(tag.id)"
              (chipRemove)="removeTag(tag.id)">
            </ui-chip>
          }
        </div>
        
        <h4>Removable with Icons</h4>
        <div class="ui-chip-set" style="margin-bottom: 1.5rem;">
          @for (tagWithIcon of removableTagsWithIcons; track tagWithIcon.id) {
            <ui-chip 
              variant="outlined" 
              [label]="tagWithIcon.label" 
              [leadingIcon]="tagWithIcon.icon"
              [removable]="true"
              [closeIcon]="faTimes"
              [clickable]="true"
              (chipClick)="handleChipClick(tagWithIcon.id)"
              (chipRemove)="removeTagWithIcon(tagWithIcon.id)">
            </ui-chip>
          }
        </div>
        
        <ui-button variant="outlined" size="small" [icon]="faPlus" iconPosition="left" (clicked)="addTags()">
          Add Tags Back
        </ui-button>
      </section>

      <!-- Interactive Selection -->
      <section style="margin-bottom: 3rem;">
        <h3>Interactive Selection</h3>
        <p>Click chips to toggle selection:</p>
        <div class="ui-chip-set" style="margin-bottom: 1.5rem;">
          @for (item of selectableItems; track item.id) {
            <ui-chip 
              variant="outlined" 
              [label]="item.label"
              [selected]="item.selected"
              [disabled]="item.disabled"
              [clickable]="true"
              (chipClick)="toggleSelection(item.id)">
            </ui-chip>
          }
        </div>
        
        <p><strong>Selected:</strong> {{ getSelectedItems() }}</p>
        <ui-button variant="tonal" size="small" (clicked)="clearSelection()">Clear Selection</ui-button>
      </section>

      <!-- States -->
      <section style="margin-bottom: 3rem;">
        <h3>Chip States</h3>
        
        <h4>Interactive States</h4>
        <div class="ui-chip-set" style="margin-bottom: 1.5rem;">
          <ui-chip variant="filled" label="Normal" [clickable]="true" (chipClick)="handleChipClick('normal')"></ui-chip>
          <ui-chip variant="filled" label="Selected" [selected]="true" [clickable]="true"></ui-chip>
          <ui-chip variant="filled" label="Disabled" [disabled]="true"></ui-chip>
          <ui-chip variant="filled" label="Disabled Selected" [disabled]="true" [selected]="true"></ui-chip>
        </div>
        
        <h4>Non-interactive (Labels)</h4>
        <div class="ui-chip-set" style="margin-bottom: 1.5rem;">
          <ui-chip variant="outlined" radius="capsule" label="Status: Active" [leadingIcon]="faCheck"></ui-chip>
          <ui-chip variant="outlined" radius="capsule" label="Category: Design"></ui-chip>
          <ui-chip variant="outlined" radius="capsule" label="Priority: High"></ui-chip>
        </div>
      </section>

      <!-- Chip Sets -->
      <section style="margin-bottom: 3rem;">
        <h3>Chip Sets</h3>
        
        <h4>Horizontal Scrolling Set</h4>
        <div class="ui-chip-set ui-chip-set--row" style="margin-bottom: 1.5rem; max-width: 500px; border: 1px dashed #ccc; padding: 1rem;">
          <ui-chip variant="filled" label="Technology" [clickable]="true"></ui-chip>
          <ui-chip variant="filled" label="Programming" [clickable]="true"></ui-chip>
          <ui-chip variant="filled" label="Web Development" [clickable]="true"></ui-chip>
          <ui-chip variant="filled" label="User Interface" [clickable]="true"></ui-chip>
          <ui-chip variant="filled" label="User Experience" [clickable]="true"></ui-chip>
          <ui-chip variant="filled" label="Design Systems" [clickable]="true"></ui-chip>
          <ui-chip variant="filled" label="Frontend" [clickable]="true"></ui-chip>
          <ui-chip variant="filled" label="Backend" [clickable]="true"></ui-chip>
        </div>
        
        <h4>Wrapped Set</h4>
        <div class="ui-chip-set" style="margin-bottom: 1.5rem; max-width: 500px; border: 1px dashed #ccc; padding: 1rem;">
          <ui-chip variant="outlined" label="Angular" [clickable]="true"></ui-chip>
          <ui-chip variant="outlined" label="TypeScript" [clickable]="true"></ui-chip>
          <ui-chip variant="outlined" label="SCSS" [clickable]="true"></ui-chip>
          <ui-chip variant="outlined" label="HTML" [clickable]="true"></ui-chip>
          <ui-chip variant="outlined" label="CSS" [clickable]="true"></ui-chip>
          <ui-chip variant="outlined" label="JavaScript" [clickable]="true"></ui-chip>
          <ui-chip variant="outlined" label="Responsive Design" [clickable]="true"></ui-chip>
          <ui-chip variant="outlined" label="Accessibility" [clickable]="true"></ui-chip>
        </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 Chip:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-chip 
  variant="filled" 
  label="Basic Chip"
  [clickable]="true"
  (chipClick)="handleClick($event)"&gt;
&lt;/ui-chip&gt;</code></pre>

          <h4>Chip with Icon:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-chip 
  variant="outlined"
  label="Home"
  [leadingIcon]="faHome"
  [clickable]="true"
  (chipClick)="goHome()"&gt;
&lt;/ui-chip&gt;</code></pre>

          <h4>Removable Chip:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-chip 
  variant="filled"
  label="Tag Name"
  [removable]="true"
  [closeIcon]="faTimes"
  (chipRemove)="removeTag($event)"&gt;
&lt;/ui-chip&gt;</code></pre>

          <h4>Chip with Avatar:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-chip 
  variant="outlined"
  label="John Doe"
  avatar="path/to/avatar.jpg"
  avatarAlt="John Doe"
  [clickable]="true"
  (chipClick)="viewProfile('john')"&gt;
&lt;/ui-chip&gt;</code></pre>
        </div>
      </section>

      <!-- Interactive Actions -->
      <section style="margin-bottom: 3rem;">
        <h3>Interactive Actions</h3>
        @if (lastAction) {
          <div style="margin-bottom: 1rem; padding: 1rem; background: #e3f2fd; border-radius: 4px;">
            <strong>Last action:</strong> {{ lastAction }}
          </div>
        }
        <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
          <ui-button variant="filled" (clicked)="resetDemo()">Reset Demo</ui-button>
          <ui-button variant="tonal" (clicked)="showAlert('Chip showcase complete!')">Show Alert</ui-button>
        </div>
      </section>
    </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 ChipDemoComponent {
  lastAction: string = '';
  
  // FontAwesome icons
  faHeart = faHeart;
  faUser = faUser;
  faStar = faStar;
  faTag = faTag;
  faHome = faHome;
  faEnvelope = faEnvelope;
  faPhone = faPhone;
  faMapMarker = faMapMarker;
  faCalendar = faCalendar;
  faCog = faCog;
  faTimes = faTimes;
  faPlus = faPlus;
  faCheck = faCheck;
  
  removableTags: ChipData[] = [
    { id: 'react', label: 'React', selected: false, disabled: false },
    { id: 'angular', label: 'Angular', selected: false, disabled: false },
    { id: 'vue', label: 'Vue.js', selected: false, disabled: false },
    { id: 'svelte', label: 'Svelte', selected: false, disabled: false }
  ];
  
  removableTagsWithIcons: any[] = [
    { id: 'home-tag', label: 'Home', icon: faHome },
    { id: 'email-tag', label: 'Email', icon: faEnvelope },
    { id: 'star-tag', label: 'Starred', icon: faStar }
  ];
  
  selectableItems: ChipData[] = [
    { id: 'option1', label: 'Option 1', selected: false, disabled: false },
    { id: 'option2', label: 'Option 2', selected: true, disabled: false },
    { id: 'option3', label: 'Option 3', selected: false, disabled: false },
    { id: 'option4', label: 'Option 4', selected: false, disabled: false },
    { id: 'option5', label: 'Disabled', selected: false, disabled: true }
  ];

  private originalRemovableTags = [...this.removableTags];
  private originalRemovableTagsWithIcons = [...this.removableTagsWithIcons];

  handleChipClick(chipId: string): void {
    this.lastAction = `Chip clicked: ${chipId}`;
    console.log(`Chip clicked: ${chipId}`);
  }

  removeTag(tagId: string): void {
    this.removableTags = this.removableTags.filter(tag => tag.id !== tagId);
    this.lastAction = `Tag removed: ${tagId}`;
    console.log(`Tag removed: ${tagId}`);
  }
  
  removeTagWithIcon(tagId: string): void {
    this.removableTagsWithIcons = this.removableTagsWithIcons.filter(tag => tag.id !== tagId);
    this.lastAction = `Tag with icon removed: ${tagId}`;
    console.log(`Tag with icon removed: ${tagId}`);
  }
  
  addTags(): void {
    this.removableTags = [...this.originalRemovableTags];
    this.removableTagsWithIcons = [...this.originalRemovableTagsWithIcons];
    this.lastAction = 'Tags restored';
    console.log('Tags restored');
  }
  
  toggleSelection(itemId: string): void {
    const item = this.selectableItems.find(i => i.id === itemId);
    if (item && !item.disabled) {
      item.selected = !item.selected;
      this.lastAction = `Selection toggled: ${itemId} (${item.selected ? 'selected' : 'deselected'})`;
      console.log(`Selection toggled: ${itemId}`, item.selected);
    }
  }
  
  getSelectedItems(): string {
    return this.selectableItems
      .filter(item => item.selected)
      .map(item => item.label)
      .join(', ') || 'None';
  }
  
  clearSelection(): void {
    this.selectableItems.forEach(item => {
      if (!item.disabled) {
        item.selected = false;
      }
    });
    this.lastAction = 'Selection cleared';
    console.log('Selection cleared');
  }

  showAlert(message: string): void {
    alert(message);
    this.lastAction = 'Alert shown';
  }

  resetDemo(): void {
    this.lastAction = '';
    this.clearSelection();
    this.addTags();
    console.log('Demo reset');
  }
}