import { cn } from "@/lib/utils";

interface PlaybackPageIndicatorProps {
  total: number;
  current: number;
  progress: number;
  onGoTo: (index: number) => void;
  exitProgress?: number | null;
}

export function PlaybackPageIndicator({
  total,
  current,
  progress,
  onGoTo,
  exitProgress,
}: PlaybackPageIndicatorProps) {
  if (total === 0) return null;

  return (
    <div className="flex w-full items-center gap-0.5 px-1">
      {Array.from({ length: total }, (_, i) => (
        <button
          key={i}
          onClick={(e) => {
            e.stopPropagation();
            onGoTo(i);
          }}
          className="group relative h-3 flex-1"
        >
          {/* Dim track */}
          <div
            className={cn(
              "absolute inset-x-0 top-1 h-1 rounded-full bg-white/30",
              "group-hover:h-1.5 group-hover:top-0.5",
            )}
          />
          {/* Fill */}
          <div
            className={cn(
              "absolute left-0 top-1 h-1 rounded-full bg-white/90",
              "group-hover:h-1.5 group-hover:top-0.5",
            )}
            style={{
              width:
                i < current
                  ? "100%"
                  : i === current
                    ? `${progress * 100}%`
                    : "0%",
              transition: i === current ? "width 150ms linear" : "none",
            }}
          />
        </button>
      ))}

      {/* Exit countdown segment */}
      {exitProgress != null && (
        <div className="relative h-3 flex-1">
          <div
            className={cn(
              "absolute inset-x-0 top-1 h-1 rounded-full bg-white/30",
            )}
          />
          <div
            className={cn(
              "absolute left-0 top-1 h-1 rounded-full bg-white/90",
            )}
            style={{
              width: `${exitProgress * 100}%`,
              transition: "width 150ms linear",
            }}
          />
        </div>
      )}
    </div>
  );
}
