/* global React, window */
// Drums Lab — Lesson: Rudiments.
//
// The 40 rudiments are the alphabet of drumming. This lesson covers the
// four most foundational ones: single stroke roll, double stroke roll,
// single paradiddle, and flam tap. Each has a Play button.
//
// Sticking is drawn as RLRL letters under a single bar of 8 eighth-notes
// (or 8 triplets for triplet rudiments). Right hand = snare in the
// audio, left hand = tom-mid, so the listener can hear which hand fell
// on which drum.

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

  const RUDIMENT_DETAIL = {
    single:     { blurb: 'Alternate single hits: R L R L R L R L. The simplest possible roll — every drummer learns this first. Once it\'s smooth, you can play it FAST.' },
    double:     { blurb: 'Two hits per hand: R R L L R R L L. Bouncing each stick gives you twice as many notes per arm motion. The "buzz" of a press roll is built from doubles played fast.' },
    paradiddle: { blurb: 'R L R R L R L L — the rhythmic puzzle. The asymmetric sticking means the LEAD hand changes every group of four, which creates a "moving" feel when you spread it across the kit.' },
    triplet:    { blurb: 'Three strokes per beat, alternating hands. "Triplet feel" is what makes shuffle blues, jazz swing, and slow-rock ballads sound NOT-square.' },
    flam:       { blurb: 'A flam is one hit with a tiny GRACE NOTE just before it on the opposite hand. Written as a small letter before the main letter. The grace note adds weight without changing the rhythm.' },
  };

  const StickingRow = function (props) {
    const sticks = props.sticks;
    return (
      <div style={{ display: 'flex', gap: 6, marginTop: 8, flexWrap: 'wrap' }}>
        {sticks.map(function (s, i) {
          const isFlam = s.length === 2;
          const main = isFlam ? s[1] : s;
          const grace = isFlam ? s[0] : null;
          const isR = (main === 'R' || main === 'r');
          return (
            <div key={i} style={{
              minWidth: 28,
              padding: '6px 8px',
              borderRadius: 6,
              border: '1px solid ' + (isR ? 'oklch(60% 0.16 25)' : 'oklch(45% 0.16 265)'),
              background: isR ? 'oklch(94% 0.07 25)' : 'oklch(94% 0.04 265)',
              color: isR ? 'oklch(32% 0.16 25)' : 'oklch(28% 0.14 265)',
              fontSize: 13,
              fontWeight: 700,
              textAlign: 'center',
              fontFamily: "'Plus Jakarta Sans', sans-serif",
            }}>
              {grace && <span style={{ fontSize: 9, opacity: 0.7, marginRight: 1 }}>{grace.toUpperCase()}</span>}
              {main.toUpperCase()}
            </div>
          );
        })}
      </div>
    );
  };

  const RudimentCard = function (props) {
    return (
      <div style={{
        border: '1px solid oklch(92% 0.012 265)',
        borderRadius: 12,
        padding: 14,
        background: '#fff',
        marginBottom: 12,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6, gap: 10, flexWrap: 'wrap' }}>
          <strong style={{ fontWeight: 700, fontSize: 14, color: 'oklch(20% 0.04 265)' }}>{props.rudiment.label}</strong>
          <button onClick={props.onPlay} style={{
            padding: '7px 14px',
            borderRadius: 999,
            border: '1px solid oklch(35% 0.16 265)',
            background: 'oklch(35% 0.16 265)',
            color: '#fff',
            fontSize: 12,
            fontWeight: 700,
            cursor: 'pointer',
            fontFamily: "'Plus Jakarta Sans', sans-serif",
          }}>▶ Play</button>
        </div>
        <div style={{ fontSize: 12.5, color: 'oklch(40% 0.04 265)', lineHeight: 1.5 }}>{props.blurb}</div>
        <StickingRow sticks={props.rudiment.sticks} />
      </div>
    );
  };

  const LessonRudiments = function () {
    const theory = window.DrumsLab.theory;

    function play(r) {
      window.DrumsLab.audio.playRudiment(r, { bpm: 88 }).catch(function () {});
    }

    return (
      <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
        <h2 style={{ fontSize: 22, fontWeight: 700, color: 'oklch(18% 0.03 265)', margin: '0 0 8px' }}>The four foundational rudiments</h2>
        <p style={{ fontSize: 14.5, color: 'oklch(40% 0.04 265)', margin: '0 0 18px', lineHeight: 1.55, maxWidth: 720 }}>
          Rudiments are sticking patterns — the order your hands hit the snare. The official PAS list has 40, but four cover most of what you need to play any genre. <strong style={{ fontWeight: 700, color: 'oklch(20% 0.04 265)' }}>R</strong> = right hand, <strong style={{ fontWeight: 700, color: 'oklch(20% 0.04 265)' }}>L</strong> = left hand. (In the audio: R lands on the snare, L lands on a tom — so you can hear the sticking even though both would normally be on the snare.)
        </p>

        {theory.RUDIMENTS.map(function (r) {
          return (
            <RudimentCard
              key={r.id}
              rudiment={r}
              blurb={(RUDIMENT_DETAIL[r.id] && RUDIMENT_DETAIL[r.id].blurb) || ''}
              onPlay={function () { play(r); }}
            />
          );
        })}

        <div style={{
          padding: '12px 14px',
          borderRadius: 12,
          background: 'oklch(96% 0.04 145)',
          border: '1px solid oklch(85% 0.06 145)',
          fontSize: 12.5,
          color: 'oklch(28% 0.1 145)',
          lineHeight: 1.5,
        }}>
          <strong style={{ fontWeight: 700 }}>Practice tip:</strong> start every rudiment at a slow tempo with a metronome. Speed comes from accuracy, not effort. Every pro spends 10 minutes a day at slow tempos on these.
        </div>
      </div>
    );
  };

  window.DrumsLab.ui.LessonRudiments = LessonRudiments;
})();