xiaoxia-saas/apps/web/src/pages/generate/components/PreviewControls.tsx

import React from "react"
import {
  PlayCircleOutlined,
  PauseCircleOutlined,
  AudioOutlined,
  AudioMutedOutlined,
} from "@ant-design/icons"
import { PreviewProgressBar } from "./PreviewProgressBar"

interface PreviewControlsProps {
  isPlaying: boolean
  onTogglePlay: () => void
  muted: boolean
  onToggleMute: () => void
  hasSegments: boolean
  segmentIndex: number
  segmentCount: number
  currentTime: number
  totalDuration: number
  onSeek: (time: number) => void
  compact?: boolean
}

/**
 * 播放控制 UI 组件（静音按钮 / 片段指示器 / 中央播放按钮 / 底部毛玻璃控制条）
 */
export const PreviewControls: React.FC<PreviewControlsProps> = ({
  isPlaying,
  onTogglePlay,
  muted,
  onToggleMute,
  hasSegments,
  segmentIndex,
  segmentCount,
  currentTime,
  totalDuration,
  onSeek,
  compact = false,
}) => {
  return (
    <>
      {/* 静音/有声切换（#1741）：左上角 */}
      {hasSegments && (
        <button
          type="button"
          aria-label={muted ? "取消静音" : "静音"}
          title={muted ? "取消静音" : "静音"}
          onClick={onToggleMute}
          style={{
            position: "absolute",
            top: 8,
            left: 8,
            width: compact ? 26 : 30,
            height: compact ? 26 : 30,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            background: "rgba(0,0,0,0.45)",
            backdropFilter: "blur(8px)",
            WebkitBackdropFilter: "blur(8px)",
            border: "1px solid rgba(255,255,255,0.1)",
            borderRadius: "50%",
            color: muted ? "rgba(255,255,255,0.45)" : "rgba(255,255,255,0.92)",
            fontSize: compact ? 13 : 15,
            cursor: "pointer",
            zIndex: 10,
            padding: 0,
            transition: "background 0.15s, color 0.15s",
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.background = "rgba(0,0,0,0.65)"
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.background = "rgba(0,0,0,0.45)"
          }}
        >
          {muted ? <AudioMutedOutlined /> : <AudioOutlined />}
        </button>
      )}

      {/* 片段指示器 — 右上角胶囊 */}
      <div
        style={{
          position: "absolute",
          top: 8,
          right: 8,
          background: "rgba(0,0,0,0.45)",
          backdropFilter: "blur(8px)",
          WebkitBackdropFilter: "blur(8px)",
          color: "rgba(255,255,255,0.9)",
          fontSize: compact ? 9 : 10,
          fontWeight: 500,
          padding: compact ? "1px 6px" : "2px 8px",
          borderRadius: 999,
          zIndex: 10,
          border: "1px solid rgba(255,255,255,0.1)",
          letterSpacing: 0.3,
        }}
      >
        {`${segmentIndex + 1} / ${segmentCount}`}
      </div>

      {/* 中央播放按钮 */}
      {!isPlaying && (
        <button
          onClick={onTogglePlay}
          style={{
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            background: "rgba(0,0,0,0.45)",
            backdropFilter: "blur(12px)",
            WebkitBackdropFilter: "blur(12px)",
            border: "1px solid rgba(255,255,255,0.15)",
            borderRadius: "50%",
            width: 52,
            height: 52,
            cursor: "pointer",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            color: "#fff",
            fontSize: 26,
            zIndex: 10,
            transition: "transform 0.2s ease, background 0.2s ease",
            boxShadow: "0 4px 20px rgba(0,0,0,0.4)",
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.transform = "translate(-50%, -50%) scale(1.08)"
            e.currentTarget.style.background = "rgba(0,0,0,0.6)"
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.transform = "translate(-50%, -50%) scale(1)"
            e.currentTarget.style.background = "rgba(0,0,0,0.45)"
          }}
        >
          <PlayCircleOutlined />
        </button>
      )}

      {/* 控制条 — 手机风格毛玻璃 */}
      <div
        style={{
          position: "absolute",
          bottom: 0,
          left: 0,
          right: 0,
          display: "flex",
          alignItems: "center",
          gap: compact ? 6 : 10,
          padding: compact ? "8px 10px 10px" : "12px 16px 16px",
          background: "linear-gradient(transparent, rgba(0,0,0,0.7))",
          backdropFilter: "blur(4px)",
          WebkitBackdropFilter: "blur(4px)",
          zIndex: 10,
        }}
      >
        <button
          onClick={onTogglePlay}
          style={{
            background: "rgba(255,255,255,0.15)",
            border: "none",
            color: "#fff",
            fontSize: compact ? 14 : 16,
            cursor: "pointer",
            width: compact ? 26 : 32,
            height: compact ? 26 : 32,
            borderRadius: "50%",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            flexShrink: 0,
            transition: "background 0.15s",
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.background = "rgba(255,255,255,0.25)"
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.background = "rgba(255,255,255,0.15)"
          }}
        >
          {isPlaying ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
        </button>

        <PreviewProgressBar
          currentTime={currentTime}
          totalDuration={totalDuration}
          onSeek={onSeek}
          compact={compact}
        />
      </div>
    </>
  )
}