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

@customElement("jae-typing-indicator")
export class JaeTypingIndicator extends LitElement {
  @state() private _active = false;
  @state() private _complexity: "low" | "medium" | "high" = "low";

  protected override createRenderRoot() { return this; }

  show(complexity: "low" | "medium" | "high" = "medium") {
    this._active = true;
    this._complexity = complexity;
    this.requestUpdate();
  }

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

  get active() { return this._active; }

  override render() {
    if (!this._active) return html``;
    const bars = this._complexity === "high" ? 7 : this._complexity === "medium" ? 5 : 3;
    const speed = this._complexity === "high" ? "0.3s" : this._complexity === "medium" ? "0.5s" : "0.7s";
    const color = this._complexity === "high" ? "bg-amber-400" : this._complexity === "medium" ? "bg-primary" : "bg-muted-foreground";
    return html`
      <div class="flex items-center gap-1.5 px-3 py-2 jae-fade-in">
        <div class="flex items-end gap-[2px] h-4">
          ${Array.from({ length: bars }, (_, i) => html`
            <div class="w-[3px] rounded-full ${color} transition-all duration-200"
                 style="animation: jae-wave ${speed} ease-in-out ${i * 0.08}s infinite alternate; min-height: 3px;"></div>
          `)}
        </div>
        <span class="text-[11px] text-muted-foreground ml-1">
          ${this._complexity === "high" ? "Deep thinking..." : this._complexity === "medium" ? "Processing..." : "Typing..."}
        </span>
      </div>`;
  }
}
