audio-ui/components/layout/SidePanel.tsx

'use client';

import * as React from 'react';
import {
  ChevronLeft,
  ChevronRight,
  Upload,
  Plus,
  Trash2,
  Link2,
  FolderOpen,
  Volume2,
  Music2,
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Slider } from '@/components/ui/Slider';
import { cn } from '@/lib/utils/cn';
import { formatDuration } from '@/lib/audio/decoder';
import type { Track } from '@/types/track';
import type { EffectChain, EffectPreset } from '@/lib/audio/effects/chain';
import { EffectRack } from '@/components/effects/EffectRack';
import { PresetManager } from '@/components/effects/PresetManager';

export interface SidePanelProps {
  tracks: Track[];
  selectedTrackId: string | null;
  onSelectTrack: (trackId: string | null) => void;
  onAddTrack: () => void;
  onImportTracks: () => void;
  onUpdateTrack: (trackId: string, updates: Partial<Track>) => void;
  onRemoveTrack: (trackId: string) => void;
  onClearTracks: () => void;

  // Effect chain
  effectChain: EffectChain;
  effectPresets: EffectPreset[];
  onToggleEffect: (effectId: string) => void;
  onRemoveEffect: (effectId: string) => void;
  onReorderEffects: (fromIndex: number, toIndex: number) => void;
  onSavePreset: (preset: EffectPreset) => void;
  onLoadPreset: (preset: EffectPreset) => void;
  onDeletePreset: (presetId: string) => void;
  onClearChain: () => void;

  className?: string;
}

export function SidePanel({
  tracks,
  selectedTrackId,
  onSelectTrack,
  onAddTrack,
  onImportTracks,
  onUpdateTrack,
  onRemoveTrack,
  onClearTracks,
  effectChain,
  effectPresets,
  onToggleEffect,
  onRemoveEffect,
  onReorderEffects,
  onSavePreset,
  onLoadPreset,
  onDeletePreset,
  onClearChain,
  className,
}: SidePanelProps) {
  const [isCollapsed, setIsCollapsed] = React.useState(false);
  const [activeTab, setActiveTab] = React.useState<'tracks' | 'chain'>('tracks');
  const [presetDialogOpen, setPresetDialogOpen] = React.useState(false);

  const selectedTrack = tracks.find((t) => t.id === selectedTrackId);

  if (isCollapsed) {
    return (
      <div
        className={cn(
          'w-12 bg-card border-r border-border flex flex-col items-center py-2',
          className
        )}
      >
        <Button
          variant="ghost"
          size="icon-sm"
          onClick={() => setIsCollapsed(false)}
          title="Expand Side Panel"
        >
          <ChevronRight className="h-4 w-4" />
        </Button>
      </div>
    );
  }

  return (
    <div className={cn('w-80 bg-card border-r border-border flex flex-col', className)}>
      {/* Header */}
      <div className="flex items-center justify-between p-2 border-b border-border">
        <div className="flex items-center gap-1">
          <Button
            variant={activeTab === 'tracks' ? 'secondary' : 'ghost'}
            size="icon-sm"
            onClick={() => setActiveTab('tracks')}
            title="Tracks"
          >
            <Music2 className="h-4 w-4" />
          </Button>
          <Button
            variant={activeTab === 'chain' ? 'secondary' : 'ghost'}
            size="icon-sm"
            onClick={() => setActiveTab('chain')}
            title="Effect Chain"
          >
            <Link2 className="h-4 w-4" />
          </Button>
        </div>
        <Button
          variant="ghost"
          size="icon-sm"
          onClick={() => setIsCollapsed(true)}
          title="Collapse Side Panel"
        >
          <ChevronLeft className="h-4 w-4" />
        </Button>
      </div>

      {/* Content */}
      <div className="flex-1 overflow-y-auto p-3 space-y-3 custom-scrollbar">
        {activeTab === 'tracks' && (
          <>
            {/* Track Actions */}
            <div className="space-y-2">
              <h3 className="text-xs font-semibold text-muted-foreground uppercase">
                Multi-Track Editor
              </h3>
              <div className="flex gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={onAddTrack}
                  className="flex-1"
                >
                  <Plus className="h-3.5 w-3.5 mr-1.5" />
                  Add Track
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={onImportTracks}
                  className="flex-1"
                >
                  <Upload className="h-3.5 w-3.5 mr-1.5" />
                  Import
                </Button>
              </div>
              {tracks.length > 0 && (
                <Button
                  variant="outline"
                  size="sm"
                  onClick={onClearTracks}
                  className="w-full"
                >
                  <Trash2 className="h-3.5 w-3.5 mr-1.5 text-destructive" />
                  Clear All Tracks
                </Button>
              )}
            </div>

            {/* Track List */}
            {tracks.length > 0 ? (
              <div className="space-y-2">
                <h3 className="text-xs font-semibold text-muted-foreground uppercase">
                  Tracks ({tracks.length})
                </h3>
                <div className="space-y-2">
                  {tracks.map((track) => {
                    const isSelected = selectedTrackId === track.id;
                    return (
                      <div
                        key={track.id}
                        className={cn(
                          'p-3 rounded-lg border transition-colors cursor-pointer',
                          isSelected
                            ? 'bg-primary/10 border-primary'
                            : 'bg-secondary/30 border-border hover:border-primary/50'
                        )}
                        onClick={() => onSelectTrack(isSelected ? null : track.id)}
                      >
                        <div className="flex items-center justify-between mb-2">
                          <div className="flex-1 min-w-0">
                            <div className="text-sm font-medium text-foreground truncate">
                              {track.name}
                            </div>
                            {track.audioBuffer && (
                              <div className="text-xs text-muted-foreground">
                                {formatDuration(track.audioBuffer.duration)}
                              </div>
                            )}
                          </div>
                          <Button
                            variant="ghost"
                            size="icon-sm"
                            onClick={(e) => {
                              e.stopPropagation();
                              onRemoveTrack(track.id);
                            }}
                            title="Remove track"
                          >
                            <Trash2 className="h-3.5 w-3.5 text-destructive" />
                          </Button>
                        </div>

                        {/* Track Controls - Always visible */}
                        <div className="space-y-2">
                          {/* Volume */}
                          <div className="space-y-1">
                            <div className="flex items-center justify-between">
                              <label className="text-xs text-muted-foreground flex items-center gap-1">
                                <Volume2 className="h-3 w-3" />
                                Volume
                              </label>
                              <span className="text-xs text-muted-foreground">
                                {Math.round(track.volume * 100)}%
                              </span>
                            </div>
                            <Slider
                              value={track.volume}
                              onChange={(value) => onUpdateTrack(track.id, { volume: value })}
                              min={0}
                              max={2}
                              step={0.01}
                            />
                          </div>

                          {/* Pan */}
                          <div className="space-y-1">
                            <div className="flex items-center justify-between">
                              <label className="text-xs text-muted-foreground">Pan</label>
                              <span className="text-xs text-muted-foreground">
                                {track.pan === 0
                                  ? 'C'
                                  : track.pan < 0
                                  ? `L${Math.round(Math.abs(track.pan) * 100)}`
                                  : `R${Math.round(track.pan * 100)}`}
                              </span>
                            </div>
                            <Slider
                              value={track.pan}
                              onChange={(value) => onUpdateTrack(track.id, { pan: value })}
                              min={-1}
                              max={1}
                              step={0.01}
                            />
                          </div>

                          {/* Solo / Mute */}
                          <div className="flex gap-2">
                            <Button
                              variant={track.solo ? 'default' : 'outline'}
                              size="sm"
                              onClick={(e) => {
                                e.stopPropagation();
                                onUpdateTrack(track.id, { solo: !track.solo });
                              }}
                              className="flex-1 text-xs"
                            >
                              Solo
                            </Button>
                            <Button
                              variant={track.mute ? 'default' : 'outline'}
                              size="sm"
                              onClick={(e) => {
                                e.stopPropagation();
                                onUpdateTrack(track.id, { mute: !track.mute });
                              }}
                              className="flex-1 text-xs"
                            >
                              Mute
                            </Button>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            ) : (
              <div className="text-center py-8">
                <Music2 className="h-12 w-12 mx-auto text-muted-foreground/50 mb-2" />
                <p className="text-sm text-muted-foreground mb-4">
                  No tracks yet. Add or import audio files to get started.
                </p>
              </div>
            )}
          </>
        )}

        {activeTab === 'chain' && (
          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <h3 className="text-xs font-semibold text-muted-foreground uppercase">
                Effect Chain
                {selectedTrack && (
                  <span className="text-primary ml-2">({selectedTrack.name})</span>
                )}
              </h3>
              <div className="flex gap-1">
                <Button
                  variant="ghost"
                  size="icon-sm"
                  onClick={() => setPresetDialogOpen(true)}
                  title="Manage presets"
                >
                  <FolderOpen className="h-4 w-4" />
                </Button>
                {effectChain.effects.length > 0 && (
                  <Button
                    variant="ghost"
                    size="icon-sm"
                    onClick={onClearChain}
                    title="Clear all effects"
                  >
                    <Trash2 className="h-4 w-4 text-destructive" />
                  </Button>
                )}
              </div>
            </div>

            {!selectedTrack ? (
              <div className="text-center py-8">
                <Link2 className="h-12 w-12 mx-auto text-muted-foreground/50 mb-2" />
                <p className="text-sm text-muted-foreground">
                  Select a track to apply effects
                </p>
              </div>
            ) : (
              <>
                <EffectRack
                  chain={effectChain}
                  onToggleEffect={onToggleEffect}
                  onRemoveEffect={onRemoveEffect}
                  onReorderEffects={onReorderEffects}
                />
                <PresetManager
                  open={presetDialogOpen}
                  onClose={() => setPresetDialogOpen(false)}
                  currentChain={effectChain}
                  presets={effectPresets}
                  onSavePreset={onSavePreset}
                  onLoadPreset={onLoadPreset}
                  onDeletePreset={onDeletePreset}
                  onExportPreset={() => {}}
                  onImportPreset={(preset) => onSavePreset(preset)}
                />
              </>
            )}
          </div>
        )}
      </div>
    </div>
  );
}