import { DndContext, DragOverlay } from '@dnd-kit/core';
import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
import { useClipDragHandlers } from '@waveform-playlist/browser';
import { usePlaylistData } from '@waveform-playlist/browser';

function DraggablePlaylist() {
  const { tracks, samplesPerPixel, sampleRate, playoutRef, isDraggingRef } = usePlaylistData();
  const [localTracks, setLocalTracks] = useState(tracks);

  const {
    onDragStart,
    onDragMove,
    onDragEnd,
    onDragCancel,
    collisionModifier,
  } = useClipDragHandlers({
    tracks: localTracks,
    onTracksChange: setLocalTracks,
    samplesPerPixel,
    sampleRate,
    engineRef: playoutRef,
    isDraggingRef,
  });

  return (
    <DndContext
      onDragStart={onDragStart}
      onDragMove={onDragMove}
      onDragEnd={onDragEnd}
      onDragCancel={onDragCancel}
      modifiers={[restrictToHorizontalAxis, collisionModifier]}
    >
      <Waveform showClipHeaders={true} />
    </DndContext>
  );
}

interface UseClipDragHandlersOptions {
  tracks: ClipTrack[];
  onTracksChange: (tracks: ClipTrack[]) => void;
  samplesPerPixel: number;
  sampleRate: number;
  engineRef: RefObject<PlaylistEngine | null>;
  isDraggingRef: MutableRefObject<boolean>;  // From usePlaylistData()
}

const onDragStart = (event: DragStartEvent) => {
  const { active } = event;
  const { boundary } = active.data.current as { boundary?: 'left' | 'right' };

  // Only store state for boundary trimming operations
  if (boundary) {
    // Store original clip dimensions
    // Set isDraggingRef to prevent engine rebuild
    isDraggingRef.current = true;
  }
};

const onDragMove = (event: DragMoveEvent) => {
  const { active, delta } = event;
  const { boundary } = active.data.current;
  
  if (!boundary) return; // Only for boundary trimming

  // Apply cumulative delta from original clip state
  // Use constrainBoundaryTrim from engine for collision detection
  onTracksChange(newTracks);
};

const onDragEnd = (event: DragEndEvent) => {
  const { active, delta } = event;
  const { trackIndex, clipId, boundary } = active.data.current;
  
  const sampleDelta = delta.x * samplesPerPixel;
  const trackId = tracks[trackIndex]?.id;

  if (boundary) {
    // Boundary trim: commit final delta to engine
    isDraggingRef.current = false;
    engineRef.current?.trimClip(trackId, clipId, boundary, Math.floor(sampleDelta));
  } else {
    // Clip move: delegate to engine in one shot
    engineRef.current?.moveClip(trackId, clipId, Math.floor(sampleDelta));
  }
};

const onDragCancel = (_event: DragCancelEvent) => {
  isDraggingRef.current = false;
  originalClipStateRef.current = null;
};

const collisionModifier = (args: Parameters<Modifier>[0]) => {
  const { transform, active } = args;
  const { trackIndex, clipIndex } = active.data.current;
  
  const track = tracks[trackIndex];
  const clip = track.clips[clipIndex];
  
  // Convert pixel delta to samples
  const deltaSamples = transform.x * samplesPerPixel;
  
  // Use engine's constrainClipDrag for collision math
  const sortedClips = sortClipsByTime(track.clips);
  const sortedIndex = sortedClips.findIndex((c) => c.id === clip.id);
  const constrainedDelta = constrainClipDrag(clip, deltaSamples, sortedClips, sortedIndex);
  
  // Convert constrained sample delta back to pixels
  const constrainedX = constrainedDelta / samplesPerPixel;
  
  return {
    ...transform,
    x: constrainedX,
  };
};

// Clip data must include boundary information:
const clipData = {
  clipId: 'clip-1',
  trackIndex: 0,
  clipIndex: 0,
  boundary: 'left' | 'right',  // Which edge to trim
};

// In onDragStart (boundary trim only):
isDraggingRef.current = true;

// In onDragEnd (before engine update):
isDraggingRef.current = false;
engineRef.current?.trimClip(trackId, clipId, boundary, sampleDelta);

// In onDragCancel (safety reset):
isDraggingRef.current = false;

import { DndContext, DragOverlay, useDraggable } from '@dnd-kit/core';
import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
import { useClipDragHandlers } from '@waveform-playlist/browser';

function DraggableClip({ clip, trackIndex, clipIndex }) {
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
    id: clip.id,
    data: {
      clipId: clip.id,
      trackIndex,
      clipIndex,
    },
  });

  const style = transform ? {
    transform: `translateX(${transform.x}px)`,
  } : undefined;

  return (
    <div ref={setNodeRef} style={style} {...listeners} {...attributes}>
      {/* Clip visualization */}
    </div>
  );
}

function PlaylistWithDragDrop() {
  const { tracks, samplesPerPixel, sampleRate, playoutRef, isDraggingRef } = usePlaylistData();
  const [localTracks, setLocalTracks] = useState(tracks);

  const dragHandlers = useClipDragHandlers({
    tracks: localTracks,
    onTracksChange: setLocalTracks,
    samplesPerPixel,
    sampleRate,
    engineRef: playoutRef,
    isDraggingRef,
  });

  return (
    <DndContext
      {...dragHandlers}
      modifiers={[restrictToHorizontalAxis, dragHandlers.collisionModifier]}
    >
      {localTracks.map((track, trackIndex) => (
        <div key={track.id}>
          {track.clips.map((clip, clipIndex) => (
            <DraggableClip 
              key={clip.id} 
              clip={clip} 
              trackIndex={trackIndex} 
              clipIndex={clipIndex}
            />
          ))}
        </div>
      ))}
    </DndContext>
  );
}