import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faExclamationTriangle, faCheckCircle, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
import { ButtonComponent } from '../../../../../ui-essentials/src/lib/components/buttons';
import { ModalComponent } from '../../../../../ui-essentials/src/lib/components/overlays/modal';

@Component({
  selector: 'ui-modal-demo',
  standalone: true,
  imports: [CommonModule, FormsModule, FontAwesomeModule, ButtonComponent, ModalComponent],
  template: `
    <div class="demo-container">
      <h2>Modal Demo</h2>
      
      <!-- Basic Usage -->
      <section class="demo-section">
        <h3>Basic Usage</h3>
        <div class="demo-row">
          <ui-button (clicked)="basicModal.set(true)">
            Open Basic Modal
          </ui-button>
        </div>
      </section>

      <!-- Size Variants -->
      <section class="demo-section">
        <h3>Sizes</h3>
        <div class="demo-row">
          <ui-button (clicked)="smallModal.set(true)">Small Modal</ui-button>
          <ui-button (clicked)="mediumModal.set(true)">Medium Modal</ui-button>
          <ui-button (clicked)="largeModal.set(true)">Large Modal</ui-button>
          <ui-button (clicked)="xlModal.set(true)">XL Modal</ui-button>
          <ui-button (clicked)="fullscreenModal.set(true)">Fullscreen Modal</ui-button>
        </div>
      </section>

      <!-- Variant Types -->
      <section class="demo-section">
        <h3>Variants</h3>
        <div class="demo-row">
          <ui-button (clicked)="defaultModal.set(true)" variant="filled">Default</ui-button>
          <ui-button (clicked)="warningModal.set(true)" variant="tonal">Warning</ui-button>
          <ui-button (clicked)="dangerModal.set(true)" variant="outlined">Danger</ui-button>
          <ui-button (clicked)="successModal.set(true)" variant="filled">Success</ui-button>
        </div>
      </section>

      <!-- Configuration Options -->
      <section class="demo-section">
        <h3>Configuration Options</h3>
        <div class="demo-row">
          <ui-button (clicked)="noHeaderModal.set(true)">No Header</ui-button>
          <ui-button (clicked)="noFooterModal.set(true)">With Footer</ui-button>
          <ui-button (clicked)="noPaddingModal.set(true)">No Padding</ui-button>
          <ui-button (clicked)="notClosableModal.set(true)">Not Closable</ui-button>
        </div>
      </section>

      <!-- Interactive Features -->
      <section class="demo-section">
        <h3>Interactive Features</h3>
        <div class="demo-row">
          <ui-button (clicked)="loadingModal.set(true)">Loading Modal</ui-button>
          <ui-button (clicked)="scrollableModal.set(true)">Scrollable Content</ui-button>
          <ui-button (clicked)="formModal.set(true)">Form Modal</ui-button>
        </div>
      </section>

      <!-- Configuration Panel -->
      <section class="demo-section">
        <h3>Try It Yourself</h3>
        <div class="config-panel">
          <div class="config-row">
            <label>Size:</label>
            <select [(ngModel)]="customConfig.size">
              <option value="sm">Small</option>
              <option value="md">Medium</option>
              <option value="lg">Large</option>
              <option value="xl">Extra Large</option>
              <option value="fullscreen">Fullscreen</option>
            </select>
          </div>
          
          <div class="config-row">
            <label>Variant:</label>
            <select [(ngModel)]="customConfig.variant">
              <option value="default">Default</option>
              <option value="danger">Danger</option>
              <option value="warning">Warning</option>
              <option value="success">Success</option>
            </select>
          </div>
          
          <div class="config-row">
            <label>
              <input type="checkbox" [(ngModel)]="customConfig.closable">
              Closable
            </label>
            <label>
              <input type="checkbox" [(ngModel)]="customConfig.backdropClosable">
              Backdrop Closable
            </label>
          </div>
          
          <div class="config-row">
            <label>
              <input type="checkbox" [(ngModel)]="customConfig.showHeader">
              Show Header
            </label>
            <label>
              <input type="checkbox" [(ngModel)]="customConfig.showFooter">
              Show Footer
            </label>
          </div>
          
          <ui-button (clicked)="customModal.set(true)">Open Custom Modal</ui-button>
        </div>
      </section>

      <!-- Event Log -->
      <section class="demo-section">
        <h3>Event Log</h3>
        <div class="event-log">
          @for (event of eventLog; track $index) {
            <div class="event-item">{{ event }}</div>
          }
          @if (eventLog.length === 0) {
            <div class="event-item">No events yet...</div>
          }
        </div>
        <ui-button (clicked)="clearEventLog()" variant="outlined">Clear Log</ui-button>
      </section>
    </div>

    <!-- Basic Modal -->
    <ui-modal
      [open]="basicModal()"
      (openChange)="basicModal.set($event); logEvent('Basic modal: ' + ($event ? 'opened' : 'closed'))"
      title="Basic Modal"
      (opened)="logEvent('Basic modal opened')"
      (closed)="logEvent('Basic modal closed')"
    >
      <p>This is a basic modal with default settings.</p>
      <p>You can close it by clicking the X button, pressing Escape, or clicking outside the modal.</p>
    </ui-modal>

    <!-- Size Modals -->
    <ui-modal
      [open]="smallModal()"
      (openChange)="smallModal.set($event)"
      size="sm"
      title="Small Modal"
    >
      <p>This is a small modal (400px width).</p>
    </ui-modal>

    <ui-modal
      [open]="mediumModal()"
      (openChange)="mediumModal.set($event)"
      size="md"
      title="Medium Modal"
    >
      <p>This is a medium modal (600px width) - the default size.</p>
    </ui-modal>

    <ui-modal
      [open]="largeModal()"
      (openChange)="largeModal.set($event)"
      size="lg"
      title="Large Modal"
    >
      <p>This is a large modal (800px width).</p>
      <p>Perfect for forms, detailed content, or complex interfaces.</p>
    </ui-modal>

    <ui-modal
      [open]="xlModal()"
      (openChange)="xlModal.set($event)"
      size="xl"
      title="Extra Large Modal"
    >
      <p>This is an extra large modal (1000px width).</p>
      <p>Use this for very complex interfaces or wide content.</p>
    </ui-modal>

    <ui-modal
      [open]="fullscreenModal()"
      (openChange)="fullscreenModal.set($event)"
      size="fullscreen"
      title="Fullscreen Modal"
    >
      <p>This modal takes up the entire screen.</p>
      <p>Perfect for complex applications or immersive experiences.</p>
    </ui-modal>

    <!-- Variant Modals -->
    <ui-modal
      [open]="defaultModal()"
      (openChange)="defaultModal.set($event)"
      variant="default"
      title="Default Modal"
    >
      <p>This is the default modal variant.</p>
    </ui-modal>

    <ui-modal
      [open]="warningModal()"
      (openChange)="warningModal.set($event)"
      variant="warning"
      title="Warning Modal"
      [showFooter]="true"
    >
      <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
        <fa-icon [icon]="faExclamationTriangle" style="color: #f59e0b; font-size: 24px;"></fa-icon>
        <p style="margin: 0;">Are you sure you want to continue? This action cannot be undone.</p>
      </div>
      
      <ng-container slot="footer">
        <ui-button (clicked)="warningModal.set(false)" variant="outlined">Cancel</ui-button>
        <ui-button (clicked)="warningModal.set(false)" variant="filled">Continue</ui-button>
      </ng-container>
    </ui-modal>

    <ui-modal
      [open]="dangerModal()"
      (openChange)="dangerModal.set($event)"
      variant="danger"
      title="Delete Item"
      [showFooter]="true"
    >
      <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
        <fa-icon [icon]="faExclamationTriangle" style="color: #ef4444; font-size: 24px;"></fa-icon>
        <p style="margin: 0;">This will permanently delete the item. This action cannot be undone.</p>
      </div>
      
      <ng-container slot="footer">
        <ui-button (clicked)="dangerModal.set(false)" variant="outlined">Cancel</ui-button>
        <ui-button (clicked)="dangerModal.set(false)" variant="filled">Delete</ui-button>
      </ng-container>
    </ui-modal>

    <ui-modal
      [open]="successModal()"
      (openChange)="successModal.set($event)"
      variant="success"
      title="Success!"
      [showFooter]="true"
    >
      <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
        <fa-icon [icon]="faCheckCircle" style="color: #10b981; font-size: 24px;"></fa-icon>
        <p style="margin: 0;">Your changes have been saved successfully!</p>
      </div>
      
      <ng-container slot="footer">
        <ui-button (clicked)="successModal.set(false)" variant="filled">Close</ui-button>
      </ng-container>
    </ui-modal>

    <!-- Configuration Modals -->
    <ui-modal
      [open]="noHeaderModal()"
      (openChange)="noHeaderModal.set($event)"
      [showHeader]="false"
    >
      <div style="padding: 16px; text-align: center;">
        <fa-icon [icon]="faInfoCircle" style="font-size: 48px; color: #6750a4; margin-bottom: 16px;"></fa-icon>
        <h3 style="margin: 0 0 16px 0;">Modal without header</h3>
        <p>This modal doesn't have a header section.</p>
        <ui-button (clicked)="noHeaderModal.set(false)" style="margin-top: 16px;">Close</ui-button>
      </div>
    </ui-modal>

    <ui-modal
      [open]="noFooterModal()"
      (openChange)="noFooterModal.set($event)"
      title="Modal with Footer"
      [showFooter]="true"
      footerAlignment="between"
    >
      <p>This modal has a footer with buttons aligned between start and end.</p>
      
      <ng-container slot="footer">
        <div>
          <ui-button (clicked)="logEvent('Help clicked')" variant="outlined">Help</ui-button>
        </div>
        <div style="display: flex; gap: 8px;">
          <ui-button (clicked)="noFooterModal.set(false)" variant="outlined">Cancel</ui-button>
          <ui-button (clicked)="noFooterModal.set(false)" variant="filled">Save</ui-button>
        </div>
      </ng-container>
    </ui-modal>

    <ui-modal
      [open]="noPaddingModal()"
      (openChange)="noPaddingModal.set($event)"
      title="No Padding Modal"
      [bodyPadding]="false"
    >
      <div style="padding: 0; background: linear-gradient(45deg, #6750a4, #7c3aed); height: 200px; display: flex; align-items: center; justify-content: center; color: white;">
        <p style="margin: 0; text-align: center;">This content spans the full width<br>with no padding constraints.</p>
      </div>
    </ui-modal>

    <ui-modal
      [open]="notClosableModal()"
      (openChange)="notClosableModal.set($event)"
      title="Not Closable Modal"
      [closable]="false"
      [backdropClosable]="false"
      [escapeClosable]="false"
      [showFooter]="true"
    >
      <p>This modal cannot be closed by clicking the X, pressing Escape, or clicking the backdrop.</p>
      <p>You must use the Close button below.</p>
      
      <ng-container slot="footer">
        <ui-button (clicked)="notClosableModal.set(false)" variant="filled">Close</ui-button>
      </ng-container>
    </ui-modal>

    <!-- Interactive Modals -->
    <ui-modal
      [open]="loadingModal()"
      (openChange)="loadingModal.set($event)"
      title="Loading Data"
      [loading]="true"
    >
      <!-- Content will be replaced by loading spinner -->
    </ui-modal>

    <ui-modal
      [open]="scrollableModal()"
      (openChange)="scrollableModal.set($event)"
      title="Scrollable Content"
      size="md"
    >
      <div style="height: 800px;">
        <h4>Long Content</h4>
        @for (item of longContent; track $index) {
          <p>{{ item }}</p>
        }
      </div>
    </ui-modal>

    <ui-modal
      [open]="formModal()"
      (openChange)="formModal.set($event)"
      title="User Registration"
      [showFooter]="true"
      size="md"
    >
      <form (ngSubmit)="handleFormSubmit()" #userForm="ngForm">
        <div style="margin-bottom: 16px;">
          <label style="display: block; margin-bottom: 4px;">Name:</label>
          <input 
            type="text" 
            [(ngModel)]="formData.name" 
            name="name"
            style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;"
            required
          >
        </div>
        
        <div style="margin-bottom: 16px;">
          <label style="display: block; margin-bottom: 4px;">Email:</label>
          <input 
            type="email" 
            [(ngModel)]="formData.email" 
            name="email"
            style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;"
            required
          >
        </div>
        
        <div style="margin-bottom: 16px;">
          <label style="display: block; margin-bottom: 4px;">Message:</label>
          <textarea 
            [(ngModel)]="formData.message" 
            name="message"
            rows="4"
            style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; resize: vertical;"
          ></textarea>
        </div>
      </form>
      
      <ng-container slot="footer">
        <ui-button (clicked)="formModal.set(false)" variant="outlined">Cancel</ui-button>
        <ui-button (clicked)="handleFormSubmit()" variant="filled">Submit</ui-button>
      </ng-container>
    </ui-modal>

    <!-- Custom Configuration Modal -->
    <ui-modal
      [open]="customModal()"
      (openChange)="customModal.set($event)"
      [size]="customConfig.size"
      [variant]="customConfig.variant"
      [closable]="customConfig.closable"
      [backdropClosable]="customConfig.backdropClosable"
      [showHeader]="customConfig.showHeader"
      [showFooter]="customConfig.showFooter"
      title="Custom Configured Modal"
    >
      <p>This modal is configured based on your selections:</p>
      <ul>
        <li>Size: {{ customConfig.size }}</li>
        <li>Variant: {{ customConfig.variant }}</li>
        <li>Closable: {{ customConfig.closable ? 'Yes' : 'No' }}</li>
        <li>Backdrop Closable: {{ customConfig.backdropClosable ? 'Yes' : 'No' }}</li>
        <li>Show Header: {{ customConfig.showHeader ? 'Yes' : 'No' }}</li>
        <li>Show Footer: {{ customConfig.showFooter ? 'Yes' : 'No' }}</li>
      </ul>
      
      @if (customConfig.showFooter) {
        <ng-container slot="footer">
          <ui-button (clicked)="customModal.set(false)" variant="filled">Close</ui-button>
        </ng-container>
      }
    </ui-modal>
  `,
  styleUrl: './modal-demo.component.scss'
})
export class ModalDemoComponent {
  // Icons
  readonly faExclamationTriangle = faExclamationTriangle;
  readonly faCheckCircle = faCheckCircle;
  readonly faInfoCircle = faInfoCircle;

  // Modal states
  basicModal = signal(false);
  smallModal = signal(false);
  mediumModal = signal(false);
  largeModal = signal(false);
  xlModal = signal(false);
  fullscreenModal = signal(false);
  
  defaultModal = signal(false);
  warningModal = signal(false);
  dangerModal = signal(false);
  successModal = signal(false);
  
  noHeaderModal = signal(false);
  noFooterModal = signal(false);
  noPaddingModal = signal(false);
  notClosableModal = signal(false);
  
  loadingModal = signal(false);
  scrollableModal = signal(false);
  formModal = signal(false);
  customModal = signal(false);

  // Demo data
  eventLog: string[] = [];
  
  customConfig = {
    size: 'md' as any,
    variant: 'default' as any,
    closable: true,
    backdropClosable: true,
    showHeader: true,
    showFooter: false
  };

  formData = {
    name: '',
    email: '',
    message: ''
  };

  longContent = Array.from({ length: 50 }, (_, i) => 
    `This is paragraph ${i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`
  );

  // Simulate loading
  constructor() {
    setTimeout(() => {
      if (this.loadingModal()) {
        this.loadingModal.set(false);
        this.logEvent('Loading completed');
      }
    }, 3000);
  }

  logEvent(event: string): void {
    const timestamp = new Date().toLocaleTimeString();
    this.eventLog.unshift(`[${timestamp}] ${event}`);
    if (this.eventLog.length > 10) {
      this.eventLog = this.eventLog.slice(0, 10);
    }
  }

  clearEventLog(): void {
    this.eventLog = [];
  }

  handleFormSubmit(): void {
    this.logEvent(`Form submitted: ${JSON.stringify(this.formData)}`);
    this.formModal.set(false);
    
    // Reset form
    this.formData = {
      name: '',
      email: '',
      message: ''
    };
  }
}