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

/**
 * <toast-notification> - Brief popup message that auto-hides.
 *
 * Usage:
 *   const toast = document.querySelector('toast-notification');
 *   toast.show('Session created');
 */
export class ToastNotification extends LitElement {
  static properties = {
    _message: { state: true },
    _visible: { state: true },
  };

  static styles = css`
    :host { display: block; }
    .toast {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--toast-bg, #e6edf3);
      color: var(--toast-fg, #0d1117);
      padding: 10px 24px;
      border-radius: 8px;
      font-size: 14px;
      z-index: 9999;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .toast.visible { opacity: 1; }
  `;

  constructor() {
    super();
    this._message = '';
    this._visible = false;
    this._timer = null;
  }

  show(msg, duration = 3000) {
    this._message = msg;
    this._visible = true;
    clearTimeout(this._timer);
    this._timer = setTimeout(() => { this._visible = false; }, duration);
  }

  render() {
    return html`<div class="toast ${this._visible ? 'visible' : ''}" role="status" aria-live="polite" aria-atomic="true">${this._message}</div>`;
  }
}

customElements.define('toast-notification', ToastNotification);