'use client';

import * as React from 'react';
import { Plus, Upload, ChevronDown, ChevronRight, ChevronUp, X, Eye, EyeOff } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { cn } from '@/lib/utils/cn';
import { Track } from './Track';
import { TrackExtensions } from './TrackExtensions';
import { ImportTrackDialog } from './ImportTrackDialog';
import type { Track as TrackType } from '@/types/track';
import { DEFAULT_TRACK_HEIGHT, COLLAPSED_TRACK_HEIGHT, MIN_TRACK_HEIGHT } from '@/types/track';
import { createEffect, type EffectType, EFFECT_NAMES } from '@/lib/audio/effects/chain';
import { AutomationLane } from '@/components/automation/AutomationLane';
import { AutomationHeader } from '@/components/automation/AutomationHeader';
import type { AutomationPoint as AutomationPointType } from '@/types/automation';
import { createAutomationPoint } from '@/lib/audio/automation/utils';
import { EffectDevice } from '@/components/effects/EffectDevice';
import { EffectBrowser } from '@/components/effects/EffectBrowser';

export interface TrackListProps {
  tracks: TrackType[];
  zoom: number;
  currentTime: number;
  duration: number;
  selectedTrackId?: string | null;
  onSelectTrack?: (trackId: string | null) => void;
  onAddTrack: () => void;
  onImportTrack?: (buffer: AudioBuffer, name: string) => void;
  onRemoveTrack: (trackId: string) => void;
  onUpdateTrack: (trackId: string, updates: Partial<TrackType>) => void;
  onSeek?: (time: number) => void;
  onSelectionChange?: (trackId: string, selection: { start: number; end: number } | null) => void;
  onToggleRecordEnable?: (trackId: string) => void;
  recordingTrackId?: string | null;
  recordingLevel?: number;
  trackLevels?: Record<string, number>;
  onParameterTouched?: (trackId: string, laneId: string, touched: boolean) => void;
  isPlaying?: boolean;
  timeScaleScrollRef?: React.MutableRefObject<HTMLDivElement | null>;
  onTimeScaleScroll?: () => void;
  timeScaleScrollHandlerRef?: React.MutableRefObject<(() => void) | null>;
}

export function TrackList({
  tracks,
  zoom,
  currentTime,
  duration,
  selectedTrackId,
  onSelectTrack,
  onAddTrack,
  onImportTrack,
  onRemoveTrack,
  onUpdateTrack,
  onSeek,
  onSelectionChange,
  onToggleRecordEnable,
  recordingTrackId,
  recordingLevel = 0,
  trackLevels = {},
  onParameterTouched,
  isPlaying = false,
  timeScaleScrollRef: externalTimeScaleScrollRef,
  onTimeScaleScroll,
  timeScaleScrollHandlerRef,
}: TrackListProps) {
  const [importDialogOpen, setImportDialogOpen] = React.useState(false);
  const [effectBrowserTrackId, setEffectBrowserTrackId] = React.useState<string | null>(null);
  const waveformScrollRef = React.useRef<HTMLDivElement>(null);
  const controlsScrollRef = React.useRef<HTMLDivElement>(null);

  // Refs for horizontal scroll synchronization (per track)
  const waveformHScrollRefs = React.useRef<Map<string, HTMLDivElement>>(new Map());
  const automationHScrollRefs = React.useRef<Map<string, HTMLDivElement>>(new Map());
  const localTimeScaleScrollRef = React.useRef<HTMLDivElement | null>(null);
  const timeScaleScrollRef = externalTimeScaleScrollRef || localTimeScaleScrollRef;
  const [syncingScroll, setSyncingScroll] = React.useState(false);

  // Synchronize vertical scroll between controls and waveforms
  const handleWaveformScroll = React.useCallback(() => {
    if (waveformScrollRef.current && controlsScrollRef.current) {
      controlsScrollRef.current.scrollTop = waveformScrollRef.current.scrollTop;
    }
  }, []);

  // Synchronize horizontal scroll across all tracks (waveforms and automation lanes)
  const handleWaveformHScroll = React.useCallback((trackId: string) => {
    if (syncingScroll) return;
    setSyncingScroll(true);

    const sourceEl = waveformHScrollRefs.current.get(trackId);
    if (!sourceEl) {
      setSyncingScroll(false);
      return;
    }

    const scrollLeft = sourceEl.scrollLeft;

    // Sync all waveforms
    waveformHScrollRefs.current.forEach((el, id) => {
      if (id !== trackId) {
        el.scrollLeft = scrollLeft;
      }
    });

    // Sync all automation lanes
    automationHScrollRefs.current.forEach((el) => {
      el.scrollLeft = scrollLeft;
    });

    // Sync time scale
    if (timeScaleScrollRef.current) {
      timeScaleScrollRef.current.scrollLeft = scrollLeft;
    }

    setSyncingScroll(false);
  }, [syncingScroll]);

  const handleAutomationHScroll = React.useCallback((trackId: string) => {
    if (syncingScroll) return;
    setSyncingScroll(true);

    const sourceEl = automationHScrollRefs.current.get(trackId);
    if (!sourceEl) {
      setSyncingScroll(false);
      return;
    }

    const scrollLeft = sourceEl.scrollLeft;

    // Sync all waveforms
    waveformHScrollRefs.current.forEach((el) => {
      el.scrollLeft = scrollLeft;
    });

    // Sync all automation lanes
    automationHScrollRefs.current.forEach((el, id) => {
      if (id !== trackId) {
        el.scrollLeft = scrollLeft;
      }
    });

    // Sync time scale
    if (timeScaleScrollRef.current) {
      timeScaleScrollRef.current.scrollLeft = scrollLeft;
    }

    setSyncingScroll(false);
  }, [syncingScroll]);

  const handleTimeScaleScrollInternal = React.useCallback(() => {
    if (syncingScroll) return;
    setSyncingScroll(true);

    if (!timeScaleScrollRef.current) {
      setSyncingScroll(false);
      return;
    }

    const scrollLeft = timeScaleScrollRef.current.scrollLeft;

    // Sync all waveforms
    waveformHScrollRefs.current.forEach((el) => {
      el.scrollLeft = scrollLeft;
    });

    // Sync all automation lanes
    automationHScrollRefs.current.forEach((el) => {
      el.scrollLeft = scrollLeft;
    });

    setSyncingScroll(false);
  }, [syncingScroll]);

  // Expose the scroll handler via ref so AudioEditor can call it
  React.useEffect(() => {
    if (timeScaleScrollHandlerRef) {
      timeScaleScrollHandlerRef.current = handleTimeScaleScrollInternal;
    }
  }, [handleTimeScaleScrollInternal, timeScaleScrollHandlerRef]);

  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">
      {/* Mobile Layout - Single Column (Stacked: Controls → Waveform per track) */}
      <div className="flex-1 flex flex-col overflow-y-auto overflow-x-hidden custom-scrollbar lg:hidden">
        {tracks.map((track) => (
          <div key={track.id} className="flex flex-col border-b border-border">
            {/* Track Controls - Top */}
            <Track
              track={track}
              zoom={zoom}
              currentTime={currentTime}
              duration={duration}
              isSelected={selectedTrackId === track.id}
              onSelect={onSelectTrack ? () => onSelectTrack(track.id) : undefined}
              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 })}
              onUpdateTrack={onUpdateTrack}
              onSeek={onSeek}
              onLoadAudio={(buffer) => onUpdateTrack(track.id, { audioBuffer: buffer })}
              onToggleEffect={(effectId) => {
                const updatedChain = {
                  ...track.effectChain,
                  effects: track.effectChain.effects.map((e) =>
                    e.id === effectId ? { ...e, enabled: !e.enabled } : e
                  ),
                };
                onUpdateTrack(track.id, { effectChain: updatedChain });
              }}
              onRemoveEffect={(effectId) => {
                const updatedChain = {
                  ...track.effectChain,
                  effects: track.effectChain.effects.filter((e) => e.id !== effectId),
                };
                onUpdateTrack(track.id, { effectChain: updatedChain });
              }}
              onUpdateEffect={(effectId, parameters) => {
                const updatedChain = {
                  ...track.effectChain,
                  effects: track.effectChain.effects.map((e) =>
                    e.id === effectId ? { ...e, parameters } : e
                  ),
                };
                onUpdateTrack(track.id, { effectChain: updatedChain });
              }}
              onAddEffect={(effectType) => {
                const newEffect = createEffect(effectType, EFFECT_NAMES[effectType]);
                const updatedChain = {
                  ...track.effectChain,
                  effects: [...track.effectChain.effects, newEffect],
                };
                onUpdateTrack(track.id, { effectChain: updatedChain });
              }}
              onSelectionChange={
                onSelectionChange
                  ? (selection) => onSelectionChange(track.id, selection)
                  : undefined
              }
              onToggleRecordEnable={
                onToggleRecordEnable
                  ? () => onToggleRecordEnable(track.id)
                  : undefined
              }
              isRecording={recordingTrackId === track.id}
              recordingLevel={recordingTrackId === track.id ? recordingLevel : 0}
              playbackLevel={trackLevels[track.id] || 0}
              onParameterTouched={onParameterTouched}
              isPlaying={isPlaying}
              renderControlsOnly={true}
            />

            {/* Track Waveform with Automation and Effects - Bottom */}
            {!track.collapsed && (
              <div className="flex flex-col">
                {/* Waveform */}
                <div className="min-h-[200px] overflow-x-auto custom-scrollbar">
                  <Track
                    track={track}
                    zoom={zoom}
                    currentTime={currentTime}
                    duration={duration}
                    isSelected={selectedTrackId === track.id}
                    onSelect={onSelectTrack ? () => onSelectTrack(track.id) : undefined}
                    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 })}
                    onUpdateTrack={onUpdateTrack}
                    onSeek={onSeek}
                    onLoadAudio={(buffer) => onUpdateTrack(track.id, { audioBuffer: buffer })}
                    onToggleEffect={(effectId) => {
                      const updatedChain = {
                        ...track.effectChain,
                        effects: track.effectChain.effects.map((e) =>
                          e.id === effectId ? { ...e, enabled: !e.enabled } : e
                        ),
                      };
                      onUpdateTrack(track.id, { effectChain: updatedChain });
                    }}
                    onRemoveEffect={(effectId) => {
                      const updatedChain = {
                        ...track.effectChain,
                        effects: track.effectChain.effects.filter((e) => e.id !== effectId),
                      };
                      onUpdateTrack(track.id, { effectChain: updatedChain });
                    }}
                    onUpdateEffect={(effectId, parameters) => {
                      const updatedChain = {
                        ...track.effectChain,
                        effects: track.effectChain.effects.map((e) =>
                          e.id === effectId ? { ...e, parameters } : e
                        ),
                      };
                      onUpdateTrack(track.id, { effectChain: updatedChain });
                    }}
                    onAddEffect={(effectType) => {
                      const newEffect = createEffect(effectType, EFFECT_NAMES[effectType]);
                      const updatedChain = {
                        ...track.effectChain,
                        effects: [...track.effectChain.effects, newEffect],
                      };
                      onUpdateTrack(track.id, { effectChain: updatedChain });
                    }}
                    onSelectionChange={
                      onSelectionChange
                        ? (selection) => onSelectionChange(track.id, selection)
                        : undefined
                    }
                    onToggleRecordEnable={
                      onToggleRecordEnable
                        ? () => onToggleRecordEnable(track.id)
                        : undefined
                    }
                    isRecording={recordingTrackId === track.id}
                    recordingLevel={recordingTrackId === track.id ? recordingLevel : 0}
                    playbackLevel={trackLevels[track.id] || 0}
                    onParameterTouched={onParameterTouched}
                    isPlaying={isPlaying}
                    renderWaveformOnly={true}
                  />
                </div>

                {/* Automation Bar */}
                {(() => {
                  const selectedParam = track.automation.selectedParameterId || 'volume';
                  const currentLane = track.automation.lanes.find(
                    l => l.parameterId === selectedParam
                  );

                  // Build available parameters list
                  const availableParameters: Array<{ id: string; name: string }> = [
                    { id: 'volume', name: 'Volume' },
                    { id: 'pan', name: 'Pan' },
                  ];

                  // Add effect parameters
                  track.effectChain.effects.forEach((effect) => {
                    if (effect.parameters) {
                      Object.keys(effect.parameters).forEach((paramKey) => {
                        const parameterId = `effect.${effect.id}.${paramKey}`;
                        const paramName = `${effect.name} - ${paramKey.charAt(0).toUpperCase() + paramKey.slice(1)}`;
                        availableParameters.push({ id: parameterId, name: paramName });
                      });
                    }
                  });

                  // Get parameters that have automation lanes with points
                  const automatedParams = track.automation.lanes
                    .filter(lane => lane.points.length > 0)
                    .map(lane => {
                      const param = availableParameters.find(p => p.id === lane.parameterId);
                      return param ? param.name : lane.parameterName;
                    });

                  const modes = ['read', 'write', 'touch', 'latch'] as const;
                  const MODE_LABELS = { read: 'R', write: 'W', touch: 'T', latch: 'L' };
                  const MODE_COLORS = {
                    read: 'text-muted-foreground',
                    write: 'text-red-500',
                    touch: 'text-yellow-500',
                    latch: 'text-orange-500',
                  };
                  const currentModeIndex = modes.indexOf(currentLane?.mode || 'read');

                  return (
                    <div className="flex-shrink-0 bg-card/90 backdrop-blur-sm">
                      {/* Automation Header */}
                      <div className="flex items-center gap-2 px-3 py-1.5 bg-muted border-t border-b border-border/30">
                        <span className="text-xs font-medium flex-shrink-0">Automation</span>

                        {/* Color indicator */}
                        {currentLane?.color && (
                          <div
                            className="w-1 h-4 rounded-full flex-shrink-0"
                            style={{ backgroundColor: currentLane.color }}
                          />
                        )}

                        {/* Parameter labels - always visible */}
                        <div className="flex items-center gap-1.5 flex-1 min-w-0 overflow-x-auto custom-scrollbar">
                          {automatedParams.map((paramName, index) => (
                            <span
                              key={index}
                              className="text-[10px] px-1.5 py-0.5 rounded whitespace-nowrap flex-shrink-0 bg-primary/10 text-primary border border-primary/20"
                            >
                              {paramName}
                            </span>
                          ))}
                        </div>

                        {/* Controls - only visible when expanded */}
                        {track.automationExpanded && (
                          <>
                            {/* Parameter selector */}
                            {availableParameters && availableParameters.length > 1 && (
                              <select
                                value={selectedParam}
                                onChange={(e) => onUpdateTrack(track.id, {
                                  automation: { ...track.automation, selectedParameterId: e.target.value },
                                })}
                                className="text-xs font-medium text-foreground w-auto min-w-[120px] max-w-[200px] bg-background/50 border border-border/30 rounded px-1.5 py-0.5 hover:bg-background/80 focus:outline-none focus:ring-1 focus:ring-primary flex-shrink-0"
                              >
                                {availableParameters.map((param) => (
                                  <option key={param.id} value={param.id}>
                                    {param.name}
                                  </option>
                                ))}
                              </select>
                            )}

                            {/* Automation mode button */}
                            <Button
                              variant="ghost"
                              size="icon-sm"
                              onClick={() => {
                                if (currentLane) {
                                  const nextIndex = (currentModeIndex + 1) % modes.length;
                                  const updatedLanes = track.automation.lanes.map((l) =>
                                    l.id === currentLane.id ? { ...l, mode: modes[nextIndex] } : l
                                  );
                                  onUpdateTrack(track.id, {
                                    automation: { ...track.automation, lanes: updatedLanes },
                                  });
                                }
                              }}
                              title={`Automation mode: ${currentLane?.mode || 'read'} (click to cycle)`}
                              className={cn('h-5 w-5 text-[10px] font-bold flex-shrink-0', MODE_COLORS[currentLane?.mode || 'read'])}
                            >
                              {MODE_LABELS[currentLane?.mode || 'read']}
                            </Button>

                            {/* Height controls */}
                            <div className="flex flex-col gap-0 flex-shrink-0">
                              <Button
                                variant="ghost"
                                size="icon-sm"
                                onClick={() => {
                                  if (currentLane) {
                                    const newHeight = Math.max(60, Math.min(200, currentLane.height + 20));
                                    const updatedLanes = track.automation.lanes.map((l) =>
                                      l.id === currentLane.id ? { ...l, height: newHeight } : l
                                    );
                                    onUpdateTrack(track.id, {
                                      automation: { ...track.automation, lanes: updatedLanes },
                                    });
                                  }
                                }}
                                title="Increase lane height"
                                className="h-3 w-4 p-0"
                              >
                                <ChevronUp className="h-2.5 w-2.5" />
                              </Button>
                              <Button
                                variant="ghost"
                                size="icon-sm"
                                onClick={() => {
                                  if (currentLane) {
                                    const newHeight = Math.max(60, Math.min(200, currentLane.height - 20));
                                    const updatedLanes = track.automation.lanes.map((l) =>
                                      l.id === currentLane.id ? { ...l, height: newHeight } : l
                                    );
                                    onUpdateTrack(track.id, {
                                      automation: { ...track.automation, lanes: updatedLanes },
                                    });
                                  }
                                }}
                                title="Decrease lane height"
                                className="h-3 w-4 p-0"
                              >
                                <ChevronDown className="h-2.5 w-2.5" />
                              </Button>
                            </div>
                          </>
                        )}

                        {/* Show/hide toggle */}
                        <Button
                          variant="ghost"
                          size="icon-sm"
                          onClick={() => {
                            onUpdateTrack(track.id, { automationExpanded: !track.automationExpanded });
                          }}
                          title={track.automationExpanded ? 'Hide automation controls' : 'Show automation controls'}
                          className="h-5 w-5 flex-shrink-0"
                        >
                          {track.automationExpanded ? (
                            <Eye className="h-3 w-3" />
                          ) : (
                            <EyeOff className="h-3 w-3 text-muted-foreground" />
                          )}
                        </Button>
                      </div>

                      {/* Automation Lane Content - Shown when expanded */}
                      {track.automationExpanded && (
                        <div className="overflow-x-auto custom-scrollbar">
                          <div
                            style={{
                              minWidth: duration && zoom >= 1 ? `${duration * zoom * 5}px` : '100%',
                            }}
                          >
                            {track.automation.lanes
                              .filter((lane) => lane.parameterId === (track.automation.selectedParameterId || 'volume') && lane.visible)
                              .map((lane) => (
                                <AutomationLane
                                  key={lane.id}
                                  lane={lane}
                                  zoom={zoom}
                                  currentTime={currentTime}
                                  duration={duration}
                                  onAddPoint={(time, value) => {
                                    const newPoint = createAutomationPoint({ time, value, curve: 'linear' });
                                    const updatedLanes = track.automation.lanes.map((l) =>
                                      l.id === lane.id
                                        ? { ...l, points: [...l.points, newPoint].sort((a, b) => a.time - b.time) }
                                        : l
                                    );
                                    onUpdateTrack(track.id, {
                                      automation: { ...track.automation, lanes: updatedLanes },
                                    });
                                  }}
                                  onUpdatePoint={(pointId, updates) => {
                                    const updatedLanes = track.automation.lanes.map((l) =>
                                      l.id === lane.id
                                        ? {
                                            ...l,
                                            points: l.points.map((p) =>
                                              p.id === pointId ? { ...p, ...updates } : p
                                            ),
                                          }
                                        : l
                                    );
                                    onUpdateTrack(track.id, {
                                      automation: { ...track.automation, lanes: updatedLanes },
                                    });
                                  }}
                                  onRemovePoint={(pointId) => {
                                    const updatedLanes = track.automation.lanes.map((l) =>
                                      l.id === lane.id
                                        ? { ...l, points: l.points.filter((p) => p.id !== pointId) }
                                        : l
                                    );
                                    onUpdateTrack(track.id, {
                                      automation: { ...track.automation, lanes: updatedLanes },
                                    });
                                  }}
                                  onUpdateLane={(updates) => {
                                    const updatedLanes = track.automation.lanes.map((l) =>
                                      l.id === lane.id ? { ...l, ...updates } : l
                                    );
                                    onUpdateTrack(track.id, {
                                      automation: { ...track.automation, lanes: updatedLanes },
                                    });
                                  }}
                                />
                              ))}
                          </div>
                        </div>
                      )}
                    </div>
                  );
                })()}

                {/* Effects Bar */}
                <div className="flex-shrink-0 bg-card/90 backdrop-blur-sm border-b border-border">
                  {/* Effects Header */}
                  <div className="flex items-center gap-2 px-3 py-1.5 bg-muted/50 border-t border-b border-border/30">
                    <span className="text-xs font-medium flex-shrink-0">Effects</span>

                    {/* Effect name labels */}
                    <div className="flex items-center gap-1.5 flex-1 min-w-0 overflow-x-auto">
                      {track.effectChain.effects.map((effect) => (
                        <span
                          key={effect.id}
                          className={cn(
                            "text-[10px] px-1.5 py-0.5 rounded whitespace-nowrap flex-shrink-0",
                            effect.enabled
                              ? "bg-primary/10 text-primary border border-primary/20"
                              : "bg-muted/30 text-muted-foreground border border-border/30 opacity-60"
                          )}
                        >
                          {effect.name}
                        </span>
                      ))}
                    </div>

                    {/* Add effect button - only visible when expanded */}
                    {track.effectsExpanded && (
                      <Button
                        variant="ghost"
                        size="icon-sm"
                        onClick={() => setEffectBrowserTrackId(track.id)}
                        title="Add effect"
                        className="h-5 w-5 flex-shrink-0"
                      >
                        <Plus className="h-3 w-3" />
                      </Button>
                    )}

                    {/* Show/hide toggle */}
                    <Button
                      variant="ghost"
                      size="icon-sm"
                      onClick={() => {
                        onUpdateTrack(track.id, { effectsExpanded: !track.effectsExpanded });
                      }}
                      title={track.effectsExpanded ? 'Hide effects' : 'Show effects'}
                      className="h-5 w-5 flex-shrink-0"
                    >
                      {track.effectsExpanded ? (
                        <Eye className="h-3 w-3" />
                      ) : (
                        <EyeOff className="h-3 w-3 text-muted-foreground" />
                      )}
                    </Button>
                  </div>

                  {/* Effects Content - Collapsible, horizontally scrollable */}
                  {track.effectsExpanded && (
                    <div className="h-48 overflow-x-auto custom-scrollbar bg-muted/70 border-t border-border">
                      <div className="flex h-full gap-3 p-3">
                        {track.effectChain.effects.length === 0 ? (
                          <div className="text-xs text-muted-foreground text-center py-8 w-full">
                            No effects. Click + to add an effect.
                          </div>
                        ) : (
                          track.effectChain.effects.map((effect) => (
                            <EffectDevice
                              key={effect.id}
                              effect={effect}
                              onToggleEnabled={() => {
                                const updatedChain = {
                                  ...track.effectChain,
                                  effects: track.effectChain.effects.map((e) =>
                                    e.id === effect.id ? { ...e, enabled: !e.enabled } : e
                                  ),
                                };
                                onUpdateTrack(track.id, { effectChain: updatedChain });
                              }}
                              onRemove={() => {
                                const updatedChain = {
                                  ...track.effectChain,
                                  effects: track.effectChain.effects.filter((e) => e.id !== effect.id),
                                };
                                onUpdateTrack(track.id, { effectChain: updatedChain });
                              }}
                              onUpdateParameters={(params) => {
                                const updatedChain = {
                                  ...track.effectChain,
                                  effects: track.effectChain.effects.map((e) =>
                                    e.id === effect.id ? { ...e, parameters: params } : e
                                  ),
                                };
                                onUpdateTrack(track.id, { effectChain: updatedChain });
                              }}
                              onToggleExpanded={() => {
                                const updatedEffects = track.effectChain.effects.map((e) =>
                                  e.id === effect.id ? { ...e, expanded: !e.expanded } : e
                                );
                                onUpdateTrack(track.id, {
                                  effectChain: { ...track.effectChain, effects: updatedEffects },
                                });
                              }}
                            />
                          ))
                        )}
                      </div>
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
        ))}
      </div>

      {/* Desktop Layout - Two Column Layout */}
      <div className="flex-1 flex overflow-hidden hidden lg:flex">
        {/* Left Column: Track Controls (Fixed Width, No Scroll - synced with waveforms) */}
        <div ref={controlsScrollRef} className="w-60 flex-shrink-0 overflow-hidden pb-3 border-r border-border">
          {tracks.map((track) => (
            <React.Fragment key={track.id}>
              {/* Track Controls */}
              <Track
                track={track}
                zoom={zoom}
                currentTime={currentTime}
                duration={duration}
                isSelected={selectedTrackId === track.id}
                onSelect={onSelectTrack ? () => onSelectTrack(track.id) : undefined}
                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 })
                }
                onUpdateTrack={onUpdateTrack}
                onSeek={onSeek}
                onLoadAudio={(buffer) =>
                  onUpdateTrack(track.id, { audioBuffer: buffer })
                }
                onToggleEffect={(effectId) => {
                  const updatedChain = {
                    ...track.effectChain,
                    effects: track.effectChain.effects.map((e) =>
                      e.id === effectId ? { ...e, enabled: !e.enabled } : e
                    ),
                  };
                  onUpdateTrack(track.id, { effectChain: updatedChain });
                }}
                onRemoveEffect={(effectId) => {
                  const updatedChain = {
                    ...track.effectChain,
                    effects: track.effectChain.effects.filter((e) => e.id !== effectId),
                  };
                  onUpdateTrack(track.id, { effectChain: updatedChain });
                }}
                onUpdateEffect={(effectId, parameters) => {
                  const updatedChain = {
                    ...track.effectChain,
                    effects: track.effectChain.effects.map((e) =>
                      e.id === effectId ? { ...e, parameters } : e
                    ),
                  };
                  onUpdateTrack(track.id, { effectChain: updatedChain });
                }}
                onAddEffect={(effectType) => {
                  const newEffect = createEffect(
                    effectType,
                    EFFECT_NAMES[effectType]
                  );
                  const updatedChain = {
                    ...track.effectChain,
                    effects: [...track.effectChain.effects, newEffect],
                  };
                  onUpdateTrack(track.id, { effectChain: updatedChain });
                }}
                onSelectionChange={
                  onSelectionChange
                    ? (selection) => onSelectionChange(track.id, selection)
                    : undefined
                }
                onToggleRecordEnable={
                  onToggleRecordEnable
                    ? () => onToggleRecordEnable(track.id)
                    : undefined
                }
                isRecording={recordingTrackId === track.id}
                recordingLevel={recordingTrackId === track.id ? recordingLevel : 0}
                playbackLevel={trackLevels[track.id] || 0}
                onParameterTouched={onParameterTouched}
                isPlaying={isPlaying}
                renderControlsOnly={true}
              />
            </React.Fragment>
          ))}
        </div>

        {/* Right Column: Waveforms (Flexible Width, Vertical Scroll Only) */}
        <div
          ref={waveformScrollRef}
          onScroll={handleWaveformScroll}
          className="flex-1 overflow-y-auto overflow-x-hidden custom-scrollbar"
        >
          <div className="flex flex-col">
            {tracks.map((track) => (
              <React.Fragment key={track.id}>
                {/* Track Waveform Row with bars stacked below - Total height matches track controls */}
                <div
                  className="flex flex-col"
                  style={{
                    height: track.collapsed ? `${COLLAPSED_TRACK_HEIGHT}px` : `${Math.max(track.height || DEFAULT_TRACK_HEIGHT, MIN_TRACK_HEIGHT)}px`
                  }}
                >
                  {/* Waveform - Takes remaining space after bars */}
                  <div className="flex-1 min-h-0 relative">
                    {/* Upload hint for empty tracks - stays fixed as overlay */}
                    {!track.audioBuffer && !track.collapsed && (
                      <div className="absolute inset-0 flex flex-col items-center justify-center text-sm text-muted-foreground pointer-events-none z-10">
                        <Upload className="h-6 w-6 mb-2 opacity-50" />
                        <p>Click waveform area to load audio</p>
                        <p className="text-xs opacity-75 mt-1">or drag & drop</p>
                      </div>
                    )}
                    <div
                      ref={(el) => {
                        if (el) waveformHScrollRefs.current.set(track.id, el);
                      }}
                      onScroll={() => handleWaveformHScroll(track.id)}
                      className="w-full h-full overflow-x-auto custom-scrollbar"
                    >
                      <div
                        className="h-full"
                        style={{
                          minWidth: duration && zoom >= 1 ? `${duration * zoom * 5}px` : '100%',
                        }}
                      >
                    <Track
                    track={track}
                    zoom={zoom}
                    currentTime={currentTime}
                    duration={duration}
                    isSelected={selectedTrackId === track.id}
                    onSelect={onSelectTrack ? () => onSelectTrack(track.id) : undefined}
                    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 })
                    }
                    onUpdateTrack={onUpdateTrack}
                    onSeek={onSeek}
                    onLoadAudio={(buffer) =>
                      onUpdateTrack(track.id, { audioBuffer: buffer })
                    }
                    onToggleEffect={(effectId) => {
                      const updatedChain = {
                        ...track.effectChain,
                        effects: track.effectChain.effects.map((e) =>
                          e.id === effectId ? { ...e, enabled: !e.enabled } : e
                        ),
                      };
                      onUpdateTrack(track.id, { effectChain: updatedChain });
                    }}
                    onRemoveEffect={(effectId) => {
                      const updatedChain = {
                        ...track.effectChain,
                        effects: track.effectChain.effects.filter((e) => e.id !== effectId),
                      };
                      onUpdateTrack(track.id, { effectChain: updatedChain });
                    }}
                    onUpdateEffect={(effectId, parameters) => {
                      const updatedChain = {
                        ...track.effectChain,
                        effects: track.effectChain.effects.map((e) =>
                          e.id === effectId ? { ...e, parameters } : e
                        ),
                      };
                      onUpdateTrack(track.id, { effectChain: updatedChain });
                    }}
                    onAddEffect={(effectType) => {
                      const newEffect = createEffect(
                        effectType,
                        EFFECT_NAMES[effectType]
                      );
                      const updatedChain = {
                        ...track.effectChain,
                        effects: [...track.effectChain.effects, newEffect],
                      };
                      onUpdateTrack(track.id, { effectChain: updatedChain });
                    }}
                    onSelectionChange={
                      onSelectionChange
                        ? (selection) => onSelectionChange(track.id, selection)
                        : undefined
                    }
                    onToggleRecordEnable={
                      onToggleRecordEnable
                        ? () => onToggleRecordEnable(track.id)
                        : undefined
                    }
                    isRecording={recordingTrackId === track.id}
                    recordingLevel={recordingTrackId === track.id ? recordingLevel : 0}
                    playbackLevel={trackLevels[track.id] || 0}
                    onParameterTouched={onParameterTouched}
                    isPlaying={isPlaying}
                    renderWaveformOnly={true}
                  />
                      </div>
                    </div>
                  </div>

                  {/* Automation Bar - Collapsible - Fixed height when expanded */}
                  {!track.collapsed && (() => {
                    const selectedParam = track.automation.selectedParameterId || 'volume';
                    const currentLane = track.automation.lanes.find(
                      l => l.parameterId === selectedParam
                    );

                    // Build available parameters list
                    const availableParameters: Array<{ id: string; name: string }> = [
                      { id: 'volume', name: 'Volume' },
                      { id: 'pan', name: 'Pan' },
                    ];

                    // Add effect parameters
                    track.effectChain.effects.forEach((effect) => {
                      if (effect.parameters) {
                        Object.keys(effect.parameters).forEach((paramKey) => {
                          const parameterId = `effect.${effect.id}.${paramKey}`;
                          const paramName = `${effect.name} - ${paramKey.charAt(0).toUpperCase() + paramKey.slice(1)}`;
                          availableParameters.push({ id: parameterId, name: paramName });
                        });
                      }
                    });

                    // Get parameters that have automation lanes with points
                    const automatedParams = track.automation.lanes
                      .filter(lane => lane.points.length > 0)
                      .map(lane => {
                        const param = availableParameters.find(p => p.id === lane.parameterId);
                        return param ? param.name : lane.parameterName;
                      });

                    const modes = ['read', 'write', 'touch', 'latch'] as const;
                    const MODE_LABELS = { read: 'R', write: 'W', touch: 'T', latch: 'L' };
                    const MODE_COLORS = {
                      read: 'text-muted-foreground',
                      write: 'text-red-500',
                      touch: 'text-yellow-500',
                      latch: 'text-orange-500',
                    };
                    const currentModeIndex = modes.indexOf(currentLane?.mode || 'read');

                    return (
                    <div className="flex-shrink-0 bg-card/90 backdrop-blur-sm">
                      {/* Automation Header - Single Bar */}
                      <div className="flex items-center gap-2 px-3 py-1.5 bg-muted border-t border-b border-border/30">
                        <span className="text-xs font-medium flex-shrink-0">Automation</span>

                        {/* Color indicator */}
                        {currentLane?.color && (
                          <div
                            className="w-1 h-4 rounded-full flex-shrink-0"
                            style={{ backgroundColor: currentLane.color }}
                          />
                        )}

                        {/* Parameter labels - always visible */}
                        <div className="flex items-center gap-1.5 flex-1 min-w-0 overflow-x-auto custom-scrollbar">
                          {automatedParams.map((paramName, index) => (
                            <span
                              key={index}
                              className="text-[10px] px-1.5 py-0.5 rounded whitespace-nowrap flex-shrink-0 bg-primary/10 text-primary border border-primary/20"
                            >
                              {paramName}
                            </span>
                          ))}
                        </div>

                        {/* Controls - only visible when expanded */}
                        {track.automationExpanded && (
                          <>
                            {/* Parameter selector */}
                            {availableParameters && availableParameters.length > 1 && (
                              <select
                                value={selectedParam}
                                onChange={(e) => onUpdateTrack(track.id, {
                                  automation: { ...track.automation, selectedParameterId: e.target.value },
                                })}
                                className="text-xs font-medium text-foreground w-auto min-w-[120px] max-w-[200px] bg-background/50 border border-border/30 rounded px-1.5 py-0.5 hover:bg-background/80 focus:outline-none focus:ring-1 focus:ring-primary flex-shrink-0"
                              >
                                {availableParameters.map((param) => (
                                  <option key={param.id} value={param.id}>
                                    {param.name}
                                  </option>
                                ))}
                              </select>
                            )}

                            {/* Automation mode button */}
                            <Button
                              variant="ghost"
                              size="icon-sm"
                              onClick={() => {
                                if (currentLane) {
                                  const nextIndex = (currentModeIndex + 1) % modes.length;
                                  const updatedLanes = track.automation.lanes.map((l) =>
                                    l.id === currentLane.id ? { ...l, mode: modes[nextIndex] } : l
                                  );
                                  onUpdateTrack(track.id, {
                                    automation: { ...track.automation, lanes: updatedLanes },
                                  });
                                }
                              }}
                              title={`Automation mode: ${currentLane?.mode || 'read'} (click to cycle)`}
                              className={cn('h-5 w-5 text-[10px] font-bold flex-shrink-0', MODE_COLORS[currentLane?.mode || 'read'])}
                            >
                              {MODE_LABELS[currentLane?.mode || 'read']}
                            </Button>

                            {/* Height controls */}
                            <div className="flex flex-col gap-0 flex-shrink-0">
                              <Button
                                variant="ghost"
                                size="icon-sm"
                                onClick={() => {
                                  if (currentLane) {
                                    const newHeight = Math.max(60, Math.min(200, currentLane.height + 20));
                                    const updatedLanes = track.automation.lanes.map((l) =>
                                      l.id === currentLane.id ? { ...l, height: newHeight } : l
                                    );
                                    onUpdateTrack(track.id, {
                                      automation: { ...track.automation, lanes: updatedLanes },
                                    });
                                  }
                                }}
                                title="Increase lane height"
                                className="h-3 w-4 p-0"
                              >
                                <ChevronUp className="h-2.5 w-2.5" />
                              </Button>
                              <Button
                                variant="ghost"
                                size="icon-sm"
                                onClick={() => {
                                  if (currentLane) {
                                    const newHeight = Math.max(60, Math.min(200, currentLane.height - 20));
                                    const updatedLanes = track.automation.lanes.map((l) =>
                                      l.id === currentLane.id ? { ...l, height: newHeight } : l
                                    );
                                    onUpdateTrack(track.id, {
                                      automation: { ...track.automation, lanes: updatedLanes },
                                    });
                                  }
                                }}
                                title="Decrease lane height"
                                className="h-3 w-4 p-0"
                              >
                                <ChevronDown className="h-2.5 w-2.5" />
                              </Button>
                            </div>
                          </>
                        )}

                        {/* Show/hide toggle - Part of normal flow */}
                        <Button
                          variant="ghost"
                          size="icon-sm"
                          onClick={() => {
                            onUpdateTrack(track.id, { automationExpanded: !track.automationExpanded });
                          }}
                          title={track.automationExpanded ? 'Hide automation controls' : 'Show automation controls'}
                          className="h-5 w-5 flex-shrink-0"
                        >
                          {track.automationExpanded ? (
                            <Eye className="h-3 w-3" />
                          ) : (
                            <EyeOff className="h-3 w-3 text-muted-foreground" />
                          )}
                        </Button>
                      </div>

                      {/* Automation Lane Content - Shown when expanded */}
                      {track.automationExpanded && (
                        <div
                          ref={(el) => {
                            if (el) automationHScrollRefs.current.set(track.id, el);
                          }}
                          onScroll={() => handleAutomationHScroll(track.id)}
                          className="overflow-x-auto custom-scrollbar"
                        >
                        <div
                          style={{
                            minWidth: duration && zoom >= 1 ? `${duration * zoom * 5}px` : '100%',
                          }}
                        >
                      {track.automation.lanes
                        .filter((lane) => lane.parameterId === (track.automation.selectedParameterId || 'volume') && lane.visible)
                        .map((lane) => (
                            <AutomationLane
                              key={lane.id}
                              lane={lane}
                              zoom={zoom}
                              currentTime={currentTime}
                              duration={duration}
                              onAddPoint={(time, value) => {
                                const newPoint = createAutomationPoint({ time, value, curve: 'linear' });
                                const updatedLanes = track.automation.lanes.map((l) =>
                                  l.id === lane.id
                                    ? { ...l, points: [...l.points, newPoint].sort((a, b) => a.time - b.time) }
                                    : l
                                );
                                onUpdateTrack(track.id, {
                                  automation: { ...track.automation, lanes: updatedLanes },
                                });
                              }}
                              onUpdatePoint={(pointId, updates) => {
                                const updatedLanes = track.automation.lanes.map((l) =>
                                  l.id === lane.id
                                    ? {
                                        ...l,
                                        points: l.points.map((p) =>
                                          p.id === pointId ? { ...p, ...updates } : p
                                        ),
                                      }
                                    : l
                                );
                                onUpdateTrack(track.id, {
                                  automation: { ...track.automation, lanes: updatedLanes },
                                });
                              }}
                              onRemovePoint={(pointId) => {
                                const updatedLanes = track.automation.lanes.map((l) =>
                                  l.id === lane.id
                                    ? { ...l, points: l.points.filter((p) => p.id !== pointId) }
                                    : l
                                );
                                onUpdateTrack(track.id, {
                                  automation: { ...track.automation, lanes: updatedLanes },
                                });
                              }}
                              onUpdateLane={(updates) => {
                                const updatedLanes = track.automation.lanes.map((l) =>
                                  l.id === lane.id ? { ...l, ...updates } : l
                                );
                                onUpdateTrack(track.id, {
                                  automation: { ...track.automation, lanes: updatedLanes },
                                });
                              }}
                            />
                        ))}
                        </div>
                      </div>
                      )}
                    </div>
                    );
                  })()}

                  {/* Effects Bar - Collapsible - Fixed height when expanded */}
                  {!track.collapsed && (
                    <div className="flex-shrink-0 bg-card/90 backdrop-blur-sm border-b border-border">
                      {/* Effects Header - Collapsible */}
                      <div className="flex items-center gap-2 px-3 py-1.5 bg-muted/50 border-t border-b border-border/30">
                        <span className="text-xs font-medium flex-shrink-0">Effects</span>

                        {/* Effect name labels */}
                        <div className="flex items-center gap-1.5 flex-1 min-w-0 overflow-x-auto">
                          {track.effectChain.effects.map((effect) => (
                            <span
                              key={effect.id}
                              className={cn(
                                "text-[10px] px-1.5 py-0.5 rounded whitespace-nowrap flex-shrink-0",
                                effect.enabled
                                  ? "bg-primary/10 text-primary border border-primary/20"
                                  : "bg-muted/30 text-muted-foreground border border-border/30 opacity-60"
                              )}
                            >
                              {effect.name}
                            </span>
                          ))}
                        </div>

                        {/* Add effect button - only visible when expanded */}
                        {track.effectsExpanded && (
                          <Button
                            variant="ghost"
                            size="icon-sm"
                            onClick={() => setEffectBrowserTrackId(track.id)}
                            title="Add effect"
                            className="h-5 w-5 flex-shrink-0"
                          >
                            <Plus className="h-3 w-3" />
                          </Button>
                        )}

                        {/* Show/hide toggle */}
                        <Button
                          variant="ghost"
                          size="icon-sm"
                          onClick={() => {
                            onUpdateTrack(track.id, { effectsExpanded: !track.effectsExpanded });
                          }}
                          title={track.effectsExpanded ? 'Hide effects' : 'Show effects'}
                          className="h-5 w-5 flex-shrink-0"
                        >
                          {track.effectsExpanded ? (
                            <Eye className="h-3 w-3" />
                          ) : (
                            <EyeOff className="h-3 w-3 text-muted-foreground" />
                          )}
                        </Button>
                      </div>

                      {/* Effects Content - Collapsible, horizontally scrollable */}
                      {track.effectsExpanded && (
                        <div className="h-48 overflow-x-auto custom-scrollbar bg-muted/70 border-t border-border">
                          <div className="flex h-full gap-3 p-3">
                            {track.effectChain.effects.length === 0 ? (
                              <div className="text-xs text-muted-foreground text-center py-8 w-full">
                                No effects. Click + to add an effect.
                              </div>
                            ) : (
                              track.effectChain.effects.map((effect) => (
                                <EffectDevice
                                  key={effect.id}
                                  effect={effect}
                                  onToggleEnabled={() => {
                                    const updatedChain = {
                                      ...track.effectChain,
                                      effects: track.effectChain.effects.map((e) =>
                                        e.id === effect.id ? { ...e, enabled: !e.enabled } : e
                                      ),
                                    };
                                    onUpdateTrack(track.id, { effectChain: updatedChain });
                                  }}
                                  onRemove={() => {
                                    const updatedChain = {
                                      ...track.effectChain,
                                      effects: track.effectChain.effects.filter((e) => e.id !== effect.id),
                                    };
                                    onUpdateTrack(track.id, { effectChain: updatedChain });
                                  }}
                                  onUpdateParameters={(params) => {
                                    const updatedChain = {
                                      ...track.effectChain,
                                      effects: track.effectChain.effects.map((e) =>
                                        e.id === effect.id ? { ...e, parameters: params } : e
                                      ),
                                    };
                                    onUpdateTrack(track.id, { effectChain: updatedChain });
                                  }}
                                  onToggleExpanded={() => {
                                    const updatedEffects = track.effectChain.effects.map((e) =>
                                      e.id === effect.id ? { ...e, expanded: !e.expanded } : e
                                    );
                                    onUpdateTrack(track.id, {
                                      effectChain: { ...track.effectChain, effects: updatedEffects },
                                    });
                                  }}
                                />
                              ))
                            )}
                          </div>
                        </div>
                      )}
                    </div>
                  )}
                </div>
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>

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

      {/* Effect Browser Dialog */}
      <EffectBrowser
        open={effectBrowserTrackId !== null}
        onClose={() => setEffectBrowserTrackId(null)}
        onSelectEffect={(effectType) => {
          if (effectBrowserTrackId) {
            const track = tracks.find((t) => t.id === effectBrowserTrackId);
            if (track) {
              const newEffect = createEffect(effectType, EFFECT_NAMES[effectType]);
              const updatedChain = {
                ...track.effectChain,
                effects: [...track.effectChain.effects, newEffect],
              };
              onUpdateTrack(effectBrowserTrackId, { effectChain: updatedChain });
            }
          }
        }}
      />
    </div>
  );
}