import React from 'react';

interface ActiveVideoInfo {
  cellId: string;
  cellNumber: number;
}

interface BorderlessToolbarProps {
  onExitBorderlessMode: () => void;
  activeVideos: ActiveVideoInfo[];
  onSelectAudio: (cellId: string) => void;
  currentActiveAudioVideoId: string | null;
}

export const BorderlessToolbar = React.forwardRef<HTMLDivElement, BorderlessToolbarProps>(({
  onExitBorderlessMode,
  activeVideos,
  onSelectAudio,
  currentActiveAudioVideoId,
}, ref) => {
  if (activeVideos.length === 0) return null; // Don't show toolbar if no videos are active

  return (
    <div
      ref={ref}
      className="fixed top-0 left-0 right-0 bg-black bg-opacity-75 p-2 sm:p-3 flex items-center justify-between space-x-2 sm:space-x-4 z-[100]"
      role="toolbar"
      aria-label="Borderless mode controls"
    >
      <button
        onClick={onExitBorderlessMode}
        className="px-3 py-1.5 sm:px-4 sm:py-2 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-md text-xs sm:text-sm shadow-md transition-colors"
        aria-label="Exit Borderless Mode"
      >
        Exit Borderless
      </button>
      
      <div className="flex items-center space-x-1 sm:space-x-2 overflow-x-auto">
        <span className="text-gray-300 font-medium text-xs sm:text-sm mr-1 sm:mr-2 flex-shrink-0">Audio:</span>
        {activeVideos.map(({ cellId, cellNumber }) => (
          <button
            key={cellId}
            onClick={() => onSelectAudio(cellId)}
            className={`px-2.5 py-1 sm:px-3 sm:py-1.5 rounded-md text-xs sm:text-sm font-medium transition-colors shadow flex-shrink-0
              ${currentActiveAudioVideoId === cellId 
                ? 'bg-green-500 text-white hover:bg-green-600' 
                : 'bg-gray-600 text-gray-200 hover:bg-gray-500'}`}
            aria-pressed={currentActiveAudioVideoId === cellId}
            aria-label={`Play audio from video ${cellNumber}`}
          >
            V{cellNumber}
          </button>
        ))}
      </div>
    </div>
  );
});

BorderlessToolbar.displayName = 'BorderlessToolbar';