{% extends "base.html" %}

{% block title %}Study Session - AI Study Tool{% endblock %}

{% block content %}
<div class="study-container">
    <!-- Study Session Setup -->
    <div class="study-setup" id="studySetup">
        <h2>🎯 Start Study Session</h2>
        <p>Choose a document to study with flashcards and spaced repetition.</p>
        
        <div class="document-selector">
            <h3>Select Document:</h3>
            <div class="document-list" id="documentList">
                <!-- This would be populated by JavaScript from API -->
                <div class="document-item" data-doc-id="1">
                    <h4>📄 Machine Learning Lecture</h4>
                    <p>25 flashcards • Last studied: 2 days ago</p>
                    <div class="card-stats">
                        <span class="stat new">5 new</span>
                        <span class="stat due">3 due</span>
                        <span class="stat learning">12 learning</span>
                    </div>
                </div>
                
                <div class="document-item" data-doc-id="2">
                    <h4>📄 Database Systems Notes</h4>
                    <p>18 flashcards • Last studied: 5 days ago</p>
                    <div class="card-stats">
                        <span class="stat new">2 new</span>
                        <span class="stat due">8 due</span>
                        <span class="stat learning">8 learning</span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="session-options">
            <h3>Session Settings:</h3>
            <div class="option-grid">
                <label>
                    <span>Max Cards:</span>
                    <select id="maxCards">
                        <option value="10">10 cards</option>
                        <option value="20" selected>20 cards</option>
                        <option value="30">30 cards</option>
                    </select>
                </label>
                
                <label>
                    <span>Card Types:</span>
                    <select id="cardTypes">
                        <option value="all" selected>All types</option>
                        <option value="definition">Definition only</option>
                        <option value="cloze">Cloze only</option>
                    </select>
                </label>
            </div>
        </div>
        
        <button class="btn btn-primary btn-large" onclick="startStudySession()">
            🚀 Start Study Session
        </button>
    </div>
    
    <!-- Active Study Session -->
    <div class="study-session" id="studySession" style="display: none;">
        <div class="session-header">
            <div class="session-progress">
                <div class="progress-bar">
                    <div class="progress-fill" id="sessionProgress"></div>
                </div>
                <span id="progressText">Card 1 of 20</span>
            </div>
            
            <div class="session-stats">
                <span class="stat">⏰ <span id="sessionTime">0:00</span></span>
                <span class="stat">✅ <span id="correctCount">0</span></span>
                <span class="stat">❌ <span id="wrongCount">0</span></span>
            </div>
        </div>
        
        <div class="flashcard-container">
            <div class="flashcard-perspective">
                <div class="flashcard" id="flashcard" onclick="flipCard()">
                    <div class="flashcard-face card-front" id="cardFront">
                        <div class="card-type-badge" id="cardTypeBadge">Definition</div>
                        <div class="card-content">
                            <p class="card-term" id="cardQuestion">What is Machine Learning?</p>
                        </div>
                        <div class="flip-hint">Click to flip</div>
                    </div>
                    
                    <div class="flashcard-face card-back" id="cardBack">
                        <div class="card-type-badge" id="cardTypeBadgeBack">Definition</div>
                        <div class="card-content">
                            <p class="card-definition" id="cardAnswer">A branch of artificial intelligence that enables computers to learn from data without being explicitly programmed.</p>
                        </div>
                        <div class="flip-hint">Click to flip</div>
                    </div>
                </div>
            </div>
            
            <div class="response-controls" id="responseControls" style="display: none;">
                <p class="response-prompt">How well did you know this?</p>
                <div class="response-grid">
                    <button class="response-btn again" onclick="recordResponse('again')">
                        <span class="response-number">1</span>
                        <span class="response-label">Again</span>
                    </button>
                    <button class="response-btn hard" onclick="recordResponse('hard')">
                        <span class="response-number">2</span>
                        <span class="response-label">Hard</span>
                    </button>
                    <button class="response-btn good" onclick="recordResponse('good')">
                        <span class="response-number">3</span>
                        <span class="response-label">Good</span>
                    </button>
                    <button class="response-btn easy" onclick="recordResponse('easy')">
                        <span class="response-number">4</span>
                        <span class="response-label">Easy</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Session Complete -->
    <div class="session-complete" id="sessionComplete" style="display: none;">
        <div class="completion-celebration">
            <h2>🎉 Study Session Complete!</h2>
            <p>Great job! You've completed your study session.</p>
        </div>
        
        <div class="session-summary">
            <h3>📊 Session Summary</h3>
            <div class="summary-stats">
                <div class="summary-item">
                    <span class="number" id="totalCardsStudied">20</span>
                    <span class="label">Cards Studied</span>
                </div>
                <div class="summary-item">
                    <span class="number" id="totalTimeSpent">5:23</span>
                    <span class="label">Time Spent</span>
                </div>
                <div class="summary-item">
                    <span class="number" id="accuracyRate">85%</span>
                    <span class="label">Accuracy</span>
                </div>
            </div>
            
            <div class="response-breakdown">
                <h4>Response Breakdown:</h4>
                <div class="breakdown-grid">
                    <div class="breakdown-item">
                        <span class="count" id="againCount">2</span>
                        <span class="label">Again</span>
                    </div>
                    <div class="breakdown-item">
                        <span class="count" id="hardCount">3</span>
                        <span class="label">Hard</span>
                    </div>
                    <div class="breakdown-item">
                        <span class="count" id="goodCount">12</span>
                        <span class="label">Good</span>
                    </div>
                    <div class="breakdown-item">
                        <span class="count" id="easyCount">3</span>
                        <span class="label">Easy</span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="next-actions">
            <button class="btn btn-primary" onclick="startAnotherSession()">
                🔄 Study Another Document
            </button>
            <button class="btn btn-secondary" onclick="viewProgress()">
                📈 View Progress
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Study session state
let currentSession = {
    documentId: null,
    cards: [],
    currentCardIndex: 0,
    startTime: null,
    responses: { again: 0, hard: 0, good: 0, easy: 0 },
    sessionData: null
};

// Load documents on page load
async function loadDocumentsForStudy() {
    try {
        const response = await fetch('/documents');
        const data = await response.json();
        const documents = data.documents || [];
        
        const documentList = document.getElementById('documentList');
        documentList.innerHTML = '';
        
        if (documents.length === 0) {
            documentList.innerHTML = '<p>No documents available. <a href="/upload">Upload a document first</a>.</p>';
            return;
        }
        
        for (const doc of documents) {
            // For now, we'll show basic info. Flashcard stats endpoint may not be available yet
            let cardStats = { total: 0, new: 0, due: 0 };
            try {
                const statsResponse = await fetch(`/api/flashcards/stats/${doc.id}`);
                if (statsResponse.ok) {
                    cardStats = await statsResponse.json();
                }
            } catch (e) {
                // Use default stats if endpoint doesn't exist
                console.log('Using default card stats');
            }
            
            const docItem = document.createElement('div');
            docItem.className = 'document-item';
            docItem.dataset.docId = doc.id;
            docItem.innerHTML = `
                <h4>📄 ${doc.filename}</h4>
                <p>${cardStats.total || 0} flashcards • Uploaded ${new Date(doc.upload_date).toLocaleDateString()}</p>
                <div class="card-stats">
                    <span class="stat new">${cardStats.new || 0} new</span>
                    <span class="stat due">${cardStats.due || 0} due</span>
                    <span class="stat learning">${Math.max(0, cardStats.total - (cardStats.new || 0) - (cardStats.due || 0))} learning</span>
                </div>
            `;
            
            docItem.addEventListener('click', function() {
                document.querySelectorAll('.document-item').forEach(item => item.classList.remove('selected'));
                this.classList.add('selected');
            });
            
            documentList.appendChild(docItem);
        }
    } catch (error) {
        console.error('Error loading documents:', error);
        document.getElementById('documentList').innerHTML = '<p>Error loading documents. Please try again.</p>';
    }
}

async function startStudySession() {
    // Get selected document
    const selectedDoc = document.querySelector('.document-item.selected');
    if (!selectedDoc) {
        alert('Please select a document to study');
        return;
    }
    
    currentSession.documentId = selectedDoc.dataset.docId;
    currentSession.startTime = new Date();
    
    // Hide setup, show session
    document.getElementById('studySetup').style.display = 'none';
    document.getElementById('studySession').style.display = 'block';
    
    // Load cards from API
    await loadStudyCards();
}

async function loadStudyCards() {
    try {
        // Show loading message
        document.getElementById('cardQuestion').textContent = 'Loading flashcards...';
        
        // First check if flashcards exist for this document
        let response = await fetch(`/api/flashcards/study-session/${currentSession.documentId}`);
        
        if (!response.ok) {
            // If no study session available, try to get flashcards directly
            console.log('No study session found, checking for flashcards...');
            
            // Check if we need to generate flashcards first
            if (confirm('No flashcards found for this document. Would you like to generate them now?')) {
                // Generate flashcards first
                const generateResponse = await fetch(`/api/flashcards/generate/document/${currentSession.documentId}`, {
                    method: 'POST'
                });
                
                if (generateResponse.ok) {
                    // Try to load study session again
                    response = await fetch(`/api/flashcards/study-session/${currentSession.documentId}`);
                    if (!response.ok) {
                        throw new Error('Failed to create study session after generating flashcards');
                    }
                } else {
                    throw new Error('Failed to generate flashcards');
                }
            } else {
                // User declined to generate flashcards
                document.getElementById('studySession').style.display = 'none';
                document.getElementById('studySetup').style.display = 'block';
                return;
            }
        }
        
        const sessionData = await response.json();
        currentSession.sessionData = sessionData;
        currentSession.cards = sessionData.cards || [];
        
        if (currentSession.cards.length === 0) {
            alert('No flashcards available for this document. Please generate flashcards first.');
            document.getElementById('studySession').style.display = 'none';
            document.getElementById('studySetup').style.display = 'block';
            return;
        }
        
        showCurrentCard();
    } catch (error) {
        console.error('Error loading study cards:', error);
        alert('Failed to load flashcards: ' + error.message);
        document.getElementById('studySession').style.display = 'none';
        document.getElementById('studySetup').style.display = 'block';
    }
}

function showCurrentCard() {
    const card = currentSession.cards[currentSession.currentCardIndex];
    
    // Update progress
    const progress = ((currentSession.currentCardIndex + 1) / currentSession.cards.length) * 100;
    document.getElementById('sessionProgress').style.width = progress + '%';
    document.getElementById('progressText').textContent = 
        `Card ${currentSession.currentCardIndex + 1} of ${currentSession.cards.length}`;
    
    // Update card content based on card type
    const cardType = card.card_type || 'definition';
    document.getElementById('cardTypeBadge').textContent = cardType.charAt(0).toUpperCase() + cardType.slice(1);
    document.getElementById('cardTypeBadgeBack').textContent = cardType.charAt(0).toUpperCase() + cardType.slice(1);
    
    // Display front and back content
    document.getElementById('cardQuestion').textContent = card.front || card.question || 'No question available';
    document.getElementById('cardAnswer').textContent = card.back || card.answer || 'No answer available';
    
    // Reset card to front
    const flashcard = document.getElementById('flashcard');
    flashcard.classList.remove('flipped');
    document.getElementById('responseControls').style.display = 'none';
    
    // Update timer
    updateTimer();
}

function flipCard() {
    const flashcard = document.getElementById('flashcard');
    const isFlipped = flashcard.classList.contains('flipped');
    
    if (!isFlipped) {
        flashcard.classList.add('flipped');
        // Show response controls after flip animation completes
        setTimeout(() => {
            document.getElementById('responseControls').style.display = 'block';
        }, 300);
    } else {
        flashcard.classList.remove('flipped');
        document.getElementById('responseControls').style.display = 'none';
    }
}

async function recordResponse(response) {
    currentSession.responses[response]++;
    
    const card = currentSession.cards[currentSession.currentCardIndex];
    
    try {
        // Send response to API for spaced repetition
        const result = await fetch('/api/flashcards/review', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                flashcard_id: card.id,
                session_id: currentSession.sessionData?.session_id || null,
                user_response: response
            })
        });
        
        if (!result.ok) {
            console.error('Failed to record response');
        }
    } catch (error) {
        console.error('Error recording response:', error);
    }
    
    // Move to next card
    currentSession.currentCardIndex++;
    
    if (currentSession.currentCardIndex >= currentSession.cards.length) {
        completeSession();
    } else {
        showCurrentCard();
    }
}

function completeSession() {
    // Hide session, show completion
    document.getElementById('studySession').style.display = 'none';
    document.getElementById('sessionComplete').style.display = 'block';
    
    // Update completion stats
    const endTime = new Date();
    const duration = Math.floor((endTime - currentSession.startTime) / 1000);
    const minutes = Math.floor(duration / 60);
    const seconds = duration % 60;
    
    document.getElementById('totalCardsStudied').textContent = currentSession.cards.length;
    document.getElementById('totalTimeSpent').textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
    
    // Update response breakdown
    document.getElementById('againCount').textContent = currentSession.responses.again;
    document.getElementById('hardCount').textContent = currentSession.responses.hard;
    document.getElementById('goodCount').textContent = currentSession.responses.good;
    document.getElementById('easyCount').textContent = currentSession.responses.easy;
    
    // Calculate accuracy (good + easy responses)
    const correct = currentSession.responses.good + currentSession.responses.easy;
    const accuracy = Math.round((correct / currentSession.cards.length) * 100);
    document.getElementById('accuracyRate').textContent = accuracy + '%';
}

function updateTimer() {
    if (currentSession.startTime) {
        const now = new Date();
        const elapsed = Math.floor((now - currentSession.startTime) / 1000);
        const minutes = Math.floor(elapsed / 60);
        const seconds = elapsed % 60;
        document.getElementById('sessionTime').textContent = 
            `${minutes}:${seconds.toString().padStart(2, '0')}`;
    }
    
    setTimeout(updateTimer, 1000);
}

function startAnotherSession() {
    // Reset and go back to setup
    currentSession = {
        documentId: null,
        cards: [],
        currentCardIndex: 0,
        startTime: null,
        responses: { again: 0, hard: 0, good: 0, easy: 0 }
    };
    
    document.getElementById('sessionComplete').style.display = 'none';
    document.getElementById('studySetup').style.display = 'block';
}

function viewProgress() {
    // In real app, this would navigate to progress page
    alert('Progress page coming soon!');
}

// Document selection and initialization
document.addEventListener('DOMContentLoaded', function() {
    // Load documents when page loads
    loadDocumentsForStudy();
    
    // Check if we came from documents page with a specific document
    const urlParams = new URLSearchParams(window.location.search);
    const docId = urlParams.get('doc');
    if (docId) {
        // Auto-select the document and start session
        setTimeout(() => {
            const docItem = document.querySelector(`[data-doc-id="${docId}"]`);
            if (docItem) {
                docItem.click();
                // Optionally auto-start the session
                // startStudySession();
            }
        }, 500);
    }
    
    // Start timer updates
    updateTimer();
});

// Keyboard shortcuts for study session
document.addEventListener('keydown', function(event) {
    // Only work during active study session
    if (document.getElementById('studySession').style.display === 'none') {
        return;
    }
    
    const flashcard = document.getElementById('flashcard');
    const isFlipped = flashcard.classList.contains('flipped');
    
    // Space bar to flip card
    if (event.code === 'Space') {
        event.preventDefault();
        flipCard();
    }
    // Number keys for responses (when card is flipped)
    else if (isFlipped) {
        switch(event.key) {
            case '1':
                event.preventDefault();
                recordResponse('again');
                break;
            case '2':
                event.preventDefault();
                recordResponse('hard');
                break;
            case '3':
                event.preventDefault();
                recordResponse('good');
                break;
            case '4':
                event.preventDefault();
                recordResponse('easy');
                break;
        }
    }
});
</script>
{% endblock %}