/* global React, window */
// Piano Lab — Lesson: Naming the white keys.
//
// Teaches the landmark trick — find any pair of black keys, the white
// key directly to their LEFT is always C. From C, the rest follow
// D E F G A B C... Animates a walkthrough up the octave with audio.

(function () {
  'use strict';
  window.PianoLab = window.PianoLab || {};
  window.PianoLab.ui = window.PianoLab.ui || {};

  const LessonNoteNames = function () {
    const Keyboard = window.PianoLab.ui.Keyboard;
    const playNote = window.PianoLab.audio.playNote;

    const [step, setStep] = React.useState(0); // 0..7 walk through C..C
    const [playing, setPlaying] = React.useState(false);

    // White keys C4..C5 (8 notes total, ascending).
    const whiteWalk = [60, 62, 64, 65, 67, 69, 71, 72];

    // Map step -> labels object so the Keyboard shows the letter on
    // every key we've already named.
    const labels = {};
    for (let i = 0; i <= step && i < whiteWalk.length; i++) {
      const m = whiteWalk[i];
      const info = window.PianoLab.theory.midiToName(m);
      labels[m] = info.letter;
    }
    const currentMidi = step < whiteWalk.length ? whiteWalk[step] : null;

    async function playWalk() {
      if (playing) return;
      setPlaying(true);
      setStep(0);
      for (let i = 0; i < whiteWalk.length; i++) {
        setStep(i);
        // eslint-disable-next-line no-await-in-loop
        await playNote(whiteWalk[i], 500);
      }
      setPlaying(false);
    }

    return (
      <div>
        <h2 style={{ fontSize: 22, fontWeight: 700, color: 'oklch(18% 0.03 265)', margin: '0 0 8px' }}>Naming every white key</h2>
        <p style={{ fontSize: 14, lineHeight: 1.6, color: 'oklch(35% 0.04 265)', margin: '0 0 14px' }}>
          The white key directly to the <strong>left of any pair of black keys</strong> is always <strong>C</strong>. Once you can spot C, the other letters follow in alphabetical order — D, E, F, G, A, B — then it wraps back to C an octave higher.
        </p>

        <div style={{ background: '#fff', border: '1px solid oklch(92% 0.012 265)', borderRadius: 12, padding: 18, marginBottom: 14 }}>
          <Keyboard
            loMidi={60}
            hiMidi={72}
            labels={labels}
            highlight={currentMidi}
            onKey={function (m) { playNote(m, 600); }}
          />
          <div style={{ display: 'flex', gap: 10, marginTop: 14, flexWrap: 'wrap', alignItems: 'center' }}>
            <button
              onClick={playWalk}
              disabled={playing}
              style={{
                padding: '10px 18px',
                borderRadius: 10,
                border: 'none',
                background: playing ? 'oklch(80% 0.03 265)' : 'oklch(35% 0.16 265)',
                color: '#fff',
                fontSize: 13, fontWeight: 700,
                cursor: playing ? 'wait' : 'pointer',
                fontFamily: "'Plus Jakarta Sans', sans-serif",
              }}
            >{playing ? 'Walking up…' : 'Walk up C → C'}</button>
            <button
              onClick={function () { setStep(0); }}
              style={{
                padding: '10px 16px',
                borderRadius: 10,
                border: '1px solid oklch(88% 0.02 265)',
                background: '#fff',
                color: 'oklch(28% 0.05 265)',
                fontSize: 13, fontWeight: 600, cursor: 'pointer',
                fontFamily: "'Plus Jakarta Sans', sans-serif",
              }}
            >Reset</button>
            <div style={{ fontSize: 12, color: 'oklch(55% 0.04 265)' }}>Click any key to test yourself.</div>
          </div>
        </div>

        <div style={{ background: 'oklch(96% 0.04 265)', border: '1px solid oklch(85% 0.06 265)', borderRadius: 10, padding: '14px 16px', fontSize: 13.5, color: 'oklch(25% 0.08 265)', lineHeight: 1.55 }}>
          <strong style={{ fontWeight: 700 }}>Memory trick.</strong> Pairs of black keys are signposts for <strong>C, D, E</strong>. Triplets are signposts for <strong>F, G, A, B</strong>. Find the nearest landmark group — the letters fall into place from there.
        </div>
      </div>
    );
  };

  window.PianoLab.ui.LessonNoteNames = LessonNoteNames;
})();