import { useEffect } from "react";

type Props = {
  onClose: () => void;
};

const rows = [
  ["1–6", "Jump to MLP … VLM in learning order"],
  ["← →", "Previous / next architecture (in detail view)"],
  ["Esc", "Close detail view or this help"],
  ["?", "Toggle this shortcut list"],
];

export function HelpOverlay({ onClose }: Props) {
  useEffect(() => {
    const onKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="help-title"
      className="fixed inset-0 z-[60] flex items-end justify-center bg-black/60 p-4 sm:items-center"
      onClick={onClose}
    >
      <div
        className="w-full max-w-md rounded-xl border border-white/15 bg-[#0e1624] p-5 shadow-2xl"
        onClick={(event) => event.stopPropagation()}
      >
        <h2 id="help-title" className="text-lg font-semibold text-white">
          Keyboard shortcuts
        </h2>
        <ul className="mt-4 space-y-2">
          {rows.map(([key, label]) => (
            <li key={key} className="flex items-center justify-between gap-3 text-sm">
              <span className="text-slate-300">{label}</span>
              <kbd className="kbd">{key}</kbd>
            </li>
          ))}
        </ul>
        <button
          type="button"
          onClick={onClose}
          className="mt-5 min-h-11 w-full rounded-md border border-white/15 px-4 py-2.5 text-sm text-slate-100 hover:border-cyan-300/50"
        >
          Close
        </button>
      </div>
    </div>
  );
}