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

@customElement("jae-empty-state")
export class JaeEmptyState extends LitElement {
	@property({ type: Boolean }) visible = true;
	@property({ type: Boolean }) faded = false;

	protected override createRenderRoot() {
		return this;
	}

	private _suggestions = [
		{ icon: "💻", text: "Write me a TypeScript function that debounces API calls" },
		{ icon: "🔍", text: "Search the web for the latest news on AI coding agents" },
		{ icon: "🖼️", text: "Generate an image of a black dragon breathing fire" },
		{ icon: "📝", text: "Explain how async/await works in JavaScript" },
		{ icon: "🔧", text: "Help me debug this code and explain the issue" },
		{ icon: "📊", text: "Create a Mermaid diagram of a REST API flow" },
	];

	override render() {
		if (!this.visible) return html``;

		if (this.faded) {
			return html``;
		}

		return html`
      <div class="flex flex-col items-center justify-center h-full min-h-[60vh] px-4 pb-8 select-none">
        <div class="relative mb-2 group">
          <img
            src="/mascot/jae-default.png"
            alt="JAE Mascot"
            class="w-40 h-auto drop-shadow-2xl transition-transform duration-300 group-hover:scale-105"
          />
        </div>
        <h1 class="text-2xl font-bold text-foreground mb-1">Hey, I'm JAE</h1>
        <p class="text-muted-foreground text-sm mb-8 text-center max-w-sm">
          Your AI coding agent. I can write code, search the web, generate images, and a whole lot more.
        </p>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 w-full max-w-xl">
          ${this._suggestions.map(
					(s) => html`
            <button
              class="flex items-center gap-3 px-4 py-3 rounded-xl border border-border bg-secondary/50 hover:bg-secondary hover:border-primary/40 transition-all text-left text-sm group"
              @click=${() => this.dispatchEvent(new CustomEvent("suggestion", { detail: s.text, bubbles: true, composed: true }))}
            >
              <span class="text-lg shrink-0">${s.icon}</span>
              <span class="text-muted-foreground group-hover:text-foreground transition-colors leading-tight">${s.text}</span>
            </button>
          `,
				)}
        </div>
      </div>
    `;
	}
}
