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

interface MasterControlsProps {
  layers: InstrumentLayer[];
  isPlaying: boolean;
  isLoading: boolean;
  currentTime: number;
  duration: number;
  masterVolume: number;
  onPlay: () => void;
  onStop: () => void;
  onPause: () => void;
  onResume: () => void;
  onMasterVolumeChange: (volume: number) => void;
}

const MasterControls: React.FC<MasterControlsProps> = ({
  layers,
  isPlaying,
  isLoading,
  currentTime,
  duration,
  masterVolume,
  onPlay,
  onStop,
  onPause,
  onResume,
  onMasterVolumeChange
}) => {
  const readyLayers = layers.filter(layer => layer.status === 'ready' && layer.audioUrl);
  const hasReadyLayers = readyLayers.length > 0;

  const formatTime = (seconds: number): string => {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  };

  const handlePlayPause = () => {
    if (isLoading) return;
    
    if (isPlaying) {
      onPause();
    } else if (currentTime > 0) {
      onResume();
    } else {
      onPlay();
    }
  };

  return (
    <div className="bg-white rounded-xl shadow-sm border border-slate-200">
      <div className="p-6">
        <div className="flex items-center justify-between mb-6">
          <h3 className="text-lg font-semibold text-slate-800">Master Controls</h3>
          <div className="text-sm text-slate-600">
            {readyLayers.length} of {layers.length} layers ready
          </div>
        </div>

        {/* Playback Controls */}
        <div className="flex items-center justify-center space-x-4 mb-6">
          <button
            onClick={onStop}
            disabled={!hasReadyLayers || isLoading}
            className={clsx(
              'p-3 rounded-lg transition-colors',
              hasReadyLayers && !isLoading
                ? 'bg-slate-100 hover:bg-slate-200 text-slate-700'
                : 'bg-slate-50 text-slate-400 cursor-not-allowed'
            )}
            title="Stop"
          >
            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
              <rect x="6" y="6" width="12" height="12" rx="2"/>
            </svg>
          </button>

          <button
            onClick={handlePlayPause}
            disabled={!hasReadyLayers || isLoading}
            className={clsx(
              'p-4 rounded-full transition-colors',
              hasReadyLayers && !isLoading
                ? 'bg-blue-600 hover:bg-blue-700 text-white'
                : 'bg-slate-200 text-slate-400 cursor-not-allowed'
            )}
          >
            {isLoading ? (
              <div className="w-6 h-6 border-2 border-white border-t-transparent rounded-full animate-spin" />
            ) : isPlaying ? (
              <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                <rect x="6" y="4" width="4" height="16"/>
                <rect x="14" y="4" width="4" height="16"/>
              </svg>
            ) : (
              <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                <polygon points="5,3 19,12 5,21"/>
              </svg>
            )}
          </button>
        </div>

        {/* Progress Bar */}
        {duration > 0 && (
          <div className="mb-4">
            <div className="flex items-center justify-between text-sm text-slate-600 mb-2">
              <span>{formatTime(currentTime)}</span>
              <span>{formatTime(duration)}</span>
            </div>
            <div className="w-full bg-slate-200 rounded-full h-2">
              <div 
                className="bg-blue-600 h-2 rounded-full transition-all duration-300"
                style={{ width: `${(currentTime / duration) * 100}%` }}
              />
            </div>
          </div>
        )}

        {/* Master Volume */}
        <div className="flex items-center space-x-4">
          <svg className="w-5 h-5 text-slate-600" fill="currentColor" viewBox="0 0 24 24">
            <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
          </svg>
          <div className="flex-1 flex items-center space-x-3">
            <span className="text-sm text-slate-600 w-12">Master</span>
            <input
              type="range"
              min="0"
              max="1"
              step="0.1"
              value={masterVolume}
              onChange={(e) => onMasterVolumeChange(Number(e.target.value))}
              className="flex-1 h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer"
            />
            <span className="text-sm text-slate-600 w-10 text-right">
              {Math.round(masterVolume * 100)}%
            </span>
          </div>
        </div>

        {/* Status Message */}
        {!hasReadyLayers && layers.length > 0 && (
          <div className="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
            <p className="text-yellow-800 text-sm">
              Waiting for layers to finish generating before playback is available.
            </p>
          </div>
        )}

        {layers.length === 0 && (
          <div className="mt-4 p-3 bg-slate-50 border border-slate-200 rounded-lg">
            <p className="text-slate-600 text-sm text-center">
              Generate some layers to start mixing!
            </p>
          </div>
        )}
      </div>
    </div>
  );
};

export default MasterControls;