import { LitElement, html, css } from '/vendor/lit/lit.min.js';

/**
 * <session-pill> - Floating session-switcher button with bell badge.
 *
 * Properties:
 *   label:         String - session name to display
 *   hasBell:       Boolean - whether bell badge is visible
 *   visible:       Boolean - whether the pill itself is shown
 *
 * Events:
 *   pill-click     - Fired when user taps/clicks the pill
 */
export class SessionPill extends LitElement {
  static properties = {
    label:   { type: String },
    hasBell: { type: Boolean, attribute: 'has-bell' },
    visible: { type: Boolean, reflect: true },
  };

  static styles = css`
    :host { display: none; }
    :host([visible]) { display: block; }

    .pill {
      position: fixed;
      bottom: 18px;
      right: 18px;
      z-index: 200;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      border: none;
      border-radius: 999px;
      background: var(--pill-bg, #21262d);
      color: var(--pill-fg, #c9d1d9);
      font-size: 13px;
      opacity: 0.75;
      cursor: pointer;
      transition: opacity 0.2s;
    }
    .pill:hover { opacity: 1; }

    .bell {
      display: none;
      color: var(--bell-color, #d29922);
    }
    .bell.active { display: inline-flex; }
  `;

  constructor() {
    super();
    this.label = '';
    this.hasBell = false;
    this.visible = false;
  }

  _onClick() {
    this.dispatchEvent(new CustomEvent('pill-click', { bubbles: true, composed: true }));
  }

  render() {
    return html`
      <button class="pill" aria-label="Switch session" @click=${this._onClick}>
        <span class="label">${this.label}</span>
        <span class="bell ${this.hasBell ? 'active' : ''}" aria-hidden="true">
          <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor">
            <path d="M8 1a1 1 0 0 1 1 1v.3A4.5 4.5 0 0 1 12.5 7v2.5l1 2H2.5l1-2V7A4.5 4.5 0 0 1 7 2.3V2a1 1 0 0 1 1-1zM6.5 13a1.5 1.5 0 0 0 3 0z"/>
          </svg>
        </span>
      </button>
    `;
  }
}

customElements.define('session-pill', SessionPill);