import { Component, Prop, Event, EventEmitter, State, h } from '@stencil/core';

@Component({
  tag: 'internal-message-input',
  styleUrl: 'message-input.css',
  shadow: true
})
export class InternalMessageInput {
  @Prop() placeholder: string = '输入消息...';
  @Prop() disabled: boolean = false;
  @Prop() maxLength: number = 1000;
  @Prop() multiline: boolean = false;
  @Prop() showCharCount: boolean = true;
  @Prop() sendButtonText: string = '发送';

  @State() private inputValue: string = '';
  @State() private isComposing: boolean = false;

  @Event() messageSend: EventEmitter<{ content: string; timestamp: number }>;
  @Event() inputChange: EventEmitter<string>;
  @Event() inputFocus: EventEmitter<void>;
  @Event() inputBlur: EventEmitter<void>;

  private handleInput = (event: Event) => {
    const target = event.target as HTMLInputElement | HTMLTextAreaElement;
    this.inputValue = target.value;
    this.inputChange.emit(this.inputValue);
  };

  private handleKeyDown = (event: KeyboardEvent) => {
    if (event.key === 'Enter') {
      if (this.multiline) {
        if (event.shiftKey) {
          // Shift+Enter 换行
          return;
        } else {
          // Enter 发送
          event.preventDefault();
          this.handleSend();
        }
      } else {
        // 单行模式 Enter 发送
        event.preventDefault();
        this.handleSend();
      }
    }
  };

  private handleCompositionStart = () => {
    this.isComposing = true;
  };

  private handleCompositionEnd = () => {
    this.isComposing = false;
    this.handleInput({ target: { value: this.inputValue } } as any);
  };

  private handleSend = () => {
    const content = this.inputValue.trim();
    if (content && !this.disabled && !this.isComposing) {
      const timestamp = Date.now();
      this.messageSend.emit({ content, timestamp });
      this.inputValue = '';
    }
  };

  private handleFocus = () => {
    this.inputFocus.emit();
  };

  private handleBlur = () => {
    this.inputBlur.emit();
  };

  render() {
    const isSendDisabled = this.disabled || !this.inputValue.trim();

    return (
      <div class="message-input-container">
        <div class="input-wrapper">
          {this.multiline ? (
            <textarea
              class="message-input"
              placeholder={this.placeholder}
              disabled={this.disabled}
              maxLength={this.maxLength}
              rows={3}
              value={this.inputValue}
              onInput={this.handleInput}
              onKeyDown={this.handleKeyDown}
              onCompositionstart={this.handleCompositionStart}
              onCompositionend={this.handleCompositionEnd}
              onFocus={this.handleFocus}
              onBlur={this.handleBlur}
            />
          ) : (
            <input
              type="text"
              class="message-input"
              placeholder={this.placeholder}
              disabled={this.disabled}
              maxLength={this.maxLength}
              value={this.inputValue}
              onInput={this.handleInput}
              onKeyDown={this.handleKeyDown}
              onCompositionstart={this.handleCompositionStart}
              onCompositionend={this.handleCompositionEnd}
              onFocus={this.handleFocus}
              onBlur={this.handleBlur}
            />
          )}
          <button
            class="send-button"
            disabled={isSendDisabled}
            onClick={this.handleSend}
          >
            {this.sendButtonText}
          </button>
        </div>
        {this.showCharCount && (
          <div class="char-count">
            {this.inputValue.length}/{this.maxLength}
          </div>
        )}
      </div>
    );
  }
}