import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { KanbanBoardComponent, KanbanColumn, KanbanItem, KanbanDragEvent } from 'ui-essentials';

@Component({
  selector: 'ui-kanban-board-demo',
  standalone: true,
  imports: [CommonModule, KanbanBoardComponent],
  template: `
    <div class="demo-container">
      <h2>Kanban Board Layout Demo</h2>
      
      <!-- Size Variants -->
      <section class="demo-section">
        <h3>Sizes</h3>
        <div class="demo-row">
          <div class="demo-item">
            <h4>Small</h4>
            <div style="height: 400px; width: 100%;">
              <ui-kanban-board 
                [columns]="basicColumns()" 
                size="sm" 
                title="Small Kanban Board"
                (itemMoved)="onItemMoved($event)"
                (itemClicked)="onItemClicked($event)">
              </ui-kanban-board>
            </div>
          </div>
          
          <div class="demo-item">
            <h4>Medium (Default)</h4>
            <div style="height: 400px; width: 100%;">
              <ui-kanban-board 
                [columns]="basicColumns()" 
                size="md" 
                title="Medium Kanban Board"
                (itemMoved)="onItemMoved($event)"
                (itemClicked)="onItemClicked($event)">
              </ui-kanban-board>
            </div>
          </div>
          
          <div class="demo-item">
            <h4>Large</h4>
            <div style="height: 400px; width: 100%;">
              <ui-kanban-board 
                [columns]="basicColumns()" 
                size="lg" 
                title="Large Kanban Board"
                (itemMoved)="onItemMoved($event)"
                (itemClicked)="onItemClicked($event)">
              </ui-kanban-board>
            </div>
          </div>
        </div>
      </section>
      
      <!-- Full Featured Example -->
      <section class="demo-section">
        <h3>Full Featured Kanban Board</h3>
        <div style="height: 600px; width: 100%;">
          <ui-kanban-board 
            [columns]="fullColumns()" 
            title="Project Management Board"
            subtitle="Drag and drop items between columns to update their status"
            size="md"
            (itemMoved)="onItemMoved($event)"
            (itemClicked)="onItemClicked($event)">
          </ui-kanban-board>
        </div>
      </section>
      
      <!-- States -->
      <section class="demo-section">
        <h3>States</h3>
        <div class="demo-row">
          <div class="demo-item">
            <h4>Disabled</h4>
            <div style="height: 300px; width: 100%;">
              <ui-kanban-board 
                [columns]="basicColumns()" 
                [disabled]="true" 
                title="Disabled Kanban Board">
              </ui-kanban-board>
            </div>
          </div>
          
          <div class="demo-item">
            <h4>Column with Limits</h4>
            <div style="height: 300px; width: 100%;">
              <ui-kanban-board 
                [columns]="limitedColumns()" 
                title="Limited Capacity Board"
                (itemMoved)="onItemMoved($event)">
              </ui-kanban-board>
            </div>
          </div>
        </div>
      </section>
      
      <!-- Interactive Example -->
      <section class="demo-section">
        <h3>Interactive Events</h3>
        <div style="height: 500px; width: 100%;">
          <ui-kanban-board 
            [columns]="interactiveColumns()" 
            title="Interactive Kanban Board"
            subtitle="Click items or drag them around to see event logging below"
            (itemMoved)="onItemMoved($event)"
            (itemClicked)="onItemClicked($event)">
          </ui-kanban-board>
        </div>
        
        <div class="event-log">
          <h4>Event Log:</h4>
          <div class="events">
            @for (event of eventLog(); track event.id) {
              <div class="event-item">
                <strong>{{ event.type }}:</strong> {{ event.message }}
                <small>{{ event.timestamp | date:'medium' }}</small>
              </div>
            }
          </div>
        </div>
      </section>
    </div>
  `,
  styleUrl: './kanban-board-demo.component.scss'
})
export class KanbanBoardDemoComponent {
  eventLog = signal<Array<{ id: string; type: string; message: string; timestamp: Date }>>([]);
  
  basicColumns(): KanbanColumn[] {
    return [
      {
        id: 'todo',
        title: 'To Do',
        items: [
          { id: '1', title: 'Design homepage', description: 'Create wireframes and mockups' },
          { id: '2', title: 'Setup database', priority: 'high' }
        ]
      },
      {
        id: 'in-progress',
        title: 'In Progress',
        items: [
          { id: '3', title: 'Build API endpoints', priority: 'medium', assignee: 'John' }
        ]
      },
      {
        id: 'done',
        title: 'Done',
        items: [
          { id: '4', title: 'Project setup', description: 'Initialize repository and dependencies' }
        ]
      }
    ];
  }
  
  fullColumns(): KanbanColumn[] {
    return [
      {
        id: 'backlog',
        title: 'Backlog',
        items: [
          {
            id: 'item-1',
            title: 'User Authentication System',
            description: 'Implement login, registration, and password reset functionality',
            priority: 'high',
            tags: ['backend', 'security', 'user-management'],
            assignee: 'Sarah Connor',
            dueDate: new Date(2024, 11, 15)
          },
          {
            id: 'item-2',
            title: 'Dashboard Analytics',
            description: 'Create comprehensive analytics dashboard with charts and metrics',
            priority: 'medium',
            tags: ['frontend', 'analytics', 'charts'],
            assignee: 'John Doe',
            dueDate: new Date(2024, 11, 20)
          },
          {
            id: 'item-3',
            title: 'Mobile Responsiveness',
            description: 'Ensure all pages work correctly on mobile devices',
            priority: 'low',
            tags: ['frontend', 'responsive', 'css'],
            assignee: 'Jane Smith'
          }
        ]
      },
      {
        id: 'todo',
        title: 'To Do',
        items: [
          {
            id: 'item-4',
            title: 'API Rate Limiting',
            description: 'Implement rate limiting for API endpoints to prevent abuse',
            priority: 'high',
            tags: ['backend', 'security', 'performance'],
            assignee: 'Bob Wilson',
            dueDate: new Date(2024, 11, 10)
          },
          {
            id: 'item-5',
            title: 'Email Notifications',
            description: 'Set up email notification system for important events',
            priority: 'medium',
            tags: ['backend', 'email', 'notifications'],
            assignee: 'Alice Brown'
          }
        ]
      },
      {
        id: 'in-progress',
        title: 'In Progress',
        items: [
          {
            id: 'item-6',
            title: 'Database Optimization',
            description: 'Optimize database queries and add proper indexing',
            priority: 'high',
            tags: ['database', 'performance', 'optimization'],
            assignee: 'Mike Johnson',
            dueDate: new Date(2024, 11, 8)
          }
        ]
      },
      {
        id: 'review',
        title: 'In Review',
        items: [
          {
            id: 'item-7',
            title: 'Unit Test Coverage',
            description: 'Increase unit test coverage to 90%',
            priority: 'medium',
            tags: ['testing', 'quality', 'coverage'],
            assignee: 'Lisa Davis',
            dueDate: new Date(2024, 11, 12)
          }
        ]
      },
      {
        id: 'done',
        title: 'Done',
        items: [
          {
            id: 'item-8',
            title: 'Project Setup',
            description: 'Initialize project structure and dependencies',
            priority: 'high',
            tags: ['setup', 'infrastructure'],
            assignee: 'Team Lead'
          },
          {
            id: 'item-9',
            title: 'Design System',
            description: 'Create component library and design tokens',
            priority: 'medium',
            tags: ['design', 'components', 'ui'],
            assignee: 'Design Team'
          }
        ]
      }
    ];
  }
  
  limitedColumns(): KanbanColumn[] {
    return [
      {
        id: 'todo',
        title: 'To Do',
        items: [
          { id: '1', title: 'Task 1' },
          { id: '2', title: 'Task 2' }
        ]
      },
      {
        id: 'limited',
        title: 'Limited (Max 2)',
        maxItems: 2,
        items: [
          { id: '3', title: 'Limited Task 1' },
          { id: '4', title: 'Limited Task 2' }
        ]
      },
      {
        id: 'done',
        title: 'Done',
        items: []
      }
    ];
  }
  
  interactiveColumns(): KanbanColumn[] {
    return [
      {
        id: 'new',
        title: 'New',
        items: [
          { id: 'i1', title: 'Interactive Item 1', description: 'Click me or drag me!' },
          { id: 'i2', title: 'Interactive Item 2', priority: 'high', assignee: 'You' }
        ]
      },
      {
        id: 'active',
        title: 'Active',
        items: [
          { id: 'i3', title: 'Interactive Item 3', priority: 'medium' }
        ]
      },
      {
        id: 'complete',
        title: 'Complete',
        items: []
      }
    ];
  }
  
  onItemMoved(event: KanbanDragEvent): void {
    this.logEvent('Item Moved', 
      `"${event.item.title}" moved from "${event.fromColumn}" to "${event.toColumn}"`
    );
    
    // In a real application, you would update your data here
    console.log('Item moved:', event);
  }
  
  onItemClicked(event: { item: KanbanItem; columnId: string }): void {
    this.logEvent('Item Clicked', 
      `"${event.item.title}" clicked in column "${event.columnId}"`
    );
    
    console.log('Item clicked:', event);
  }
  
  private logEvent(type: string, message: string): void {
    const currentLog = this.eventLog();
    const newEvent = {
      id: Date.now().toString(),
      type,
      message,
      timestamp: new Date()
    };
    
    // Keep only the last 10 events
    const updatedLog = [newEvent, ...currentLog].slice(0, 10);
    this.eventLog.set(updatedLog);
  }
}