'use client';

import * as React from 'react';
import { Volume2, VolumeX } from 'lucide-react';
import { Button } from '@/components/ui/Button';
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-muted/10 border-2 border-accent/30 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}
        formatter={(value) => {
          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
        variant={isMuted ? 'default' : 'outline'}
        size="sm"
        onClick={onMuteToggle}
        title={isMuted ? 'Unmute' : 'Mute'}
        className={cn(
          'w-full h-8',
          isMuted && 'bg-red-500/20 hover:bg-red-500/30 border-red-500/50'
        )}
      >
        {isMuted ? (
          <VolumeX className="h-4 w-4" />
        ) : (
          <Volume2 className="h-4 w-4" />
        )}
      </Button>
    </div>
  );
}