/* global React, window */
// Violin Lab — Lesson: bowing direction.
//
// Explains down-bow (⊓) vs up-bow (∨) plus slurs and staccato. Includes
// a small audible demo that plays four notes — alternating down/up vs
// all-in-one-bow (slurred).

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

  const ROW = function (props) {
    return (
      <div style={{
        display: 'flex',
        alignItems: 'center',
        gap: 14,
        padding: '12px 14px',
        background: '#fff',
        border: '1px solid oklch(92% 0.012 265)',
        borderRadius: 12,
      }}>
        <div style={{
          width: 52,
          height: 52,
          borderRadius: 12,
          background: 'oklch(96% 0.04 265)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: 28,
          fontWeight: 800,
          color: 'oklch(35% 0.16 265)',
          fontFamily: 'Georgia, serif',
        }}>{props.symbol}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: 'oklch(20% 0.04 265)', marginBottom: 2 }}>{props.title}</div>
          <div style={{ fontSize: 12.5, color: 'oklch(40% 0.04 265)', lineHeight: 1.4 }}>{props.body}</div>
        </div>
      </div>
    );
  };

  const LessonBowing = function () {
    const [playingId, setPlayingId] = React.useState(null);
    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); };
    }, []);

    // Two demos: detached (one bow each, short detached notes) and
    // slurred (single long bow stroke joining notes).
    function playDetached() {
      setPlayingId('detached');
      // Four notes on the A string: A B C# D — short, separated.
      const midis = [69, 71, 73, 74];
      window.ViolinLab.audio.playSequence(midis, { noteMs: 380, gapMs: 90 })
        .then(function () { setPlayingId(null); })
        .catch(function () { setPlayingId(null); });
    }
    function playSlurred() {
      setPlayingId('slurred');
      // Same notes, but longer + tighter — sounds like one bow.
      const midis = [69, 71, 73, 74];
      window.ViolinLab.audio.playSequence(midis, { noteMs: 520, gapMs: 0 })
        .then(function () { setPlayingId(null); })
        .catch(function () { setPlayingId(null); });
    }

    return (
      <div>
        <div style={{ marginBottom: 16 }}>
          <div style={{ fontSize: 22, fontWeight: 700, color: 'oklch(18% 0.03 265)', marginBottom: 6 }}>Bowing direction</div>
          <div style={{ fontSize: 13.5, color: 'oklch(40% 0.04 265)', lineHeight: 1.5 }}>
            Music tells the player which direction to bow with two small marks above the note. Down-bow goes from frog to tip — the heavier, more accented stroke. Up-bow goes from tip to frog — lighter.
          </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)',
          }}>Tap any Play button below to enable sound.</div>
        )}

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 10, marginBottom: 18 }}>
          <ROW symbol="⊓" title="Down-bow" body="From frog (your hand) to tip. Heavier, fuller sound — used for the first note of most phrases." />
          <ROW symbol="∨" title="Up-bow"   body="From tip to frog. Lighter, more buoyant. Used after a down-bow to return the bow." />
          <ROW symbol="⌢" title="Slur"     body="Curved line over multiple notes — play them all in a single bow stroke without changing direction." />
          <ROW symbol="•" title="Staccato" body="Dot above the note — play it short, with a quick stop. Use a tiny portion of the bow." />
        </div>

        <div style={{
          background: 'oklch(96% 0.04 265)',
          border: '1px solid oklch(88% 0.05 265)',
          borderRadius: 12,
          padding: '14px 18px',
        }}>
          <div style={{ fontSize: 12, color: 'oklch(28% 0.1 265)', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 10 }}>Listen</div>
          <div style={{ fontSize: 13, color: 'oklch(28% 0.1 265)', marginBottom: 12 }}>
            The same four notes — A, B, C#, D on the A string — first detached (one bow each), then slurred (all in one bow).
          </div>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <button
              onClick={playDetached}
              disabled={playingId !== null}
              style={{
                padding: '10px 18px',
                borderRadius: 10,
                border: '1px solid oklch(35% 0.16 265)',
                background: playingId === 'detached' ? 'oklch(35% 0.16 265)' : '#fff',
                color: playingId === 'detached' ? '#fff' : 'oklch(35% 0.16 265)',
                fontSize: 13,
                fontWeight: 700,
                cursor: playingId !== null ? 'wait' : 'pointer',
                fontFamily: "'Plus Jakarta Sans', sans-serif",
              }}
            >{playingId === 'detached' ? 'Playing…' : '⊓∨⊓∨ detached'}</button>
            <button
              onClick={playSlurred}
              disabled={playingId !== null}
              style={{
                padding: '10px 18px',
                borderRadius: 10,
                border: '1px solid oklch(35% 0.16 265)',
                background: playingId === 'slurred' ? 'oklch(35% 0.16 265)' : '#fff',
                color: playingId === 'slurred' ? '#fff' : 'oklch(35% 0.16 265)',
                fontSize: 13,
                fontWeight: 700,
                cursor: playingId !== null ? 'wait' : 'pointer',
                fontFamily: "'Plus Jakarta Sans', sans-serif",
              }}
            >{playingId === 'slurred' ? 'Playing…' : '⌢ all slurred'}</button>
          </div>
        </div>
      </div>
    );
  };

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