/**
 * AskView.jsx - AI Chat Interface (Complete Rebuild + Responsive)
 * Features: Collapsible sidebars, mobile-friendly, smooth transitions
 */

const { useState, useEffect } = React;
const { SessionSidebar, ChatArea, MediaPanel, NoteSelectionModal } = window;

function AskView({ user }) {
    const { t } = useTranslation();
    const token = localStorage.getItem('token');
    const API_URL = window.API_URL || '/api';

    // State
    const [sessions, setSessions] = useState([]);
    const [activeSessionId, setActiveSessionId] = useState(null);
    const [messages, setMessages] = useState([]);
    const [noteContext, setNoteContext] = useState([]);
    const [mediaList, setMediaList] = useState([]);
    const [loading, setLoading] = useState(false);
    const [showNoteModal, setShowNoteModal] = useState(false);
    const [isSending, setIsSending] = useState(false);
    const [pendingFiles, setPendingFiles] = useState([]); // Files selected before chat creation
    const [showSessionSidebar, setShowSessionSidebar] = useState(true);
    const [showContextPanel, setShowContextPanel] = useState(true);

    // Responsive: Hide sidebars on mobile by default
    useEffect(() => {
        const handleResize = () => {
            if (window.innerWidth < 768) {
                setShowSessionSidebar(false);
                setShowContextPanel(false);
            } else if (window.innerWidth < 1024) {
                setShowSessionSidebar(true);
                setShowContextPanel(false);
            } else {
                setShowSessionSidebar(true);
                setShowContextPanel(true);
            }
        };

        handleResize(); // Initial check
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    // Load sessions on mount
    useEffect(() => {
        fetchSessions();
    }, []);

    // Load session details when active session changes
    useEffect(() => {
        if (activeSessionId) {
            fetchSessionDetails(activeSessionId);
        } else {
            setMessages([]);
            setNoteContext([]);
            setMediaList([]);
        }
    }, [activeSessionId]);

    // ==================== API FUNCTIONS ====================

    const fetchSessions = async () => {
        try {
            const response = await fetch(`${API_URL}/ask/sessions`, {
                headers: { 'Authorization': `Bearer ${token}` }
            });
            if (!response.ok) throw new Error('Failed to load sessions');
            const data = await response.json();
            setSessions(data);
        } catch (error) {
            console.error('Error loading sessions:', error);
            alert('Failed to load chat sessions');
        }
    };

    const fetchSessionDetails = async (sessionId) => {
        try {
            const response = await fetch(`${API_URL}/ask/sessions/${sessionId}`, {
                headers: { 'Authorization': `Bearer ${token}` }
            });
            if (!response.ok) throw new Error('Failed to load session');
            const data = await response.json();

            setMessages(data.messages || []);
            setNoteContext(data.notes || []);
            setMediaList(data.media || []);
        } catch (error) {
            console.error('Error loading session:', error);
            alert('Failed to load session details');
        }
    };

    const uploadFilesToSession = async (sessionId, files) => {
        const uploadPromises = files.map(file => {
            const formData = new FormData();
            formData.append('file', file);
            formData.append('session_id', sessionId);

            return fetch(`${API_URL}/ask/upload?session_id=${sessionId}`, {
                method: 'POST',
                headers: {
                    'Authorization': `Bearer ${token}`
                },
                body: formData
            }).then(response => {
                if (!response.ok) throw new Error(`Upload failed for ${file.name}`);
                return response.json();
            }).then(data => {
                setMediaList(prev => [...prev, {
                    id: data.media_id,
                    type: data.media_type,
                    filename: data.filename,
                    filepath: data.filepath
                }]);
                return data;
            });
        });

        try {
            await Promise.all(uploadPromises);
        } catch (error) {
            console.error('Error uploading pending files:', error);
            alert('Failed to upload some files');
        }
    };

    const handleSendMessage = async (messageText, noteIds = []) => {
        if (!messageText.trim()) return;

        try {
            setIsSending(true);
            let sessionId = activeSessionId;

            // If no active session, create one first
            if (!sessionId) {
                const response = await fetch(`${API_URL}/ask/sessions`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${token}`
                    },
                    body: JSON.stringify({
                        title: messageText.substring(0, 50),
                        note_ids: []
                    })
                });

                if (response.ok) {
                    const data = await response.json();
                    sessionId = data.id; // Backend returns "id", not "session_id"
                    setActiveSessionId(sessionId);

                    // Upload pending files to the new session
                    if (pendingFiles.length > 0) {
                        await uploadFilesToSession(sessionId, pendingFiles);
                        setPendingFiles([]); // Clear pending files
                    }

                    await fetchSessions(); // Refresh sessions list
                } else {
                    throw new Error('Failed to create new session');
                }
            }

            // Send the message
            const response = await fetch(`${API_URL}/ask/send`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`
                },
                body: JSON.stringify({
                    session_id: sessionId,
                    message: messageText,
                    note_ids: noteIds.length > 0 ? noteIds : noteContext.map(n => n.id)
                })
            });

            if (response.ok) {
                const data = await response.json();
                setMessages(data.messages || []);
            } else {
                throw new Error('Failed to send message');
            }
        } catch (error) {
            console.error('Send message error:', error);
            alert('Failed to send message');
        } finally {
            setIsSending(false);
        }
    };

    const handleDeleteSession = async (sessionId) => {
        if (!confirm('Delete this chat session?')) return;

        try {
            const response = await fetch(`${API_URL}/ask/sessions/${sessionId}`, {
                method: 'DELETE',
                headers: { 'Authorization': `Bearer ${token}` }
            });

            if (!response.ok) throw new Error('Failed to delete');

            // If deleting active session, clear it
            if (activeSessionId === sessionId) {
                setActiveSessionId(null);
                setMessages([]);
                setNoteContext([]);
                setPendingFiles([]);
            }

            // Refresh sessions list
            await fetchSessions();
        } catch (error) {
            console.error('Error deleting session:', error);
            alert('Failed to delete session');
        }
    };

    const handleNotesSelected = async (noteIds) => {
        if (!noteIds || noteIds.length === 0) {
            alert('Please select at least one note to start a chat');
            return;
        }

        // Fetch full note details for the selected IDs
        try {
            const response = await fetch(`${API_URL}/notes`, {
                headers: { 'Authorization': `Bearer ${token}` }
            });
            const data = await response.json();
            const selectedNotes = (data.notes || []).filter(note => noteIds.includes(note.id));

            setNoteContext(selectedNotes);
            setShowNoteModal(false);
            // Start fresh chat with selected notes
            setActiveSessionId(null);
            setMessages([]);
        } catch (error) {
            console.error('Error fetching note details:', error);
            alert('Failed to load note details');
        }
    };

    const handleAddNotes = () => {
        setShowNoteModal(true);
    };

    const handleNewChat = () => {
        // Clear active session and messages to start fresh
        setActiveSessionId(null);
        setMessages([]);
        setNoteContext([]);
        setMediaList([]);
    };

    const handleRenameSession = (sessionId, newTitle) => {
        // Update session title in local state
        setSessions(prevSessions =>
            prevSessions.map(s =>
                s.id === sessionId ? { ...s, title: newTitle } : s
            )
        );
    };

    const handleFileUpload = async (files) => {
        // If session exists, upload immediately
        if (activeSessionId) {
            await uploadFilesToSession(activeSessionId, files);
        } else {
            // No session yet, store files temporarily
            setPendingFiles(prev => [...prev, ...files]);
        }
    };

    // ==================== RENDER ====================

    return (
        <div style={{
            position: 'relative',
            display: 'flex',
            height: '100vh',
            background: 'var(--surface-bg, #f8f9fa)',
            overflow: 'hidden'
        }}>
            {/* Header Bar - Simplified */}
            <div style={{
                position: 'absolute',
                top: 0,
                left: 0,
                right: 0,
                height: '60px',
                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                padding: '0 1rem',
                zIndex: 10
            }}>
                <div style={{ textAlign: 'center' }}>
                    <h1 style={{
                        color: 'white',
                        fontSize: '1.5rem',
                        fontWeight: '700',
                        margin: 0
                    }}>
                        💬 {t('navigation.ask')}
                    </h1>
                    <p style={{
                        color: 'rgba(255,255,255,0.9)',
                        fontSize: '0.875rem',
                        margin: '0.25rem 0 0 0'
                    }}>
                        {t('ask.subtitle')}
                    </p>
                </div>
            </div>

            {/* Main Content Row (Flex, Overflow Hidden) */}
            <div style={{
                flex: 1,
                display: 'flex',
                overflow: 'hidden',
                position: 'relative',
                marginTop: '60px',
                minHeight: 0
            }}>
                {/* Left Toggle Button - Always Visible */}
                <button
                    onClick={() => setShowSessionSidebar(!showSessionSidebar)}
                    style={{
                        position: 'absolute',
                        left: showSessionSidebar ? '268px' : '0',
                        top: '50%',
                        transform: 'translateY(-50%)',
                        width: '24px',
                        height: '48px',
                        background: 'white',
                        border: '1px solid #e2e8f0',
                        borderRadius: '0 8px 8px 0',
                        cursor: 'pointer',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        boxShadow: '2px 0 8px rgba(0,0,0,0.1)',
                        zIndex: 30,
                        transition: 'left 0.3s ease, background 0.2s',
                        fontSize: '0.75rem',
                        color: '#64748b'
                    }}
                    onMouseEnter={e => {
                        e.currentTarget.style.background = '#f8f9fa';
                        e.currentTarget.style.color = '#667eea';
                    }}
                    onMouseLeave={e => {
                        e.currentTarget.style.background = 'white';
                        e.currentTarget.style.color = '#64748b';
                    }}
                    title="Toggle History"
                >
                    {showSessionSidebar ? '◀' : '▶'}
                </button>

                {/* Right Toggle Button - Always Visible */}
                <button
                    onClick={() => setShowContextPanel(!showContextPanel)}
                    style={{
                        position: 'absolute',
                        right: showContextPanel ? '288px' : '0',
                        top: '50%',
                        transform: 'translateY(-50%)',
                        width: '24px',
                        height: '48px',
                        background: 'white',
                        border: '1px solid #e2e8f0',
                        borderRadius: '8px 0 0 8px',
                        cursor: 'pointer',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        boxShadow: '-2px 0 8px rgba(0,0,0,0.1)',
                        zIndex: 30,
                        transition: 'right 0.3s ease, background 0.2s',
                        fontSize: '0.75rem',
                        color: '#64748b'
                    }}
                    onMouseEnter={e => {
                        e.currentTarget.style.background = '#f8f9fa';
                        e.currentTarget.style.color = '#667eea';
                    }}
                    onMouseLeave={e => {
                        e.currentTarget.style.background = 'white';
                        e.currentTarget.style.color = '#64748b';
                    }}
                    title="Toggle Media"
                >
                    {showContextPanel ? '▶' : '◀'}
                </button>

                {/* Left: Session Sidebar */}
                <div style={{
                    width: showSessionSidebar ? '280px' : '0',
                    transition: 'width 0.3s ease',
                    overflow: 'hidden',
                    flexShrink: 0
                }}>
                    <SessionSidebar
                        sessions={sessions}
                        activeSessionId={activeSessionId}
                        onSelectSession={setActiveSessionId}
                        onDeleteSession={handleDeleteSession}
                        onNewChat={handleNewChat}
                        onRenameSession={handleRenameSession}
                        t={t}
                    />
                </div>

                {/* Center: Chat Area */}
                <div style={{ flex: 1, minWidth: 0 }}>
                    <ChatArea
                        messages={messages}
                        isSending={isSending}
                        onSendMessage={handleSendMessage}
                        selectedNoteCount={noteContext.length}
                        onSelectNotes={() => setShowNoteModal(true)}
                        onFileUpload={handleFileUpload}
                        pendingFiles={pendingFiles}
                        onRemovePendingFile={(index) => setPendingFiles(prev => prev.filter((_, i) => i !== index))}
                        t={t}
                    />
                </div>

                {/* Right: Media Panel (replaces Context Panel) */}
                <div style={{
                    width: showContextPanel ? '300px' : '0',
                    transition: 'width 0.3s ease',
                    overflow: 'hidden',
                    flexShrink: 0
                }}>
                    {showContextPanel && (
                        <MediaPanel t={t} />
                    )}
                </div>
            </div>

            {/* Note Selection Modal */}
            {showNoteModal && (
                <NoteSelectionModal
                    token={token}
                    onSelect={handleNotesSelected}
                    onClose={() => setShowNoteModal(false)}
                    t={t}
                />
            )}
        </div>
    );
}

window.AskView = AskView;