// src/framework/components/MxTopicTag.ts
//
// <mx-topic-tag> — reusable leaf element that displays a fully qualified
// Matrix topic address (root/mount).  Plain Custom Element — NOT a
// MatrixActorHtmlElement.  No mount, no inbox, no context.
//
// Usage:
//   <mx-topic-tag address="chat-root.tab-f2ca83f7/chat.messages"></mx-topic-tag>
//
// Click to copy the address to clipboard.

const STYLES = `
:host {
  display: inline-flex;
  align-items: center;
  font-family: var(--mx-font-mono, Consolas, Monaco, monospace);
  font-size: var(--mx-topic-tag-font-size, 0.65rem);
  font-weight: 600;
  color: var(--mx-color-text-muted, #888);
  border: 1px solid var(--mx-color-border, #333);
  border-radius: var(--mx-topic-tag-radius, 3px);
  background: var(--mx-color-surface-alt, rgba(255,255,255,0.04));
  padding: 1px 6px;
  max-width: var(--mx-topic-tag-max-width, 300px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
  line-height: 1.4;
}
:host(:hover) {
  color: var(--mx-color-primary, #7986cb);
  border-color: var(--mx-color-border-light, #3a3a5a);
}
:host(.copied) {
  background: rgba(74,166,106,0.15);
  border-color: var(--mx-color-success, #4a6);
  color: var(--mx-color-success, #4a6);
}
.root { color: var(--mx-color-text-muted, #666); font-weight: 400; }
.sep { color: var(--mx-color-border-light, #444); }
.mount { color: var(--mx-color-primary, #7986cb); }
`;

export class MxTopicTag extends HTMLElement {
  private _address = '';

  static get observedAttributes() { return ['address']; }

  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `<style>${STYLES}</style><span class="content"></span>`;
    this.addEventListener('click', () => this._copyToClipboard());
  }

  get address(): string { return this._address; }
  set address(val: string) {
    this._address = val;
    this.setAttribute('address', val);
    this._render();
  }

  attributeChangedCallback(name: string, _old: string | null, val: string | null) {
    if (name === 'address') {
      this._address = val ?? '';
      this._render();
    }
  }

  private _render(): void {
    const content = this.shadowRoot?.querySelector('.content');
    if (!content) return;

    const addr = this._address;
    if (!addr) {
      content.innerHTML = '<span class="mount">(no address)</span>';
      return;
    }

    const slashIdx = addr.indexOf('/');
    if (slashIdx >= 0) {
      const rootPart = addr.slice(0, slashIdx);
      const mount = addr.slice(slashIdx + 1);
      content.innerHTML =
        `<span class="root">${this._esc(rootPart)}</span>` +
        `<span class="sep">/</span>` +
        `<span class="mount">${this._esc(mount)}</span>`;
    } else {
      content.innerHTML = `<span class="mount">${this._esc(addr)}</span>`;
    }

    this.title = `${addr} (click to copy)`;
  }

  private async _copyToClipboard(): Promise<void> {
    if (!this._address) return;
    try {
      await navigator.clipboard.writeText(this._address);
      this.classList.add('copied');
      setTimeout(() => this.classList.remove('copied'), 1200);
    } catch { /* clipboard API may not be available */ }
  }

  private _esc(s: string): string {
    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  }
}

if (!customElements.get('mx-topic-tag')) {
  customElements.define('mx-topic-tag', MxTopicTag);
}
