import { Component, ChangeDetectionStrategy, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { CheckboxComponent } from '../../../../../ui-essentials/src/lib/components/forms/checkbox/checkbox.component';

@Component({
  selector: 'ui-checkbox-demo',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    CheckboxComponent
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div style="padding: 2rem;">
      <h2>Checkbox Component Showcase</h2>
      
      <!-- Basic Checkboxes -->
      <section style="margin-bottom: 3rem;">
        <h3>Basic Checkboxes</h3>
        <div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;">
          <ui-checkbox 
            label="Accept terms and conditions" 
            [(ngModel)]="basicChecked1"
            (checkboxChange)="onCheckboxChange('basic-1', $event)"
          />
          <ui-checkbox 
            label="Subscribe to newsletter" 
            description="Receive updates about our products and services"
            [(ngModel)]="basicChecked2"
            (checkboxChange)="onCheckboxChange('basic-2', $event)"
          />
          <ui-checkbox 
            label="Remember me" 
            [(ngModel)]="basicChecked3"
            (checkboxChange)="onCheckboxChange('basic-3', $event)"
          />
        </div>
      </section>

      <!-- Size Variants -->
      <section style="margin-bottom: 3rem;">
        <h3>Size Variants</h3>
        <div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;">
          <ui-checkbox 
            label="Small checkbox" 
            size="sm"
            [(ngModel)]="sizeSmall"
            (checkboxChange)="onCheckboxChange('size-sm', $event)"
          />
          <ui-checkbox 
            label="Medium checkbox (default)" 
            size="md"
            [(ngModel)]="sizeMedium"
            (checkboxChange)="onCheckboxChange('size-md', $event)"
          />
          <ui-checkbox 
            label="Large checkbox" 
            size="lg"
            [(ngModel)]="sizeLarge"
            (checkboxChange)="onCheckboxChange('size-lg', $event)"
          />
        </div>
      </section>

      <!-- Variant Colors -->
      <section style="margin-bottom: 3rem;">
        <h3>Color Variants</h3>
        <div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;">
          <ui-checkbox 
            label="Primary variant" 
            variant="primary"
            [(ngModel)]="variantPrimary"
            (checkboxChange)="onCheckboxChange('variant-primary', $event)"
          />
          <ui-checkbox 
            label="Secondary variant" 
            variant="secondary"
            [(ngModel)]="variantSecondary"
            (checkboxChange)="onCheckboxChange('variant-secondary', $event)"
          />
          <ui-checkbox 
            label="Success variant" 
            variant="success"
            [(ngModel)]="variantSuccess"
            (checkboxChange)="onCheckboxChange('variant-success', $event)"
          />
          <ui-checkbox 
            label="Warning variant" 
            variant="warning"
            [(ngModel)]="variantWarning"
            (checkboxChange)="onCheckboxChange('variant-warning', $event)"
          />
          <ui-checkbox 
            label="Danger variant" 
            variant="danger"
            [(ngModel)]="variantDanger"
            (checkboxChange)="onCheckboxChange('variant-danger', $event)"
          />
        </div>
      </section>

      <!-- States -->
      <section style="margin-bottom: 3rem;">
        <h3>States</h3>
        <div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;">
          <ui-checkbox 
            label="Disabled unchecked" 
            [disabled]="true"
            [(ngModel)]="stateDisabledUnchecked"
          />
          <ui-checkbox 
            label="Disabled checked" 
            [disabled]="true"
            [(ngModel)]="stateDisabledChecked"
          />
          <ui-checkbox 
            label="Required field" 
            [required]="true"
            [(ngModel)]="stateRequired"
            (checkboxChange)="onCheckboxChange('state-required', $event)"
          />
          <ui-checkbox 
            label="Error state" 
            state="error"
            [(ngModel)]="stateError"
            (checkboxChange)="onCheckboxChange('state-error', $event)"
          />
        </div>
      </section>

      <!-- With Descriptions -->
      <section style="margin-bottom: 3rem;">
        <h3>With Descriptions</h3>
        <div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;">
          <ui-checkbox 
            label="Marketing emails"
            description="Receive promotional emails and special offers"
            [(ngModel)]="descChecked1"
            (checkboxChange)="onCheckboxChange('desc-1', $event)"
          />
          <ui-checkbox 
            label="Product updates"
            description="Get notified about new features and product announcements"
            [(ngModel)]="descChecked2"
            (checkboxChange)="onCheckboxChange('desc-2', $event)"
          />
          <ui-checkbox 
            label="Security alerts"
            description="Important notifications about your account security"
            [required]="true"
            [(ngModel)]="descChecked3"
            (checkboxChange)="onCheckboxChange('desc-3', $event)"
          />
        </div>
      </section>

      <!-- Interactive Controls -->
      <section style="margin-bottom: 3rem;">
        <h3>Interactive Controls</h3>
        <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">
          <button 
            style="padding: 0.5rem 1rem; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;"
            (click)="checkAll()"
          >
            Check All
          </button>
          <button 
            style="padding: 0.5rem 1rem; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;"
            (click)="uncheckAll()"
          >
            Uncheck All
          </button>
          <button 
            style="padding: 0.5rem 1rem; background: #6f42c1; color: white; border: none; border-radius: 4px; cursor: pointer;"
            (click)="toggleDisabled()"
          >
            {{ globalDisabled() ? 'Enable All' : 'Disable All' }}
          </button>
        </div>
        
        @if (lastSelection()) {
          <div style="margin-top: 1rem; padding: 1rem; background: #e3f2fd; border-radius: 4px;">
            <strong>Last selection:</strong> {{ lastSelection() }}
          </div>
        }
      </section>

      <!-- Code Examples -->
      <section style="margin-bottom: 3rem;">
        <h3>Code Examples</h3>
        <div style="background: #f8f9fa; padding: 1rem; border-radius: 4px; margin-bottom: 1rem;">
          <h4>Basic Usage:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-checkbox 
  label="Accept terms"
  [(ngModel)]="isAccepted"
  (checkboxChange)="onAccept($event)"&gt;
&lt;/ui-checkbox&gt;</code></pre>

          <h4>With Description:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-checkbox 
  label="Marketing emails"
  description="Receive promotional content"
  variant="success"
  size="lg"
  [(ngModel)]="emailOptIn"&gt;
&lt;/ui-checkbox&gt;</code></pre>

          <h4>Required Field:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-checkbox 
  label="I agree to terms"
  [required]="true"
  state="error"
  [(ngModel)]="agreedToTerms"&gt;
&lt;/ui-checkbox&gt;</code></pre>
        </div>
      </section>

      <!-- Current Values -->
      <section style="margin-bottom: 3rem;">
        <h3>Current Values</h3>
        <div style="background: #f8f9fa; padding: 1rem; border-radius: 4px; max-height: 400px; overflow-y: auto;">
          <pre>{{ getCurrentValues() }}</pre>
        </div>
      </section>
    </div>
  `,
  styles: [`
    h2 {
      color: hsl(279, 14%, 11%);
      font-size: 2rem;
      margin-bottom: 2rem;
      border-bottom: 2px solid hsl(258, 100%, 47%);
      padding-bottom: 0.5rem;
    }
    
    h3 {
      color: hsl(279, 14%, 25%);
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }
    
    h4 {
      color: hsl(279, 14%, 35%);
      font-size: 1.2rem;
      margin-bottom: 0.5rem;
    }
    
    pre {
      margin: 0;
      font-family: 'Courier New', monospace;
      font-size: 0.9rem;
      line-height: 1.4;
    }
    
    code {
      color: hsl(279, 14%, 15%);
    }
    
    section {
      border: 1px solid #e9ecef;
      padding: 1.5rem;
      border-radius: 8px;
      background: #ffffff;
    }
    
    button:hover {
      opacity: 0.9;
      transform: translateY(-1px);
    }
  `]
})
export class CheckboxDemoComponent {
  // Basic checkboxes
  basicChecked1 = signal<boolean>(false);
  basicChecked2 = signal<boolean>(true);
  basicChecked3 = signal<boolean>(false);

  // Size variants
  sizeSmall = signal<boolean>(false);
  sizeMedium = signal<boolean>(true);
  sizeLarge = signal<boolean>(false);

  // Color variants
  variantPrimary = signal<boolean>(true);
  variantSecondary = signal<boolean>(false);
  variantSuccess = signal<boolean>(true);
  variantWarning = signal<boolean>(false);
  variantDanger = signal<boolean>(false);

  // States
  stateDisabledUnchecked = signal<boolean>(false);
  stateDisabledChecked = signal<boolean>(true);
  stateRequired = signal<boolean>(false);
  stateError = signal<boolean>(false);

  // With descriptions
  descChecked1 = signal<boolean>(false);
  descChecked2 = signal<boolean>(true);
  descChecked3 = signal<boolean>(true);

  // Control states
  globalDisabled = signal<boolean>(false);
  lastSelection = signal<string>('');

  onCheckboxChange(checkboxId: string, checked: boolean): void {
    this.lastSelection.set(`${checkboxId}: ${checked ? 'checked' : 'unchecked'}`);
    console.log(`Checkbox ${checkboxId} changed:`, checked);
  }

  checkAll(): void {
    // Update all non-disabled checkboxes to checked
    this.basicChecked1.set(true);
    this.basicChecked2.set(true);
    this.basicChecked3.set(true);
    this.sizeSmall.set(true);
    this.sizeMedium.set(true);
    this.sizeLarge.set(true);
    this.variantPrimary.set(true);
    this.variantSecondary.set(true);
    this.variantSuccess.set(true);
    this.variantWarning.set(true);
    this.variantDanger.set(true);
    this.stateRequired.set(true);
    this.stateError.set(true);
    this.descChecked1.set(true);
    this.descChecked2.set(true);
    this.descChecked3.set(true);
    
    this.lastSelection.set('All checkboxes checked');
  }

  uncheckAll(): void {
    // Update all non-disabled checkboxes to unchecked
    this.basicChecked1.set(false);
    this.basicChecked2.set(false);
    this.basicChecked3.set(false);
    this.sizeSmall.set(false);
    this.sizeMedium.set(false);
    this.sizeLarge.set(false);
    this.variantPrimary.set(false);
    this.variantSecondary.set(false);
    this.variantSuccess.set(false);
    this.variantWarning.set(false);
    this.variantDanger.set(false);
    this.stateRequired.set(false);
    this.stateError.set(false);
    this.descChecked1.set(false);
    this.descChecked2.set(false);
    this.descChecked3.set(false);
    
    this.lastSelection.set('All checkboxes unchecked');
  }

  toggleDisabled(): void {
    this.globalDisabled.update(disabled => !disabled);
    this.lastSelection.set(`Global disabled: ${this.globalDisabled() ? 'enabled' : 'disabled'}`);
  }

  getCurrentValues(): string {
    const values = {
      basic: {
        checked1: this.basicChecked1(),
        checked2: this.basicChecked2(),
        checked3: this.basicChecked3()
      },
      sizes: {
        small: this.sizeSmall(),
        medium: this.sizeMedium(),
        large: this.sizeLarge()
      },
      variants: {
        primary: this.variantPrimary(),
        secondary: this.variantSecondary(),
        success: this.variantSuccess(),
        warning: this.variantWarning(),
        danger: this.variantDanger()
      },
      states: {
        disabledUnchecked: this.stateDisabledUnchecked(),
        disabledChecked: this.stateDisabledChecked(),
        required: this.stateRequired(),
        error: this.stateError()
      },
      descriptions: {
        desc1: this.descChecked1(),
        desc2: this.descChecked2(),
        desc3: this.descChecked3()
      },
      controls: {
        globalDisabled: this.globalDisabled(),
        lastSelection: this.lastSelection()
      }
    };
    
    return JSON.stringify(values, null, 2);
  }
}