import React, { ReactNode, useRef, useState, useCallback } from 'react'
import { MediaItem } from '../../api/jellyfin'
import { PreviewContext, IPreviewContext } from './PreviewContext'

interface PreviewContextProviderProps {
    children: ReactNode
}

export const PreviewContextProvider: React.FC<PreviewContextProviderProps> = ({ children }) => {
    const [isPreviewPlaying, setIsPreviewPlaying] = useState<boolean>(false)
    const [currentPreviewTrack, setCurrentPreviewTrack] = useState<MediaItem | null>(null)
    const previewAudioRef = useRef<HTMLAudioElement>(null)

    const playPreview = useCallback((track: MediaItem) => {
        if (!track.SpotifyPreviewUrl || !previewAudioRef.current) {
            console.warn('No preview URL available for track:', track.Name)
            return
        }

        // Check if we're in a browser environment
        if (typeof window === 'undefined') {
            console.warn('Preview not available in server environment')
            return
        }

        const audio = previewAudioRef.current
        
        // Stop current preview if playing
        if (isPreviewPlaying) {
            audio.pause()
            audio.currentTime = 0
        }

        // Set new preview track
        setCurrentPreviewTrack(track)
        audio.src = track.SpotifyPreviewUrl
        
        // Play the preview
        audio.play()
            .then(() => {
                setIsPreviewPlaying(true)
                console.log('Playing preview for:', track.Name)
            })
            .catch((error) => {
                console.error('Error playing preview:', error)
                setIsPreviewPlaying(false)
                setCurrentPreviewTrack(null)
            })
    }, [isPreviewPlaying])

    const stopPreview = useCallback(() => {
        if (previewAudioRef.current) {
            previewAudioRef.current.pause()
            previewAudioRef.current.currentTime = 0
        }
        setIsPreviewPlaying(false)
        setCurrentPreviewTrack(null)
    }, [])

    const togglePreview = useCallback((track: MediaItem) => {
        if (isPreviewPlaying && currentPreviewTrack?.Id === track.Id) {
            stopPreview()
        } else {
            playPreview(track)
        }
    }, [isPreviewPlaying, currentPreviewTrack, playPreview, stopPreview])

    // Audio event handlers
    const handlePreviewEnded = useCallback(() => {
        setIsPreviewPlaying(false)
        setCurrentPreviewTrack(null)
    }, [])

    const handlePreviewError = useCallback(() => {
        console.error('Preview playback error')
        setIsPreviewPlaying(false)
        setCurrentPreviewTrack(null)
    }, [])

    const contextValue: IPreviewContext = {
        isPreviewPlaying,
        currentPreviewTrack,
        previewAudioRef,
        playPreview,
        stopPreview,
        togglePreview
    }

    return (
        <PreviewContext.Provider value={contextValue}>
            {children}
            {/* Hidden audio element for preview playback */}
            <audio
                ref={previewAudioRef}
                onEnded={handlePreviewEnded}
                onError={handlePreviewError}
                preload="none"
                style={{ display: 'none' }}
            />
        </PreviewContext.Provider>
    )
}