import React from 'react';
import { InstrumentLayer } from '../utils/types';
import LayerControl from './LayerControl';

interface LayerStackProps {
  layers: InstrumentLayer[];
  currentTime?: number; // Current playback time for waveform progress
  isPlaying?: boolean; // Whether composition is playing
  onLayerUpdate: (layer: InstrumentLayer) => void;
  onRemoveLayer: (layerId: string) => void;
  onVolumeChange?: (layerId: string, volume: number) => void;
  onMuteChange?: (layerId: string, muted: boolean) => void;
  onSeek?: (time: number) => void; // Callback for seeking in the track
  onPlayPause?: () => void; // Master play/pause control
  audioLoading?: boolean; // Whether audio is loading
  sessionBpm?: number; // BPM when in session mode
  sessionKey?: string; // Key when in session mode
  isSession?: boolean; // Whether we're in a session
  sessionId?: string; // Session ID for database persistence
  isGenerating?: boolean; // Whether a new layer is being generated
}

const LayerStack: React.FC<LayerStackProps> = ({ 
  layers, 
  currentTime = 0,
  isPlaying = false,
  onLayerUpdate, 
  onRemoveLayer, 
  onVolumeChange, 
  onMuteChange,
  onSeek,
  onPlayPause,
  audioLoading = false,
  sessionBpm,
  sessionKey,
  isSession = false,
  sessionId,
  isGenerating = false
}) => {
  if (layers.length === 0) {
    return (
      <div className="p-8 text-center">
        <div className="flex items-center justify-center space-x-4 mb-2">
          <span className="text-foreground-tertiary text-lg">🎵</span>
          <p className="text-foreground-secondary">No layers yet. Generate your first instrument!</p>
          <span className="text-foreground-tertiary text-lg">🎵</span>
        </div>
      </div>
    );
  }

  return (
    <div>
      
      {layers.map((layer, index) => (
        <LayerControl
          key={layer.id}
          layer={layer}
          index={index}
          currentTime={currentTime}
          isPlaying={isPlaying}
          onUpdate={onLayerUpdate}
          onRemove={() => onRemoveLayer(layer.id)}
          onVolumeChange={onVolumeChange}
          onMuteChange={onMuteChange}
          onSeek={onSeek}
          sessionId={sessionId}
        />
      ))}
      
      {/* Master Play/Pause Button with Session Tags */}
      {onPlayPause && (
        <div className="p-6 mx-2 flex justify-between items-center">
          {/* Session Info Tags */}
          <div className="flex items-center space-x-3">
            {isSession && sessionKey && (
              <span className="inline-flex items-center px-2 py-1 bg-background-secondary rounded-md text-xs font-medium text-foreground-primary">
                {sessionKey}
              </span>
            )}
            {isSession && sessionBpm && (
              <span className="inline-flex items-center px-2 py-1 bg-background-secondary rounded-md text-xs font-medium text-foreground-primary">
                {sessionBpm} BPM
              </span>
            )}
          </div>
          
          <button
            onClick={onPlayPause}
            disabled={audioLoading || layers.length === 0 || !layers.some(layer => layer.status === 'ready') || isGenerating || layers.some(layer => layer.status === 'generating' || layer.status === 'polling' || layer.status === 'processing')}
            className="inline-flex items-center px-4 py-2 bg-white hover:bg-gray-800 disabled:bg-gray-400 text-black font-medium rounded-lg transition-colors"
          >
            {isPlaying ? (
              <>
                <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
                </svg>
                Pause
              </>
            ) : (
              <>
                <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clipRule="evenodd" />
                </svg>
                Play
              </>
            )}
          </button>
        </div>
      )}
    </div>
  );
};

export default LayerStack;