audio-ui/components/effects/EffectsPanel.tsx

'use client';

import * as React from 'react';
import { ChevronDown, ChevronUp, Plus } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { EffectDevice } from './EffectDevice';
import { EffectBrowser } from './EffectBrowser';
import type { Track } from '@/types/track';
import type { EffectType } from '@/lib/audio/effects/chain';
import { cn } from '@/lib/utils/cn';

export interface EffectsPanelProps {
  track: Track | null; // Selected track
  visible: boolean;
  height: number;
  onToggleVisible: () => void;
  onResizeHeight: (height: number) => void;
  onAddEffect?: (effectType: EffectType) => void;
  onToggleEffect?: (effectId: string) => void;
  onRemoveEffect?: (effectId: string) => void;
  onUpdateEffect?: (effectId: string, parameters: any) => void;
  onToggleEffectExpanded?: (effectId: string) => void;
}

export function EffectsPanel({
  track,
  visible,
  height,
  onToggleVisible,
  onResizeHeight,
  onAddEffect,
  onToggleEffect,
  onRemoveEffect,
  onUpdateEffect,
  onToggleEffectExpanded,
}: EffectsPanelProps) {
  const [effectBrowserOpen, setEffectBrowserOpen] = React.useState(false);
  const [isResizing, setIsResizing] = React.useState(false);
  const resizeStartRef = React.useRef({ y: 0, height: 0 });

  // Resize handler
  const handleResizeStart = React.useCallback(
    (e: React.MouseEvent) => {
      e.preventDefault();
      setIsResizing(true);
      resizeStartRef.current = { y: e.clientY, height };
    },
    [height]
  );

  React.useEffect(() => {
    if (!isResizing) return;

    const handleMouseMove = (e: MouseEvent) => {
      const delta = resizeStartRef.current.y - e.clientY;
      const newHeight = Math.max(200, Math.min(600, resizeStartRef.current.height + delta));
      onResizeHeight(newHeight);
    };

    const handleMouseUp = () => {
      setIsResizing(false);
    };

    window.addEventListener('mousemove', handleMouseMove);
    window.addEventListener('mouseup', handleMouseUp);

    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
      window.removeEventListener('mouseup', handleMouseUp);
    };
  }, [isResizing, onResizeHeight]);

  if (!visible) {
    // Collapsed state - just show header bar
    return (
      <div className="h-8 bg-card border-t border-border flex items-center px-3 gap-2 flex-shrink-0">
        <button
          onClick={onToggleVisible}
          className="flex items-center gap-2 flex-1 hover:text-primary transition-colors text-sm font-medium"
        >
          <ChevronUp className="h-4 w-4" />
          <span>Device View</span>
          {track && (
            <span className="text-muted-foreground">- {track.name}</span>
          )}
        </button>
        {track && (
          <div className="flex items-center gap-1">
            <span className="text-xs text-muted-foreground">
              {track.effectChain.effects.length} device(s)
            </span>
          </div>
        )}
      </div>
    );
  }

  return (
    <div
      className="bg-card border-t border-border flex flex-col flex-shrink-0 transition-all duration-300 ease-in-out"
      style={{ height }}
    >
      {/* Resize handle */}
      <div
        className={cn(
          'h-1 cursor-ns-resize hover:bg-primary/50 transition-colors group flex items-center justify-center',
          isResizing && 'bg-primary/50'
        )}
        onMouseDown={handleResizeStart}
        title="Drag to resize panel"
      >
        <div className="h-px w-16 bg-border group-hover:bg-primary transition-colors" />
      </div>

      {/* Header */}
      <div className="h-10 flex-shrink-0 border-b border-border flex items-center px-3 gap-2 bg-muted/30">
        <button
          onClick={onToggleVisible}
          className="flex items-center gap-2 flex-1 hover:text-primary transition-colors"
        >
          <ChevronDown className="h-4 w-4" />
          <span className="text-sm font-medium">Device View</span>
          {track && (
            <>
              <span className="text-sm text-muted-foreground">-</span>
              <div
                className="w-0.5 h-4 rounded-full"
                style={{ backgroundColor: track.color }}
              />
              <span className="text-sm font-semibold text-foreground">{track.name}</span>
            </>
          )}
        </button>

        {track && (
          <>
            <span className="text-xs text-muted-foreground">
              {track.effectChain.effects.length} device(s)
            </span>
            <Button
              variant="ghost"
              size="icon-sm"
              onClick={() => setEffectBrowserOpen(true)}
              title="Add effect"
              className="h-7 w-7"
            >
              <Plus className="h-4 w-4" />
            </Button>
          </>
        )}
      </div>

      {/* Device Rack */}
      <div className="flex-1 overflow-x-auto overflow-y-hidden custom-scrollbar bg-background/50 p-3">
        {!track ? (
          <div className="h-full flex items-center justify-center text-sm text-muted-foreground">
            Select a track to view its devices
          </div>
        ) : track.effectChain.effects.length === 0 ? (
          <div className="h-full flex flex-col items-center justify-center text-sm text-muted-foreground gap-2">
            <p>No devices on this track</p>
            <Button
              variant="outline"
              size="sm"
              onClick={() => setEffectBrowserOpen(true)}
            >
              <Plus className="h-4 w-4 mr-1" />
              Add Device
            </Button>
          </div>
        ) : (
          <div className="flex h-full gap-3">
            {track.effectChain.effects.map((effect) => (
              <EffectDevice
                key={effect.id}
                effect={effect}
                onToggleEnabled={() => onToggleEffect?.(effect.id)}
                onRemove={() => onRemoveEffect?.(effect.id)}
                onUpdateParameters={(params) => onUpdateEffect?.(effect.id, params)}
                onToggleExpanded={() => onToggleEffectExpanded?.(effect.id)}
              />
            ))}
          </div>
        )}
      </div>

      {/* Effect Browser Dialog */}
      {track && (
        <EffectBrowser
          open={effectBrowserOpen}
          onClose={() => setEffectBrowserOpen(false)}
          onSelectEffect={(effectType) => {
            if (onAddEffect) {
              onAddEffect(effectType);
            }
            setEffectBrowserOpen(false);
          }}
        />
      )}
    </div>
  );
}