import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { DashboardShellComponent } from '../../../../../ui-essentials/src/lib/components/layout/dashboard-shell/dashboard-shell.component';

@Component({
  selector: 'ui-dashboard-shell-demo',
  standalone: true,
  imports: [CommonModule, FormsModule, DashboardShellComponent],
  template: `
    <div class="demo-container">
      <h2>Dashboard Shell Demo</h2>
      
      <!-- Variant Demonstrations -->
      <section class="demo-section">
        <h3>Visual Variants</h3>
        <div class="demo-row">
          @for (variant of variants; track variant) {
            <div class="demo-card">
              <h4>{{ variant | titlecase }}</h4>
              <div class="dashboard-demo-container">
                <ui-dashboard-shell 
                  [variant]="variant" 
                  sidebarWidth="sm" 
                  headerHeight="sm"
                  footerVariant="minimal">
                  
                  <div slot="header">
                    <h4>{{ variant | titlecase }} App</h4>
                  </div>
                  
                  <div slot="header-actions">
                    <span>🌙</span>
                    <span>🔔</span>
                    <span>👤</span>
                  </div>
                  
                  <nav slot="sidebar">
                    <ul>
                      <li>🏠 Dashboard</li>
                      <li>📊 Analytics</li>
                      <li>⚙️ Settings</li>
                    </ul>
                  </nav>
                  
                  <nav slot="breadcrumbs">
                    <span>Home / Dashboard / {{ variant | titlecase }}</span>
                  </nav>
                  
                  <div slot="notifications">
                    <p>📢 Welcome to {{ variant }} variant!</p>
                  </div>
                  
                  <div class="demo-content">
                    <h4>Main Content</h4>
                    <p>This is the main content area for {{ variant }} dashboard variant.</p>
                  </div>
                  
                  <div slot="footer">
                    <span>© 2024 Dashboard App</span>
                  </div>
                </ui-dashboard-shell>
              </div>
            </div>
          }
        </div>
      </section>
      
      <!-- Size Variants -->
      <section class="demo-section">
        <h3>Size Configurations</h3>
        <div class="demo-row">
          @for (config of sizeConfigs; track config.name) {
            <div class="demo-card">
              <h4>{{ config.name }}</h4>
              <div class="dashboard-demo-container">
                <ui-dashboard-shell 
                  [sidebarWidth]="config.sidebarWidth" 
                  [headerHeight]="config.headerHeight"
                  [footerVariant]="config.footerVariant">
                  
                  <div slot="header">
                    <h4>{{ config.name }} Dashboard</h4>
                  </div>
                  
                  <div slot="header-actions">
                    <span>🔍</span>
                    <span>📱</span>
                  </div>
                  
                  <nav slot="sidebar">
                    <h5>Navigation</h5>
                    <ul>
                      <li>📈 Overview</li>
                      <li>📋 Tasks</li>
                      <li>💼 Projects</li>
                      <li>👥 Team</li>
                    </ul>
                  </nav>
                  
                  <nav slot="breadcrumbs">
                    <span>Dashboard / {{ config.name }} Layout</span>
                  </nav>
                  
                  <div class="demo-content">
                    <h4>{{ config.name }} Content</h4>
                    <p>Sidebar: {{ config.sidebarWidth }}, Header: {{ config.headerHeight }}, Footer: {{ config.footerVariant }}</p>
                  </div>
                  
                  <div slot="footer">
                    <span>{{ config.name }} Footer</span>
                    <span>v1.0.0</span>
                  </div>
                </ui-dashboard-shell>
              </div>
            </div>
          }
        </div>
      </section>
      
      <!-- Layout Options -->
      <section class="demo-section">
        <h3>Layout Options</h3>
        <div class="demo-row">
          <div class="demo-card">
            <h4>No Footer</h4>
            <div class="dashboard-demo-container">
              <ui-dashboard-shell 
                [showFooter]="false"
                sidebarWidth="sm">
                
                <div slot="header">
                  <h4>Clean Dashboard</h4>
                </div>
                
                <div slot="header-actions">
                  <span>🎨</span>
                </div>
                
                <nav slot="sidebar">
                  <ul>
                    <li>🖼️ Gallery</li>
                    <li>🎵 Music</li>
                    <li>📝 Notes</li>
                  </ul>
                </nav>
                
                <div class="demo-content">
                  <h4>Clean Layout</h4>
                  <p>Dashboard without footer for cleaner appearance.</p>
                </div>
              </ui-dashboard-shell>
            </div>
          </div>
          
          <div class="demo-card">
            <h4>Minimal UI</h4>
            <div class="dashboard-demo-container">
              <ui-dashboard-shell 
                [showBreadcrumbs]="false"
                [showNotifications]="false"
                sidebarWidth="sm"
                footerVariant="minimal">
                
                <div slot="header">
                  <h4>Minimal App</h4>
                </div>
                
                <div slot="header-actions">
                  <span>⚡</span>
                </div>
                
                <nav slot="sidebar">
                  <ul>
                    <li>🚀 Launch</li>
                    <li>📊 Stats</li>
                  </ul>
                </nav>
                
                <div class="demo-content">
                  <h4>Minimal Interface</h4>
                  <p>Streamlined dashboard without breadcrumbs and notifications.</p>
                </div>
                
                <div slot="footer">
                  <span>Minimal</span>
                </div>
              </ui-dashboard-shell>
            </div>
          </div>
        </div>
      </section>
      
      <!-- Interactive Example -->
      <section class="demo-section">
        <h3>Interactive Dashboard</h3>
        <div class="demo-controls">
          <label>
            Variant:
            <select [(ngModel)]="interactiveVariant">
              <option value="default">Default</option>
              <option value="bordered">Bordered</option>
              <option value="elevated">Elevated</option>
            </select>
          </label>
          
          <label>
            Sidebar Width:
            <select [(ngModel)]="interactiveSidebarWidth">
              <option value="sm">Small</option>
              <option value="md">Medium</option>
              <option value="lg">Large</option>
            </select>
          </label>
          
          <label>
            Header Height:
            <select [(ngModel)]="interactiveHeaderHeight">
              <option value="sm">Small</option>
              <option value="md">Medium</option>
              <option value="lg">Large</option>
            </select>
          </label>
          
          <label>
            Footer Variant:
            <select [(ngModel)]="interactiveFooterVariant">
              <option value="minimal">Minimal</option>
              <option value="standard">Standard</option>
              <option value="detailed">Detailed</option>
            </select>
          </label>
          
          <label>
            <input type="checkbox" [(ngModel)]="interactiveSidebarCollapsed">
            Sidebar Collapsed
          </label>
          
          <label>
            <input type="checkbox" [(ngModel)]="interactiveMobileMenuOpen">
            Mobile Menu Open
          </label>
          
          <label>
            <input type="checkbox" [(ngModel)]="interactiveShowFooter">
            Show Footer
          </label>
          
          <label>
            <input type="checkbox" [(ngModel)]="interactiveShowBreadcrumbs">
            Show Breadcrumbs
          </label>
          
          <label>
            <input type="checkbox" [(ngModel)]="interactiveShowNotifications">
            Show Notifications
          </label>
        </div>
        
        <div class="dashboard-demo-container dashboard-demo-container--interactive">
          <ui-dashboard-shell 
            [variant]="interactiveVariant"
            [sidebarWidth]="interactiveSidebarWidth"
            [headerHeight]="interactiveHeaderHeight"
            [footerVariant]="interactiveFooterVariant"
            [sidebarCollapsed]="interactiveSidebarCollapsed"
            [mobileMenuOpen]="interactiveMobileMenuOpen"
            [showFooter]="interactiveShowFooter"
            [showBreadcrumbs]="interactiveShowBreadcrumbs"
            [showNotifications]="interactiveShowNotifications"
            (sidebarToggled)="handleSidebarToggle($event)"
            (mobileMenuToggled)="handleMobileMenuToggle($event)"
            (mobileBackdropClicked)="handleMobileBackdropClick()">
            
            <div slot="header">
              <h4>Interactive Dashboard</h4>
            </div>
            
            <div slot="header-actions">
              <button (click)="toggleTheme()" class="demo-button-sm">
                {{ isDarkTheme ? '☀️' : '🌙' }}
              </button>
              <button (click)="showNotification()" class="demo-button-sm">
                🔔 {{ notificationCount }}
              </button>
              <button (click)="toggleSidebar()" class="demo-button-sm">
                {{ interactiveSidebarCollapsed ? '➡️' : '⬅️' }}
              </button>
            </div>
            
            <nav slot="sidebar">
              <h5>Main Navigation</h5>
              <ul>
                <li (click)="setActiveSection('dashboard')">
                  <span [class.active]="activeSection === 'dashboard'">🏠 Dashboard</span>
                </li>
                <li (click)="setActiveSection('analytics')">
                  <span [class.active]="activeSection === 'analytics'">📊 Analytics</span>
                </li>
                <li (click)="setActiveSection('users')">
                  <span [class.active]="activeSection === 'users'">👥 Users</span>
                </li>
                <li (click)="setActiveSection('projects')">
                  <span [class.active]="activeSection === 'projects'">💼 Projects</span>
                </li>
                <li (click)="setActiveSection('settings')">
                  <span [class.active]="activeSection === 'settings'">⚙️ Settings</span>
                </li>
              </ul>
              
              @if (!interactiveSidebarCollapsed) {
                <div class="sidebar-section">
                  <h6>Quick Actions</h6>
                  <button (click)="performAction('new')" class="demo-button">New Project</button>
                  <button (click)="performAction('export')" class="demo-button">Export Data</button>
                </div>
              }
            </nav>
            
            <nav slot="breadcrumbs">
              <span>Home / {{ activeSection | titlecase }} / {{ interactiveVariant | titlecase }}</span>
            </nav>
            
            <div slot="notifications">
              @if (hasNewNotifications) {
                <div class="notification-item">
                  <span>🎉 New feature available! Click to explore the {{ activeSection }} section.</span>
                  <button (click)="dismissNotification()" class="dismiss-btn">×</button>
                </div>
              }
            </div>
            
            <div class="demo-content">
              <h4>{{ activeSection | titlecase }} Section</h4>
              <p>Current configuration:</p>
              <ul>
                <li><strong>Variant:</strong> {{ interactiveVariant }}</li>
                <li><strong>Sidebar Width:</strong> {{ interactiveSidebarWidth }}</li>
                <li><strong>Header Height:</strong> {{ interactiveHeaderHeight }}</li>
                <li><strong>Footer Variant:</strong> {{ interactiveFooterVariant }}</li>
                <li><strong>Sidebar Collapsed:</strong> {{ interactiveSidebarCollapsed ? 'Yes' : 'No' }}</li>
                <li><strong>Theme:</strong> {{ isDarkTheme ? 'Dark' : 'Light' }}</li>
              </ul>
              
              <div class="content-area">
                <h5>{{ activeSection | titlecase }} Content</h5>
                @switch (activeSection) {
                  @case ('dashboard') {
                    <p>📈 Welcome to your dashboard overview. Here you can see key metrics and quick actions.</p>
                    <div class="metric-cards">
                      <div class="metric-card">Total Users: 1,234</div>
                      <div class="metric-card">Active Projects: 42</div>
                      <div class="metric-card">Revenue: $12,345</div>
                    </div>
                  }
                  @case ('analytics') {
                    <p>📊 Analytics and reporting section. View detailed insights about your application usage.</p>
                    <div class="chart-placeholder">📈 Chart Placeholder</div>
                  }
                  @case ('users') {
                    <p>👥 User management section. Manage user accounts, permissions, and profiles.</p>
                    <div class="user-list">
                      <div class="user-item">John Doe - Admin</div>
                      <div class="user-item">Jane Smith - User</div>
                      <div class="user-item">Bob Johnson - Manager</div>
                    </div>
                  }
                  @case ('projects') {
                    <p>💼 Project management section. Track and manage your ongoing projects.</p>
                    <div class="project-list">
                      <div class="project-item">🚀 Website Redesign - In Progress</div>
                      <div class="project-item">📱 Mobile App - Planning</div>
                      <div class="project-item">🔧 API Integration - Completed</div>
                    </div>
                  }
                  @case ('settings') {
                    <p>⚙️ Application settings and configuration options.</p>
                    <div class="settings-groups">
                      <div class="setting-group">
                        <h6>Appearance</h6>
                        <label>
                          <input type="checkbox" [(ngModel)]="isDarkTheme">
                          Dark Theme
                        </label>
                      </div>
                      <div class="setting-group">
                        <h6>Notifications</h6>
                        <label>
                          <input type="checkbox" [(ngModel)]="emailNotifications">
                          Email Notifications
                        </label>
                      </div>
                    </div>
                  }
                  @default {
                    <p>Select a section from the sidebar to view its content.</p>
                  }
                }
              </div>
              
              <div class="action-buttons">
                <button (click)="performAction('save')" class="demo-button primary">Save Changes</button>
                <button (click)="performAction('cancel')" class="demo-button">Cancel</button>
                <button (click)="performAction('refresh')" class="demo-button">Refresh Data</button>
              </div>
            </div>
            
            <div slot="footer">
              @if (interactiveFooterVariant === 'detailed') {
                <div class="footer-detailed">
                  <div class="footer-section">
                    <span>© 2024 Interactive Dashboard</span>
                    <span>Version 1.2.3</span>
                  </div>
                  <div class="footer-section">
                    <span>Last Updated: {{ lastUpdated }}</span>
                    <span>Status: {{ connectionStatus }}</span>
                  </div>
                </div>
              } @else if (interactiveFooterVariant === 'standard') {
                <span>© 2024 Interactive Dashboard - v1.2.3</span>
                <span>Status: {{ connectionStatus }}</span>
              } @else {
                <span>© 2024 Dashboard</span>
              }
            </div>
          </ui-dashboard-shell>
        </div>
      </section>
      
      <!-- Usage Examples -->
      <section class="demo-section">
        <h3>Usage Information</h3>
        <div class="usage-info">
          <h4>Key Features:</h4>
          <ul>
            <li>🏗️ Complete application shell structure</li>
            <li>📱 Mobile-responsive with hamburger menu</li>
            <li>🎨 Multiple visual variants (default, bordered, elevated)</li>
            <li>📏 Configurable sizing for header, sidebar, and footer</li>
            <li>🧭 Integrated breadcrumbs navigation</li>
            <li>🔔 Notifications area with live region support</li>
            <li>♿ Full accessibility support with ARIA labels</li>
            <li>🎛️ Flexible content projection slots</li>
            <li>⚡ Event emitters for user interactions</li>
          </ul>
          
          <h4>Content Projection Slots:</h4>
          <ul>
            <li><code>slot="header"</code> - Header title and branding</li>
            <li><code>slot="header-actions"</code> - Theme switcher, notifications, user menu</li>
            <li><code>slot="sidebar"</code> - Main navigation content</li>
            <li><code>slot="breadcrumbs"</code> - Breadcrumb navigation</li>
            <li><code>slot="notifications"</code> - System notifications and alerts</li>
            <li><code>slot="footer"</code> - Footer content and links</li>
            <li>Default slot - Main page content</li>
          </ul>
        </div>
      </section>
    </div>
  `,
  styleUrl: './dashboard-shell-demo.component.scss'
})
export class DashboardShellDemoComponent {
  variants = ['default', 'bordered', 'elevated'] as const;
  
  sizeConfigs = [
    { name: 'Compact', sidebarWidth: 'sm' as const, headerHeight: 'sm' as const, footerVariant: 'minimal' as const },
    { name: 'Standard', sidebarWidth: 'md' as const, headerHeight: 'md' as const, footerVariant: 'standard' as const },
    { name: 'Spacious', sidebarWidth: 'lg' as const, headerHeight: 'lg' as const, footerVariant: 'detailed' as const }
  ];
  
  // Interactive demo properties
  interactiveVariant: 'default' | 'bordered' | 'elevated' = 'default';
  interactiveSidebarWidth: 'sm' | 'md' | 'lg' = 'md';
  interactiveHeaderHeight: 'sm' | 'md' | 'lg' = 'md';
  interactiveFooterVariant: 'minimal' | 'standard' | 'detailed' = 'standard';
  interactiveSidebarCollapsed = false;
  interactiveMobileMenuOpen = false;
  interactiveShowFooter = true;
  interactiveShowBreadcrumbs = true;
  interactiveShowNotifications = true;
  
  // Demo state
  activeSection = 'dashboard';
  isDarkTheme = false;
  notificationCount = 3;
  hasNewNotifications = true;
  emailNotifications = true;
  lastUpdated = new Date().toLocaleTimeString();
  connectionStatus = 'Connected';
  
  handleSidebarToggle(collapsed: boolean): void {
    this.interactiveSidebarCollapsed = collapsed;
    console.log('Sidebar toggled:', collapsed);
  }
  
  handleMobileMenuToggle(open: boolean): void {
    this.interactiveMobileMenuOpen = open;
    console.log('Mobile menu toggled:', open);
  }
  
  handleMobileBackdropClick(): void {
    this.interactiveMobileMenuOpen = false;
    console.log('Mobile backdrop clicked - closing menu');
  }
  
  toggleSidebar(): void {
    this.interactiveSidebarCollapsed = !this.interactiveSidebarCollapsed;
  }
  
  toggleTheme(): void {
    this.isDarkTheme = !this.isDarkTheme;
    console.log('Theme toggled:', this.isDarkTheme ? 'dark' : 'light');
  }
  
  showNotification(): void {
    this.notificationCount++;
    this.hasNewNotifications = true;
    console.log('New notification added');
  }
  
  dismissNotification(): void {
    this.hasNewNotifications = false;
    console.log('Notification dismissed');
  }
  
  setActiveSection(section: string): void {
    this.activeSection = section;
    this.lastUpdated = new Date().toLocaleTimeString();
    console.log('Active section changed to:', section);
  }
  
  performAction(action: string): void {
    console.log('Action performed:', action);
    this.lastUpdated = new Date().toLocaleTimeString();
    
    switch (action) {
      case 'save':
        this.connectionStatus = 'Saving...';
        setTimeout(() => {
          this.connectionStatus = 'Saved';
          setTimeout(() => this.connectionStatus = 'Connected', 2000);
        }, 1000);
        break;
      case 'refresh':
        this.connectionStatus = 'Refreshing...';
        setTimeout(() => this.connectionStatus = 'Connected', 1500);
        break;
      case 'new':
      case 'export':
      case 'cancel':
        // Handle other actions
        break;
    }
  }
}