// Sequencer.jsx — the step grid. Instrument lanes × 16 steps, clickable.
// Playhead column sweeps when transport is running. Cosmetic (no real audio).
const STUDIO_LANES = [
  { id: 'kick',   label: 'Kick',    glyph: '🥁', accent: 'cyan' },
  { id: 'snare',  label: 'Snare',   glyph: '✦',  accent: 'magenta' },
  { id: 'hat',    label: 'Hat',     glyph: '·',  accent: 'cyan' },
  { id: 'clap',   label: 'Clap',    glyph: '✷',  accent: 'orange' },
  { id: 'bass',   label: 'Bass',    glyph: '◢',  accent: 'magenta' },
  { id: 'spiral', label: 'Spirale', glyph: '🌀', accent: 'cyan' },
];
const STEPS = 16;

// a pleasing default pattern so the grid reads as "alive"
const STUDIO_SEED = {
  kick:   [1,0,0,0, 1,0,0,0, 1,0,0,0, 1,0,1,0],
  snare:  [0,0,0,0, 1,0,0,0, 0,0,0,0, 1,0,0,1],
  hat:    [1,0,1,0, 1,0,1,0, 1,0,1,0, 1,0,1,1],
  clap:   [0,0,0,0, 0,0,0,0, 0,0,0,0, 1,0,0,0],
  bass:   [1,0,0,1, 0,0,1,0, 1,0,0,1, 0,0,1,0],
  spiral: [0,0,0,0, 0,0,0,1, 0,0,0,0, 0,0,1,0],
};

function Sequencer({ grid, setGrid, step, playing }) {
  const toggle = (lane, i) => {
    setGrid(g => {
      const next = { ...g, [lane]: g[lane].slice() };
      next[lane][i] = next[lane][i] ? 0 : 1;
      return next;
    });
  };
  return (
    <div className="sq">
      {STUDIO_LANES.map((lane, li) => (
        <div className="sq-lane" key={lane.id}>
          <div className="sq-name">
            <span className="sq-glyph">{lane.glyph}</span>{lane.label}
          </div>
          <div className="sq-cells">
            {grid[lane.id].map((on, i) => {
              // deterministic, purely-cosmetic velocity shading on active steps
              const vel = on ? ['', ' loud', ' ghost'][(i * 7 + li * 5) % 3] : '';
              return (
                <button key={i}
                  className={'sq-cell'
                    + (on ? ' on cell-' + lane.accent + vel : '')
                    + (playing && step === i ? ' head' : '')
                    + (i % 4 === 0 ? ' beat' : '')}
                  aria-pressed={!!on}
                  aria-label={lane.label + ' step ' + (i + 1)}
                  onClick={() => toggle(lane.id, i)} />
              );
            })}
          </div>
        </div>
      ))}
      <div className="sq-ruler">
        <div className="sq-name" />
        <div className="sq-cells">
          {Array.from({ length: STEPS }).map((_, i) => (
            <div key={i} className={'sq-tick' + (playing && step === i ? ' head' : '')}>
              {i % 4 === 0 ? (i / 4 + 1) : ''}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { Sequencer, STUDIO_LANES, STUDIO_SEED, STEPS });