/** The Zaubertasten sheet (F1). Mirrors lib/keyboard.ts - if a binding changes there,
 * it changes here. */

const KEYS: Array<[caps: string[], label: string]> = [
  [["LEER"], "Play / Pause"],
  [["SHIFT+H", "SHIFT+L"], "Song zurück / vor"],
  [["SHIFT+J", "SHIFT+K"], "Leiser / lauter"],
  [["SHIFT+M"], "Stumm"],
  [["⇧←", "⇧→"], "15 Sekunden zurück / vor"],
  [["← ↑ ↓ →"], "Auswahl bewegen"],
  [["CTRL+H/J/K/L"], "Auswahl bewegen (Raster oder Titelliste)"],
  [["CTRL+D", "CTRL+U"], "Eine halbe Seite weiter / zurück"],
  [["A-Z"], "Album oder Hörbuch suchen"],
  [["?"], "Einzelne Titel suchen"],
  [["TAB"], "Musik / Hörbücher / Podcasts"],
  [["ENTER"], "Auswahl abspielen"],
  [["⇧ENTER"], "Titelliste öffnen"],
  [["A", "0-9"], "Aktuellen Titel einer Fernbedienungs-Taste zuweisen"],
  [["F1"], "Diese Hilfe"],
  [["ESC"], "Schließen / Suche löschen"],
];

export function HelpOverlay({ onClose }: { onClose: () => void }) {
  return (
    <div className="overlay" style={{ zIndex: 5 }} onClick={onClose}>
      <div className="sheet" style={{ padding: "26px 30px", width: 330 }}>
        <div
          style={{
            fontSize: 17,
            fontWeight: 800,
            color: "var(--ink)",
            marginBottom: 14,
            letterSpacing: 0.3,
          }}
        >
          ⌨️ Zaubertasten
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {KEYS.map(([caps, label]) => (
            <div key={label} style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <div style={{ display: "flex", gap: 4 }}>
                {caps.map((cap) => (
                  <div key={cap} className="key-cap" style={{ minWidth: caps.length > 1 ? 0 : 56 }}>
                    {cap}
                  </div>
                ))}
              </div>
              <div style={{ fontSize: 14, fontWeight: 700, color: "oklch(35% 0.03 210)" }}>
                {label}
              </div>
            </div>
          ))}
        </div>
        <div
          style={{
            marginTop: 16,
            fontSize: 12,
            fontWeight: 600,
            color: "oklch(50% 0.03 210 / .8)",
            textAlign: "center",
          }}
        >
          Tippe irgendwohin, um zu schließen
        </div>
      </div>
    </div>
  );
}