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

interface LayerControlProps {
  layer: InstrumentLayer;
  index: number;
  currentTime?: number; // Current playback time for waveform progress
  isPlaying?: boolean; // Whether composition is playing
  onUpdate: (layer: InstrumentLayer) => void;
  onRemove: () => void;
  onVolumeChange?: (layerId: string, volume: number) => void;
  onMuteChange?: (layerId: string, muted: boolean) => void;
  onSeek?: (time: number) => void; // Callback for seeking in the track
  sessionId?: string; // Session ID for database persistence
}

const LayerControl: React.FC<LayerControlProps> = ({ 
  layer, 
  index, 
  currentTime = 0,
  isPlaying = false,
  onUpdate, 
  onRemove, 
  onVolumeChange, 
  onMuteChange,
  onSeek,
  sessionId
}) => {
  const handleVolumeChange = async (volume: number) => {
    onUpdate({ ...layer, volume });
    onVolumeChange?.(layer.id, volume);
    
    // Persist to database if in a session (gracefully handle if layer doesn't exist yet)
    if (sessionId) {
      try {
        const response = await fetch(`/api/sessions/${sessionId}/layers`, {
          method: 'PATCH',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            clipId: layer.id, // Using id (which is now clipId) as identifier
            volume
          })
        });
        // Silently ignore 404/500 errors for layers not yet persisted
        if (!response.ok && response.status !== 404 && response.status !== 500) {
          console.error('Failed to update layer volume in database:', response.status);
        }
      } catch (error) {
        // Silently ignore errors for layers not yet persisted
      }
    }
  };

  const handleMuteToggle = async () => {
    const newMuted = !layer.muted;
    onUpdate({ ...layer, muted: newMuted });
    onMuteChange?.(layer.id, newMuted);
    
    // Persist to database if in a session (gracefully handle if layer doesn't exist yet)
    if (sessionId) {
      try {
        const response = await fetch(`/api/sessions/${sessionId}/layers`, {
          method: 'PATCH',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            clipId: layer.id, // Using id (which is now clipId) as identifier
            muted: newMuted
          })
        });
        // Silently ignore 404/500 errors for layers not yet persisted
        if (!response.ok && response.status !== 404 && response.status !== 500) {
          console.error('Failed to update layer mute state in database:', response.status);
        }
      } catch (error) {
        // Silently ignore errors for layers not yet persisted
      }
    }
  };


  return (
    <div className="p-6 rounded-lg mx-2 mb-2">
      {/* Title above everything */}
      <div className="flex items-center justify-between mb-3">
        <h4 className="font-bold text-lg text-foreground-primary tracking-tight">{layer.title}</h4>
        
        {/* Right Side Controls */}
        <div className="flex items-center space-x-3 flex-shrink-0">
          {/* Volume Control */}
          {layer.status === 'ready' && (
            <>
              <div className="flex items-center space-x-2">
                <span className="text-xs text-gray-500">Vol</span>
                <input
                  type="range"
                  min="0"
                  max="1"
                  step="0.1"
                  value={layer.volume}
                  onChange={(e) => handleVolumeChange(Number(e.target.value))}
                  className="w-16 h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer slider"
                />
                <span className="text-xs text-gray-500 w-8">
                  {Math.round(layer.volume * 100)}%
                </span>
              </div>

              {/* Mute Button */}
              <button
                onClick={handleMuteToggle}
                className={clsx(
                  'px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
                  layer.muted
                    ? 'bg-red-500 text-white hover:bg-red-600'
                    : 'bg-green-500 text-white hover:bg-green-600'
                )}
              >
                {layer.muted ? 'Unmute' : 'Mute'}
              </button>
            </>
          )}

          {/* Remove Button */}
          <button
            onClick={onRemove}
            className="p-1 text-foreground-tertiary hover:text-accent-error transition-colors"
            title="Remove layer"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>

      {/* Waveform takes full width below title */}
      <div className="w-full">
        <LayerWaveform
          layer={layer}
          height={60}
          currentTime={currentTime}
          isPlaying={isPlaying}
          onSeek={onSeek}
        />
      </div>
    </div>
  );
};

export default LayerControl;