import { useEffect } from 'react'
import { X } from 'lucide-react'

interface ShortcutRow {
  keys: string[]
  label: string
}

interface ShortcutGroup {
  title: string
  rows: ShortcutRow[]
}

const GROUPS: ShortcutGroup[] = [
  {
    title: 'Modes',
    rows: [
      { keys: ['V'], label: 'Select mode' },
      { keys: ['H'], label: 'Pan mode' },
      { keys: ['C'], label: 'Connect mode' },
      { keys: ['Space'], label: 'Temporary pan (hold)' },
    ],
  },
  {
    title: 'Canvas',
    rows: [
      { keys: ['Ctrl', 'Shift', 'F'], label: 'Fit view' },
      { keys: ['Ctrl', 'A'], label: 'Select all' },
      { keys: ['Ctrl', 'Z'], label: 'Undo' },
      { keys: ['Ctrl', 'Y'], label: 'Redo' },
    ],
  },
  {
    title: 'Nodes',
    rows: [
      { keys: ['Ctrl', 'C'], label: 'Copy' },
      { keys: ['Ctrl', 'V'], label: 'Paste' },
      { keys: ['Ctrl', 'D'], label: 'Duplicate' },
      { keys: ['Del'], label: 'Delete selected' },
      { keys: [']'], label: 'Bring to front' },
      { keys: ['['], label: 'Send to back' },
    ],
  },
  {
    title: 'Nudge',
    rows: [
      { keys: ['↑', '↓', '←', '→'], label: 'Move 1px' },
      { keys: ['Shift', '↑↓←→'], label: 'Move 10px' },
    ],
  },
]

interface KeyboardShortcutsOverlayProps {
  onClose: () => void
}

function Kbd({ children }: { children: string }) {
  return (
    <span className="inline-flex h-5 min-w-[1.25rem] items-center justify-center rounded border border-white/10 bg-white/[0.07] px-1.5 text-[10px] font-mono text-muted-foreground">
      {children}
    </span>
  )
}

export function KeyboardShortcutsOverlay({ onClose }: KeyboardShortcutsOverlayProps) {
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose()
    }
    document.addEventListener('keydown', handler)
    return () => document.removeEventListener('keydown', handler)
  }, [onClose])

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-[2px]"
      onClick={e => { if (e.target === e.currentTarget) onClose() }}
    >
      <div className="w-full max-w-xl rounded-lg border border-default bg-card shadow-2xl">
        {/* Header */}
        <div className="flex items-center justify-between border-b border-default px-5 py-3.5">
          <div>
            <h2 className="font-heading text-sm font-semibold text-heading">Keyboard Shortcuts</h2>
            <p className="text-[11px] text-muted-foreground">Press <Kbd>?</Kbd> anytime to open this</p>
          </div>
          <button
            onClick={onClose}
            className="flex h-7 w-7 items-center justify-center rounded border border-default text-muted-foreground hover:border-hover hover:text-primary"
          >
            <X size={13} />
          </button>
        </div>

        {/* Shortcut grid */}
        <div className="grid grid-cols-2 gap-0 divide-x divide-default">
          {GROUPS.map((group, gi) => (
            <div key={group.title} className={gi >= 2 ? 'border-t border-default' : ''}>
              <div className="px-5 pb-2 pt-4">
                <div className="mb-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
                  {group.title}
                </div>
                <div className="space-y-1.5">
                  {group.rows.map(row => (
                    <div key={row.label} className="flex items-center justify-between gap-3">
                      <span className="text-xs text-primary">{row.label}</span>
                      <div className="flex shrink-0 items-center gap-0.5">
                        {row.keys.map((k, i) => (
                          <span key={i} className="flex items-center gap-0.5">
                            {i > 0 && <span className="text-[10px] text-muted-foreground/50">+</span>}
                            <Kbd>{k}</Kbd>
                          </span>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Footer hint */}
        <div className="border-t border-default px-5 py-2.5 text-[11px] text-muted-foreground">
          On Mac, <Kbd>Ctrl</Kbd> = <Kbd>⌘ Cmd</Kbd>
        </div>
      </div>
    </div>
  )
}
