import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
import { ButtonComponent } from '../../../../../ui-essentials/src/lib/components/buttons/button.component';
import {
  // Solid icons from shared-ui
  faUser,
  faHome,
  faCog,
  faSearch,
  faPlus,
  faEdit,
  faTrash,
  faSave,
  faCancel,
  faCheck,
  faTimes,
  faArrowLeft,
  faArrowRight,
  faChevronLeft,
  faChevronRight,
  faChevronUp,
  faChevronDown,
  faBars,
  faEllipsisV,
  faEye,
  faEyeSlash,
  faDownload,
  faUpload,
  faRefresh,
  faSpinner,
  faExclamationTriangle,
  faInfoCircle,
  faCheckCircle,
  faTimesCircle,
  faEnvelope
} from '@fortawesome/free-solid-svg-icons';
import {
  // Regular icons from shared-ui  
  faHeart,
  faBookmark,
  faComment,
  faThumbsUp
} from '@fortawesome/free-regular-svg-icons';
import {
  // Brand icons from shared-ui
  faGithub,
  faTwitter,
  faLinkedin,
  faGoogle
} from '@fortawesome/free-brands-svg-icons';

@Component({
  selector: 'ui-fontawesome-demo',
  standalone: true,
  imports: [
    CommonModule,
    FaIconComponent,
    ButtonComponent
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="demo-container">
      <h2>Font Awesome Icons Showcase</h2>
      
      <!-- Introduction -->
      <section class="intro-section">
        <h3>Font Awesome Integration</h3>
        <p>This demo showcases the Font Awesome icons available in the shared-ui library. Icons are pre-configured and ready to use across the application.</p>
        <div class="info-box">
          <fa-icon [icon]="faInfoCircle" class="info-icon"></fa-icon>
          <span><strong>Available Categories:</strong> Solid, Regular, and Brand icons from Font Awesome</span>
        </div>
      </section>

      <!-- Basic Usage -->
      <section class="demo-section">
        <h3>Basic Usage</h3>
        <div class="icon-grid">
          <div class="icon-example">
            <fa-icon [icon]="faUser" size="2x"></fa-icon>
            <span class="icon-name">faUser</span>
            <code>fa-icon [icon]="faUser"</code>
          </div>
          <div class="icon-example">
            <fa-icon [icon]="faHome" size="2x"></fa-icon>
            <span class="icon-name">faHome</span>
            <code>fa-icon [icon]="faHome"</code>
          </div>
          <div class="icon-example">
            <fa-icon [icon]="faCog" size="2x"></fa-icon>
            <span class="icon-name">faCog</span>
            <code>fa-icon [icon]="faCog"</code>
          </div>
        </div>
      </section>

      <!-- Icon Sizes -->
      <section class="demo-section">
        <h3>Icon Sizes</h3>
        <div class="size-demo">
          <div class="size-row">
            <span class="size-label">xs:</span>
            <fa-icon [icon]="faCheck" size="xs"></fa-icon>
            <code>size="xs"</code>
          </div>
          <div class="size-row">
            <span class="size-label">sm:</span>
            <fa-icon [icon]="faCheck" size="sm"></fa-icon>
            <code>size="sm"</code>
          </div>
          <div class="size-row">
            <span class="size-label">lg:</span>
            <fa-icon [icon]="faCheck" size="lg"></fa-icon>
            <code>size="lg"</code>
          </div>
          <div class="size-row">
            <span class="size-label">2x:</span>
            <fa-icon [icon]="faCheck" size="2x"></fa-icon>
            <code>size="2x"</code>
          </div>
          <div class="size-row">
            <span class="size-label">3x:</span>
            <fa-icon [icon]="faCheck" size="3x"></fa-icon>
            <code>size="3x"</code>
          </div>
        </div>
      </section>

      <!-- Solid Icons -->
      <section class="demo-section">
        <h3>Solid Icons (free-solid-svg-icons)</h3>
        <p>Most commonly used icons for UI elements, actions, and navigation.</p>
        <div class="icon-grid">
          <div class="icon-example">
            <fa-icon [icon]="faUser" size="2x"></fa-icon>
            <span class="icon-name">faUser</span>
            <span class="icon-usage">User profiles, accounts</span>
          </div>
          <div class="icon-example">
            <fa-icon [icon]="faHome" size="2x"></fa-icon>
            <span class="icon-name">faHome</span>
            <span class="icon-usage">Home navigation</span>
          </div>
          <div class="icon-example">
            <fa-icon [icon]="faCog" size="2x"></fa-icon>
            <span class="icon-name">faCog</span>
            <span class="icon-usage">Settings</span>
          </div>
          <div class="icon-example">
            <fa-icon [icon]="faSearch" size="2x"></fa-icon>
            <span class="icon-name">faSearch</span>
            <span class="icon-usage">Search functionality</span>
          </div>
          <div class="icon-example">
            <fa-icon [icon]="faPlus" size="2x"></fa-icon>
            <span class="icon-name">faPlus</span>
            <span class="icon-usage">Add new items</span>
          </div>
          <div class="icon-example">
            <fa-icon [icon]="faEdit" size="2x"></fa-icon>
            <span class="icon-name">faEdit</span>
            <span class="icon-usage">Edit content</span>
          </div>
          <div class="icon-example">
            <fa-icon [icon]="faTrash" size="2x"></fa-icon>
            <span class="icon-name">faTrash</span>
            <span class="icon-usage">Delete items</span>
          </div>
          <div class="icon-example">
            <fa-icon [icon]="faSave" size="2x"></fa-icon>
            <span class="icon-name">faSave</span>
            <span class="icon-usage">Save changes</span>
          </div>
          <div class="icon-example">
            <fa-icon [icon]="faCheck" size="2x"></fa-icon>
            <span class="icon-name">faCheck</span>
            <span class="icon-usage">Confirm, success</span>
          </div>
          <div class="icon-example">
            <fa-icon [icon]="faTimes" size="2x"></fa-icon>
            <span class="icon-name">faTimes</span>
            <span class="icon-usage">Close, dismiss</span>
          </div>
          <div class="icon-example">
            <fa-icon [icon]="faArrowLeft" size="2x"></fa-icon>
            <span class="icon-name">faArrowLeft</span>
            <span class="icon-usage">Back navigation</span>
          </div>
          <div class="icon-example">
            <fa-icon [icon]="faArrowRight" size="2x"></fa-icon>
            <span class="icon-name">faArrowRight</span>
            <span class="icon-usage">Forward navigation</span>
          </div>
          <div class="icon-example">
            <fa-icon [icon]="faDownload" size="2x"></fa-icon>
            <span class="icon-name">faDownload</span>
            <span class="icon-usage">Download files</span>
          </div>
          <div class="icon-example">
            <fa-icon [icon]="faUpload" size="2x"></fa-icon>
            <span class="icon-name">faUpload</span>
            <span class="icon-usage">Upload files</span>
          </div>
          <div class="icon-example">
            <fa-icon [icon]="faRefresh" size="2x"></fa-icon>
            <span class="icon-name">faRefresh</span>
            <span class="icon-usage">Refresh content</span>
          </div>
          <div class="icon-example">
            <fa-icon [icon]="faSpinner" size="2x"></fa-icon>
            <span class="icon-name">faSpinner</span>
            <span class="icon-usage">Loading states</span>
          </div>
        </div>
      </section>

      <!-- Regular Icons -->
      <section class="demo-section">
        <h3>Regular Icons (free-regular-svg-icons)</h3>
        <p>Outlined versions of icons, great for secondary actions and states.</p>
        <div class="icon-grid">
          <div class="icon-example">
            <fa-icon [icon]="faHeart" size="2x"></fa-icon>
            <span class="icon-name">faHeart</span>
            <span class="icon-usage">Favorites, likes</span>
          </div>
          <div class="icon-example">
            <fa-icon [icon]="faBookmark" size="2x"></fa-icon>
            <span class="icon-name">faBookmark</span>
            <span class="icon-usage">Saved items</span>
          </div>
          <div class="icon-example">
            <fa-icon [icon]="faComment" size="2x"></fa-icon>
            <span class="icon-name">faComment</span>
            <span class="icon-usage">Comments</span>
          </div>
          <div class="icon-example">
            <fa-icon [icon]="faThumbsUp" size="2x"></fa-icon>
            <span class="icon-name">faThumbsUp</span>
            <span class="icon-usage">Approval</span>
          </div>
        </div>
      </section>

      <!-- Brand Icons -->
      <section class="demo-section">
        <h3>Brand Icons (free-brands-svg-icons)</h3>
        <p>Social media and company logos for external integrations.</p>
        <div class="icon-grid">
          <div class="icon-example">
            <fa-icon [icon]="faGithub" size="2x"></fa-icon>
            <span class="icon-name">faGithub</span>
            <span class="icon-usage">GitHub integration</span>
          </div>
          <div class="icon-example">
            <fa-icon [icon]="faTwitter" size="2x"></fa-icon>
            <span class="icon-name">faTwitter</span>
            <span class="icon-usage">Twitter sharing</span>
          </div>
          <div class="icon-example">
            <fa-icon [icon]="faLinkedin" size="2x"></fa-icon>
            <span class="icon-name">faLinkedin</span>
            <span class="icon-usage">LinkedIn integration</span>
          </div>
          <div class="icon-example">
            <fa-icon [icon]="faGoogle" size="2x"></fa-icon>
            <span class="icon-name">faGoogle</span>
            <span class="icon-usage">Google services</span>
          </div>
        </div>
      </section>

      <!-- Icon Styling -->
      <section class="demo-section">
        <h3>Icon Styling & Transformations</h3>
        <div class="styling-demo">
          <div class="style-example">
            <h4>Colors</h4>
            <div class="color-row">
              <fa-icon [icon]="faHeart" size="2x" style="color: #dc3545;"></fa-icon>
              <fa-icon [icon]="faHeart" size="2x" style="color: #28a745;"></fa-icon>
              <fa-icon [icon]="faHeart" size="2x" style="color: #007bff;"></fa-icon>
              <fa-icon [icon]="faHeart" size="2x" style="color: #ffc107;"></fa-icon>
            </div>
            <code>style="color: #dc3545;"</code>
          </div>
          
          <div class="style-example">
            <h4>Different Sizes</h4>
            <div class="animation-row">
              <fa-icon [icon]="faSpinner" size="lg"></fa-icon>
              <fa-icon [icon]="faRefresh" size="2x"></fa-icon>
              <fa-icon [icon]="faCog" size="3x"></fa-icon>
            </div>
            <code>size="lg", size="2x", size="3x"</code>
          </div>
        </div>
      </section>

      <!-- Common Use Cases -->
      <section class="demo-section">
        <h3>Common Use Cases</h3>
        <div class="use-cases">
          <div class="use-case">
            <h4>Navigation</h4>
            <div class="nav-example">
              <div><fa-icon [icon]="faHome"></fa-icon> Home</div>
              <div><fa-icon [icon]="faUser"></fa-icon> Profile</div>
              <div><fa-icon [icon]="faCog"></fa-icon> Settings</div>
              <div><fa-icon [icon]="faSearch"></fa-icon> Search</div>
            </div>
          </div>

          <div class="use-case">
            <h4>Action Buttons</h4>
            <div class="action-buttons">
              <ui-button variant="filled" [icon]="faPlus" iconPosition="left">Add Item</ui-button>
              <ui-button variant="outlined" [icon]="faEdit" iconPosition="left">Edit</ui-button>
              <ui-button variant="outlined" [icon]="faTrash" iconPosition="left">Delete</ui-button>
              <ui-button variant="tonal" [icon]="faSave" iconPosition="left">Save</ui-button>
            </div>
          </div>

          <div class="use-case">
            <h4>Status Indicators</h4>
            <div class="status-row">
              <div class="status-item success">
                <fa-icon [icon]="faCheckCircle"></fa-icon>
                <span>Success</span>
              </div>
              <div class="status-item warning">
                <fa-icon [icon]="faExclamationTriangle"></fa-icon>
                <span>Warning</span>
              </div>
              <div class="status-item error">
                <fa-icon [icon]="faTimesCircle"></fa-icon>
                <span>Error</span>
              </div>
              <div class="status-item info">
                <fa-icon [icon]="faInfoCircle"></fa-icon>
                <span>Info</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Code Examples -->
      <section class="demo-section">
        <h3>Implementation Examples</h3>
        <div class="code-examples">
          <div class="code-example">
            <h4>1. Import the Icon</h4>
            <pre><code>import &#123; faUser &#125; from '&#64;fortawesome/free-solid-svg-icons';</code></pre>
          </div>

          <div class="code-example">
            <h4>2. Add to Component</h4>
            <pre><code>export class MyComponent &#123;
  faUser = faUser;
  faHome = faHome;
  faCog = faCog;
&#125;</code></pre>
          </div>

          <div class="code-example">
            <h4>3. Basic Icon Usage</h4>
            <pre><code>&lt;fa-icon [icon]="faUser"&gt;&lt;/fa-icon&gt;
&lt;fa-icon [icon]="faHome" size="lg"&gt;&lt;/fa-icon&gt;
&lt;fa-icon [icon]="faCog" size="2x"&gt;&lt;/fa-icon&gt;</code></pre>
          </div>

          <div class="code-example">
            <h4>4. Styled Icons</h4>
            <pre><code>&lt;fa-icon 
  [icon]="faHeart" 
  size="2x" 
  style="color: #dc3545;"&gt;
&lt;/fa-icon&gt;</code></pre>
          </div>

          <div class="code-example">
            <h4>5. Icons in Buttons</h4>
            <pre><code>&lt;ui-button 
  variant="filled" 
  [icon]="faPlus" 
  iconPosition="left"&gt;
  Add Item
&lt;/ui-button&gt;</code></pre>
          </div>

          <div class="code-example">
            <h4>6. Navigation with Icons</h4>
            <pre><code>&lt;nav class="nav-menu"&gt;
  &lt;a href="/home"&gt;
    &lt;fa-icon [icon]="faHome"&gt;&lt;/fa-icon&gt; Home
  &lt;/a&gt;
  &lt;a href="/profile"&gt;
    &lt;fa-icon [icon]="faUser"&gt;&lt;/fa-icon&gt; Profile
  &lt;/a&gt;
&lt;/nav&gt;</code></pre>
          </div>

          <div class="code-example">
            <h4>7. Status Messages</h4>
            <pre><code>&lt;div class="status-success"&gt;
  &lt;fa-icon [icon]="faCheckCircle"&gt;&lt;/fa-icon&gt;
  Operation completed successfully!
&lt;/div&gt;

&lt;div class="status-error"&gt;
  &lt;fa-icon [icon]="faTimesCircle"&gt;&lt;/fa-icon&gt;
  Something went wrong.
&lt;/div&gt;</code></pre>
          </div>

          <div class="code-example">
            <h4>8. Loading States</h4>
            <pre><code>&lt;div class="loading-container"&gt;
  &lt;fa-icon [icon]="faSpinner"&gt;&lt;/fa-icon&gt;
  Loading...
&lt;/div&gt;

&lt;ui-button 
  [disabled]="isLoading" 
  [icon]="isLoading ? faSpinner : faSave"&gt;
  &#123;&#123; isLoading ? 'Saving...' : 'Save' &#125;&#125;
&lt;/ui-button&gt;</code></pre>
          </div>
        </div>
      </section>

      <!-- Best Practices -->
      <section class="demo-section">
        <h3>Best Practices</h3>
        <div class="best-practices">
          <div class="practice-item">
            <fa-icon [icon]="faCheckCircle" class="practice-icon success"></fa-icon>
            <div class="practice-content">
              <h4>Import Only What You Need</h4>
              <p>Only import the specific icons you're using to keep bundle size small.</p>
              <code>import &#123; faUser, faHome &#125; from '&#64;fortawesome/free-solid-svg-icons';</code>
            </div>
          </div>

          <div class="practice-item">
            <fa-icon [icon]="faCheckCircle" class="practice-icon success"></fa-icon>
            <div class="practice-content">
              <h4>Use Semantic Naming</h4>
              <p>Choose icons that clearly represent their function or meaning.</p>
              <code>faTrash for delete, faEdit for edit, faPlus for add</code>
            </div>
          </div>

          <div class="practice-item">
            <fa-icon [icon]="faCheckCircle" class="practice-icon success"></fa-icon>
            <div class="practice-content">
              <h4>Consistent Sizing</h4>
              <p>Use consistent icon sizes throughout your application.</p>
              <code>size="sm" for inline text, size="lg" for buttons</code>
            </div>
          </div>

          <div class="practice-item">
            <fa-icon [icon]="faExclamationTriangle" class="practice-icon warning"></fa-icon>
            <div class="practice-content">
              <h4>Accessibility</h4>
              <p>Add aria-labels for screen readers when icons convey important information.</p>
              <code>&lt;fa-icon [icon]="faUser" aria-label="User profile"&gt;&lt;/fa-icon&gt;</code>
            </div>
          </div>
        </div>
      </section>

      <!-- Available Icon Reference -->
      <section class="demo-section">
        <h3>Quick Reference</h3>
        <div class="reference-grid">
          <div class="reference-category">
            <h4>Actions</h4>
            <div class="reference-list">
              <code>faPlus</code> - Add/Create
              <code>faEdit</code> - Edit/Modify  
              <code>faTrash</code> - Delete/Remove
              <code>faSave</code> - Save/Confirm
              <code>faCancel</code> - Cancel/Dismiss
              <code>faRefresh</code> - Reload/Update
            </div>
          </div>

          <div class="reference-category">
            <h4>Navigation</h4>
            <div class="reference-list">
              <code>faHome</code> - Home page
              <code>faArrowLeft</code> - Go back
              <code>faArrowRight</code> - Go forward
              <code>faChevronUp</code> - Expand up
              <code>faChevronDown</code> - Expand down
              <code>faBars</code> - Menu toggle
            </div>
          </div>

          <div class="reference-category">
            <h4>Status</h4>
            <div class="reference-list">
              <code>faCheckCircle</code> - Success
              <code>faTimesCircle</code> - Error
              <code>faExclamationTriangle</code> - Warning
              <code>faInfoCircle</code> - Information
              <code>faSpinner</code> - Loading
            </div>
          </div>

          <div class="reference-category">
            <h4>User Interface</h4>
            <div class="reference-list">
              <code>faUser</code> - User/Profile
              <code>faCog</code> - Settings
              <code>faSearch</code> - Search
              <code>faEye</code> - View/Show
              <code>faEyeSlash</code> - Hide
              <code>faDownload</code> - Download
            </div>
          </div>
        </div>
      </section>

      <!-- Interactive Demo -->
      <section class="demo-section">
        <h3>Interactive Demo</h3>
        <div class="interactive-buttons">
          <ui-button 
            variant="filled" 
            [icon]="faRefresh" 
            iconPosition="left"
            (clicked)="refreshDemo()">
            Refresh Demo
          </ui-button>
          <ui-button 
            variant="tonal" 
            [icon]="faDownload" 
            iconPosition="left"
            (clicked)="downloadDemo()">
            Download Examples
          </ui-button>
          <ui-button 
            variant="outlined" 
            [icon]="faGithub" 
            iconPosition="left"
            (clicked)="viewSource()">
            View Source
          </ui-button>
        </div>
        
        @if (lastAction) {
          <div class="action-feedback">
            <fa-icon [icon]="faInfoCircle"></fa-icon>
            <span>{{ lastAction }}</span>
          </div>
        }
      </section>
    </div>
  `,
  styleUrl: './fontawesome-demo.component.scss'
})
export class FontAwesomeDemoComponent {
  lastAction: string = '';
  isLoading: boolean = false;

  // Export icons for template use
  faInfoCircle = faInfoCircle;
  faUser = faUser;
  faHome = faHome;
  faCog = faCog;
  faSearch = faSearch;
  faPlus = faPlus;
  faEdit = faEdit;
  faTrash = faTrash;
  faSave = faSave;
  faCancel = faCancel;
  faCheck = faCheck;
  faTimes = faTimes;
  faArrowLeft = faArrowLeft;
  faArrowRight = faArrowRight;
  faChevronLeft = faChevronLeft;
  faChevronRight = faChevronRight;
  faChevronUp = faChevronUp;
  faChevronDown = faChevronDown;
  faBars = faBars;
  faEllipsisV = faEllipsisV;
  faEye = faEye;
  faEyeSlash = faEyeSlash;
  faDownload = faDownload;
  faUpload = faUpload;
  faRefresh = faRefresh;
  faSpinner = faSpinner;
  faExclamationTriangle = faExclamationTriangle;
  faCheckCircle = faCheckCircle;
  faTimesCircle = faTimesCircle;
  faEnvelope = faEnvelope;

  // Regular icons
  faHeart = faHeart;
  faBookmark = faBookmark;
  faComment = faComment;
  faThumbsUp = faThumbsUp;

  // Brand icons
  faGithub = faGithub;
  faTwitter = faTwitter;
  faLinkedin = faLinkedin;
  faGoogle = faGoogle;

  refreshDemo(): void {
    this.lastAction = 'Demo refreshed - all selections cleared';
    console.log('Demo refreshed');
  }

  downloadDemo(): void {
    this.lastAction = 'Demo download initiated (simulated)';
    console.log('Download demo');
  }

  viewSource(): void {
    this.lastAction = 'Opening source code (simulated)';
    console.log('View source');
  }
}