'use client';

import * as React from 'react';
import { Circle, Headphones, Waveform, 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;
  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,
  isRecording = false,
  onVolumeChange,
  onPanChange,
  onMuteToggle,
  onSoloToggle,
  onRecordToggle,
  onAutomationToggle,
  onEffectsClick,
  onVolumeTouchStart,
  onVolumeTouchEnd,
  onPanTouchStart,
  onPanTouchEnd,
  className,
}: TrackControlsProps) {
  return (
    <div className={cn('flex flex-col items-center gap-1.5 py-1.5', 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}
      />

      {/* 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 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 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 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 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="h-5 w-5 rounded flex items-center justify-center transition-all text-[9px] font-bold bg-card hover:bg-accent text-muted-foreground border border-border/50"
            title="Show effects"
          >
            E
          </button>
        )}
      </div>
    </div>
  );
}