/* global React, window */
// Drums Lab — 16-step beat-grid renderer.
//
// Props:
//   - beat              — { id, label, bpm, lanes: { kick, snare, hh, crash, tom } }
//   - playheadStep      — int 0..15, or null when not playing
//   - compact (bool)    — render small cells (used inside exercise cards)
//   - showLabels (bool, default true) — left-column lane labels
//   - emphasizeLane     — string, name of lane to outline (e.g. 'kick'
//                         when the exercise asks the user to count kicks)
//
// Read-only — no editing. Tap on a cell does nothing. Used both in the
// lesson pages (to show the canonical backbeat) and in the exercises
// (to render the multiple-choice notation options).

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

  // Order from top → bottom on the grid. Cymbals visually on top is
  // industry-standard.
  const LANE_ROWS = [
    { id: 'crash',   label: 'Crash',     kind: 'cymbal' },
    { id: 'hh_open', label: 'Open HH',   kind: 'cymbal' },
    { id: 'hh',      label: 'Hi-hat',    kind: 'cymbal' },
    { id: 'tom',     label: 'Tom',       kind: 'drum' },
    { id: 'snare',   label: 'Snare',     kind: 'drum' },
    { id: 'kick',    label: 'Kick',      kind: 'drum' },
  ];

  function fillFor(kind, on, emph, playing) {
    if (!on) {
      return playing ? 'oklch(96% 0.04 80)' : 'oklch(98% 0.005 265)';
    }
    if (emph) return 'oklch(58% 0.18 25)';
    if (kind === 'cymbal') return 'oklch(60% 0.13 80)';
    return 'oklch(35% 0.16 265)';
  }

  const BeatGrid = function (props) {
    const beat = props.beat;
    if (!beat) return null;
    const compact = !!props.compact;
    const showLabels = props.showLabels !== false;
    const playheadStep = (typeof props.playheadStep === 'number') ? props.playheadStep : null;
    const emphasizeLane = props.emphasizeLane || null;

    // Cell sizing.
    const cellW = compact ? 16 : 22;
    const cellH = compact ? 16 : 22;
    const gap = 2;
    const labelW = showLabels ? (compact ? 44 : 56) : 0;

    // Lanes we actually render — drop optional lanes (crash, tom, hh_open)
    // when their array has no active steps, so a basic beat doesn't render
    // 3 empty rows of crash/tom/open-hh.
    const lanesToRender = LANE_ROWS.filter(function (r) {
      const lane = beat.lanes[r.id];
      if (!lane) return false;
      if (r.id === 'crash' || r.id === 'tom' || r.id === 'hh_open') {
        return lane.some(function (v) { return v === 1; });
      }
      return true;
    });

    return (
      <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
        {/* Step numbers header (1 e & a 2 e & a ...) */}
        <div style={{ display: 'flex', alignItems: 'center', gap: gap, marginLeft: labelW, marginBottom: 6 }}>
          {[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15].map(function (i) {
            const beatNum = Math.floor(i / 4) + 1;
            const sub = i % 4;
            const label = sub === 0 ? String(beatNum) : (sub === 1 ? 'e' : (sub === 2 ? '&' : 'a'));
            const isDownbeat = sub === 0;
            return (
              <div key={'h-' + i} style={{
                width: cellW,
                textAlign: 'center',
                fontSize: compact ? 9 : 10,
                fontWeight: isDownbeat ? 700 : 500,
                color: isDownbeat ? 'oklch(28% 0.05 265)' : 'oklch(60% 0.04 265)',
              }}>{label}</div>
            );
          })}
        </div>

        {lanesToRender.map(function (row) {
          const lane = beat.lanes[row.id];
          const emph = emphasizeLane === row.id;
          return (
            <div key={row.id} style={{ display: 'flex', alignItems: 'center', gap: gap, marginBottom: gap }}>
              {showLabels && (
                <div style={{
                  width: labelW,
                  fontSize: compact ? 10 : 11,
                  fontWeight: 600,
                  color: emph ? 'oklch(45% 0.18 25)' : 'oklch(35% 0.04 265)',
                  textAlign: 'right',
                  paddingRight: 6,
                }}>{row.label}</div>
              )}
              {lane.map(function (v, i) {
                const playing = playheadStep === i;
                const sub = i % 4;
                const groupStart = sub === 0;
                return (
                  <div key={row.id + '-' + i} style={{
                    width: cellW,
                    height: cellH,
                    borderRadius: 4,
                    background: fillFor(row.kind, v === 1, emph && v === 1, playing),
                    border: '1px solid ' + (v === 1
                      ? (emph ? 'oklch(45% 0.18 25)' : (row.kind === 'cymbal' ? 'oklch(45% 0.14 80)' : 'oklch(28% 0.16 265)'))
                      : (groupStart ? 'oklch(86% 0.012 265)' : 'oklch(92% 0.012 265)')),
                    boxShadow: playing && v === 1 ? '0 0 0 2px oklch(85% 0.18 80)' : 'none',
                    transition: 'background 0.06s, box-shadow 0.06s',
                  }} />
                );
              })}
            </div>
          );
        })}
      </div>
    );
  };

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