'use client';

import * as React from 'react';
import { Volume2, VolumeX } from 'lucide-react';
import { CircularKnob } from '@/components/ui/CircularKnob';
import { TrackFader } from './TrackFader';
import { cn } from '@/lib/utils/cn';

export interface TrackControlsProps {
  volume: number;
  pan: number;
  peakLevel: number;
  rmsLevel: number;
  isMuted?: boolean;
  onVolumeChange: (volume: number) => void;
  onPanChange: (pan: number) => void;
  onMuteToggle: () => void;
  onVolumeTouchStart?: () => void;
  onVolumeTouchEnd?: () => void;
  onPanTouchStart?: () => void;
  onPanTouchEnd?: () => void;
  className?: string;
}

export function TrackControls({
  volume,
  pan,
  peakLevel,
  rmsLevel,
  isMuted = false,
  onVolumeChange,
  onPanChange,
  onMuteToggle,
  onVolumeTouchStart,
  onVolumeTouchEnd,
  onPanTouchStart,
  onPanTouchEnd,
  className,
}: TrackControlsProps) {
  return (
    <div className={cn('flex flex-col items-center gap-2 py-2', className)}>
      {/* Pan Control */}
      <CircularKnob
        value={pan}
        onChange={onPanChange}
        onTouchStart={onPanTouchStart}
        onTouchEnd={onPanTouchEnd}
        min={-1}
        max={1}
        step={0.01}
        label="PAN"
        size={40}
        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`;
        }}
      />

      {/* Track Fader with Integrated Meters */}
      <TrackFader
        value={volume}
        peakLevel={peakLevel}
        rmsLevel={rmsLevel}
        onChange={onVolumeChange}
        onTouchStart={onVolumeTouchStart}
        onTouchEnd={onVolumeTouchEnd}
      />

      {/* Mute Button */}
      <button
        onClick={onMuteToggle}
        className={cn(
          'w-8 h-6 rounded text-[10px] font-bold transition-colors border',
          isMuted
            ? 'bg-red-500/20 hover:bg-red-500/30 border-red-500/50 text-red-500'
            : 'bg-muted/20 hover:bg-muted/30 border-border/50 text-muted-foreground'
        )}
        title={isMuted ? 'Unmute' : 'Mute'}
      >
        M
      </button>
    </div>
  );
}