audio-ui/components/effects/EffectRack.tsx

'use client';

import * as React from 'react';
import { GripVertical, Power, PowerOff, Trash2, Settings } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { cn } from '@/lib/utils/cn';
import type { ChainEffect, EffectChain } from '@/lib/audio/effects/chain';
import { EFFECT_NAMES } from '@/lib/audio/effects/chain';

export interface EffectRackProps {
  chain: EffectChain;
  onToggleEffect: (effectId: string) => void;
  onRemoveEffect: (effectId: string) => void;
  onReorderEffects: (fromIndex: number, toIndex: number) => void;
  onEditEffect?: (effect: ChainEffect) => void;
  className?: string;
}

export function EffectRack({
  chain,
  onToggleEffect,
  onRemoveEffect,
  onReorderEffects,
  onEditEffect,
  className,
}: EffectRackProps) {
  const [draggedIndex, setDraggedIndex] = React.useState<number | null>(null);
  const [dragOverIndex, setDragOverIndex] = React.useState<number | null>(null);

  const handleDragStart = (e: React.DragEvent, index: number) => {
    setDraggedIndex(index);
    e.dataTransfer.effectAllowed = 'move';
  };

  const handleDragOver = (e: React.DragEvent, index: number) => {
    e.preventDefault();
    if (draggedIndex === null || draggedIndex === index) return;
    setDragOverIndex(index);
  };

  const handleDrop = (e: React.DragEvent, index: number) => {
    e.preventDefault();
    if (draggedIndex === null || draggedIndex === index) return;

    onReorderEffects(draggedIndex, index);
    setDraggedIndex(null);
    setDragOverIndex(null);
  };

  const handleDragEnd = () => {
    setDraggedIndex(null);
    setDragOverIndex(null);
  };

  if (chain.effects.length === 0) {
    return (
      <div className={cn('p-4 text-center', className)}>
        <p className="text-sm text-muted-foreground">
          No effects in chain. Add effects from the side panel to get started.
        </p>
      </div>
    );
  }

  return (
    <div className={cn('space-y-2', className)}>
      {chain.effects.map((effect, index) => (
        <div
          key={effect.id}
          draggable
          onDragStart={(e) => handleDragStart(e, index)}
          onDragOver={(e) => handleDragOver(e, index)}
          onDrop={(e) => handleDrop(e, index)}
          onDragEnd={handleDragEnd}
          className={cn(
            'flex items-center gap-2 p-3 rounded-lg border transition-all',
            effect.enabled
              ? 'bg-card border-border'
              : 'bg-muted/50 border-border/50 opacity-60',
            draggedIndex === index && 'opacity-50',
            dragOverIndex === index && 'border-primary'
          )}
        >
          {/* Drag Handle */}
          <div
            className="cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground"
            title="Drag to reorder"
          >
            <GripVertical className="h-4 w-4" />
          </div>

          {/* Effect Info */}
          <div className="flex-1 min-w-0">
            <div className="text-sm font-medium text-foreground truncate">
              {effect.name}
            </div>
            <div className="text-xs text-muted-foreground">
              {EFFECT_NAMES[effect.type]}
            </div>
          </div>

          {/* Actions */}
          <div className="flex items-center gap-1">
            {/* Edit Button (if edit handler provided) */}
            {onEditEffect && (
              <Button
                variant="ghost"
                size="icon-sm"
                onClick={() => onEditEffect(effect)}
                title="Edit parameters"
              >
                <Settings className="h-4 w-4" />
              </Button>
            )}

            {/* Toggle Enable/Disable */}
            <Button
              variant="ghost"
              size="icon-sm"
              onClick={() => onToggleEffect(effect.id)}
              title={effect.enabled ? 'Disable effect' : 'Enable effect'}
            >
              {effect.enabled ? (
                <Power className="h-4 w-4 text-success" />
              ) : (
                <PowerOff className="h-4 w-4 text-muted-foreground" />
              )}
            </Button>

            {/* Remove */}
            <Button
              variant="ghost"
              size="icon-sm"
              onClick={() => onRemoveEffect(effect.id)}
              title="Remove effect"
            >
              <Trash2 className="h-4 w-4 text-destructive" />
            </Button>
          </div>
        </div>
      ))}
    </div>
  );
}