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

@Component({
  selector: 'ui-select-demo',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    SelectComponent
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div style="padding: 2rem;">
      <h2>Select Component Showcase</h2>
      
      <!-- Basic Select -->
      <section style="margin-bottom: 3rem;">
        <h3>Basic Select</h3>
        <div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; max-width: 400px;">
          <ui-select 
            label="Choose a country"
            placeholder="Select a country"
            [options]="countryOptions"
            [(ngModel)]="basicSelect1"
            (valueChange)="onSelectionChange('basic-country', $event)"
          />
          <ui-select 
            label="Choose a language"
            placeholder="Select a language"
            [options]="languageOptions"
            [(ngModel)]="basicSelect2"
            (valueChange)="onSelectionChange('basic-language', $event)"
          />
          <ui-select 
            label="Choose a framework"
            helperText="Select your preferred frontend framework"
            [options]="frameworkOptions"
            [(ngModel)]="basicSelect3"
            (valueChange)="onSelectionChange('basic-framework', $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; max-width: 400px;">
          <ui-select 
            label="Small select"
            size="small"
            placeholder="Choose an option"
            [options]="sizeOptions"
            [(ngModel)]="sizeSmall"
            (valueChange)="onSelectionChange('size-small', $event)"
          />
          <ui-select 
            label="Medium select (default)"
            size="medium"
            placeholder="Choose an option"
            [options]="sizeOptions"
            [(ngModel)]="sizeMedium"
            (valueChange)="onSelectionChange('size-medium', $event)"
          />
          <ui-select 
            label="Large select"
            size="large"
            placeholder="Choose an option"
            [options]="sizeOptions"
            [(ngModel)]="sizeLarge"
            (valueChange)="onSelectionChange('size-large', $event)"
          />
        </div>
      </section>

      <!-- Variant Styles -->
      <section style="margin-bottom: 3rem;">
        <h3>Style Variants</h3>
        <div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; max-width: 400px;">
          <ui-select 
            label="Outlined variant (default)"
            variant="outlined"
            placeholder="Choose an option"
            [options]="variantOptions"
            [(ngModel)]="variantOutlined"
            (valueChange)="onSelectionChange('variant-outlined', $event)"
          />
          <ui-select 
            label="Filled variant"
            variant="filled"
            placeholder="Choose an option"
            [options]="variantOptions"
            [(ngModel)]="variantFilled"
            (valueChange)="onSelectionChange('variant-filled', $event)"
          />
        </div>
      </section>

      <!-- States and Validation -->
      <section style="margin-bottom: 3rem;">
        <h3>States and Validation</h3>
        <div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; max-width: 400px;">
          <ui-select 
            label="Disabled select"
            [disabled]="true"
            placeholder="This is disabled"
            [options]="stateOptions"
            [(ngModel)]="stateDisabled"
          />
          <ui-select 
            label="Required field"
            [required]="true"
            placeholder="This field is required"
            [options]="stateOptions"
            [(ngModel)]="stateRequired"
            (valueChange)="onSelectionChange('state-required', $event)"
          />
          <ui-select 
            label="Field with error"
            placeholder="Select an option"
            errorText="This field has an error"
            [options]="stateOptions"
            [(ngModel)]="stateError"
            (valueChange)="onSelectionChange('state-error', $event)"
          />
          <ui-select 
            label="Field with helper text"
            placeholder="Select an option"
            helperText="This is helpful information about this field"
            [options]="stateOptions"
            [(ngModel)]="stateHelper"
            (valueChange)="onSelectionChange('state-helper', $event)"
          />
        </div>
      </section>

      <!-- Full Width -->
      <section style="margin-bottom: 3rem;">
        <h3>Full Width</h3>
        <div style="margin-bottom: 2rem;">
          <ui-select 
            label="Full width select"
            placeholder="This select takes full width"
            [fullWidth]="true"
            [options]="fullWidthOptions"
            [(ngModel)]="fullWidthSelect"
            (valueChange)="onSelectionChange('full-width', $event)"
          />
        </div>
      </section>

      <!-- Complex Options -->
      <section style="margin-bottom: 3rem;">
        <h3>Complex Options with Disabled Items</h3>
        <div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; max-width: 400px;">
          <ui-select 
            label="User roles"
            placeholder="Select a role"
            helperText="Some roles may be disabled based on permissions"
            [options]="roleOptions"
            [(ngModel)]="complexSelect1"
            (valueChange)="onSelectionChange('complex-roles', $event)"
          />
          <ui-select 
            label="Priority levels"
            placeholder="Select priority"
            [options]="priorityOptions"
            [(ngModel)]="complexSelect2"
            (valueChange)="onSelectionChange('complex-priority', $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)="setDefaultValues()"
          >
            Set Default Values
          </button>
          <button 
            style="padding: 0.5rem 1rem; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;"
            (click)="clearAllSelections()"
          >
            Clear 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-select 
  label="Choose a country"
  placeholder="Select a country"
  [options]="countryOptions"
  [(ngModel)]="selectedCountry"
  (valueChange)="onCountryChange($event)"&gt;
&lt;/ui-select&gt;</code></pre>

          <h4>With Helper Text:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-select 
  label="Framework"
  placeholder="Select framework"
  helperText="Choose your preferred frontend framework"
  size="large"
  variant="filled"
  [options]="frameworks"
  [(ngModel)]="selectedFramework"&gt;
&lt;/ui-select&gt;</code></pre>

          <h4>Required with Error State:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-select 
  label="Required field"
  [required]="true"
  errorText="Please select an option"
  [options]="options"
  [(ngModel)]="selectedValue"&gt;
&lt;/ui-select&gt;</code></pre>

          <h4>Options Format:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>const options: SelectOption[] = [
  {{ '{' }} value: 'option1', label: 'Option 1' {{ '}' }},
  {{ '{' }} value: 'option2', label: 'Option 2' {{ '}' }},
  {{ '{' }} value: 'option3', label: 'Option 3 (Disabled)', disabled: true {{ '}' }}
];</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 SelectDemoComponent {
  // Basic selects
  basicSelect1 = signal<string>('');
  basicSelect2 = signal<string>('en');
  basicSelect3 = signal<string>('');

  // Size variants
  sizeSmall = signal<string>('');
  sizeMedium = signal<string>('medium');
  sizeLarge = signal<string>('');

  // Style variants
  variantOutlined = signal<string>('');
  variantFilled = signal<string>('filled');

  // States
  stateDisabled = signal<string>('disabled');
  stateRequired = signal<string>('');
  stateError = signal<string>('');
  stateHelper = signal<string>('');

  // Full width
  fullWidthSelect = signal<string>('');

  // Complex selects
  complexSelect1 = signal<string>('');
  complexSelect2 = signal<string>('medium');

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

  // Option arrays
  countryOptions: SelectOption[] = [
    { value: 'us', label: 'United States' },
    { value: 'ca', label: 'Canada' },
    { value: 'uk', label: 'United Kingdom' },
    { value: 'de', label: 'Germany' },
    { value: 'fr', label: 'France' },
    { value: 'jp', label: 'Japan' },
    { value: 'au', label: 'Australia' }
  ];

  languageOptions: SelectOption[] = [
    { value: 'en', label: 'English' },
    { value: 'es', label: 'Spanish' },
    { value: 'fr', label: 'French' },
    { value: 'de', label: 'German' },
    { value: 'it', label: 'Italian' },
    { value: 'pt', label: 'Portuguese' },
    { value: 'zh', label: 'Chinese' }
  ];

  frameworkOptions: SelectOption[] = [
    { value: 'angular', label: 'Angular' },
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue.js' },
    { value: 'svelte', label: 'Svelte' },
    { value: 'solid', label: 'SolidJS' }
  ];

  sizeOptions: SelectOption[] = [
    { value: 'small', label: 'Small Size' },
    { value: 'medium', label: 'Medium Size' },
    { value: 'large', label: 'Large Size' }
  ];

  variantOptions: SelectOption[] = [
    { value: 'outlined', label: 'Outlined Style' },
    { value: 'filled', label: 'Filled Style' }
  ];

  stateOptions: SelectOption[] = [
    { value: 'active', label: 'Active' },
    { value: 'inactive', label: 'Inactive' },
    { value: 'pending', label: 'Pending' }
  ];

  fullWidthOptions: SelectOption[] = [
    { value: 'option1', label: 'This is a full width select option' },
    { value: 'option2', label: 'Another full width option with longer text' },
    { value: 'option3', label: 'Third option demonstrating full width behavior' }
  ];

  roleOptions: SelectOption[] = [
    { value: 'user', label: 'User' },
    { value: 'moderator', label: 'Moderator' },
    { value: 'admin', label: 'Administrator' },
    { value: 'super-admin', label: 'Super Administrator', disabled: true },
    { value: 'guest', label: 'Guest', disabled: true }
  ];

  priorityOptions: SelectOption[] = [
    { value: 'low', label: 'Low Priority' },
    { value: 'medium', label: 'Medium Priority' },
    { value: 'high', label: 'High Priority' },
    { value: 'urgent', label: 'Urgent' },
    { value: 'critical', label: 'Critical', disabled: true }
  ];

  onSelectionChange(selectId: string, value: any): void {
    const selectedOption = this.findOptionByValue(value);
    const displayValue = selectedOption ? selectedOption.label : value;
    this.lastSelection.set(`${selectId}: ${displayValue} (${value})`);
    console.log(`Select ${selectId} changed:`, value);
  }

  private findOptionByValue(value: any): SelectOption | undefined {
    const allOptions = [
      ...this.countryOptions,
      ...this.languageOptions,
      ...this.frameworkOptions,
      ...this.sizeOptions,
      ...this.variantOptions,
      ...this.stateOptions,
      ...this.fullWidthOptions,
      ...this.roleOptions,
      ...this.priorityOptions
    ];
    return allOptions.find(option => option.value === value);
  }

  setDefaultValues(): void {
    this.basicSelect1.set('us');
    this.basicSelect2.set('en');
    this.basicSelect3.set('angular');
    this.sizeSmall.set('small');
    this.sizeMedium.set('medium');
    this.sizeLarge.set('large');
    this.variantOutlined.set('outlined');
    this.variantFilled.set('filled');
    this.stateRequired.set('active');
    this.stateError.set('pending');
    this.stateHelper.set('inactive');
    this.fullWidthSelect.set('option2');
    this.complexSelect1.set('admin');
    this.complexSelect2.set('high');
    
    this.lastSelection.set('All selects set to default values');
  }

  clearAllSelections(): void {
    this.basicSelect1.set('');
    this.basicSelect2.set('');
    this.basicSelect3.set('');
    this.sizeSmall.set('');
    this.sizeMedium.set('');
    this.sizeLarge.set('');
    this.variantOutlined.set('');
    this.variantFilled.set('');
    this.stateRequired.set('');
    this.stateError.set('');
    this.stateHelper.set('');
    this.fullWidthSelect.set('');
    this.complexSelect1.set('');
    this.complexSelect2.set('');
    
    this.lastSelection.set('All selections cleared');
  }

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

  getCurrentValues(): string {
    const values = {
      basic: {
        country: this.basicSelect1(),
        language: this.basicSelect2(),
        framework: this.basicSelect3()
      },
      sizes: {
        small: this.sizeSmall(),
        medium: this.sizeMedium(),
        large: this.sizeLarge()
      },
      variants: {
        outlined: this.variantOutlined(),
        filled: this.variantFilled()
      },
      states: {
        disabled: this.stateDisabled(),
        required: this.stateRequired(),
        error: this.stateError(),
        helper: this.stateHelper()
      },
      layout: {
        fullWidth: this.fullWidthSelect()
      },
      complex: {
        roles: this.complexSelect1(),
        priority: this.complexSelect2()
      },
      controls: {
        globalDisabled: this.globalDisabled(),
        lastSelection: this.lastSelection()
      }
    };
    
    return JSON.stringify(values, null, 2);
  }
}