import React, { useEffect, useRef } from 'react'
import { usePlaybackContinuity } from '../hooks/usePlaybackContinuity'
import { usePlaybackContext } from '../context/PlaybackContext/PlaybackContext'
import { toast } from 'sonner'

interface PlaybackContinuityIntegrationProps {
  children: React.ReactNode
}

export const PlaybackContinuityIntegration: React.FC<PlaybackContinuityIntegrationProps> = ({ 
  children 
}) => {
  const {
    playbackState,
    connectionState,
    isOnline,
    connectionQuality,
    updatePlaybackState,
    syncPlaybackPosition,
    seamlessHandoff
  } = usePlaybackContinuity()
  
  const playbackContext = usePlaybackContext()
  const previousOnlineState = useRef(isOnline)
  const positionSyncInterval = useRef<NodeJS.Timeout | null>(null)

  // Sync playback state changes to continuity service
  useEffect(() => {
    if (!playbackContext.currentTrack) return

    updatePlaybackState({
      trackId: playbackContext.currentTrack.Id,
      position: playbackContext.audioRef.current?.currentTime || 0,
      isPlaying: playbackContext.isPlaying,
      volume: playbackContext.volume,
      queue: playbackContext.items || [],
      currentIndex: playbackContext.currentTrackIndex.index,
      shuffle: playbackContext.shuffle,
      repeat: playbackContext.repeat,
      timestamp: Date.now(),
      deviceId: '' // Will be set by service
    })
  }, [
    playbackContext.currentTrack,
    playbackContext.isPlaying,
    playbackContext.volume,
    playbackContext.currentTrackIndex.index,
    playbackContext.shuffle,
    playbackContext.repeat,
    updatePlaybackState
  ])

  // Handle connection state changes
  useEffect(() => {
    const wasOnline = previousOnlineState.current
    const isNowOnline = isOnline

    if (wasOnline !== isNowOnline) {
      // Connection state changed
      seamlessHandoff(wasOnline, isNowOnline)
      
      if (isNowOnline) {
        toast.success('🌐 Connection restored - syncing playback state')
      } else {
        toast.info('📱 Offline mode - using cached content')
      }
    }

    previousOnlineState.current = isNowOnline
  }, [isOnline, seamlessHandoff])

  // Sync playback position with sub-second accuracy
  useEffect(() => {
    if (playbackContext.isPlaying && playbackContext.currentTrack) {
      // Clear existing interval
      if (positionSyncInterval.current) {
        clearInterval(positionSyncInterval.current)
      }

      // Sync position every 1 second for sub-second accuracy
      positionSyncInterval.current = setInterval(() => {
        const currentTime = playbackContext.audioRef.current?.currentTime
        if (currentTime !== undefined && playbackContext.currentTrack) {
          syncPlaybackPosition(playbackContext.currentTrack.Id, currentTime)
        }
      }, 1000)
    } else {
      // Clear interval when not playing
      if (positionSyncInterval.current) {
        clearInterval(positionSyncInterval.current)
        positionSyncInterval.current = null
      }
    }

    return () => {
      if (positionSyncInterval.current) {
        clearInterval(positionSyncInterval.current)
      }
    }
  }, [playbackContext.isPlaying, playbackContext.currentTrack, syncPlaybackPosition])

  // Handle cross-device playback state updates
  useEffect(() => {
    if (!playbackState) return

    // Check if this is a state update from another device
    const currentTrackId = playbackContext.currentTrack?.Id
    const stateTrackId = playbackState.trackId

    if (stateTrackId && stateTrackId !== currentTrackId) {
      // Another device is playing a different track
      console.log('📱 Detected playback on another device:', stateTrackId)
      
      // Optionally pause current playback or show notification
      if (playbackContext.isPlaying) {
        toast.info('🎵 Playback detected on another device')
      }
    }
  }, [playbackState, playbackContext.currentTrack, playbackContext.isPlaying])

  // Show connection quality indicator
  useEffect(() => {
    if (connectionQuality === 'poor') {
      toast.warning('⚠️ Poor connection - may switch to offline mode')
    }
  }, [connectionQuality])

  return <>{children}</>
}

export default PlaybackContinuityIntegration