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

export class GrainStatCount extends LitElement {
  static properties = {
    icon: { type: String },
    count: { type: Number },
    filled: { type: Boolean },
    interactive: { type: Boolean }
  };

  static styles = css`
    :host {
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      color: var(--color-text-primary);
    }
    button {
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      padding: var(--space-sm);
      margin: calc(-1 * var(--space-sm));
      cursor: pointer;
      color: inherit;
      border-radius: var(--border-radius);
      transition: opacity 0.2s;
    }
    button:hover {
      opacity: 0.7;
    }
    button:active {
      transform: scale(0.95);
    }
    .count {
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
    }
  `;

  constructor() {
    super();
    this.count = 0;
    this.filled = false;
    this.interactive = false;
  }

  #formatCount(n) {
    if (n >= 1000000) return `${(n / 1000000).toFixed(1)}M`;
    if (n >= 1000) return `${(n / 1000).toFixed(1)}K`;
    return n.toString();
  }

  #handleClick() {
    if (this.interactive) {
      this.dispatchEvent(new CustomEvent('stat-click', { bubbles: true, composed: true }));
    }
  }

  get #iconName() {
    if (this.icon === 'heart' && this.filled) {
      return 'heartFilled';
    }
    return this.icon;
  }

  render() {
    const color = this.icon === 'heart' && this.filled ? 'var(--color-heart)' : 'inherit';

    return html`
      <button
        type="button"
        aria-label=${this.icon}
        style="color: ${color}"
        @click=${this.#handleClick}
      >
        <grain-icon name=${this.#iconName} size="16"></grain-icon>
      </button>
      ${this.count > 0 ? html`
        <span class="count">${this.#formatCount(this.count)}</span>
      ` : ''}
    `;
  }
}

customElements.define('grain-stat-count', GrainStatCount);