interface AudioControlsProps {
  enabled: boolean;
  micMuted: boolean;
  audioMuted: boolean;
  micSupported: boolean;
  onMicToggle(): void;
  onAudioToggle(): void;
}

function Spectrum({ active }: { active: boolean }) {
  return (
    <div className={`spectrum ${active ? 'spectrum--active' : ''}`} aria-hidden="true">
      {Array.from({ length: 18 }, (_, index) => (
        <i key={index} style={{ '--bar': `${25 + ((index * 17) % 70)}%` } as React.CSSProperties} />
      ))}
    </div>
  );
}

export function AudioControls({
  enabled,
  micMuted,
  audioMuted,
  micSupported,
  onMicToggle,
  onAudioToggle,
}: AudioControlsProps) {
  return (
    <section className="audio-card" aria-label="Two way audio controls">
      <div className="audio-channel">
        <Spectrum active={enabled && !micMuted && micSupported} />
        <button
          type="button"
          className={`audio-channel__button ${!micMuted ? 'audio-channel__button--on' : ''}`}
          disabled={!enabled || !micSupported}
          onClick={onMicToggle}
        >
          <span aria-hidden="true">{micMuted ? '◌' : '●'}</span>
          Mic {micMuted ? 'off' : 'on'}
        </button>
        <span className="audio-channel__label">Phone → Reachy</span>
      </div>
      <div className="audio-channel">
        <Spectrum active={enabled && !audioMuted} />
        <button
          type="button"
          className={`audio-channel__button ${!audioMuted ? 'audio-channel__button--on' : ''}`}
          disabled={!enabled}
          onClick={onAudioToggle}
        >
          <span aria-hidden="true">{audioMuted ? '◌' : '●'}</span>
          Sound {audioMuted ? 'off' : 'on'}
        </button>
        <span className="audio-channel__label">Reachy → Phone</span>
      </div>
      {!micSupported && enabled && (
        <p className="audio-card__notice">
          Reachy did not advertise a return microphone channel. Camera and manual look controls remain available.
        </p>
      )}
    </section>
  );
}