audio-ui/components/tracks/TrackList.tsx

'use client';

import * as React from 'react';
import { Plus, Upload } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Track } from './Track';
import { ImportTrackDialog } from './ImportTrackDialog';
import type { Track as TrackType } from '@/types/track';

export interface TrackListProps {
  tracks: TrackType[];
  zoom: number;
  currentTime: number;
  duration: number;
  onAddTrack: () => void;
  onImportTrack?: (buffer: AudioBuffer, name: string) => void;
  onRemoveTrack: (trackId: string) => void;
  onUpdateTrack: (trackId: string, updates: Partial<TrackType>) => void;
  onSeek?: (time: number) => void;
}

export function TrackList({
  tracks,
  zoom,
  currentTime,
  duration,
  onAddTrack,
  onImportTrack,
  onRemoveTrack,
  onUpdateTrack,
  onSeek,
}: TrackListProps) {
  const [importDialogOpen, setImportDialogOpen] = React.useState(false);

  const handleImportTrack = (buffer: AudioBuffer, name: string) => {
    if (onImportTrack) {
      onImportTrack(buffer, name);
    }
  };

  if (tracks.length === 0) {
    return (
      <>
        <div className="flex-1 flex flex-col items-center justify-center gap-4 text-muted-foreground">
          <p className="text-sm">No tracks yet. Add a track to get started.</p>
          <div className="flex gap-2">
            <Button onClick={onAddTrack} variant="secondary">
              <Plus className="h-4 w-4 mr-2" />
              Add Empty Track
            </Button>
            {onImportTrack && (
              <Button onClick={() => setImportDialogOpen(true)} variant="secondary">
                <Upload className="h-4 w-4 mr-2" />
                Import Audio Files
              </Button>
            )}
          </div>
        </div>
        {onImportTrack && (
          <ImportTrackDialog
            open={importDialogOpen}
            onClose={() => setImportDialogOpen(false)}
            onImportTrack={handleImportTrack}
          />
        )}
      </>
    );
  }

  return (
    <div className="flex-1 flex flex-col overflow-hidden">
      {/* Track List */}
      <div className="flex-1 overflow-y-auto custom-scrollbar">
        {tracks.map((track) => (
          <Track
            key={track.id}
            track={track}
            zoom={zoom}
            currentTime={currentTime}
            duration={duration}
            onToggleMute={() =>
              onUpdateTrack(track.id, { mute: !track.mute })
            }
            onToggleSolo={() =>
              onUpdateTrack(track.id, { solo: !track.solo })
            }
            onToggleCollapse={() =>
              onUpdateTrack(track.id, { collapsed: !track.collapsed })
            }
            onVolumeChange={(volume) =>
              onUpdateTrack(track.id, { volume })
            }
            onPanChange={(pan) =>
              onUpdateTrack(track.id, { pan })
            }
            onRemove={() => onRemoveTrack(track.id)}
            onNameChange={(name) =>
              onUpdateTrack(track.id, { name })
            }
            onSeek={onSeek}
          />
        ))}
      </div>

      {/* Add Track Buttons */}
      <div className="p-2 border-t border-border bg-card space-y-2">
        <Button onClick={onAddTrack} variant="outline" size="sm" className="w-full">
          <Plus className="h-4 w-4 mr-2" />
          Add Empty Track
        </Button>
        {onImportTrack && (
          <Button
            onClick={() => setImportDialogOpen(true)}
            variant="outline"
            size="sm"
            className="w-full"
          >
            <Upload className="h-4 w-4 mr-2" />
            Import Audio Files
          </Button>
        )}
      </div>

      {/* Import Dialog */}
      {onImportTrack && (
        <ImportTrackDialog
          open={importDialogOpen}
          onClose={() => setImportDialogOpen(false)}
          onImportTrack={handleImportTrack}
        />
      )}
    </div>
  );
}