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

/**
 * <hover-preview> - Full-window snapshot popover for session hover.
 *
 * Properties:
 *   sessionName: String  - name of the session being previewed
 *   snapshot:    String  - raw terminal snapshot text (ANSI)
 *   open:        Boolean - whether the preview is visible
 *
 * Events:
 *   preview-click { name } - Fired when user clicks the preview (navigate to session)
 *   preview-close          - Fired when preview should be dismissed
 */
export class HoverPreview extends LitElement {
  static properties = {
    sessionName: { type: String, attribute: 'session-name' },
    snapshot:    { type: String },
    open:        { type: Boolean, reflect: true },
  };

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

    .preview-popover {
      position: fixed;
      inset: 48px 12px 12px 12px;
      z-index: 300;
      background: var(--bg-primary, #0d1117);
      border: 1px solid var(--border-muted, #30363d);
      border-radius: 8px;
      overflow: auto;
      padding: 12px;
      cursor: default;
      pointer-events: none;   /* clicks pass through to sidebar tiles below */
    }
    .preview-popover pre {
      margin: 0;
      font-family: inherit;
      font-size: 12px;
      line-height: 1.4;
      white-space: pre;
      color: var(--fg-default, #c9d1d9);
    }
  `;

  constructor() {
    super();
    this.sessionName = '';
    this.snapshot = '';
    this.open = false;
    this._boundDocClick = this._onDocumentClick.bind(this);
  }

  updated(changed) {
    if (changed.has('open')) {
      if (this.open) {
        // Scroll to bottom after render (prompt area)
        const popover = this.shadowRoot.querySelector('.preview-popover');
        if (popover) popover.scrollTop = popover.scrollHeight;
        // Close on any click outside (capture phase, next tick)
        setTimeout(() => document.addEventListener('click', this._boundDocClick, true), 0);
      } else {
        document.removeEventListener('click', this._boundDocClick, true);
      }
    }
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    document.removeEventListener('click', this._boundDocClick, true);
  }

  _onDocumentClick(e) {
    // Close the preview. Do NOT call stopPropagation() — that would swallow
    // clicks intended for sidebar tiles and other elements behind the preview.
    // pointer-events:none on .preview-popover lets clicks reach their real
    // target; this handler just ensures the overlay is dismissed in sync.
    this.open = false;
    this.dispatchEvent(new CustomEvent('preview-close', {
      bubbles: true, composed: true,
    }));
  }

  render() {
    if (!this.open) return html``;
    return html`
      <div class="preview-popover">
        <pre>${unsafeHTML(ansiToHtml(this.snapshot || ''))}</pre>
      </div>
    `;
  }
}

customElements.define('hover-preview', HoverPreview);