import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  faUser, faHome, faCog, faEnvelope, faDownload, faShare, faFileExport,
  faChartBar, faChartLine, faFileAlt, faShieldAlt, faDatabase, faTrash,
  faStar, faBolt, faInfoCircle, faExclamationTriangle, faFolder, faCirclePlus,
  faFolderOpen, faEdit, faSave, faTachometerAlt, faProjectDiagram, faPlayCircle,
  faCheckCircle, faArchive, faCalendarWeek, faCalendarAlt, faCalendar, faSlidersH,
  faPalette, faBell, faQuestionCircle, faSignOutAlt, faBox, faConciergeBell,
  faCircle, faRefresh, faToggleOn
} from '@fortawesome/free-solid-svg-icons';
import { faAngular, faGithub } from '@fortawesome/free-brands-svg-icons';
import { MenuItemComponent } from '../../../../../ui-essentials/src/lib/components/navigation/menu/menu-item.component';
import { MenuContainerComponent } from '../../../../../ui-essentials/src/lib/components/navigation/menu/menu-container.component';
import { MenuSubmenuComponent } from '../../../../../ui-essentials/src/lib/components/navigation/menu/menu-submenu.component';
import { MenuItemData } from '../../../../../ui-essentials/src/lib/components/navigation/menu/menu-item.component';

@Component({
  selector: 'ui-menu-demo',
  standalone: true,
  imports: [
    CommonModule,
    MenuItemComponent,
    MenuContainerComponent,
    MenuSubmenuComponent
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="menu-demo">
      <h2>Menu Component Showcase</h2>
      
      <!-- Basic Menu Items -->
      <section class="demo-section">
        <h3>Basic Menu Items</h3>
        
        <div class="demo-grid">
          <div class="demo-item">
            <h4>Text Only - Different Sizes</h4>
            <ui-menu-container elevation="sm" spacing="sm" [rounded]="true">
              <ui-menu-item 
                [data]="{ label: 'Small Menu Item' }"
                size="sm"
                (itemClick)="handleMenuClick('small item', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'Medium Menu Item' }"
                size="md"
                (itemClick)="handleMenuClick('medium item', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'Large Menu Item' }"
                size="lg"
                (itemClick)="handleMenuClick('large item', $event)"
              />
            </ui-menu-container>
          </div>
          
          <div class="demo-item">
            <h4>Menu States</h4>
            <ui-menu-container elevation="sm" spacing="sm" [rounded]="true">
              <ui-menu-item 
                [data]="{ label: 'Normal Item', active: false }"
                (itemClick)="handleMenuClick('normal', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'Active Item', active: true }"
                (itemClick)="handleMenuClick('active', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'Disabled Item', disabled: true }"
                (itemClick)="handleMenuClick('disabled', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'With Badge', badge: '3' }"
                (itemClick)="handleMenuClick('badge', $event)"
              />
            </ui-menu-container>
          </div>
        </div>
      </section>

      <!-- Icons and Variants -->
      <section class="demo-section">
        <h3>Icons and Variants</h3>
        
        <div class="demo-grid">
          <div class="demo-item">
            <h4>Left Icons</h4>
            <ui-menu-container elevation="sm" spacing="sm" [rounded]="true">
              <ui-menu-item 
                [data]="{ label: 'Home', icon: faUser }"
                iconPosition="left" 
                (itemClick)="handleMenuClick('home', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'Settings', icon: faCog }"
                iconPosition="left"
                (itemClick)="handleMenuClick('settings', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'Profile', icon: faUser }"
                iconPosition="left"
                (itemClick)="handleMenuClick('profile', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'Messages', icon: faEnvelope, badge: '12' }"
                iconPosition="left"
                (itemClick)="handleMenuClick('messages', $event)"
              />
            </ui-menu-container>
          </div>
          
          <div class="demo-item">
            <h4>Right Icons</h4>
            <ui-menu-container elevation="sm" spacing="sm" [rounded]="true">
              <ui-menu-item 
                [data]="{ label: 'Download', icon: faDownload }"
                iconPosition="right"
                (itemClick)="handleMenuClick('download', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'Share', icon: faShare }"
                iconPosition="right"
                (itemClick)="handleMenuClick('share', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'Export', icon: faFileExport }"
                iconPosition="right"
                (itemClick)="handleMenuClick('export', $event)"
              />
            </ui-menu-container>
          </div>
        </div>
      </section>

      <!-- Circular Icons -->
      <section class="demo-section">
        <h3>Circular Icons</h3>
        
        <div class="demo-grid">
          <div class="demo-item">
            <h4>Circle Icons - Left</h4>
            <ui-menu-container elevation="md" spacing="md" [rounded]="true">
              <ui-menu-item 
                [data]="{ label: 'Dashboard', icon: faChartBar, iconCircle: true }"
                iconPosition="left"
                variant="primary"
                (itemClick)="handleMenuClick('dashboard', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'Analytics', icon: faChartLine, iconCircle: true }"
                iconPosition="left"
                variant="secondary"
                (itemClick)="handleMenuClick('analytics', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'Reports', icon: faFileAlt, iconCircle: true }"
                iconPosition="left"
                (itemClick)="handleMenuClick('reports', $event)"
              />
            </ui-menu-container>
          </div>
          
          <div class="demo-item">
            <h4>Circle Icons - Right</h4>
            <ui-menu-container elevation="md" spacing="md" [rounded]="true">
              <ui-menu-item 
                [data]="{ label: 'Security', icon: faShieldAlt, iconCircle: true }"
                iconPosition="right"
                variant="primary"
                (itemClick)="handleMenuClick('security', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'Backup', icon: faDatabase, iconCircle: true }"
                iconPosition="right"
                variant="secondary"
                (itemClick)="handleMenuClick('backup', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'Delete', icon: faTrash, iconCircle: true }"
                iconPosition="right"
                variant="danger"
                (itemClick)="handleMenuClick('delete', $event)"
              />
            </ui-menu-container>
          </div>
        </div>
      </section>

      <!-- Menu Variants -->
      <section class="demo-section">
        <h3>Menu Variants</h3>
        
        <div class="demo-grid">
          <div class="demo-item">
            <h4>Color Variants</h4>
            <ui-menu-container elevation="sm" spacing="sm" [rounded]="true">
              <ui-menu-item 
                [data]="{ label: 'Default Action', icon: faStar }"
                variant="default"
                iconPosition="left"
                (itemClick)="handleMenuClick('default action', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'Primary Action', icon: faBolt }"
                variant="primary"
                iconPosition="left"
                (itemClick)="handleMenuClick('primary action', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'Secondary Action', icon: faInfoCircle }"
                variant="secondary"
                iconPosition="left"
                (itemClick)="handleMenuClick('secondary action', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'Danger Action', icon: faExclamationTriangle }"
                variant="danger"
                iconPosition="left"
                (itemClick)="handleMenuClick('danger action', $event)"
              />
            </ui-menu-container>
          </div>
          
          <div class="demo-item">
            <h4>With Dividers</h4>
            <ui-menu-container elevation="sm" spacing="sm" [rounded]="true">
              <ui-menu-item 
                [data]="{ label: 'File Operations', icon: faFolder }"
                iconPosition="left"
                [showDivider]="true"
                (itemClick)="handleMenuClick('file ops', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'New File', icon: faCirclePlus }"
                iconPosition="left"
                (itemClick)="handleMenuClick('new file', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'Open File', icon: faFolderOpen }"
                iconPosition="left"
                [showDivider]="true"
                (itemClick)="handleMenuClick('open file', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'Edit Operations', icon: faEdit }"
                iconPosition="left"
                (itemClick)="handleMenuClick('edit ops', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'Save', icon: faSave }"
                iconPosition="left"
                (itemClick)="handleMenuClick('save', $event)"
              />
            </ui-menu-container>
          </div>
        </div>
      </section>

      <!-- Submenu Examples -->
      <section class="demo-section">
        <h3>Collapsible Submenus</h3>
        
        <div class="demo-grid">
          <div class="demo-item">
            <h4>Navigation Menu</h4>
            <ui-menu-container elevation="md" spacing="sm" [rounded]="true">
              <ui-menu-item 
                [data]="{ label: 'Dashboard', icon: faTachometerAlt }"
                iconPosition="left"
                (itemClick)="handleMenuClick('dashboard', $event)"
              />
              
              <ui-menu-submenu 
                [parentItem]="{ label: 'Projects', icon: faProjectDiagram, hasSubmenu: true }"
                iconPosition="left"
                [isOpen]="submenuStates['projects']"
                (submenuToggled)="toggleSubmenu('projects', $event)"
                (parentItemClick)="handleMenuClick('projects parent', $event)"
              >
                <ui-menu-item 
                  [data]="{ label: 'Active Projects', icon: faPlayCircle }"
                  iconPosition="left"
                  size="sm"
                  (itemClick)="handleMenuClick('active projects', $event)"
                />
                <ui-menu-item 
                  [data]="{ label: 'Completed Projects', icon: faCheckCircle }"
                  iconPosition="left"
                  size="sm"
                  (itemClick)="handleMenuClick('completed projects', $event)"
                />
                <ui-menu-item 
                  [data]="{ label: 'Archived Projects', icon: faArchive }"
                  iconPosition="left"
                  size="sm"
                  (itemClick)="handleMenuClick('archived projects', $event)"
                />
              </ui-menu-submenu>
              
              <ui-menu-submenu 
                [parentItem]="{ label: 'Reports', icon: faChartBar, hasSubmenu: true }"
                iconPosition="left"
                [isOpen]="submenuStates['reports']"
                (submenuToggled)="toggleSubmenu('reports', $event)"
                (parentItemClick)="handleMenuClick('reports parent', $event)"
              >
                <ui-menu-item 
                  [data]="{ label: 'Weekly Report', icon: faCalendarWeek }"
                  iconPosition="left"
                  size="sm"
                  (itemClick)="handleMenuClick('weekly report', $event)"
                />
                <ui-menu-item 
                  [data]="{ label: 'Monthly Report', icon: faCalendarAlt }"
                  iconPosition="left"
                  size="sm"
                  (itemClick)="handleMenuClick('monthly report', $event)"
                />
                <ui-menu-item 
                  [data]="{ label: 'Annual Report', icon: faCalendar }"
                  iconPosition="left"
                  size="sm"
                  (itemClick)="handleMenuClick('annual report', $event)"
                />
              </ui-menu-submenu>
              
              <ui-menu-item 
                [data]="{ label: 'Settings', icon: faCog }"
                iconPosition="left"
                (itemClick)="handleMenuClick('settings', $event)"
              />
            </ui-menu-container>
          </div>
          
          <div class="demo-item">
            <h4>User Menu</h4>
            <ui-menu-container elevation="md" spacing="sm" [rounded]="true">
              <ui-menu-item 
                [data]="{ label: 'My Profile', icon: faUser }"
                iconPosition="left"
                (itemClick)="handleMenuClick('profile', $event)"
              />
              
              <ui-menu-submenu 
                [parentItem]="{ label: 'Preferences', icon: faSlidersH, hasSubmenu: true }"
                iconPosition="left"
                [isOpen]="submenuStates['preferences']"
                (submenuToggled)="toggleSubmenu('preferences', $event)"
                (parentItemClick)="handleMenuClick('preferences parent', $event)"
              >
                <ui-menu-item 
                  [data]="{ label: 'Theme Settings', icon: faPalette }"
                  iconPosition="left"
                  size="sm"
                  (itemClick)="handleMenuClick('theme', $event)"
                />
                <ui-menu-item 
                  [data]="{ label: 'Notifications', icon: faBell }"
                  iconPosition="left"
                  size="sm"
                  [showDivider]="true"
                  (itemClick)="handleMenuClick('notifications', $event)"
                />
                <ui-menu-item 
                  [data]="{ label: 'Privacy', icon: faShieldAlt }"
                  iconPosition="left"
                  size="sm"
                  (itemClick)="handleMenuClick('privacy', $event)"
                />
              </ui-menu-submenu>
              
              <ui-menu-item 
                [data]="{ label: 'Help & Support', icon: faQuestionCircle }"
                iconPosition="left"
                [showDivider]="true"
                (itemClick)="handleMenuClick('help', $event)"
              />
              
              <ui-menu-item 
                [data]="{ label: 'Sign Out', icon: faSignOutAlt }"
                iconPosition="left"
                variant="danger"
                (itemClick)="handleMenuClick('sign out', $event)"
              />
            </ui-menu-container>
          </div>
        </div>
      </section>

      <!-- Horizontal Menu -->
      <section class="demo-section">
        <h3>Horizontal Menu</h3>
        
        <div class="demo-single">
          <h4>Navigation Bar Style</h4>
          <ui-menu-container 
            elevation="sm" 
            spacing="md" 
            orientation="horizontal"
            [rounded]="true"
          >
            <ui-menu-item 
              [data]="{ label: 'Home', icon: faHome }"
              iconPosition="left"
              size="sm"
              (itemClick)="handleMenuClick('home nav', $event)"
            />
            <ui-menu-item 
              [data]="{ label: 'Products', icon: faBox }"
              iconPosition="left"
              size="sm"
              (itemClick)="handleMenuClick('products nav', $event)"
            />
            <ui-menu-item 
              [data]="{ label: 'Services', icon: faConciergeBell }"
              iconPosition="left"
              size="sm"
              (itemClick)="handleMenuClick('services nav', $event)"
            />
            <ui-menu-item 
              [data]="{ label: 'About', icon: faInfoCircle }"
              iconPosition="left"
              size="sm"
              (itemClick)="handleMenuClick('about nav', $event)"
            />
            <ui-menu-item 
              [data]="{ label: 'Contact', icon: faEnvelope }"
              iconPosition="left"
              size="sm"
              variant="primary"
              (itemClick)="handleMenuClick('contact nav', $event)"
            />
          </ui-menu-container>
        </div>
      </section>

      <!-- Dense and Scrollable -->
      <section class="demo-section">
        <h3>Layout Options</h3>
        
        <div class="demo-grid">
          <div class="demo-item">
            <h4>Dense Menu</h4>
            <ui-menu-container elevation="sm" spacing="xs" [rounded]="true" [dense]="true">
              <ui-menu-item 
                [data]="{ label: 'Compact Item 1', icon: faCircle }"
                iconPosition="left"
                size="sm"
                [dense]="true"
                (itemClick)="handleMenuClick('compact 1', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'Compact Item 2', icon: faCircle }"
                iconPosition="left"
                size="sm"
                [dense]="true"
                (itemClick)="handleMenuClick('compact 2', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'Compact Item 3', icon: faCircle }"
                iconPosition="left"
                size="sm"
                [dense]="true"
                (itemClick)="handleMenuClick('compact 3', $event)"
              />
              <ui-menu-item 
                [data]="{ label: 'Compact Item 4', icon: faCircle }"
                iconPosition="left"
                size="sm"
                [dense]="true"
                (itemClick)="handleMenuClick('compact 4', $event)"
              />
            </ui-menu-container>
          </div>
          
          <div class="demo-item">
            <h4>Scrollable Menu</h4>
            <ui-menu-container 
              elevation="md" 
              spacing="sm" 
              [rounded]="true"
              [scrollable]="true"
              maxHeight="200px"
            >
              @for (item of scrollableItems; track item.id) {
                <ui-menu-item 
                  [data]="item"
                  iconPosition="left"
                  size="md"
                  (itemClick)="handleMenuClick('scrollable ' + item.id, item)"
                />
              }
            </ui-menu-container>
          </div>
        </div>
      </section>

      <!-- Menu with Links -->
      <section class="demo-section">
        <h3>Menu with Links</h3>
        
        <div class="demo-single">
          <h4>External Links</h4>
          <ui-menu-container elevation="sm" spacing="sm" [rounded]="true">
            <ui-menu-item 
              [data]="{ 
                label: 'Angular Documentation', 
                icon: faAngular,
                href: 'https://angular.io',
                target: '_blank'
              }"
              iconPosition="left"
              (itemClick)="handleMenuClick('angular docs', $event)"
            />
            <ui-menu-item 
              [data]="{ 
                label: 'GitHub Repository', 
                icon: faGithub,
                href: 'https://github.com',
                target: '_blank'
              }"
              iconPosition="left"
              (itemClick)="handleMenuClick('github', $event)"
            />
            <ui-menu-item 
              [data]="{ 
                label: 'Material Design', 
                icon: faPalette,
                href: 'https://material.io',
                target: '_blank'
              }"
              iconPosition="left"
              (itemClick)="handleMenuClick('material', $event)"
            />
          </ui-menu-container>
        </div>
      </section>

      <!-- Usage Examples -->
      <section class="demo-section">
        <h3>Usage Examples</h3>
        <div class="usage-examples">
          <h4>Basic Menu Item:</h4>
          <pre><code>{{ '<' }}ui-menu-item 
  [data]="{{ '{' }} label: 'Menu Item', icon: faHome {{ '}' }}"
  iconPosition="left"
  variant="primary"
  (itemClick)="handleClick($event)"{{ '>' }}
{{ '<' }}/ui-menu-item{{ '>' }}</code></pre>
          
          <h4>Menu with Submenu:</h4>
          <pre><code>{{ '<' }}ui-menu-submenu 
  [parentItem]="{{ '{' }} label: 'Parent', hasSubmenu: true {{ '}' }}"
  [isOpen]="submenuOpen"
  (submenuToggled)="toggleSubmenu($event)"{{ '>' }}
  
  {{ '<' }}ui-menu-item [data]="childItem1"{{ '>' }}{{ '<' }}/ui-menu-item{{ '>' }}
  {{ '<' }}ui-menu-item [data]="childItem2"{{ '>' }}{{ '<' }}/ui-menu-item{{ '>' }}
{{ '<' }}/ui-menu-submenu{{ '>' }}</code></pre>

          <h4>Menu Container:</h4>
          <pre><code>{{ '<' }}ui-menu-container 
  elevation="md"
  spacing="sm"
  [rounded]="true"
  [scrollable]="true"
  maxHeight="300px"{{ '>' }}
  
  {{ '<' }}!-- Menu items here --{{ '>' }}
{{ '<' }}/ui-menu-container{{ '>' }}</code></pre>
        </div>
      </section>

      <!-- Interactive Example -->
      <section class="demo-section">
        <h3>Interactive Actions</h3>
        <div class="interactive-demo">
          <ui-menu-container elevation="sm" spacing="sm" [rounded]="true">
            <ui-menu-item 
              [data]="{ label: 'Show Alert', icon: faBell }"
              iconPosition="left"
              variant="primary"
              (itemClick)="showAlert('Menu Alert!')"
            />
            <ui-menu-item 
              [data]="{ label: 'Toggle Demo State', icon: faToggleOn }"
              iconPosition="left"
              (itemClick)="toggleDemoState()"
            />
            <ui-menu-item 
              [data]="{ label: 'Reset Demo', icon: faRefresh }"
              iconPosition="left"
              variant="secondary"
              (itemClick)="resetDemo()"
            />
          </ui-menu-container>
          
          @if (lastClickedItem) {
            <div class="demo-feedback">
              <strong>Last clicked:</strong> {{ lastClickedItem }}
            </div>
          }
        </div>
      </section>
    </div>
  `,
  styleUrls: ['./menu-demo.component.scss']
})
export class MenuDemoComponent {
  // FontAwesome icons
  faUser = faUser;
  faHome = faHome;
  faCog = faCog;
  faEnvelope = faEnvelope;
  faDownload = faDownload;
  faShare = faShare;
  faFileExport = faFileExport;
  faChartBar = faChartBar;
  faChartLine = faChartLine;
  faFileAlt = faFileAlt;
  faShieldAlt = faShieldAlt;
  faDatabase = faDatabase;
  faTrash = faTrash;
  faStar = faStar;
  faBolt = faBolt;
  faInfoCircle = faInfoCircle;
  faExclamationTriangle = faExclamationTriangle;
  faFolder = faFolder;
  faCirclePlus = faCirclePlus;
  faFolderOpen = faFolderOpen;
  faEdit = faEdit;
  faSave = faSave;
  faTachometerAlt = faTachometerAlt;
  faProjectDiagram = faProjectDiagram;
  faPlayCircle = faPlayCircle;
  faCheckCircle = faCheckCircle;
  faArchive = faArchive;
  faCalendarWeek = faCalendarWeek;
  faCalendarAlt = faCalendarAlt;
  faCalendar = faCalendar;
  faSlidersH = faSlidersH;
  faPalette = faPalette;
  faBell = faBell;
  faQuestionCircle = faQuestionCircle;
  faSignOutAlt = faSignOutAlt;
  faBox = faBox;
  faConciergeBell = faConciergeBell;
  faCircle = faCircle;
  faRefresh = faRefresh;
  faToggleOn = faToggleOn;
  faAngular = faAngular;
  faGithub = faGithub;

  lastClickedItem: string = '';
  submenuStates: Record<string, boolean> = {
    projects: false,
    reports: false,
    preferences: false
  };

  scrollableItems: MenuItemData[] = Array.from({ length: 15 }, (_, i) => ({
    id: `item-${i + 1}`,
    label: `Scrollable Item ${i + 1}`,
    icon: this.faCircle
  }));

  handleMenuClick(action: string, item: MenuItemData): void {
    this.lastClickedItem = `${action} (${item.label})`;
    console.log(`Menu clicked: ${action}`, item);
  }

  toggleSubmenu(key: string, event: { item: MenuItemData; isOpen: boolean }): void {
    this.submenuStates[key] = event.isOpen;
    console.log(`Submenu ${key} ${event.isOpen ? 'opened' : 'closed'}`);
  }

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

  toggleDemoState(): void {
    // Toggle all submenus
    Object.keys(this.submenuStates).forEach(key => {
      this.submenuStates[key] = !this.submenuStates[key];
    });
    this.lastClickedItem = 'Demo state toggled';
  }

  resetDemo(): void {
    this.lastClickedItem = '';
    this.submenuStates = {
      projects: false,
      reports: false,
      preferences: false
    };
    console.log('Demo reset');
  }
}