import { html, LitElement } from "lit";
import { customElement, state, property } from "lit/decorators.js";

@customElement("jae-context-peek")
export class JaeContextPeek extends LitElement {
  @property({ type: String }) summary = "";
  @property({ type: Number }) index = 0;
  @state() private _visible = false;
  @state() private _x = 0;
  @state() private _y = 0;

  protected override createRenderRoot() { return this; }

  showAt(x: number, y: number, summary: string) {
    this._x = x;
    this._y = y;
    this.summary = summary;
    this._visible = true;
    this.requestUpdate();
  }

  hide() {
    this._visible = false;
    this.requestUpdate();
  }

  override render() {
    if (!this._visible || !this.summary) return html``;
    return html`
      <div class="fixed z-[100] pointer-events-none jae-fade-in"
           style="left: ${this._x}px; top: ${this._y - 8}px; transform: translateY(-100%);">
        <div class="max-w-xs px-3 py-2 rounded-xl jae-glass border border-border/60 shadow-xl">
          <div class="text-[10px] text-muted-foreground font-medium mb-1">Message #${this.index + 1}</div>
          <div class="text-xs text-foreground/90 leading-relaxed">${this.summary}</div>
        </div>
      </div>`;
  }
}
