{% extends "base.html" %}

{% block title %}Conversations - Claude Code Project Tracker{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1>
                <i class="fas fa-comments me-2"></i>
                Conversation History
            </h1>
        </div>
    </div>
</div>

<!-- Search Interface -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-8">
                        <div class="input-group">
                            <input type="text" class="form-control form-control-lg" 
                                   placeholder="Search conversations..." id="search-query"
                                   onkeypress="handleSearchKeypress(event)">
                            <button class="btn btn-primary" type="button" onclick="searchConversations()">
                                <i class="fas fa-search me-1"></i>
                                Search
                            </button>
                            <button class="btn btn-outline-secondary" type="button" onclick="clearSearch()">
                                <i class="fas fa-times me-1"></i>
                                Clear
                            </button>
                        </div>
                        <div class="form-text">
                            Search through your conversation history with Claude Code
                        </div>
                    </div>
                    <div class="col-md-4">
                        <select class="form-select" id="project-filter">
                            <option value="">All Projects</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Search Results -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-history me-2"></i>
                    <span id="results-title">Recent Conversations</span>
                </h6>
            </div>
            <div class="card-body">
                <div id="conversation-results">
                    <div class="text-center text-muted py-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading conversations...</span>
                        </div>
                        <p class="mt-2">Loading your recent conversations...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    loadProjects();
    loadRecentConversations();
});

async function loadProjects() {
    try {
        const projects = await apiClient.getProjects();
        const select = document.getElementById('project-filter');
        
        projects.forEach(project => {
            const option = document.createElement('option');
            option.value = project.id;
            option.textContent = project.name;
            select.appendChild(option);
        });
        
        // Add event listener for project filtering
        select.addEventListener('change', function() {
            const selectedProjectId = this.value ? parseInt(this.value) : null;
            loadConversationsForProject(selectedProjectId);
        });
    } catch (error) {
        console.error('Failed to load projects:', error);
    }
}

async function loadRecentConversations() {
    await loadConversationsForProject(null);
}

async function loadConversationsForProject(projectId = null) {
    const resultsContainer = document.getElementById('conversation-results');
    const resultsTitle = document.getElementById('results-title');
    
    // Show loading state
    resultsContainer.innerHTML = `
        <div class="text-center text-muted py-3">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-2">Loading conversations...</p>
        </div>
    `;
    
    try {
        // Update title based on filtering
        if (projectId) {
            const projects = await apiClient.getProjects();
            const project = projects.find(p => p.id === projectId);
            resultsTitle.textContent = `Conversations - ${project ? project.name : 'Selected Project'}`;
        } else {
            resultsTitle.textContent = 'Recent Conversations';
        }
        
        const conversations = await apiClient.getConversations(projectId, 50);
        
        if (!conversations.length) {
            const noResultsMessage = projectId ? 
                `No conversations found for this project.` : 
                `No conversation history has been recorded yet.`;
                
            resultsContainer.innerHTML = `
                <div class="text-center text-muted py-5">
                    <i class="fas fa-comments fa-3x mb-3"></i>
                    <h5>No Conversations Found</h5>
                    <p>${noResultsMessage}</p>
                    ${!projectId ? '<p class="small text-muted">Conversations will appear here as you use Claude Code.</p>' : ''}
                </div>
            `;
            return;
        }
        
        displaySearchResults(conversations, null);
        
    } catch (error) {
        console.error('Failed to load conversations:', error);
        resultsContainer.innerHTML = `
            <div class="text-center text-danger py-4">
                <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
                <p>Failed to load conversations. Please try again.</p>
            </div>
        `;
    }
}

function handleSearchKeypress(event) {
    if (event.key === 'Enter') {
        searchConversations();
    }
}

function clearSearch() {
    // Clear the search input
    document.getElementById('search-query').value = '';
    
    // Return to filtered/unfiltered conversation list based on current project filter
    const projectId = document.getElementById('project-filter').value || null;
    loadConversationsForProject(projectId ? parseInt(projectId) : null);
}

async function searchConversations() {
    const query = document.getElementById('search-query').value.trim();
    const projectId = document.getElementById('project-filter').value || null;
    const resultsContainer = document.getElementById('conversation-results');
    const resultsTitle = document.getElementById('results-title');
    
    if (!query) {
        resultsContainer.innerHTML = `
            <div class="text-center text-warning py-4">
                <i class="fas fa-exclamation-circle fa-2x mb-2"></i>
                <p>Please enter a search term</p>
            </div>
        `;
        return;
    }
    
    // Show loading state
    resultsContainer.innerHTML = `
        <div class="text-center py-4">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Searching...</span>
            </div>
            <p class="mt-2 text-muted">Searching conversations...</p>
        </div>
    `;
    
    resultsTitle.textContent = `Search Results for "${query}"`;
    
    try {
        const results = await apiClient.searchConversations(query, projectId, 20);
        displaySearchResults(results, query);
    } catch (error) {
        console.error('Search failed:', error);
        resultsContainer.innerHTML = `
            <div class="text-center text-danger py-4">
                <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
                <p>Search failed. Please try again.</p>
            </div>
        `;
    }
}

function displaySearchResults(results, query) {
    const container = document.getElementById('conversation-results');
    
    if (!results.length) {
        container.innerHTML = `
            <div class="text-center text-muted py-5">
                <i class="fas fa-search fa-3x mb-3"></i>
                <h5>No Results Found</h5>
                <p>No conversations match your search term: "${query}"</p>
                <p class="small text-muted">Try using different keywords or check your spelling.</p>
            </div>
        `;
        return;
    }
    
    const resultsHtml = results.map(result => `
        <div class="conversation-result border-bottom py-3 fade-in">
            <div class="row">
                <div class="col-md-8">
                    <div class="d-flex align-items-center mb-2">
                        <span class="badge bg-primary me-2">${result.project_name}</span>
                        <small class="text-muted">
                            <i class="fas fa-clock me-1"></i>
                            ${ApiUtils.formatRelativeTime(result.timestamp)}
                        </small>
                        ${query ? `
                            <span class="badge bg-success ms-2">
                                ${(result.relevance_score * 100).toFixed(0)}% match
                            </span>
                        ` : ''}
                    </div>
                    
                    ${result.user_prompt ? `
                        <div class="mb-2">
                            <strong class="text-primary">
                                <i class="fas fa-user me-1"></i>
                                You:
                            </strong>
                            <p class="mb-1">${query ? highlightSearchTerms(ApiUtils.truncateText(result.user_prompt, 200), query) : ApiUtils.truncateText(result.user_prompt, 200)}</p>
                        </div>
                    ` : ''}
                    
                    ${result.claude_response ? `
                        <div class="mb-2">
                            <strong class="text-success">
                                <i class="fas fa-robot me-1"></i>
                                Claude:
                            </strong>
                            <p class="mb-1">${query ? highlightSearchTerms(ApiUtils.truncateText(result.claude_response, 200), query) : ApiUtils.truncateText(result.claude_response, 200)}</p>
                        </div>
                    ` : ''}
                    
                    ${result.context && result.context.length && query ? `
                        <div class="mt-2">
                            <small class="text-muted">Context snippets:</small>
                            ${result.context.map(snippet => `
                                <div class="bg-light p-2 rounded mt-1">
                                    <small>${highlightSearchTerms(snippet, query)}</small>
                                </div>
                            `).join('')}
                        </div>
                    ` : ''}
                </div>
                
                <div class="col-md-4 text-end">
                    <button class="btn btn-outline-primary btn-sm" onclick="viewFullConversation(${result.id})">
                        <i class="fas fa-eye me-1"></i>
                        View Full
                    </button>
                </div>
            </div>
        </div>
    `).join('');
    
    container.innerHTML = resultsHtml;
}

function highlightSearchTerms(text, query) {
    if (!text || !query) return text;
    
    const terms = query.toLowerCase().split(' ');
    let highlightedText = text;
    
    terms.forEach(term => {
        const regex = new RegExp(`(${term})`, 'gi');
        highlightedText = highlightedText.replace(regex, '<mark>$1</mark>');
    });
    
    return highlightedText;
}

async function viewFullConversation(conversationId) {
    try {
        const conversation = await apiClient.getConversation(conversationId);
        showConversationModal(conversation);
    } catch (error) {
        console.error('Failed to load conversation:', error);
        alert('Failed to load full conversation');
    }
}

function showConversationModal(conversation) {
    const modalHtml = `
        <div class="modal fade" id="conversationModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            <i class="fas fa-comments me-2"></i>
                            Conversation Details
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <div class="row">
                                <div class="col-md-6">
                                    <strong>Project:</strong> ${conversation.project_name}
                                </div>
                                <div class="col-md-6">
                                    <strong>Date:</strong> ${ApiUtils.formatDate(conversation.timestamp)}
                                </div>
                            </div>
                            ${conversation.tools_used && conversation.tools_used.length ? `
                                <div class="mt-2">
                                    <strong>Tools Used:</strong>
                                    ${conversation.tools_used.map(tool => `
                                        <span class="badge bg-${ApiUtils.getToolColor(tool)} me-1">${tool}</span>
                                    `).join('')}
                                </div>
                            ` : ''}
                        </div>
                        
                        ${conversation.user_prompt ? `
                            <div class="mb-4">
                                <div class="card">
                                    <div class="card-header bg-primary text-white">
                                        <i class="fas fa-user me-1"></i>
                                        Your Question
                                    </div>
                                    <div class="card-body">
                                        <p class="mb-0" style="white-space: pre-wrap;">${conversation.user_prompt}</p>
                                    </div>
                                </div>
                            </div>
                        ` : ''}
                        
                        ${conversation.claude_response ? `
                            <div class="mb-4">
                                <div class="card">
                                    <div class="card-header bg-success text-white">
                                        <i class="fas fa-robot me-1"></i>
                                        Claude's Response
                                    </div>
                                    <div class="card-body">
                                        <p class="mb-0" style="white-space: pre-wrap;">${conversation.claude_response}</p>
                                    </div>
                                </div>
                            </div>
                        ` : ''}
                        
                        ${conversation.files_affected && conversation.files_affected.length ? `
                            <div class="mb-3">
                                <strong>Files Affected:</strong>
                                <ul class="list-unstyled mt-2">
                                    ${conversation.files_affected.map(file => `
                                        <li><code>${file}</code></li>
                                    `).join('')}
                                </ul>
                            </div>
                        ` : ''}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Remove any existing modal
    const existingModal = document.getElementById('conversationModal');
    if (existingModal) {
        existingModal.remove();
    }
    
    // Add new modal to body
    document.body.insertAdjacentHTML('beforeend', modalHtml);
    
    // Show modal
    const modal = new bootstrap.Modal(document.getElementById('conversationModal'));
    modal.show();
}
</script>
{% endblock %}