/**
 * Audio Identification Component for SamCloud Music App
 * For identifying unknown songs and maintaining identification history
 */

import React, { useState, useRef, useCallback, useEffect } from 'react';
import { toast } from 'sonner';
import { Play, Mic, MicOff, Search, Download, X, History, Clock, Volume2 } from 'lucide-react';
import './AudioIdentifier.css';

interface AudioMatch {
    song_id: string;
    title: string;
    artist: string;
    album: string;
    confidence_score: number;
    time_offset: number;
    spotify_id?: string;
    jellyfin_id?: string;
}

interface IdentificationResult {
    identified: boolean;
    matches: AudioMatch[];
    top_match?: AudioMatch;
    found_in_library: boolean;
    library_track?: any;
}

interface HistoryEntry {
    id: string;
    timestamp: Date;
    result: IdentificationResult;
    user_action?: 'played' | 'downloaded' | 'ignored';
    audio_duration: number;
}

interface AudioIdentifierProps {
    mode?: 'icon' | 'full'; // Icon mode for header/sidebar, full mode for search page
    onIdentified?: (result: IdentificationResult) => void;
}

// Sub-components for different states
const RecordingIndicator: React.FC<{ onStop: () => void }> = ({ onStop }) => (
    <div className="recording-status">
        <div className="pulse-animation">
            <div className="pulse-circle"></div>
            <Volume2 className="mic-icon" />
        </div>
        <h4>🎵 Listening for music...</h4>
        <p>Recording up to 20 seconds</p>
        <div className="recording-tips">
            <p><strong>💡 Tips for better results:</strong></p>
            <ul>
                <li>Hold device closer to the music source</li>
                <li>Avoid talking during recording</li>
                <li>Make sure music volume is adequate</li>
                <li>Wait for a clear part of the song (vocals/instruments)</li>
            </ul>
        </div>
        <button className="stop-recording-btn" onClick={onStop}>
            Stop Recording
        </button>
    </div>
);

const IdentifyingIndicator: React.FC = () => (
    <div className="identifying-status">
        <div className="search-animation">
            <Search className="search-icon spin" />
        </div>
        <h4>Identifying audio...</h4>
        <p>Matching against our database</p>
    </div>
);

const IdentificationStart: React.FC<{ onFileUpload: (e: React.ChangeEvent<HTMLInputElement>) => void }> = ({ onFileUpload }) => (
    <div className="identification-start">
        <p>Record live audio or upload a file to identify unknown songs</p>
        <input
            type="file"
            accept="audio/*"
            onChange={onFileUpload}
            className="file-input"
            id="audio-file-input-modal"
        />
        <label htmlFor="audio-file-input-modal" className="file-upload-btn">
            📁 Upload Audio File
        </label>
    </div>
);

const IdentificationResults: React.FC<{
    result: IdentificationResult;
    onPlay: (id: string) => void;
    onDownload: (spotify_id: string, title: string, artist: string) => void;
    onIgnore: () => void;
    inline?: boolean;
}> = ({ result, onPlay, onDownload, onIgnore, inline = false }) => (
    <div className={`identification-results ${inline ? 'inline' : ''}`}>
        {result.identified && result.top_match ? (
            <>
                <div className="top-match">
                    <div className="match-info">
                        <h4>{result.top_match.title}</h4>
                        <p className="artist">{result.top_match.artist}</p>
                        {result.top_match.album && (
                            <p className="album">{result.top_match.album}</p>
                        )}
                        <div className="confidence">
                            Confidence: {result.top_match.confidence_score.toFixed(1)}%
                        </div>
                    </div>
                    <div className="result-actions">
                        {result.found_in_library && result.top_match.jellyfin_id ? (
                            <button
                                className="action-btn play-btn"
                                onClick={() => onPlay(result.top_match!.jellyfin_id!)}
                            >
                                <Play size={16} />
                                Play Now
                            </button>
                        ) : result.top_match.spotify_id ? (
                            <button
                                className="action-btn download-btn"
                                onClick={() => onDownload(
                                    result.top_match!.spotify_id!,
                                    result.top_match!.title,
                                    result.top_match!.artist
                                )}
                            >
                                <Download size={16} />
                                Download
                            </button>
                        ) : null}
                        <button className="action-btn ignore-btn" onClick={onIgnore}>
                            Ignore
                        </button>
                    </div>
                </div>

                {result.matches.length > 1 && (
                    <div className="other-matches">
                        <h5>Other possible matches:</h5>
                        {result.matches.slice(1, 4).map((match) => (
                            <div key={match.song_id} className="other-match">
                                <div className="match-details">
                                    <span className="title">{match.title}</span>
                                    <span className="artist">{match.artist}</span>
                                    <span className="confidence">{match.confidence_score.toFixed(1)}%</span>
                                </div>
                                <div className="quick-actions">
                                    {match.jellyfin_id ? (
                                        <button
                                            className="quick-play-btn"
                                            onClick={() => onPlay(match.jellyfin_id!)}
                                            title="Play"
                                        >
                                            <Play size={12} />
                                        </button>
                                    ) : match.spotify_id ? (
                                        <button
                                            className="quick-download-btn"
                                            onClick={() => onDownload(match.spotify_id!, match.title, match.artist)}
                                            title="Download"
                                        >
                                            <Download size={12} />
                                        </button>
                                    ) : null}
                                </div>
                            </div>
                        ))}
                    </div>
                )}
            </>
        ) : (
            <div className="no-results">
                <p>No matches found</p>
                <p>Try recording again with less background noise</p>
            </div>
        )}
    </div>
);

const IdentificationHistory: React.FC<{
    history: HistoryEntry[];
    onPlayTrack: (id: string) => void;
    onDownloadTrack: (spotify_id: string, title: string, artist: string) => void;
}> = ({ history, onPlayTrack, onDownloadTrack }) => (
    <div className="identification-history">
        {history.length === 0 ? (
            <div className="empty-history">
                <History size={48} className="empty-icon" />
                <p>No identification history yet</p>
                <p>Start identifying songs to see your history here</p>
            </div>
        ) : (
            <div className="history-list">
                {history.map((entry) => (
                    <div key={entry.id} className="history-entry">
                        <div className="entry-time">
                            <Clock size={14} />
                            <span>{entry.timestamp.toLocaleString()}</span>
                        </div>
                        {entry.result.identified && entry.result.top_match ? (
                            <div className="history-match">
                                <div className="match-details">
                                    <h5>{entry.result.top_match.title}</h5>
                                    <p>{entry.result.top_match.artist}</p>
                                    {entry.user_action && (
                                        <span className={`action-badge ${entry.user_action}`}>
                                            {entry.user_action}
                                        </span>
                                    )}
                                </div>
                                <div className="history-actions">
                                    {entry.result.top_match.jellyfin_id ? (
                                        <button
                                            className="history-play-btn"
                                            onClick={() => onPlayTrack(entry.result.top_match!.jellyfin_id!)}
                                            title="Play"
                                        >
                                            <Play size={14} />
                                        </button>
                                    ) : entry.result.top_match.spotify_id ? (
                                        <button
                                            className="history-download-btn"
                                            onClick={() => onDownloadTrack(
                                                entry.result.top_match!.spotify_id!,
                                                entry.result.top_match!.title,
                                                entry.result.top_match!.artist
                                            )}
                                            title="Download"
                                        >
                                            <Download size={14} />
                                        </button>
                                    ) : null}
                                </div>
                            </div>
                        ) : (
                            <div className="history-no-match">
                                <p>No match found ({entry.audio_duration.toFixed(1)}s recording)</p>
                            </div>
                        )}
                    </div>
                ))}
            </div>
        )}
    </div>
);

export const AudioIdentifier: React.FC<AudioIdentifierProps> = ({ 
    mode = 'icon',
    onIdentified 
}) => {
    const [isRecording, setIsRecording] = useState(false);
    const [isIdentifying, setIsIdentifying] = useState(false);
    const [showModal, setShowModal] = useState(false);
    const [result, setResult] = useState<IdentificationResult | null>(null);
    const [showHistory, setShowHistory] = useState(false);
    const [history, setHistory] = useState<HistoryEntry[]>([]);
    
    const mediaRecorderRef = useRef<MediaRecorder | null>(null);
    const audioChunksRef = useRef<Blob[]>([]);
    const streamRef = useRef<MediaStream | null>(null);

    // Load identification history on mount
    useEffect(() => {
        loadIdentificationHistory();
    }, []);

    const loadIdentificationHistory = async () => {
        try {
            const response = await fetch('/api/audio/identification-history');
            if (response.ok) {
                const historyData = await response.json();
                setHistory(historyData.map((entry: any) => ({
                    ...entry,
                    timestamp: new Date(entry.timestamp)
                })));
            }
        } catch (error) {
            console.error('Error loading identification history:', error);
        }
    };

    const saveToHistory = async (result: IdentificationResult, audioDuration: number) => {
        try {
            const historyEntry = {
                timestamp: new Date(),
                result,
                audio_duration: audioDuration
            };

            const response = await fetch('/api/audio/save-identification', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(historyEntry)
            });

            if (response.ok) {
                const saved = await response.json();
                setHistory(prev => [{ ...historyEntry, id: saved.id }, ...prev]);
            }
        } catch (error) {
            console.error('Error saving to history:', error);
        }
    };

    const startRecording = useCallback(async () => {
        try {
            // Request high-quality audio with optimal settings for music identification
            const stream = await navigator.mediaDevices.getUserMedia({ 
                audio: {
                    sampleRate: { ideal: 44100, min: 22050 }, // Higher sample rate for better quality
                    channelCount: 1,
                    echoCancellation: false,  // Keep original audio for fingerprinting
                    noiseSuppression: false,  // Keep original audio for fingerprinting
                    autoGainControl: false    // Prevent automatic gain changes
                } 
            });
            
            streamRef.current = stream;
            const mediaRecorder = new MediaRecorder(stream);
            mediaRecorderRef.current = mediaRecorder;
            audioChunksRef.current = [];

            const startTime = Date.now();

            mediaRecorder.ondataavailable = (event) => {
                if (event.data.size > 0) {
                    audioChunksRef.current.push(event.data);
                }
            };

            mediaRecorder.onstop = async () => {
                const audioBlob = new Blob(audioChunksRef.current, { type: 'audio/wav' });
                const duration = (Date.now() - startTime) / 1000;
                await identifyAudio(audioBlob, duration);
            };

            mediaRecorder.start();
            setIsRecording(true);
            
            // Open modal if in icon mode
            if (mode === 'icon') {
                setShowModal(true);
            }
            
            // Auto-stop after 20 seconds (longer for better identification)
            setTimeout(() => {
                if (mediaRecorderRef.current && isRecording) {
                    stopRecording();
                }
            }, 20000);
            
        } catch (error) {
            console.error('Error starting recording:', error);
            toast.error('Failed to access microphone');
        }
    }, [mode]);

    const stopRecording = useCallback(() => {
        if (mediaRecorderRef.current && isRecording) {
            mediaRecorderRef.current.stop();
            setIsRecording(false);
            setIsIdentifying(true);
        }
        
        if (streamRef.current) {
            streamRef.current.getTracks().forEach((track: MediaStreamTrack) => track.stop());
            streamRef.current = null;
        }
    }, [isRecording]);

    const identifyAudio = async (audioBlob: Blob, duration: number) => {
        try {
            const formData = new FormData();
            formData.append('audio', audioBlob, 'recording.wav');

            const response = await fetch('/api/audio/identify', {
                method: 'POST',
                body: formData,
            });

            const data: IdentificationResult = await response.json();
            
            setResult(data);
            setIsIdentifying(false);

            // Save to history
            await saveToHistory(data, duration);

            // Callback for parent component
            if (onIdentified) {
                onIdentified(data);
            }

            if (data.identified) {
                toast.success(`Identified: ${data.top_match?.title} by ${data.top_match?.artist}`);
            } else {
                toast.error('No matches found - try recording again with less background noise');
            }

        } catch (error) {
            console.error('Error identifying audio:', error);
            toast.error('Audio identification failed');
            setIsIdentifying(false);
        }
    };

    const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
        const file = event.target.files?.[0];
        if (!file) return;

        setIsIdentifying(true);
        if (mode === 'icon') {
            setShowModal(true);
        }

        // Estimate duration (rough)
        const duration = 10; // Default for uploaded files
        await identifyAudio(file, duration);
        event.target.value = ''; // Reset file input
    };

    const playTrack = async (jellyfin_id: string) => {
        try {
            const playbackResponse = await fetch(`/api/jellyfin/play/${jellyfin_id}`, {
                method: 'POST',
            });
            
            if (playbackResponse.ok) {
                toast.success('Playing track');
                await updateHistoryAction(result!, 'played');
                setShowModal(false);
            } else {
                toast.error('Failed to play track');
            }
        } catch (error) {
            console.error('Error playing track:', error);
            toast.error('Failed to play track');
        }
    };

    const downloadTrack = async (spotify_id: string, title: string, artist: string) => {
        try {
            const spotify_url = `https://open.spotify.com/track/${spotify_id}`;
            
            const downloadResponse = await fetch('/api/download', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ 
                    url: spotify_url,
                    source: 'audio_identification', // Track that this came from audio ID
                    title,
                    artist
                })
            });

            if (downloadResponse.ok) {
                toast.success(`Added "${title}" to download queue`);
                await updateHistoryAction(result!, 'downloaded');
                setShowModal(false);
            } else {
                toast.error('Failed to add to download queue');
            }
        } catch (error) {
            console.error('Error downloading track:', error);
            toast.error('Download failed');
        }
    };

    const updateHistoryAction = async (result: IdentificationResult, action: 'played' | 'downloaded' | 'ignored') => {
        try {
            const response = await fetch('/api/audio/update-history-action', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ result_id: result.top_match?.song_id, action })
            });

            if (response.ok) {
                // Update local history
                setHistory(prev => prev.map(entry => 
                    entry.result.top_match?.song_id === result.top_match?.song_id 
                        ? { ...entry, user_action: action }
                        : entry
                ));
            }
        } catch (error) {
            console.error('Error updating history action:', error);
        }
    };

    const closeModal = () => {
        setShowModal(false);
        setResult(null);
        setShowHistory(false);
    };

    // Icon mode - just the button for header/sidebar
    if (mode === 'icon') {
        return (
            <>
                <div className="audio-identifier-icon">
                    <button
                        className={`identify-icon-button ${isRecording ? 'recording' : ''} ${isIdentifying ? 'identifying' : ''}`}
                        onClick={startRecording}
                        disabled={isIdentifying || isRecording}
                        title="Identify Audio (Shazam)"
                    >
                        {isIdentifying ? (
                            <Search className="icon spin" />
                        ) : isRecording ? (
                            <Volume2 className="icon pulse" />
                        ) : (
                            <Mic className="icon" />
                        )}
                    </button>
                </div>

                {/* Modal for icon mode */}
                {showModal && (
                    <div className="identification-modal">
                        <div className="modal-content">
                            <div className="modal-header">
                                <h3>
                                    {isRecording ? 'Listening...' : 
                                     isIdentifying ? 'Identifying...' :
                                     result ? 'Identification Results' :
                                     showHistory ? 'Identification History' : 'Audio Identification'}
                                </h3>
                                <div className="header-actions">
                                    {!isRecording && !isIdentifying && (
                                        <button
                                            className="history-button"
                                            onClick={() => setShowHistory(!showHistory)}
                                            title="View History"
                                        >
                                            <History size={18} />
                                        </button>
                                    )}
                                    <button className="close-button" onClick={closeModal}>
                                        <X size={20} />
                                    </button>
                                </div>
                            </div>

                            <div className="modal-body">
                                {showHistory ? (
                                    <IdentificationHistory 
                                        history={history} 
                                        onPlayTrack={playTrack}
                                        onDownloadTrack={downloadTrack}
                                    />
                                ) : isRecording ? (
                                    <RecordingIndicator onStop={stopRecording} />
                                ) : isIdentifying ? (
                                    <IdentifyingIndicator />
                                ) : result ? (
                                    <IdentificationResults 
                                        result={result}
                                        onPlay={playTrack}
                                        onDownload={downloadTrack}
                                        onIgnore={() => updateHistoryAction(result, 'ignored')}
                                    />
                                ) : (
                                    <IdentificationStart onFileUpload={handleFileUpload} />
                                )}
                            </div>
                        </div>
                    </div>
                )}
            </>
        );
    }

    // Full mode - for search page integration
    return (
        <div className="audio-identifier-full">
            <div className="identifier-header">
                <h3>Can't find it? Try Audio Identification</h3>
                <p>Record a snippet of the song you're looking for</p>
            </div>
            
            <div className="identifier-controls">
                <button
                    className={`record-button-full ${isRecording ? 'recording' : ''} ${isIdentifying ? 'identifying' : ''}`}
                    onClick={isRecording ? stopRecording : startRecording}
                    disabled={isIdentifying}
                >
                    {isIdentifying ? (
                        <>
                            <Search className="icon spin" />
                            <span>Identifying...</span>
                        </>
                    ) : isRecording ? (
                        <>
                            <MicOff className="icon" />
                            <span>Stop Recording</span>
                        </>
                    ) : (
                        <>
                            <Mic className="icon" />
                            <span>Start Recording</span>
                        </>
                    )}
                </button>

                <div className="or-divider">or</div>

                <input
                    type="file"
                    accept="audio/*"
                    onChange={handleFileUpload}
                    className="file-input"
                    id="audio-file-input-full"
                    disabled={isRecording || isIdentifying}
                />
                <label htmlFor="audio-file-input-full" className="file-button-full">
                    📁 Upload Audio File
                </label>
            </div>

            {/* Inline results for full mode */}
            {result && (
                <div className="identification-results-inline">
                    <IdentificationResults 
                        result={result}
                        onPlay={playTrack}
                        onDownload={downloadTrack}
                        onIgnore={() => updateHistoryAction(result, 'ignored')}
                        inline
                    />
                </div>
            )}

            {/* History access for full mode */}
            <div className="history-access">
                <button
                    className="view-history-button"
                    onClick={() => setShowHistory(true)}
                >
                    <History className="icon" />
                    View Identification History
                </button>
            </div>

            {/* History modal for full mode */}
            {showHistory && (
                <div className="identification-modal">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h3>Identification History</h3>
                            <button className="close-button" onClick={() => setShowHistory(false)}>
                                <X size={20} />
                            </button>
                        </div>
                        <div className="modal-body">
                            <IdentificationHistory 
                                history={history} 
                                onPlayTrack={playTrack}
                                onDownloadTrack={downloadTrack}
                            />
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};