import { DeesElement, customElement, html, css, property, type TemplateResult } from '@design.estate/dees-element';

@customElement('wcc-record-button')
export class WccRecordButton extends DeesElement {
  @property({ type: String })
  accessor state: 'idle' | 'recording' = 'idle';

  @property({ type: Number })
  accessor duration: number = 0;

  public static styles = [
    css`
      :host {
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        cursor: pointer;
        transition: all 0.15s ease;
        color: #666;
        user-select: none;
      }

      :host(:hover) {
        background: rgba(239, 68, 68, 0.05);
        color: #f87171;
      }

      :host(.recording) {
        background: rgba(239, 68, 68, 0.15);
        color: #f87171;
      }

      .content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
      }

      .rec-icon {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: currentColor;
      }

      :host(.recording) .rec-icon {
        animation: pulse-recording 1s ease-in-out infinite;
      }

      @keyframes pulse-recording {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.5; transform: scale(0.9); }
      }

      .recording-timer {
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 0.7rem;
      }
    `
  ];

  private formatDuration(seconds: number): string {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  }

  public render(): TemplateResult {
    return html`
      <div class="content">
        <div class="rec-icon"></div>
        ${this.state === 'recording' ? html`
          <span class="recording-timer">${this.formatDuration(this.duration)}</span>
        ` : null}
      </div>
    `;
  }

  async connectedCallback(): Promise<void> {
    await super.connectedCallback();
    this.addEventListener('click', this.handleClick);
  }

  async disconnectedCallback(): Promise<void> {
    await super.disconnectedCallback();
    this.removeEventListener('click', this.handleClick);
  }

  private handleClick = (): void => {
    this.dispatchEvent(new CustomEvent('record-click', {
      bubbles: true,
      composed: true
    }));
  };

  updated(changedProperties: Map<string, unknown>): void {
    super.updated(changedProperties);
    if (changedProperties.has('state')) {
      if (this.state === 'recording') {
        this.classList.add('recording');
      } else {
        this.classList.remove('recording');
      }
    }
  }
}