import React, { useEffect, useState, useRef } from 'react';
import { KGTrack } from '../../core/track/KGTrack';
import { KGMidiRegion } from '../../core/region/KGMidiRegion';
import { KGAudioRegion } from '../../core/region/KGAudioRegion';
import { KGAudioInterface } from '../../core/audio-interface/KGAudioInterface';
import RegionItem from './RegionItem';
import type { RegionClickOptions, RegionUI, ResizeAction } from '../interfaces';
import { REGION_CONSTANTS, DEBUG_MODE } from '../../constants';
import { KGMainContentState } from '../../core/state/KGMainContentState';
import { isModifierKeyPressed } from '../../util/osUtil';

interface TrackGridItemProps {
  track: KGTrack;
  index: number;
  isDragging: boolean;
  isDragOver: boolean;
  regions: RegionUI[];
  maxBars: number;
  selectedRegionId: string | null;
  gridContainerRef: React.RefObject<HTMLDivElement | null>;
  onDoubleClick: (e: React.MouseEvent<HTMLDivElement>, index: number) => void;
  onClick?: (e: React.MouseEvent<HTMLDivElement>, index: number) => void;
  onRegionResize?: (regionId: string, newBarNumber: number, newLength: number) => void;
  onRegionResizeEnd?: (regionId: string, finalBarNumber: number, finalLength: number) => void;
  onRegionDrag?: (regionId: string, newBarNumber: number, newTrackIndex: number) => void;
  onRegionDragEnd?: (regionId: string, finalBarNumber: number, finalTrackIndex: number) => void;
  onRegionFineMoveEnd?: (regionId: string, deltaInBars: number) => void;
  onRegionClick?: (regionId: string, options: RegionClickOptions) => void;
  onOpenPianoRoll?: (regionId: string) => void;
  onOpenSpectrogram?: (regionId: string) => void;
  showHybridButtonForAudio?: boolean;
  showHybridButtonForMidi?: boolean;
  onOpenHybrid?: (regionId: string) => void;
  allTracks?: KGTrack[]; // Added to access all tracks for drag operations
  onKGOneClipDrop?: (e: React.DragEvent<HTMLDivElement>, trackIndex: number) => void;
}

const TrackGridItem: React.FC<TrackGridItemProps> = ({
  track,
  index,
  isDragging,
  isDragOver,
  regions,
  maxBars,
  selectedRegionId,
  gridContainerRef,
  onDoubleClick,
  onClick,
  onRegionResize,
  onRegionResizeEnd,
  onRegionDrag,
  onRegionDragEnd,
  onRegionFineMoveEnd,
  onRegionClick,
  onOpenPianoRoll,
  onOpenSpectrogram,
  showHybridButtonForAudio,
  showHybridButtonForMidi,
  onOpenHybrid,
  allTracks,
  onKGOneClipDrop,
}) => {
  const [containerWidth, setContainerWidth] = useState(0);
  const [resizingRegion, setResizingRegion] = useState<string | null>(null);
  const [draggingRegion, setDraggingRegion] = useState<string | null>(null);
  const [tempRegionStyles, setTempRegionStyles] = useState<Record<string, React.CSSProperties>>({});
  const [isModifierPressed, setIsModifierPressed] = useState(false);
  
  // Refs for resize operations
  const mouseMoved = useRef(false);
  const currentResizeWidth = useRef<number | null>(null);
  const currentResizeLeft = useRef<number | null>(null);
  const currentResizeRegion = useRef<RegionUI | null>(null);
  const initialBarNumberRef = useRef<number | null>(null);
  const initialLengthRef = useRef<number | null>(null);
  
  // Refs for drag operations
  const currentDragLeft = useRef<number | null>(null);
  const currentDragTop = useRef<number | null>(null);
  const currentDragRegion = useRef<RegionUI | null>(null);
  const trackElementRef = useRef<HTMLDivElement | null>(null);

  // Update container width when the grid container changes size
  useEffect(() => {
    if (!gridContainerRef.current) return;
    
    setContainerWidth(gridContainerRef.current.clientWidth);
    
    const resizeObserver = new ResizeObserver(entries => {
      for (const entry of entries) {
        setContainerWidth(entry.contentRect.width);
      }
    });
    
    resizeObserver.observe(gridContainerRef.current);
    
    return () => {
      if (gridContainerRef.current) {
        resizeObserver.unobserve(gridContainerRef.current);
      }
    };
  }, [gridContainerRef]);

  // Track modifier key state for cursor feedback
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (isModifierKeyPressed(e)) {
        setIsModifierPressed(true);
      }
    };

    const handleKeyUp = (e: KeyboardEvent) => {
      if (!isModifierKeyPressed(e)) {
        setIsModifierPressed(false);
      }
    };

    // Add global event listeners
    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('keyup', handleKeyUp);

    // Cleanup listeners on unmount
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
      window.removeEventListener('keyup', handleKeyUp);
    };
  }, []);

  // Calculate region position and style
  const getRegionStyle = (region: RegionUI) => {
    // Check if there's a temporary style for this region during resize or drag
    if ((resizingRegion === region.id || draggingRegion === region.id) && tempRegionStyles[region.id]) {
      return tempRegionStyles[region.id];
    }
    
    // Calculate the width of each bar
    const barWidth = containerWidth / maxBars;
    
    // Calculate left position (0-indexed bar number)
    const left = (region.barNumber - 1) * barWidth;
    
    // Calculate width based on region length
    const width = region.length * barWidth;
    
    return {
      left: `${left}px`,
      width: `${width}px`,
      position: 'absolute' as const, // Fixed: Use const assertion
    };
  };

  // Handle region resize start
  const handleRegionResizeStart = (regionId: string, resizeAction: ResizeAction, initialX: number) => {
    // Disable resizing in pencil mode
    if (KGMainContentState.instance().getActiveTool() === 'pencil') {
      return;
    }

    if (DEBUG_MODE.TRACK_GRID_ITEM) {
      console.log(`RESIZE START: regionId=${regionId}, action=${resizeAction}`);
    }
    
    setResizingRegion(regionId);
    
    // Reset the mouse moved flag
    mouseMoved.current = false;
    
    // Find the region being resized
    const region = regions.find(r => r.id === regionId);
    if (!region) return;
    
    // Store the region for reference
    currentResizeRegion.current = region;
    initialBarNumberRef.current = region.barNumber;
    initialLengthRef.current = region.length;
    
    // Calculate the width of each bar
    const barWidth = containerWidth / maxBars;
    
    // Store the initial width and left position
    currentResizeWidth.current = region.length * barWidth;
    currentResizeLeft.current = (region.barNumber - 1) * barWidth;
    
    // Set initial style to current position/size
    const initialStyle = {
      left: `${currentResizeLeft.current}px`,
      width: `${currentResizeWidth.current}px`,
      position: 'absolute' as const, // Fixed: Use const assertion
    };
    
    setTempRegionStyles(prev => ({
      ...prev,
      [regionId]: initialStyle
    }));
  };

  // Handle region resize
  const handleRegionResize = (regionId: string, resizeAction: ResizeAction, deltaX: number) => {
    // Set the mouse moved flag to true
    mouseMoved.current = true;
    
    // Find the region being resized
    const region = regions.find(r => r.id === regionId);
    if (!region) return;
    
    // Calculate the width of each bar
    const barWidth = containerWidth / maxBars;
    
    // Get initial values
    const originalWidth = initialLengthRef.current! * barWidth;
    const originalLeft = (initialBarNumberRef.current! - 1) * barWidth;
    
    let newLeft = originalLeft;
    let newWidth = originalWidth;
    
    if (resizeAction === 'end') {
      // End resize: adjust width only
      newWidth = Math.max(barWidth * REGION_CONSTANTS.MIN_REGION_LENGTH, originalWidth + deltaX);
    } else if (resizeAction === 'start') {
      // Start resize: adjust both left position and width
      // Calculate maximum delta to prevent negative width
      const maxDelta = originalWidth - barWidth * REGION_CONSTANTS.MIN_REGION_LENGTH;
      const clampedDeltaX = Math.min(maxDelta, deltaX);
      
      // Adjust left position and width
      newLeft = originalLeft + clampedDeltaX;
      newWidth = originalWidth - clampedDeltaX;
    }
    
    // Store the current values in refs
    currentResizeWidth.current = newWidth;
    currentResizeLeft.current = newLeft;
    
    // Calculate the new bar number and length (not rounded yet, for smooth resizing)
    const newBarNumber = (newLeft / barWidth) + 1;
    const newLength = newWidth / barWidth;
    
    if (DEBUG_MODE.TRACK_GRID_ITEM) {
      console.log(`RESIZE: regionId=${regionId}, action=${resizeAction}, deltaX=${deltaX}, newBarNumber=${newBarNumber}, newLength=${newLength}`);
    }
    
    // Update the temporary style for this region
    const newStyle = {
      left: `${newLeft}px`,
      width: `${newWidth}px`,
      position: 'absolute' as const, // Fixed: Use const assertion
    };
    
    setTempRegionStyles(prev => ({
      ...prev,
      [regionId]: newStyle
    }));
    
    // Notify parent about resize
    if (onRegionResize) {
      onRegionResize(regionId, newBarNumber, newLength);
    }
  };

  // Handle region resize end
  const handleRegionResizeEnd = (regionId: string, resizeAction: ResizeAction) => {
    if (DEBUG_MODE.TRACK_GRID_ITEM) {
      console.log(`RESIZE END: regionId=${regionId}, action=${resizeAction}, mouseMoved=${mouseMoved.current}`);
      console.log('Current resize width from ref:', currentResizeWidth.current);
      console.log('Current resize left from ref:', currentResizeLeft.current);
    }
    
    // Find the region being resized
    const region = regions.find(r => r.id === regionId) || currentResizeRegion.current;
    if (!region) {
      console.error(`Region not found: ${regionId}`);
      return;
    }
    
    // Calculate the width of each bar
    const barWidth = containerWidth / maxBars;
    
    let newBarNumber = region.barNumber; // Default to current bar number
    let newLength = region.length; // Default to current length
    
    // If the mouse was moved and we have current values, calculate the new values
    if (mouseMoved.current && currentResizeWidth.current !== null && currentResizeLeft.current !== null) {
      const snap = KGMainContentState.instance().isSnappingEnabled();

      if (resizeAction === 'end') {
        // End resize: snap length to nearest bar, or use raw value
        const rawLength = currentResizeWidth.current / barWidth;
        newLength = Math.max(REGION_CONSTANTS.MIN_REGION_LENGTH, snap ? Math.round(rawLength) : rawLength);
      } else if (resizeAction === 'start') {
        // Start resize: snap bar number, or use raw value
        const rawBarNumber = currentResizeLeft.current / barWidth + 1;
        newBarNumber = Math.max(1, snap ? Math.round(rawBarNumber) : rawBarNumber);

        // Calculate the difference from the initial position
        const barDiff = initialBarNumberRef.current! - newBarNumber;

        // Adjust length to maintain the end position
        newLength = initialLengthRef.current! + barDiff;

        // Ensure minimum length
        if (newLength < REGION_CONSTANTS.MIN_REGION_LENGTH) {
          newLength = REGION_CONSTANTS.MIN_REGION_LENGTH;
          newBarNumber = initialBarNumberRef.current! + initialLengthRef.current! - REGION_CONSTANTS.MIN_REGION_LENGTH;
        }
      }
      
      if (DEBUG_MODE.TRACK_GRID_ITEM) {
        console.log(`Calculated new values: barNumber=${newBarNumber}, length=${newLength}`);
      }
    } else if (DEBUG_MODE.TRACK_GRID_ITEM) {
      console.log(`Using existing values: barNumber=${newBarNumber}, length=${newLength}`);
    }
    
    // Clear resizing state
    setResizingRegion(null);
    setTempRegionStyles(prev => {
      const updated = { ...prev };
      delete updated[regionId];
      return updated;
    });
    currentResizeWidth.current = null;
    currentResizeLeft.current = null;
    currentResizeRegion.current = null;
    initialBarNumberRef.current = null;
    initialLengthRef.current = null;
    
    // Notify parent about resize end with rounded values
    if (onRegionResizeEnd) {
      onRegionResizeEnd(regionId, newBarNumber, newLength);
    }
  };

  // Handle region drag start
  const handleRegionDragStart = (regionId: string, initialX: number, initialY: number) => {
    // Disable dragging in pencil mode
    if (KGMainContentState.instance().getActiveTool() === 'pencil') {
      return;
    }

    if (DEBUG_MODE.TRACK_GRID_ITEM) {
      console.log(`DRAG START: regionId=${regionId}`);
    }
    
    setDraggingRegion(regionId);
    
    // Reset the mouse moved flag
    mouseMoved.current = false;
    
    // Find the region being dragged
    const region = regions.find(r => r.id === regionId);
    if (!region) return;
    
    // Store the region for reference
    currentDragRegion.current = region;
    
    // Calculate the width of each bar
    const barWidth = containerWidth / maxBars;
    
    // Calculate the left position
    const left = (region.barNumber - 1) * barWidth;
    const width = region.length * barWidth;
    
    // Store the initial position
    currentDragLeft.current = left;
    currentDragTop.current = 0; // Initially at the top of the current track
    
    // Set initial style
    const initialStyle = {
      left: `${left}px`,
      width: `${width}px`,
      position: 'absolute' as const, // Fixed: Use const assertion
      zIndex: 100, // Bring to front during drag
    };
    
    setTempRegionStyles(prev => ({
      ...prev,
      [regionId]: initialStyle
    }));
  };

  // Handle region drag
  const handleRegionDrag = (regionId: string, deltaX: number, deltaY: number) => {
    // Set the mouse moved flag to true
    mouseMoved.current = true;
    
    // Find the region being dragged
    const region = regions.find(r => r.id === regionId);
    if (!region) return;
    
    // Calculate the width of each bar
    const barWidth = containerWidth / maxBars;
    
    // Get the initial left position
    const initialLeft = (region.barNumber - 1) * barWidth;
    
    // Calculate new left position
    const newLeft = initialLeft + deltaX;
    
    // Calculate the new bar number (not rounded yet, for smooth dragging)
    const newBarNumber = (newLeft / barWidth) + 1;
    
    // Store the current drag position for use in handleRegionDragEnd
    currentDragLeft.current = newLeft;
    currentDragTop.current = deltaY;
    
    if (DEBUG_MODE.TRACK_GRID_ITEM) {
      console.log(`DRAG: regionId=${regionId}, deltaX=${deltaX}, deltaY=${deltaY}, newBarNumber=${newBarNumber}`);
    }
    
    // Update the temporary style for this region
    const newStyle = {
      left: `${newLeft}px`,
      width: `${region.length * barWidth}px`,
      position: 'absolute' as const,
      zIndex: 100, // Keep on top during drag
      transform: `translateY(${deltaY}px)`,
    };
    
    setTempRegionStyles(prev => ({
      ...prev,
      [regionId]: newStyle
    }));
    
    // We'll calculate the track index on drag end, but still notify parent about the drag
    if (onRegionDrag) {
      onRegionDrag(regionId, newBarNumber, region.trackIndex);
    }
  };

  // Handle region drag end
  const handleRegionDragEnd = (regionId: string) => {
    if (DEBUG_MODE.TRACK_GRID_ITEM) {
      console.log(`DRAG END: regionId=${regionId}, mouseMoved=${mouseMoved.current}`);
    }
    
    // Find the region being dragged
    const region = regions.find(r => r.id === regionId) || currentDragRegion.current;
    if (!region) {
      console.error(`Region not found: ${regionId}`);
      return;
    }
    
    // Calculate the width of each bar
    const barWidth = containerWidth / maxBars;
    
    // Default to current position
    let finalBarNumber = region.barNumber;
    let finalTrackIndex = region.trackIndex;
    
    // If the mouse was moved, calculate the final position
    if (mouseMoved.current && currentDragLeft.current !== null && currentDragTop.current !== null) {
      // Calculate the new bar number; snap to nearest integer when snapping is on
      const snap = KGMainContentState.instance().isSnappingEnabled();
      const rawBarNumber = (currentDragLeft.current / barWidth) + 1;
      finalBarNumber = Math.max(1, snap ? Math.round(rawBarNumber) : rawBarNumber);
      
      // Calculate the closest track based on vertical position
      if (allTracks && allTracks.length > 0 && gridContainerRef.current) {
        const trackHeight = gridContainerRef.current.clientHeight / allTracks.length;
        
        // Calculate the absolute vertical position
        const originTrackTop = region.trackIndex * trackHeight;
        const absoluteY = originTrackTop + currentDragTop.current;
        
        // Find the closest track index
        const closestTrackIndex = Math.max(0, Math.min(
          allTracks.length - 1,
          Math.round(absoluteY / trackHeight)
        ));
        
        finalTrackIndex = closestTrackIndex;
        
        if (DEBUG_MODE.TRACK_GRID_ITEM) {
          console.log(`Calculated closest track: ${finalTrackIndex} (from Y=${currentDragTop.current}, absoluteY=${absoluteY}, trackHeight=${trackHeight})`);
          if (finalTrackIndex !== region.trackIndex) {
            console.log(`Track change: from trackIndex=${region.trackIndex} (trackId=${region.trackId}) to trackIndex=${finalTrackIndex} (trackId=${allTracks[finalTrackIndex].getId()})`);
          }
        }
      }
      
      if (DEBUG_MODE.TRACK_GRID_ITEM) {
        console.log(`Final position: barNumber=${finalBarNumber}, trackIndex=${finalTrackIndex}`);
      }
    }
    
    // Clear dragging state
    setDraggingRegion(null);
    setTempRegionStyles(prev => {
      const updated = { ...prev };
      delete updated[regionId];
      return updated;
    });
    currentDragLeft.current = null;
    currentDragTop.current = null;
    currentDragRegion.current = null;
    
    if (finalBarNumber === region.barNumber && finalTrackIndex === region.trackIndex) {
      if (DEBUG_MODE.TRACK_GRID_ITEM) {
        console.log(`Skipping no-op drag update for region ${regionId}`);
      }
      return;
    }

    // Notify parent about drag end with final values
    if (onRegionDragEnd) {
      onRegionDragEnd(regionId, finalBarNumber, finalTrackIndex);
    }
  };

  // Handle fine-move end — convert raw pixel delta to delta in bars and pass up
  const handleRegionFineMoveEnd = (regionId: string, rawPixelDelta: number) => {
    const barWidth = containerWidth / maxBars;
    if (barWidth <= 0) return;
    const deltaInBars = (rawPixelDelta * REGION_CONSTANTS.FINE_MOVE_SPEED_RATIO) / barWidth;
    onRegionFineMoveEnd?.(regionId, deltaInBars);
  };

  // Handle region click
  const handleRegionClick = (regionId: string, options: RegionClickOptions) => {
    if (DEBUG_MODE.TRACK_GRID_ITEM) {
      console.log(`Region clicked: ${regionId}`);
    }
    
    if (onRegionClick) {
      onRegionClick(regionId, options);
    }
  };

  // Filter regions for this track
  const trackRegions = regions.filter(region => region.trackIndex === index);

  return (
    <div
      className={`track-grid ${isDragOver ? 'drag-over' : ''} ${isDragging ? 'dragging' : ''} ${isModifierPressed ? 'pencil-cursor' : ''}`}
      data-test-id={`track-grid-${track.getId()}`}
      onDoubleClick={(e) => onDoubleClick(e, index)}
      onClick={(e) => onClick && onClick(e, index)}
      ref={trackElementRef}
      onDragOver={(e) => {
        if (Array.from(e.dataTransfer.types).includes('application/kgone-clip')) {
          e.preventDefault();
          e.dataTransfer.dropEffect = 'copy';
        }
      }}
      onDrop={(e) => {
        if (Array.from(e.dataTransfer.types).includes('application/kgone-clip')) {
          e.preventDefault();
          onKGOneClipDrop?.(e, index);
        }
      }}
    >
      {/* Render regions for this track */}
      {trackRegions.map(region => {
        // Find the corresponding region in the track
        const coreRegion = track.getRegions().find(r => r.getId() === region.id);
        const midiRegion = coreRegion?.getCurrentType() === 'KGMidiRegion' ? coreRegion as unknown as KGMidiRegion : undefined;
        const audioRegion = coreRegion?.getCurrentType() === 'KGAudioRegion' ? coreRegion as unknown as KGAudioRegion : undefined;

        // Get audio buffer for waveform rendering
        let audioBuffer: AudioBuffer | undefined;
        if (audioRegion) {
          audioBuffer = KGAudioInterface.instance().getAudioBuffer(
            track.getId().toString(),
            audioRegion.getAudioFileId()
          );
        }

        return (
          <RegionItem
            key={region.id}
            id={region.id}
            name={region.name}
            style={getRegionStyle(region)}
            barNumber={region.barNumber}
            length={region.length}
            trackIndex={index}
            onResizeStart={handleRegionResizeStart}
            onResize={handleRegionResize}
            onResizeEnd={handleRegionResizeEnd}
            onDragStart={handleRegionDragStart}
            onDrag={handleRegionDrag}
            onDragEnd={handleRegionDragEnd}
            onFineMoveEnd={handleRegionFineMoveEnd}
            // Keep onClick for selection-only logic if needed by parent
            onClick={handleRegionClick}
            // New explicit pencil action — disabled for audio regions
            onOpenPianoRoll={audioRegion ? undefined : (regionId) => {
              if (onOpenPianoRoll) {
                onOpenPianoRoll(regionId);
              } else if (onRegionClick) {
                // Fallback to legacy behavior
                onRegionClick(regionId, { shiftKey: false });
              }
            }}
            onOpenSpectrogram={audioRegion ? (regionId) => {
              onOpenSpectrogram?.(regionId);
            } : undefined}
            showHybridButton={audioRegion ? showHybridButtonForAudio : showHybridButtonForMidi}
            onOpenHybrid={onOpenHybrid}
            midiRegion={midiRegion}
            audioRegion={audioRegion}
            audioBuffer={audioBuffer}
          />
        );
      })}
    </div>
  );
};

export default TrackGridItem;