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

import React, { useCallback, useEffect, useRef, useState } from "react"
import { formatDuration } from "../utils/formatDuration"

interface PreviewProgressBarProps {
  currentTime: number
  totalDuration: number
  onSeek: (time: number) => void
  compact?: boolean
}

/**
 * 进度条组件：点击/拖拽 seek
 */
export const PreviewProgressBar: React.FC<PreviewProgressBarProps> = ({
  currentTime,
  totalDuration,
  onSeek,
  compact = false,
}) => {
  const progressRef = useRef<HTMLDivElement>(null)
  const [isDragging, setIsDragging] = useState(false)

  const seekByClientX = useCallback(
    (clientX: number) => {
      if (!progressRef.current || totalDuration <= 0) return
      const rect = progressRef.current.getBoundingClientRect()
      const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))
      onSeek(ratio * totalDuration)
    },
    [totalDuration, onSeek],
  )

  const handleMouseDown = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      setIsDragging(true)
      seekByClientX(e.clientX)
    },
    [seekByClientX],
  )

  useEffect(() => {
    if (!isDragging) return
    const handleMouseMove = (e: MouseEvent) => seekByClientX(e.clientX)
    const handleMouseUp = () => setIsDragging(false)
    window.addEventListener("mousemove", handleMouseMove)
    window.addEventListener("mouseup", handleMouseUp)
    return () => {
      window.removeEventListener("mousemove", handleMouseMove)
      window.removeEventListener("mouseup", handleMouseUp)
    }
  }, [isDragging, seekByClientX])

  const progressPercent = totalDuration > 0 ? (currentTime / totalDuration) * 100 : 0

  return (
    <>
      <span
        style={{
          fontSize: compact ? 10 : 11,
          color: "rgba(255,255,255,0.85)",
          minWidth: compact ? 58 : 72,
          fontVariantNumeric: "tabular-nums",
          letterSpacing: 0.2,
        }}
      >
        {formatDuration(currentTime)} / {formatDuration(totalDuration)}
      </span>

      <div
        ref={progressRef}
        onMouseDown={handleMouseDown}
        style={{
          flex: 1,
          height: 3,
          background: "rgba(255,255,255,0.2)",
          borderRadius: 2,
          cursor: "pointer",
          position: "relative",
        }}
      >
        <div
          style={{
            height: "100%",
            width: `${progressPercent}%`,
            background: "#fff",
            borderRadius: 2,
            transition: isDragging ? "none" : "width 0.1s linear",
          }}
        />
        <div
          style={{
            position: "absolute",
            top: "50%",
            left: `${progressPercent}%`,
            transform: "translate(-50%, -50%)",
            width: 10,
            height: 10,
            borderRadius: "50%",
            background: "#fff",
            boxShadow: "0 0 6px rgba(255,255,255,0.5)",
            opacity: isDragging ? 1 : 0,
            transition: "opacity 0.15s",
          }}
        />
      </div>
    </>
  )
}