audio-ui/components/controls/MasterControls.tsx

'use client';

import * as React from 'react';
import { ChevronDown, ChevronUp } from 'lucide-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;
  collapsed?: boolean; // For collapsible on mobile/small screens
  onVolumeChange: (volume: number) => void;
  onPanChange: (pan: number) => void;
  onMuteToggle: () => void;
  onResetClip?: () => void;
  onToggleCollapse?: () => void;
  className?: string;
}

export function MasterControls({
  volume,
  pan,
  peakLevel,
  rmsLevel,
  isClipping,
  isMuted = false,
  collapsed = false,
  onVolumeChange,
  onPanChange,
  onMuteToggle,
  onResetClip,
  onToggleCollapse,
  className,
}: MasterControlsProps) {
  // Collapsed view - minimal controls
  if (collapsed) {
    return (
      <div className={cn(
        'flex flex-col items-center gap-2 px-3 py-2 bg-card/50 border border-accent/50 rounded-lg w-full',
        className
      )}>
        <div className="flex items-center justify-between w-full">
          <div className="text-xs font-bold text-accent uppercase tracking-wider">
            Master
          </div>
          {onToggleCollapse && (
            <button
              onClick={onToggleCollapse}
              className="p-1 hover:bg-accent/20 rounded transition-colors"
              title="Expand master controls"
            >
              <ChevronDown className="h-3 w-3 text-muted-foreground" />
            </button>
          )}
        </div>
        <div className="flex items-center gap-2 w-full justify-center">
          <button
            onClick={onMuteToggle}
            className={cn(
              'h-7 w-7 rounded-md flex items-center justify-center transition-all text-xs 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 className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
            <div
              className={cn(
                'h-full transition-all',
                peakLevel > 0.95 ? 'bg-red-500' : peakLevel > 0.8 ? 'bg-yellow-500' : 'bg-green-500'
              )}
              style={{ width: `${peakLevel * 100}%` }}
            />
          </div>
        </div>
      </div>
    );
  }

  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 with collapse button */}
      <div className="flex items-center justify-between w-full">
        <div className="text-[10px] font-bold text-accent uppercase tracking-wider flex-1 text-center">
          Master
        </div>
        {onToggleCollapse && (
          <button
            onClick={onToggleCollapse}
            className="p-0.5 hover:bg-accent/20 rounded transition-colors flex-shrink-0 lg:hidden"
            title="Collapse master controls"
          >
            <ChevronUp className="h-3 w-3 text-muted-foreground" />
          </button>
        )}
      </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>
  );
}