/* PatternRow — selectable pattern card with mini-waveform preview */
(function () {
  const { compilePattern, patternDuration, patternReps } = window.PulseFloor;

  function PatternRow({ p, selected, onSelect }) {
    const Icon = window.Icon;
    const reps = patternReps(p);
    const dur = patternDuration(p);
    const phases = compilePattern(p);
    const bars = phases.slice(0, 16);
    return (
      <div className={`pattern-row ${selected ? "selected" : ""}`} onClick={onSelect}>
        <div>
          <div className="pr-name">
            {p.name}
            {p.id === "random" && <span className="tag">Random</span>}
          </div>
          <div className="pr-desc">{p.desc}</div>
          <div className="pr-meta">
            <b>{reps} reps</b> · <i>{Math.round(dur)}s</i> · {p.level}
          </div>
          <div className="wave-mini" aria-hidden>
            {bars.map((b, i) => (
              <div
                key={i}
                className={`b ${b.kind === "rest" ? "rest" : ""}`}
                style={{ height: `${b.kind === "squeeze" ? Math.min(28, 8 + b.dur * 2.4) : 6}px`, opacity: b.kind === "rest" ? 0.45 : 0.85 }}
              />
            ))}
          </div>
        </div>
        <div className="pr-cta"><Icon.Chevron /></div>
      </div>
    );
  }

  window.PatternRow = PatternRow;
})();