import { Component, ChangeDetectionStrategy, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TextareaComponent } from '../../../../../ui-essentials/src/lib/components/forms/input/textarea.component';
import { faComment, faEdit, faEnvelope } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'ui-textarea-demo',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    TextareaComponent
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div style="padding: 2rem;">
      <h2>Textarea Component Showcase</h2>
      
      <!-- Basic Textarea -->
      <section style="margin-bottom: 3rem;">
        <h3>Basic Textarea</h3>
        <div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;">
          <ui-textarea 
            label="Basic textarea"
            placeholder="Enter your message here..."
            [(ngModel)]="basicTextarea1"
            (textareaChange)="onTextareaChange('basic-1', $event)"
          />
          <ui-textarea 
            label="Textarea with helper text"
            placeholder="Share your thoughts..."
            helperText="Your feedback is important to us"
            [(ngModel)]="basicTextarea2"
            (textareaChange)="onTextareaChange('basic-2', $event)"
          />
          <ui-textarea 
            label="Pre-filled textarea"
            placeholder="Enter description..."
            [(ngModel)]="basicTextarea3"
            (textareaChange)="onTextareaChange('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-textarea 
            label="Small textarea"
            size="sm"
            placeholder="Small size textarea..."
            [(ngModel)]="sizeSmall"
            (textareaChange)="onTextareaChange('size-small', $event)"
          />
          <ui-textarea 
            label="Medium textarea (default)"
            size="md"
            placeholder="Medium size textarea..."
            [(ngModel)]="sizeMedium"
            (textareaChange)="onTextareaChange('size-medium', $event)"
          />
          <ui-textarea 
            label="Large textarea"
            size="lg"
            placeholder="Large size textarea..."
            [(ngModel)]="sizeLarge"
            (textareaChange)="onTextareaChange('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;">
          <ui-textarea 
            label="Outlined variant (default)"
            variant="outlined"
            placeholder="Outlined style textarea..."
            [(ngModel)]="variantOutlined"
            (textareaChange)="onTextareaChange('variant-outlined', $event)"
          />
          <ui-textarea 
            label="Filled variant"
            variant="filled"
            placeholder="Filled style textarea..."
            [(ngModel)]="variantFilled"
            (textareaChange)="onTextareaChange('variant-filled', $event)"
          />
          <ui-textarea 
            label="Underlined variant"
            variant="underlined"
            placeholder="Underlined style textarea..."
            [(ngModel)]="variantUnderlined"
            (textareaChange)="onTextareaChange('variant-underlined', $event)"
          />
        </div>
      </section>

      <!-- States -->
      <section style="margin-bottom: 3rem;">
        <h3>States and Validation</h3>
        <div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;">
          <ui-textarea 
            label="Default state"
            state="default"
            placeholder="Normal textarea..."
            [(ngModel)]="stateDefault"
            (textareaChange)="onTextareaChange('state-default', $event)"
          />
          <ui-textarea 
            label="Success state"
            state="success"
            placeholder="Successful input..."
            helperText="This looks good!"
            [(ngModel)]="stateSuccess"
            (textareaChange)="onTextareaChange('state-success', $event)"
          />
          <ui-textarea 
            label="Warning state"
            state="warning"
            placeholder="Input with warning..."
            helperText="Please double-check this content"
            [(ngModel)]="stateWarning"
            (textareaChange)="onTextareaChange('state-warning', $event)"
          />
          <ui-textarea 
            label="Error state"
            state="error"
            placeholder="Input with error..."
            errorMessage="This field contains an error"
            [(ngModel)]="stateError"
            (textareaChange)="onTextareaChange('state-error', $event)"
          />
        </div>
      </section>

      <!-- Interactive States -->
      <section style="margin-bottom: 3rem;">
        <h3>Interactive States</h3>
        <div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;">
          <ui-textarea 
            label="Disabled textarea"
            [disabled]="true"
            placeholder="This textarea is disabled"
            [(ngModel)]="stateDisabled"
          />
          <ui-textarea 
            label="Readonly textarea"
            [readonly]="true"
            placeholder="This textarea is readonly"
            [(ngModel)]="stateReadonly"
          />
          <ui-textarea 
            label="Required field"
            [required]="true"
            placeholder="This field is required"
            [(ngModel)]="stateRequired"
            (textareaChange)="onTextareaChange('state-required', $event)"
          />
          <ui-textarea 
            label="Loading state"
            [loading]="true"
            placeholder="This textarea is in loading state"
            [(ngModel)]="stateLoading"
            (textareaChange)="onTextareaChange('state-loading', $event)"
          />
        </div>
      </section>

      <!-- Character Limits and Counters -->
      <section style="margin-bottom: 3rem;">
        <h3>Character Limits and Counters</h3>
        <div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;">
          <ui-textarea 
            label="Textarea with character limit"
            placeholder="You have 100 characters max..."
            [maxLength]="100"
            [showCharacterCount]="true"
            helperText="Please keep your message concise"
            [(ngModel)]="charLimit1"
            (textareaChange)="onTextareaChange('char-limit-1', $event)"
          />
          <ui-textarea 
            label="Tweet-style limit"
            placeholder="What's happening?"
            [maxLength]="280"
            [showCharacterCount]="true"
            [(ngModel)]="charLimit2"
            (textareaChange)="onTextareaChange('char-limit-2', $event)"
          />
          <ui-textarea 
            label="Long form content"
            placeholder="Write your article here..."
            [maxLength]="1000"
            [showCharacterCount]="true"
            [rows]="8"
            [(ngModel)]="charLimit3"
            (textareaChange)="onTextareaChange('char-limit-3', $event)"
          />
        </div>
      </section>

      <!-- Row and Resize Options -->
      <section style="margin-bottom: 3rem;">
        <h3>Rows and Resize Options</h3>
        <div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;">
          <ui-textarea 
            label="2 rows (compact)"
            placeholder="Short input area..."
            [rows]="2"
            resize="none"
            [(ngModel)]="rowsCompact"
            (textareaChange)="onTextareaChange('rows-compact', $event)"
          />
          <ui-textarea 
            label="6 rows (expanded)"
            placeholder="Larger input area..."
            [rows]="6"
            resize="vertical"
            [(ngModel)]="rowsExpanded"
            (textareaChange)="onTextareaChange('rows-expanded', $event)"
          />
          <ui-textarea 
            label="Auto-resize textarea"
            placeholder="This textarea will grow as you type..."
            [autoResize]="true"
            [rows]="3"
            [(ngModel)]="autoResizeTextarea"
            (textareaChange)="onTextareaChange('auto-resize', $event)"
          />
          <ui-textarea 
            label="Horizontal resize"
            placeholder="You can resize this horizontally..."
            resize="horizontal"
            [(ngModel)]="horizontalResize"
            (textareaChange)="onTextareaChange('horizontal-resize', $event)"
          />
          <ui-textarea 
            label="Both directions resize"
            placeholder="Resize in any direction..."
            resize="both"
            [(ngModel)]="bothResize"
            (textareaChange)="onTextareaChange('both-resize', $event)"
          />
        </div>
      </section>

      <!-- Icons and Clearable -->
      <section style="margin-bottom: 3rem;">
        <h3>Icons and Clearable Features</h3>
        <div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;">
          <ui-textarea 
            label="With prefix icon"
            placeholder="Type your comment..."
            [prefixIcon]="faComment"
            [(ngModel)]="iconPrefix"
            (textareaChange)="onTextareaChange('icon-prefix', $event)"
          />
          <ui-textarea 
            label="With suffix icon"
            placeholder="Write your email content..."
            [suffixIcon]="faEnvelope"
            [(ngModel)]="iconSuffix"
            (textareaChange)="onTextareaChange('icon-suffix', $event)"
          />
          <ui-textarea 
            label="Clearable textarea"
            placeholder="You can clear this easily..."
            [clearable]="true"
            [prefixIcon]="faEdit"
            [(ngModel)]="clearableTextarea"
            (textareaChange)="onTextareaChange('clearable', $event)"
            (clear)="onClear('clearable')"
          />
        </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)="fillSampleText()"
          >
            Fill Sample Text
          </button>
          <button 
            style="padding: 0.5rem 1rem; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;"
            (click)="clearAllTextareas()"
          >
            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 (lastChange()) {
          <div style="margin-top: 1rem; padding: 1rem; background: #e3f2fd; border-radius: 4px;">
            <strong>Last change:</strong> {{ lastChange() }}
          </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-textarea 
  label="Message"
  placeholder="Enter your message..."
  [(ngModel)]="message"
  (textareaChange)="onMessageChange($event)"&gt;
&lt;/ui-textarea&gt;</code></pre>

          <h4>With Character Limit:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-textarea 
  label="Tweet"
  placeholder="What's happening?"
  [maxLength]="280"
  [showCharacterCount]="true"
  size="lg"
  [(ngModel)]="tweetText"&gt;
&lt;/ui-textarea&gt;</code></pre>

          <h4>Auto-resize with Validation:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-textarea 
  label="Feedback"
  [required]="true"
  [autoResize]="true"
  [clearable]="true"
  state="error"
  errorMessage="Please provide feedback"
  [prefixIcon]="faComment"
  [(ngModel)]="feedback"&gt;
&lt;/ui-textarea&gt;</code></pre>

          <h4>Resize Options:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>// Resize options:
resize="none"       // No resize
resize="vertical"   // Vertical only (default)
resize="horizontal" // Horizontal only
resize="both"       // Both directions</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 TextareaDemoComponent {
  // FontAwesome icons
  readonly faComment = faComment;
  readonly faEdit = faEdit;
  readonly faEnvelope = faEnvelope;

  // Basic textareas
  basicTextarea1 = signal<string>('');
  basicTextarea2 = signal<string>('');
  basicTextarea3 = signal<string>('This is pre-filled content that demonstrates how the textarea looks with existing text.');

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

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

  // States
  stateDefault = signal<string>('');
  stateSuccess = signal<string>('Great job on completing this form!');
  stateWarning = signal<string>('Please review this content carefully.');
  stateError = signal<string>('This content has some issues.');

  // Interactive states
  stateDisabled = signal<string>('This content cannot be edited');
  stateReadonly = signal<string>('This is read-only information that you can view but not modify');
  stateRequired = signal<string>('');
  stateLoading = signal<string>('');

  // Character limits
  charLimit1 = signal<string>('');
  charLimit2 = signal<string>('');
  charLimit3 = signal<string>('');

  // Rows and resize
  rowsCompact = signal<string>('');
  rowsExpanded = signal<string>('');
  autoResizeTextarea = signal<string>('Start typing and watch this textarea grow automatically as you add more content...');
  horizontalResize = signal<string>('');
  bothResize = signal<string>('');

  // Icons and clearable
  iconPrefix = signal<string>('');
  iconSuffix = signal<string>('');
  clearableTextarea = signal<string>('You can clear this text by clicking the X button');

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

  onTextareaChange(textareaId: string, value: string): void {
    const preview = value.length > 50 ? value.substring(0, 50) + '...' : value;
    this.lastChange.set(`${textareaId}: "${preview}" (${value.length} chars)`);
    console.log(`Textarea ${textareaId} changed:`, value);
  }

  onClear(textareaId: string): void {
    this.lastChange.set(`${textareaId}: cleared`);
    console.log(`Textarea ${textareaId} cleared`);
  }

  fillSampleText(): void {
    const sampleTexts = [
      'This is sample text for demonstration purposes.',
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
      'Here is some example content to show how the textarea handles different amounts of text.',
      'Sample content with multiple lines.\nSecond line of content.\nThird line for testing.',
      'Short text',
      'A longer piece of sample text that demonstrates how the textarea component handles various lengths of content and provides a good example for testing purposes.'
    ];

    this.basicTextarea1.set(sampleTexts[0]);
    this.basicTextarea2.set(sampleTexts[1]);
    this.sizeSmall.set(sampleTexts[4]);
    this.sizeMedium.set(sampleTexts[2]);
    this.sizeLarge.set(sampleTexts[5]);
    this.variantOutlined.set(sampleTexts[0]);
    this.variantFilled.set(sampleTexts[1]);
    this.variantUnderlined.set(sampleTexts[2]);
    this.stateDefault.set(sampleTexts[3]);
    this.stateRequired.set(sampleTexts[0]);
    this.stateLoading.set(sampleTexts[1]);
    this.charLimit1.set('Sample text within limit');
    this.charLimit2.set('This is a tweet-style message that fits within the character limit.');
    this.charLimit3.set(sampleTexts[5]);
    this.rowsCompact.set('Compact');
    this.rowsExpanded.set(sampleTexts[3]);
    this.iconPrefix.set('Comment with icon');
    this.iconSuffix.set('Email content here');
    this.clearableTextarea.set('This text can be cleared');
    
    this.lastChange.set('All textareas filled with sample text');
  }

  clearAllTextareas(): void {
    this.basicTextarea1.set('');
    this.basicTextarea2.set('');
    this.sizeSmall.set('');
    this.sizeMedium.set('');
    this.sizeLarge.set('');
    this.variantOutlined.set('');
    this.variantFilled.set('');
    this.variantUnderlined.set('');
    this.stateDefault.set('');
    this.stateRequired.set('');
    this.stateLoading.set('');
    this.charLimit1.set('');
    this.charLimit2.set('');
    this.charLimit3.set('');
    this.rowsCompact.set('');
    this.rowsExpanded.set('');
    this.autoResizeTextarea.set('');
    this.horizontalResize.set('');
    this.bothResize.set('');
    this.iconPrefix.set('');
    this.iconSuffix.set('');
    this.clearableTextarea.set('');
    
    this.lastChange.set('All textareas cleared');
  }

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

  getCurrentValues(): string {
    const values = {
      basic: {
        textarea1: this.basicTextarea1(),
        textarea2: this.basicTextarea2(),
        textarea3: this.basicTextarea3()
      },
      sizes: {
        small: this.sizeSmall(),
        medium: this.sizeMedium(),
        large: this.sizeLarge()
      },
      variants: {
        outlined: this.variantOutlined(),
        filled: this.variantFilled(),
        underlined: this.variantUnderlined()
      },
      states: {
        default: this.stateDefault(),
        success: this.stateSuccess(),
        warning: this.stateWarning(),
        error: this.stateError(),
        disabled: this.stateDisabled(),
        readonly: this.stateReadonly(),
        required: this.stateRequired(),
        loading: this.stateLoading()
      },
      characterLimits: {
        limit100: this.charLimit1(),
        limit280: this.charLimit2(),
        limit1000: this.charLimit3()
      },
      rowsAndResize: {
        compact: this.rowsCompact(),
        expanded: this.rowsExpanded(),
        autoResize: this.autoResizeTextarea(),
        horizontal: this.horizontalResize(),
        both: this.bothResize()
      },
      iconsAndClearable: {
        prefix: this.iconPrefix(),
        suffix: this.iconSuffix(),
        clearable: this.clearableTextarea()
      },
      controls: {
        globalDisabled: this.globalDisabled(),
        lastChange: this.lastChange()
      }
    };
    
    return JSON.stringify(values, null, 2);
  }
}