/* global React, window */
// Drums Lab — Lesson: Fills.
//
// What a fill is, where it sits, and three canonical patterns.

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

  function snareThenToms(bpm) {
    return {
      id: 'fill-stt', label: 'snare then toms', bpm: bpm,
      lanes: {
        kick: [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
        snare: [1,1,1,1, 0,0,0,0, 0,0,0,0, 0,0,0,0],
        hh:    [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
        crash: [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
        tom:   [0,0,0,0, 1,1,1,1, 1,1,1,1, 1,1,1,1],
      },
    };
  }
  function backbeatThenFill(bpm) {
    return {
      id: 'fill-bbf', label: 'backbeat → fill', bpm: bpm,
      lanes: {
        kick:  [1,0,0,0, 0,0,0,0, 1,0,0,0, 0,0,0,0],
        snare: [0,0,0,0, 1,0,0,0, 0,0,0,0, 0,0,0,0],
        hh:    [1,0,1,0, 1,0,1,0, 0,0,0,0, 0,0,0,0],
        crash: [],
        tom:   [0,0,0,0, 0,0,0,0, 0,0,0,0, 1,1,1,1],
      },
    };
  }
  // Override the eighthFill snare lane explicitly (every eighth).
  function fixed8thFill(bpm) {
    return {
      id: 'fill-8th', label: 'eighth-note fill', bpm: bpm,
      lanes: {
        kick: [],
        snare: [1,0,1,0, 1,0,1,0, 1,0,1,0, 1,0,1,0],
        hh: [], crash: [], tom: [],
      },
    };
  }

  const FillCard = 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: 8, gap: 10, flexWrap: 'wrap' }}>
          <strong style={{ fontWeight: 700, fontSize: 14, color: 'oklch(20% 0.04 265)' }}>{props.title}</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, marginBottom: 10 }}>{props.blurb}</div>
        <window.DrumsLab.ui.BeatGrid beat={props.beat} compact />
      </div>
    );
  };

  const LessonFills = function () {
    function play(beat) {
      window.DrumsLab.audio.playBeat(beat, { bars: 1, bpm: beat.bpm }).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' }}>Fills</h2>
        <p style={{ fontSize: 14.5, color: 'oklch(40% 0.04 265)', margin: '0 0 18px', lineHeight: 1.55, maxWidth: 720 }}>
          A FILL is a short break in the groove that announces the next section. Usually one or two bars long, usually ends with a crash on the next beat 1. The same shape you hear in every song you know — the drummer "takes a break" from the backbeat to play something on the snare and toms.
        </p>

        <FillCard
          title="Fill A — Snare then toms (descending)"
          blurb="Classic introductory fill. Four snare hits, then walk down: high tom → mid tom → floor tom. Land on the next beat 1 with the band."
          beat={snareThenToms(100)}
          onPlay={function () { play(snareThenToms(100)); }}
        />

        <FillCard
          title="Fill B — Straight eighth notes on the snare"
          blurb='Eight even snare hits across the bar. The simplest possible fill — counted as "1 & 2 & 3 & 4 &". You can put it ANYWHERE while learning.'
          beat={fixed8thFill(96)}
          onPlay={function () { play(fixed8thFill(96)); }}
        />

        <FillCard
          title="Fill C — Two beats of groove, then two beats of toms"
          blurb="Half-bar fill. Play the basic beat for the first 2 beats, then drop straight into the toms for beats 3 and 4. Great way to add motion without losing the pulse."
          beat={backbeatThenFill(100)}
          onPlay={function () { play(backbeatThenFill(100)); }}
        />

        <div style={{
          padding: '12px 14px',
          borderRadius: 12,
          background: 'oklch(96% 0.04 80)',
          border: '1px solid oklch(85% 0.07 80)',
          fontSize: 12.5,
          color: 'oklch(35% 0.13 80)',
          lineHeight: 1.5,
          marginTop: 14,
        }}>
          <strong style={{ fontWeight: 700 }}>Rule of thumb:</strong> the fill is what gets the band INTO the next section. End your fill on the "and" of beat 4 (the upbeat right before beat 1) so the downbeat lands with a satisfying crash.
        </div>
      </div>
    );
  };

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