/* global React, window */
// Violin Lab — Lesson: first position notes.
//
// Shows the fingerboard with selectable string + finger, plus a per-string
// table of the 5 first-position notes. Tapping a finger position
// highlights the dot AND plays the note.

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

  const LessonFirstPosition = function () {
    const theory = window.ViolinLab.theory;
    const STRINGS = theory.STRINGS;

    const [selString, setSelString] = React.useState('D');
    const [selFinger, setSelFinger] = React.useState(0);
    const [audioReady, setAudioReady] = React.useState(false);

    React.useEffect(function () {
      const id = setInterval(function () {
        try { setAudioReady(window.ViolinLab.audio.isReady()); } catch (e) {}
      }, 500);
      return function () { clearInterval(id); };
    }, []);

    function pick(stringId, finger) {
      setSelString(stringId);
      setSelFinger(finger);
      const s = STRINGS.find(function (x) { return x.id === stringId; });
      if (!s) return;
      const midi = s.midi + theory.FINGER_OFFSETS[finger];
      window.ViolinLab.audio.playNote(midi, 1100);
    }

    function enableSound() { window.ViolinLab.audio.resumeContext(); }

    const FB = window.ViolinLab.ui.Fingerboard;
    const selectedString = STRINGS.find(function (s) { return s.id === selString; });
    const notes = theory.FIRST_POSITION[selString];
    const selectedNote = notes.find(function (n) { return n.finger === selFinger; });

    return (
      <div>
        <div style={{ marginBottom: 16 }}>
          <div style={{ fontSize: 22, fontWeight: 700, color: 'oklch(18% 0.03 265)', marginBottom: 6 }}>First position notes</div>
          <div style={{ fontSize: 13.5, color: 'oklch(40% 0.04 265)', lineHeight: 1.5 }}>
            First position is where your left hand rests at the top of the fingerboard, just under the nut.
            Pressing finger 1, 2, 3 or 4 on each string gives a diatonic major-scale tetrachord. Tap any position to hear it.
          </div>
        </div>

        {!audioReady && (
          <div style={{
            background: 'oklch(96% 0.02 80)',
            border: '1px solid oklch(85% 0.07 80)',
            borderRadius: 10,
            padding: '10px 14px',
            marginBottom: 16,
            fontSize: 12.5,
            color: 'oklch(40% 0.05 80)',
            display: 'flex',
            alignItems: 'center',
            gap: 10,
          }}>
            <span>Tap below to enable sound.</span>
            <button
              onClick={enableSound}
              style={{
                padding: '6px 12px',
                borderRadius: 8,
                border: 'none',
                background: 'oklch(35% 0.16 265)',
                color: '#fff',
                fontSize: 12,
                fontWeight: 700,
                cursor: 'pointer',
                fontFamily: "'Plus Jakarta Sans', sans-serif",
              }}
            >Enable sound</button>
          </div>
        )}

        {/* String selector pills */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 16, flexWrap: 'wrap' }}>
          {STRINGS.map(function (s) {
            const active = s.id === selString;
            return (
              <button
                key={s.id}
                onClick={function () { setSelString(s.id); setSelFinger(0); }}
                style={{
                  padding: '8px 14px',
                  borderRadius: 999,
                  border: '1px solid ' + (active ? s.color : 'oklch(88% 0.02 265)'),
                  background: active ? s.color : '#fff',
                  color: active ? '#fff' : 'oklch(28% 0.05 265)',
                  fontSize: 13,
                  fontWeight: 700,
                  cursor: 'pointer',
                  fontFamily: "'Plus Jakarta Sans', sans-serif",
                  display: 'flex',
                  alignItems: 'center',
                  gap: 6,
                }}
              >{s.id} string</button>
            );
          })}
        </div>

        {/* Fingerboard view */}
        <div style={{ background: 'oklch(96% 0.01 60)', borderRadius: 12, padding: 16, marginBottom: 16 }}>
          {FB && <FB highlight={{ string: selString, finger: selFinger }} revealNote={true} />}
        </div>

        {/* Notes table for the selected string */}
        <div style={{
          background: '#fff',
          border: '1px solid oklch(92% 0.012 265)',
          borderRadius: 12,
          padding: 14,
          marginBottom: 12,
        }}>
          <div style={{ fontSize: 12, color: 'oklch(55% 0.04 265)', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 10 }}>
            {selectedString.name} — fingers 0 through 4
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8 }}>
            {notes.map(function (n) {
              const active = n.finger === selFinger;
              return (
                <button
                  key={n.finger}
                  onClick={function () { pick(selString, n.finger); }}
                  style={{
                    padding: '10px 6px',
                    borderRadius: 10,
                    border: '1px solid ' + (active ? 'oklch(35% 0.16 265)' : 'oklch(92% 0.012 265)'),
                    background: active ? 'oklch(96% 0.04 265)' : '#fff',
                    cursor: 'pointer',
                    fontFamily: "'Plus Jakarta Sans', sans-serif",
                    textAlign: 'center',
                  }}
                >
                  <div style={{ fontSize: 10, color: 'oklch(55% 0.04 265)', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 2 }}>{n.finger === 0 ? 'open' : 'finger ' + n.finger}</div>
                  <div style={{ fontSize: 20, fontWeight: 800, color: 'oklch(20% 0.04 265)' }}>{n.letter}</div>
                  <div style={{ fontSize: 10, color: 'oklch(55% 0.04 265)' }}>{n.name}</div>
                </button>
              );
            })}
          </div>
        </div>

        {selectedNote && (
          <div style={{ fontSize: 12, color: 'oklch(55% 0.04 265)' }}>
            Selected: <strong style={{ color: 'oklch(20% 0.04 265)' }}>{selectedString.name}</strong>, {selFinger === 0 ? 'open' : 'finger ' + selFinger} → <strong style={{ color: 'oklch(20% 0.04 265)' }}>{selectedNote.name}</strong>.
          </div>
        )}
      </div>
    );
  };

  window.ViolinLab.ui.LessonFirstPosition = LessonFirstPosition;
})();