audio-ui/components/controls/MasterControls.tsx

'use client';

import * as React from 'react';
import { CircularKnob } from '@/components/ui/CircularKnob';
import { MasterFader } from './MasterFader';
import { cn } from '@/lib/utils/cn';

export interface MasterControlsProps {
  volume: number;
  pan: number;
  peakLevel: number;
  rmsLevel: number;
  isClipping: boolean;
  isMuted?: boolean;
  onVolumeChange: (volume: number) => void;
  onPanChange: (pan: number) => void;
  onMuteToggle: () => void;
  onResetClip?: () => void;
  className?: string;
}

export function MasterControls({
  volume,
  pan,
  peakLevel,
  rmsLevel,
  isClipping,
  isMuted = false,
  onVolumeChange,
  onPanChange,
  onMuteToggle,
  onResetClip,
  className,
}: MasterControlsProps) {
  return (
    <div className={cn(
      'flex flex-col items-center gap-3 px-4 py-3 bg-card/50 border-2 border-accent/50 rounded-lg',
      className
    )}>
      {/* Master Label */}
      <div className="text-[10px] font-bold text-accent uppercase tracking-wider">
        Master
      </div>

      {/* Pan Control */}
      <CircularKnob
        value={pan}
        onChange={onPanChange}
        min={-1}
        max={1}
        step={0.01}
        label="PAN"
        size={48}
        formatValue={(value: number) => {
          if (Math.abs(value) < 0.01) return 'C';
          if (value < 0) return `${Math.abs(value * 100).toFixed(0)}L`;
          return `${(value * 100).toFixed(0)}R`;
        }}
      />

      {/* Master Fader with Integrated Meters */}
      <MasterFader
        value={volume}
        peakLevel={peakLevel}
        rmsLevel={rmsLevel}
        isClipping={isClipping}
        onChange={onVolumeChange}
        onResetClip={onResetClip}
      />

      {/* Mute Button */}
      <button
        onClick={onMuteToggle}
        className={cn(
          'h-8 w-8 rounded-md flex items-center justify-center transition-all text-[11px] font-bold',
          isMuted
            ? 'bg-blue-500 text-white shadow-md shadow-blue-500/30'
            : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
        )}
        title={isMuted ? 'Unmute' : 'Mute'}
      >
        M
      </button>
    </div>
  );
}