import { createFileRoute } from '@tanstack/react-router'
import { SettingsPage } from '#/components/settings/settings-page'

const GROUPS: Array<{ title: string; shortcuts: Array<[string, string]> }> = [
  {
    title: 'Navigation',
    shortcuts: [
      ['g then i', 'Go to Inbox'],
      ['g then s', 'Go to Starred'],
      ['g then t', 'Go to Sent'],
      ['g then d', 'Go to Drafts'],
      ['j / k', 'Next / previous message'],
      ['/', 'Focus search'],
    ],
  },
  {
    title: 'Actions',
    shortcuts: [
      ['c', 'Compose new message'],
      ['r', 'Reply'],
      ['a', 'Reply all'],
      ['f', 'Forward'],
      ['e', 'Archive'],
      ['#', 'Delete'],
      ['s', 'Star / unstar'],
      ['u', 'Mark as unread'],
    ],
  },
  {
    title: 'Compose',
    shortcuts: [
      ['Ctrl/Cmd + Enter', 'Send'],
      ['Ctrl/Cmd + S', 'Save draft'],
      ['Esc', 'Close compose'],
    ],
  },
]

export const Route = createFileRoute('/_app/settings/shortcuts')({ component: ShortcutsPage })

function ShortcutsPage() {
  return (
    <SettingsPage title="Keyboard Shortcuts" description="Work faster without leaving your keyboard.">
      {GROUPS.map((group) => (
        <div key={group.title}>
          <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-tertiary">{group.title}</p>
          <div className="divide-y divide-subtle rounded-lg border border-subtle">
            {group.shortcuts.map(([key, label]) => (
              <div key={key} className="flex items-center justify-between px-3 py-2.5 text-sm">
                <span className="text-secondary">{label}</span>
                <kbd className="rounded border border-subtle bg-surface-2 px-2 py-1 font-mono text-xs text-primary">{key}</kbd>
              </div>
            ))}
          </div>
        </div>
      ))}
    </SettingsPage>
  )
}