import { useState, useEffect } from 'react';
import Icon from './Icons';
import { onMediaUiState, mediaCommand } from '../utils/mediaControl';

/* =========================================================
   页眉媒体控制区 —— 仅媒体轮播页显示
   订阅媒体页播放状态（paused/index/total/name/soundBlocked），
   点击通过 mediaCommand() 下发指令，由 MediaScreen 执行
   ========================================================= */

export default function MediaHeaderControls() {
  const [st, setSt] = useState(null);

  useEffect(() => onMediaUiState(setSt), []);

  if (!st || !st.loaded) {
    return (
      <div className="bd-hd-media" title="媒体播放控制">
        <Icon name="player-play" size={13} />
      </div>
    );
  }

  return (
    <div className="bd-hd-media">
      {/* 播放 / 暂停 */}
      <button
        className={`bd-hd-media-btn ${st.paused ? 'primary' : ''}`}
        onClick={() => mediaCommand(st.paused ? 'play' : 'pause')}
        title={st.paused ? '播放' : '暂停'}
      >
        <Icon name={st.paused ? 'play' : 'pause'} size={14} />
      </button>
      {/* 上一段 */}
      <button className="bd-hd-media-btn" onClick={() => mediaCommand('prev')} title="上一段">
        <Icon name="chevron-left" size={13} />
      </button>
      {/* 序号 */}
      <span className="bd-hd-media-num">
        <b>{st.index + 1}</b>/<em>{st.total}</em>
      </span>
      {/* 下一段 */}
      <button className="bd-hd-media-btn" onClick={() => mediaCommand('next')} title="下一段">
        <Icon name="chevron-right" size={13} />
      </button>
      {/* 声音解锁 */}
      {st.soundBlocked && (
        <button className="bd-hd-media-btn warn" onClick={() => mediaCommand('enable_sound')} title="点击开启声音">
          <Icon name="volume" size={14} />
        </button>
      )}
    </div>
  );
}