// music-player.jsx
// Floating BGM toggle (bottom-right). Starts muted/paused; user clicks to play.
function MusicPlayer({ src }) {
  const audioRef = React.useRef(null);
  const [playing, setPlaying] = React.useState(false);
  const [hint, setHint] = React.useState(true);

  // Auto-hide the "BGMあり" hint after a few seconds
  React.useEffect(() => {
    if (!hint) return;
    const t = setTimeout(() => setHint(false), 5000);
    return () => clearTimeout(t);
  }, [hint]);

  // If the page becomes hidden, pause; resume on return only if user had it on.
  React.useEffect(() => {
    const onVis = () => {
      const a = audioRef.current;
      if (!a) return;
      if (document.hidden) {
        a.pause();
      } else if (playing) {
        a.play().catch(() => {});
      }
    };
    document.addEventListener('visibilitychange', onVis);
    return () => document.removeEventListener('visibilitychange', onVis);
  }, [playing]);

  const toggle = async () => {
    setHint(false);
    const a = audioRef.current;
    if (!a) return;
    if (playing) {
      a.pause();
      setPlaying(false);
    } else {
      try {
        a.volume = 0.6;
        await a.play();
        setPlaying(true);
      } catch (e) {
        setPlaying(false);
      }
    }
  };

  return (
    <>
      <audio ref={audioRef} src={src} loop preload="auto" />
      <div className={`bgm-fab-wrap ${playing ? 'is-playing' : ''}`}>
        {hint && (
          <div className="bgm-hint" role="status" aria-live="polite">
            <span className="bgm-hint-arrow"></span>
            BGMをONにする
          </div>
        )}
        <button
          type="button"
          className="bgm-fab"
          onClick={toggle}
          aria-label={playing ? 'BGMをミュートする' : 'BGMを再生する'}
          aria-pressed={playing}
          title={playing ? 'BGMをミュート' : 'BGMを再生'}
        >
          <span className="bgm-fab-icon" aria-hidden="true">
            {playing ? (
              <span className="bgm-note">
                <span className="bgm-note-glyph">♪</span>
                <span className="bgm-bars">
                  <span className="bgm-bar"></span>
                  <span className="bgm-bar"></span>
                  <span className="bgm-bar"></span>
                </span>
              </span>
            ) : (
              <span className="bgm-note bgm-note--muted">
                <span className="bgm-note-glyph">♪</span>
                <span className="bgm-mute-slash" aria-hidden="true"></span>
              </span>
            )}
          </span>
        </button>
      </div>
    </>
  );
}
window.MusicPlayer = MusicPlayer;