audio-ui/components/tracks/TrackControls.tsx

'use client';

import * as React from 'react';
import { Circle, Headphones, MoreHorizontal } 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;
  isSolo?: boolean;
  isRecordEnabled?: boolean;
  showAutomation?: boolean;
  showEffects?: boolean;
  isRecording?: boolean;
  onVolumeChange: (volume: number) => void;
  onPanChange: (pan: number) => void;
  onMuteToggle: () => void;
  onSoloToggle?: () => void;
  onRecordToggle?: () => void;
  onAutomationToggle?: () => void;
  onEffectsClick?: () => void;
  onVolumeTouchStart?: () => void;
  onVolumeTouchEnd?: () => void;
  onPanTouchStart?: () => void;
  onPanTouchEnd?: () => void;
  className?: string;
}

export function TrackControls({
  volume,
  pan,
  peakLevel,
  rmsLevel,
  isMuted = false,
  isSolo = false,
  isRecordEnabled = false,
  showAutomation = false,
  showEffects = false,
  isRecording = false,
  onVolumeChange,
  onPanChange,
  onMuteToggle,
  onSoloToggle,
  onRecordToggle,
  onAutomationToggle,
  onEffectsClick,
  onVolumeTouchStart,
  onVolumeTouchEnd,
  onPanTouchStart,
  onPanTouchEnd,
  className,
}: TrackControlsProps) {
  return (
    <div className={cn(
      'flex flex-col items-center justify-between h-full px-3 pt-2 pb-4 bg-card/50 border-2 border-accent/50 rounded-lg',
      className
    )}>
      {/* Pan Control - Top */}
      <div className="flex justify-center w-full">
        <CircularKnob
          value={pan}
          onChange={onPanChange}
          onTouchStart={onPanTouchStart}
          onTouchEnd={onPanTouchEnd}
          min={-1}
          max={1}
          step={0.01}
          label="PAN"
          size={40}
          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`;
          }}
        />
      </div>

      {/* Track Fader - Center (vertically centered in remaining space) */}
      <div className="flex justify-center items-center flex-1 w-full">
        <TrackFader
          value={volume}
          peakLevel={peakLevel}
          rmsLevel={rmsLevel}
          onChange={onVolumeChange}
          onTouchStart={onVolumeTouchStart}
          onTouchEnd={onVolumeTouchEnd}
        />
      </div>

      {/* Control Buttons - Bottom */}
      <div className="flex flex-col gap-1 w-full">
        {/* Control Buttons Row 1: R/S/M */}
        <div className="flex items-center gap-0.5 w-full justify-center">
          {/* Record Arm */}
          {onRecordToggle && (
            <button
              onClick={onRecordToggle}
              className={cn(
                'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
                isRecordEnabled
                  ? 'bg-red-500 text-white shadow-md shadow-red-500/30'
                  : 'bg-card hover:bg-accent text-muted-foreground border border-border/50',
                isRecording && 'animate-pulse'
              )}
              title="Arm track for recording"
            >
              <Circle className="h-2.5 w-2.5 fill-current" />
            </button>
          )}

          {/* Solo Button */}
          {onSoloToggle && (
            <button
              onClick={onSoloToggle}
              className={cn(
                'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
                isSolo
                  ? 'bg-yellow-500 text-black shadow-md shadow-yellow-500/30'
                  : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
              )}
              title="Solo track"
            >
              <Headphones className="h-2.5 w-2.5" />
            </button>
          )}

          {/* Mute Button */}
          <button
            onClick={onMuteToggle}
            className={cn(
              'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] 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="Mute track"
          >
            M
          </button>
        </div>

        {/* Control Buttons Row 2: A/E */}
        <div className="flex items-center gap-0.5 w-full justify-center">
          {/* Automation Toggle */}
          {onAutomationToggle && (
            <button
              onClick={onAutomationToggle}
              className={cn(
                'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
                showAutomation
                  ? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
                  : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
              )}
              title="Toggle automation"
            >
              A
            </button>
          )}

          {/* Effects Button */}
          {onEffectsClick && (
            <button
              onClick={onEffectsClick}
              className={cn(
                'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
                showEffects
                  ? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
                  : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
              )}
              title={showEffects ? 'Hide effects' : 'Show effects'}
            >
              E
            </button>
          )}
        </div>
      </div>
    </div>
  );
}