import { LitElement, html, css } from 'lit';
import '../atoms/grain-avatar.js';
import '../atoms/grain-spinner.js';

export class GrainCommentInput extends LitElement {
  static properties = {
    avatarUrl: { type: String },
    value: { type: String },
    placeholder: { type: String },
    disabled: { type: Boolean },
    loading: { type: Boolean },
    focusPhotoUrl: { type: String }
  };

  static styles = css`
    :host {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-sm);
      border-top: 1px solid var(--color-border);
      background: var(--color-bg-primary);
    }
    .input-wrapper {
      flex: 1;
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      background: var(--color-bg-secondary);
      border-radius: 20px;
      padding: var(--space-xs) var(--space-sm);
    }
    input {
      flex: 1;
      background: none;
      border: none;
      outline: none;
      font-size: var(--font-size-sm);
      color: var(--color-text-primary);
      font-family: inherit;
    }
    input::placeholder {
      color: var(--color-text-secondary);
    }
    input:disabled {
      opacity: 0.5;
    }
    .send-button {
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      padding: var(--space-xs);
      cursor: pointer;
      color: var(--color-accent);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
      min-width: 32px;
      min-height: 20px;
    }
    .send-button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .focus-photo {
      position: relative;
      flex-shrink: 0;
    }
    .focus-photo img {
      width: 32px;
      height: 32px;
      border-radius: 4px;
      object-fit: cover;
    }
    .focus-photo .clear-btn {
      position: absolute;
      top: -4px;
      right: -4px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--color-bg-elevated);
      border: 1px solid var(--color-border);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 10px;
      color: var(--color-text-secondary);
      padding: 0;
    }
  `;

  constructor() {
    super();
    this.avatarUrl = '';
    this.value = '';
    this.placeholder = 'Add a comment...';
    this.disabled = false;
    this.loading = false;
    this.focusPhotoUrl = '';
  }

  #handleInput(e) {
    this.value = e.target.value;
    this.dispatchEvent(new CustomEvent('input-change', {
      detail: { value: this.value }
    }));
  }

  #handleSend() {
    if (!this.value.trim() || this.disabled || this.loading) return;
    this.dispatchEvent(new CustomEvent('send', {
      detail: { value: this.value.trim() }
    }));
  }

  #handleClearFocus() {
    this.dispatchEvent(new CustomEvent('clear-focus'));
  }

  focus() {
    this.shadowRoot.querySelector('input')?.focus();
  }

  clear() {
    this.value = '';
  }

  render() {
    const canSend = this.value.trim() && !this.disabled && !this.loading;

    return html`
      <grain-avatar src=${this.avatarUrl} size="sm"></grain-avatar>
      ${this.focusPhotoUrl ? html`
        <div class="focus-photo">
          <img src=${this.focusPhotoUrl} alt="Commenting on this photo" />
          <button class="clear-btn" @click=${this.#handleClearFocus}>&times;</button>
        </div>
      ` : ''}
      <div class="input-wrapper">
        <input
          type="text"
          .value=${this.value}
          placeholder=${this.placeholder}
          ?disabled=${this.disabled || this.loading}
          @input=${this.#handleInput}
        />
        <button
          class="send-button"
          type="button"
          ?disabled=${!canSend}
          @click=${this.#handleSend}
        >
          ${this.loading ? html`<grain-spinner size="16"></grain-spinner>` : 'Post'}
        </button>
      </div>
    `;
  }
}

customElements.define('grain-comment-input', GrainCommentInput);