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

@customElement("keyboard-shortcuts")
export class KeyboardShortcuts extends LitElement {
	@state() private open = false;

	protected override createRenderRoot() {
		return this;
	}

	show() {
		this.open = true;
		this.requestUpdate();
	}
	hide() {
		this.open = false;
		this.requestUpdate();
	}
	toggle() {
		this.open = !this.open;
		this.requestUpdate();
	}

	private readonly shortcuts = [
		{
			group: "General",
			items: [
				{ key: "Cmd+K", desc: "Open command palette" },
				{ key: "?", desc: "Show keyboard shortcuts" },
				{ key: "Ctrl+L", desc: "Open model selector" },
				{ key: "Esc", desc: "Close dialogs / abort generation" },
			],
		},
		{
			group: "Sessions",
			items: [
				{ key: "Ctrl+N", desc: "New session" },
				{ key: "Ctrl+H", desc: "Session history" },
				{ key: "Ctrl+E", desc: "Export session" },
			],
		},
		{
			group: "Tools & Features",
			items: [
				{ key: "/memory", desc: "Open memory manager" },
				{ key: "/clear", desc: "Clear conversation" },
				{ key: "/model", desc: "Switch model" },
			],
		},
	];

	override render() {
		if (!this.open) return html``;
		return html`
      <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" @click=${(e: Event) => {
			if (e.target === e.currentTarget) this.hide();
		}}>
        <div class="bg-popover border border-border rounded-xl shadow-2xl p-6 max-w-lg w-full mx-4">
          <div class="flex items-center justify-between mb-4">
            <h2 class="font-semibold text-lg">Keyboard Shortcuts</h2>
            <button class="text-muted-foreground hover:text-foreground" @click=${() => this.hide()}>&#x2715;</button>
          </div>
          ${this.shortcuts.map(
					(group) => html`
            <div class="mb-4">
              <div class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">${group.group}</div>
              <div class="flex flex-col gap-1">
                ${group.items.map(
							(item) => html`
                  <div class="flex items-center justify-between py-1">
                    <span class="text-sm">${item.desc}</span>
                    <kbd class="text-xs bg-secondary border border-border rounded px-2 py-0.5 font-mono">${item.key}</kbd>
                  </div>
                `,
						)}
              </div>
            </div>
          `,
				)}
        </div>
      </div>
    `;
	}
}
