/* eslint-disable */
/* Keyboard — visual QWERTY layout with keys highlighted from a code list.
 *
 * Input is browser-style key codes (e.g. "KeyW", "Space", "ShiftLeft").
 * Internally we collapse left/right modifier variants and strip the "Key"
 * prefix so the table can match the layout's friendly labels ("W", "Shift").
 */

const KB_ROWS = [
  // row 0: number row
  [
    { k: '`', w: 1 },
    { k: '1', w: 1 }, { k: '2', w: 1 }, { k: '3', w: 1 }, { k: '4', w: 1 },
    { k: '5', w: 1 }, { k: '6', w: 1 }, { k: '7', w: 1 }, { k: '8', w: 1 },
    { k: '9', w: 1 }, { k: '0', w: 1 }, { k: '-', w: 1 }, { k: '=', w: 1 },
    { k: 'Backspace', w: 2, mod: true },
  ],
  // row 1: Tab Q-P [ ]
  [
    { k: 'Tab', w: 1.5, mod: true },
    { k: 'Q', w: 1 }, { k: 'W', w: 1 }, { k: 'E', w: 1 }, { k: 'R', w: 1 },
    { k: 'T', w: 1 }, { k: 'Y', w: 1 }, { k: 'U', w: 1 }, { k: 'I', w: 1 },
    { k: 'O', w: 1 }, { k: 'P', w: 1 }, { k: '[', w: 1 }, { k: ']', w: 1 },
    { k: '\\', w: 1.5, mod: true },
  ],
  // row 2: Caps A-L ; ' Enter
  [
    { k: 'Caps', w: 1.75, mod: true },
    { k: 'A', w: 1 }, { k: 'S', w: 1 }, { k: 'D', w: 1 }, { k: 'F', w: 1 },
    { k: 'G', w: 1 }, { k: 'H', w: 1 }, { k: 'J', w: 1 }, { k: 'K', w: 1 },
    { k: 'L', w: 1 }, { k: ';', w: 1 }, { k: "'", w: 1 },
    { k: 'Enter', w: 2.25, mod: true },
  ],
  // row 3: Shift Z-/ Shift
  [
    { k: 'Shift', w: 2.25, mod: true },
    { k: 'Z', w: 1 }, { k: 'X', w: 1 }, { k: 'C', w: 1 }, { k: 'V', w: 1 },
    { k: 'B', w: 1 }, { k: 'N', w: 1 }, { k: 'M', w: 1 },
    { k: ',', w: 1 }, { k: '.', w: 1 }, { k: '/', w: 1 },
    { k: 'Shift', w: 2.75, mod: true, id: 'shift-r' },
  ],
  // row 4: Ctrl / Alt / Space / Alt / Ctrl
  [
    { k: 'Ctrl', w: 1.5, mod: true },
    { k: 'Alt', w: 1.25, mod: true },
    { k: 'Space', w: 7.5 },
    { k: 'Alt', w: 1.25, mod: true, id: 'alt-r' },
    { k: 'Ctrl', w: 1.5, mod: true, id: 'ctrl-r' },
  ],
];

// Map browser e.code values to the layout's labels.
const CODE_TO_LABEL = (() => {
  const m = {};
  // Letters: KeyA -> A
  for (let c = 65; c <= 90; c++) {
    const letter = String.fromCharCode(c);
    m[`Key${letter}`] = letter;
  }
  // Digits: Digit0 -> 0
  for (let d = 0; d <= 9; d++) {
    m[`Digit${d}`] = String(d);
  }
  Object.assign(m, {
    Space: 'Space',
    Enter: 'Enter',
    Tab: 'Tab',
    Backspace: 'Backspace',
    CapsLock: 'Caps',
    ShiftLeft: 'Shift', ShiftRight: 'Shift',
    ControlLeft: 'Ctrl', ControlRight: 'Ctrl',
    AltLeft: 'Alt', AltRight: 'Alt',
    Backquote: '`',
    Minus: '-',
    Equal: '=',
    BracketLeft: '[',
    BracketRight: ']',
    Backslash: '\\',
    Semicolon: ';',
    Quote: "'",
    Comma: ',',
    Period: '.',
    Slash: '/',
  });
  return m;
})();

function codesToLabels(codes) {
  if (!Array.isArray(codes)) return new Set();
  const out = new Set();
  for (const c of codes) {
    const lbl = CODE_TO_LABEL[c];
    if (lbl) out.add(lbl);
  }
  return out;
}

function Keyboard({ active = [] }) {
  // active is a list of e.code strings (e.g. ["KeyW","ShiftLeft"]).
  const onLabels = codesToLabels(active);
  return (
    <div className="kb" role="img" aria-label="Keyboard layout">
      {KB_ROWS.map((row, ri) => (
        <div className="kb-row" key={ri}>
          {row.map((key, ki) => (
            <div
              key={`${key.id || key.k}-${ki}`}
              className={[
                'kb-key',
                key.mod ? 'kb-key-mod' : '',
                onLabels.has(key.k) ? 'is-on' : '',
                key.k === 'Space' ? 'kb-key-space' : '',
              ].filter(Boolean).join(' ')}
              style={{ flexGrow: key.w }}
            >
              <span className="kb-key-label">{key.k === 'Space' ? '' : key.k}</span>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

window.Keyboard = Keyboard;