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: "Ctrl+K", desc: "Command palette" },
      { key: "/", desc: "Slash commands" },
      { key: "?", desc: "Keyboard shortcuts" },
      { key: "Ctrl+L", desc: "Model selector" },
      { key: "Esc", desc: "Close dialogs" },
    ]},
    { group: "Sessions", items: [
      { key: "Ctrl+N", desc: "New session" },
      { key: "Ctrl+H", desc: "Session history" },
      { key: "Ctrl+E", desc: "Export session" },
    ]},
    { group: "Panels", items: [
      { key: "Ctrl+B", desc: "Toggle browser" },
      { key: "Ctrl+T", desc: "Toggle terminal" },
      { key: "Ctrl+M", desc: "Toggle marketplace" },
    ]},
    { group: "Tools", items: [
      { key: "/search", desc: "Web search" },
      { key: "/image", desc: "Generate image" },
      { key: "/memory", desc: "Memory manager" },
      { key: "/persona", desc: "Switch persona" },
    ]},
  ];

  override render() {
    if (!this.open) return html``;
    return html`
      <div class="fixed inset-0 z-50 flex items-center justify-center" style="background:rgba(0,0,0,0.6);backdrop-filter:blur(4px)" @click=${(e: Event) => { if (e.target === e.currentTarget) this.hide(); }}>
        <div class="rounded-2xl shadow-2xl p-6 max-w-lg w-full mx-4 border border-white/10 jae-scale-in"
          style="background:var(--color-card, hsl(240 6% 10%));color:var(--color-card-foreground, hsl(0 0% 95%))">
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-bold" style="color:var(--color-card-foreground, hsl(0 0% 95%))">⌨ Keyboard Shortcuts</h2>
            <button @click=${() => this.hide()} class="hover:opacity-70 transition-opacity text-lg" style="color:var(--color-muted-foreground, hsl(0 0% 64%))">&times;</button>
          </div>
          <div class="space-y-4 max-h-[60vh] overflow-y-auto pr-1">
            ${this.shortcuts.map(g => html`
              <div>
                <h3 class="text-xs font-semibold uppercase tracking-widest mb-2" style="color:var(--color-muted-foreground, hsl(0 0% 64%))">${g.group}</h3>
                <div class="space-y-1">
                  ${g.items.map(s => html`
                    <div class="flex items-center justify-between py-1.5 px-3 rounded-lg transition-colors duration-150" style="color:var(--color-card-foreground, hsl(0 0% 95%))" @mouseenter=${(e: Event) => (e.currentTarget as HTMLElement).style.background = "rgba(255,255,255,0.06)"} @mouseleave=${(e: Event) => (e.currentTarget as HTMLElement).style.background = ""}>
                      <span class="text-sm">${s.desc}</span>
                      <kbd class="px-2 py-0.5 rounded-md text-xs font-mono" style="background:rgba(255,255,255,0.08);color:var(--color-card-foreground, hsl(0 0% 90%));border:1px solid rgba(255,255,255,0.12)">${s.key}</kbd>
                    </div>
                  `)}
                </div>
              </div>
            `)}
          </div>
        </div>
      </div>`;
  }
}
