import { motion } from "framer-motion";
import { springs, staggerContainer, fadeSlideUp } from "@/lib/motion";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";

interface ShortcutHelpModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

const SHORTCUT_GROUPS = [
  {
    category: "Navigation",
    shortcuts: [
      { key: "Ctrl+K", description: "Open command palette" },
      { key: "?", description: "Show keyboard shortcuts" },
      { key: "Escape", description: "Close modal / cancel" },
    ],
  },
  {
    category: "Board",
    shortcuts: [
      { key: "Ctrl+Z", description: "Undo" },
      { key: "Ctrl+Shift+Z", description: "Redo" },
    ],
  },
];

export function ShortcutHelpModal({ open, onOpenChange }: ShortcutHelpModalProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="bg-pylon-surface sm:max-w-md">
        <DialogHeader>
          <DialogTitle className="font-heading text-pylon-text">
            Keyboard Shortcuts
          </DialogTitle>
          <DialogDescription className="text-pylon-text-secondary">
            Quick reference for all keyboard shortcuts.
          </DialogDescription>
        </DialogHeader>

        <motion.div
          className="flex flex-col gap-4"
          variants={staggerContainer(0.06)}
          initial="hidden"
          animate="visible"
        >
          {SHORTCUT_GROUPS.map((group) => (
            <motion.div key={group.category} variants={fadeSlideUp} transition={springs.bouncy}>
              <h4 className="mb-2 font-mono text-xs font-semibold uppercase tracking-widest text-pylon-text-secondary">
                {group.category}
              </h4>
              <div className="flex flex-col gap-1">
                {group.shortcuts.map(({ key, description }) => (
                  <div key={key} className="flex items-center justify-between py-1">
                    <span className="text-sm text-pylon-text">{description}</span>
                    <kbd className="rounded bg-pylon-column px-2 py-0.5 font-mono text-xs text-pylon-text-secondary">
                      {key}
                    </kbd>
                  </div>
                ))}
              </div>
            </motion.div>
          ))}
        </motion.div>
      </DialogContent>
    </Dialog>
  );
}