import { useEffect, useState } from 'react'
import { Keyboard, X } from 'lucide-react'
import { useShortcuts } from '@/lib/useShortcuts'

/**
 * Глобальный «?» overlay — открывается клавишей `?`. Показывает текущие
 * горячие клавиши приложения: ничего hierarchical, просто плоский список
 * по разделам (Edit-страницы / List-страницы / Глобально).
 *
 * Маунтим один раз в AppLayout, чтобы был доступен везде внутри tenant'a.
 */
export function ShortcutsOverlay() {
  const [open, setOpen] = useState(false)
  useShortcuts({
    '?': () => setOpen(o => !o),
    'Escape': () => { if (open) setOpen(false) },
  })

  // Закрытие по клику на оверлей
  useEffect(() => {
    if (!open) return
    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false) }
    document.addEventListener('keydown', onKey)
    return () => document.removeEventListener('keydown', onKey)
  }, [open])

  if (!open) return null

  return (
    <div
      className="fixed inset-0 z-[70] flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm"
      onClick={() => setOpen(false)}
      role="dialog"
      aria-modal="true"
      aria-labelledby="shortcuts-title"
    >
      <div
        className="w-full max-w-lg bg-white dark:bg-slate-900 rounded-xl shadow-xl flex flex-col"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center justify-between px-5 py-3 border-b border-slate-200 dark:border-slate-800">
          <div className="flex items-center gap-2">
            <Keyboard className="w-4 h-4 text-slate-500" />
            <h2 id="shortcuts-title" className="font-semibold">Горячие клавиши</h2>
          </div>
          <button
            onClick={() => setOpen(false)}
            className="text-slate-400 hover:text-slate-600"
            aria-label="Закрыть"
          >
            <X className="w-4 h-4" />
          </button>
        </div>
        <div className="px-5 py-4 space-y-5 text-sm">
          <Section title="На любой странице">
            <Row label="Показать/скрыть подсказку" keys={['?']} />
            <Row label="Закрыть диалог / отменить" keys={['Esc']} />
          </Section>
          <Section title="Списки (Товары, Контрагенты, Документы)">
            <Row label="Фокус в поиск" keys={['/']} />
            <Row label="Создать новый" keys={['N']} />
          </Section>
          <Section title="Edit-формы (Товар, Документ)">
            <Row label="Сохранить" keys={['Ctrl', 'S']} />
            <Row label="Назад к списку" keys={['Esc']} />
          </Section>
        </div>
        <div className="px-5 py-2 border-t border-slate-200 dark:border-slate-800 text-[11px] text-slate-400">
          Нажми <Kbd>?</Kbd> в любой момент, чтобы открыть эту шпаргалку.
        </div>
      </div>
    </div>
  )
}

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div>
      <h3 className="text-xs uppercase tracking-wide text-slate-500 mb-2">{title}</h3>
      <div className="space-y-1.5">{children}</div>
    </div>
  )
}

function Row({ label, keys }: { label: string; keys: string[] }) {
  return (
    <div className="flex items-center justify-between gap-3">
      <span className="text-slate-700 dark:text-slate-300">{label}</span>
      <span className="flex items-center gap-1 shrink-0">
        {keys.map((k, i) => (
          <span key={i} className="flex items-center gap-1">
            {i > 0 && <span className="text-slate-400 text-xs">+</span>}
            <Kbd>{k}</Kbd>
          </span>
        ))}
      </span>
    </div>
  )
}

function Kbd({ children }: { children: React.ReactNode }) {
  return (
    <kbd className="inline-block px-1.5 py-0.5 rounded border border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-800 text-xs font-mono shadow-[inset_0_-1px_0_0_rgb(0_0_0_/_0.08)]">
      {children}
    </kbd>
  )
}
