{% extends "base.html" %}

{% block title %}AI Research Assistant - The Orchid Continuum{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <!-- AI Research Assistant Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card bg-gradient text-white" style="background: linear-gradient(135deg, var(--brand-purple, #6B3FA0) 0%, #9d4edd 50%, #c77dff 100%);">
                <div class="card-body py-4">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h1 class="h2 mb-2 fw-bold">
                                <i data-feather="brain" class="me-3" style="width: 32px; height: 32px;"></i>
                                AI Research Assistant
                            </h1>
                            <p class="mb-0 opacity-90">Advanced AI-powered orchid research platform with species identification, cultivation guidance, and academic citations.</p>
                        </div>
                        <div class="col-md-4 text-md-end">
                            <div class="d-flex flex-column align-items-md-end">
                                <div class="badge bg-success mb-2 px-3 py-2">
                                    <i data-feather="cpu" class="me-2" style="width: 16px; height: 16px;"></i>
                                    AI Online - 7 Research Endpoints
                                </div>
                                <small class="opacity-75">Connected to 5,975 orchid database</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Research Categories Sidebar -->
        <div class="col-lg-3 mb-4">
            <div class="card h-100">
                <div class="card-header bg-dark">
                    <h5 class="mb-0">
                        <i data-feather="layers" class="me-2" style="width: 18px; height: 18px;"></i>
                        Research Categories
                    </h5>
                </div>
                <div class="card-body p-3">
                    <!-- Quick Research Buttons -->
                    <div class="d-grid gap-2 mb-4">
                        <button type="button" class="btn btn-outline-primary research-category-btn" data-category="identification">
                            <i data-feather="search" class="me-2" style="width: 16px; height: 16px;"></i>
                            Species Identification
                        </button>
                        <button type="button" class="btn btn-outline-success research-category-btn" data-category="cultivation">
                            <i data-feather="sun" class="me-2" style="width: 16px; height: 16px;"></i>
                            Cultivation Advice
                        </button>
                        <button type="button" class="btn btn-outline-info research-category-btn" data-category="research">
                            <i data-feather="book" class="me-2" style="width: 16px; height: 16px;"></i>
                            Research Insights
                        </button>
                        <button type="button" class="btn btn-outline-warning research-category-btn" data-category="citations">
                            <i data-feather="bookmark" class="me-2" style="width: 16px; height: 16px;"></i>
                            Academic Citations
                        </button>
                    </div>

                    <!-- Image Upload Area -->
                    <div class="upload-zone p-4 text-center border border-dashed rounded mb-3" id="imageUploadZone">
                        <i data-feather="camera" class="mb-2" style="width: 48px; height: 48px; color: var(--bs-primary);"></i>
                        <p class="mb-2"><strong>Upload Image</strong></p>
                        <p class="small text-muted mb-3">Drag & drop or click to upload orchid photos for AI identification</p>
                        <input type="file" id="imageUpload" accept="image/*" class="d-none">
                        <button type="button" class="btn btn-sm btn-primary" onclick="document.getElementById('imageUpload').click()">
                            Choose File
                        </button>
                    </div>

                    <!-- Research Session Info -->
                    <div class="card bg-dark border-0">
                        <div class="card-body p-3">
                            <h6 class="card-title mb-2">
                                <i data-feather="clock" class="me-2" style="width: 16px; height: 16px;"></i>
                                Current Session
                            </h6>
                            <div class="small">
                                <div class="d-flex justify-content-between mb-1">
                                    <span>Session ID:</span>
                                    <code id="sessionId" class="text-primary">Loading...</code>
                                </div>
                                <div class="d-flex justify-content-between mb-1">
                                    <span>Queries:</span>
                                    <span id="queryCount" class="badge bg-secondary">0</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <span>Started:</span>
                                    <span id="sessionStartTime" class="text-muted">Now</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Chat Interface -->
        <div class="col-lg-9">
            <div class="card h-100">
                <div class="card-header bg-dark d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i data-feather="message-circle" class="me-2" style="width: 18px; height: 18px;"></i>
                        Research Conversation
                    </h5>
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-outline-light" id="exportSessionBtn" title="Export Session">
                            <i data-feather="download" style="width: 16px; height: 16px;"></i>
                        </button>
                        <button type="button" class="btn btn-outline-light" id="clearSessionBtn" title="Clear Session">
                            <i data-feather="trash-2" style="width: 16px; height: 16px;"></i>
                        </button>
                    </div>
                </div>
                
                <!-- Chat Messages Area -->
                <div class="card-body p-0" style="height: 600px; overflow-y: auto;" id="chatContainer">
                    <div id="chatMessages" class="p-4">
                        <!-- Welcome Message -->
                        <div class="message ai-message mb-4">
                            <div class="d-flex align-items-start">
                                <div class="flex-shrink-0 me-3">
                                    <div class="avatar bg-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                        <i data-feather="cpu" style="width: 20px; height: 20px; color: white;"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="message-bubble bg-light p-3 rounded-3">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <strong class="text-primary">AI Research Assistant</strong>
                                            <small class="text-muted" id="welcomeTimestamp"></small>
                                        </div>
                                        <p class="mb-2">Welcome to the AI Research Assistant! I'm here to help with:</p>
                                        <ul class="mb-2">
                                            <li><strong>Species Identification:</strong> Upload images for AI-powered orchid identification</li>
                                            <li><strong>Cultivation Guidance:</strong> Get personalized care advice based on your location and conditions</li>
                                            <li><strong>Research Insights:</strong> Access scientific information from our 5,975 orchid database</li>
                                            <li><strong>Academic Citations:</strong> Find peer-reviewed sources and generate proper citations</li>
                                        </ul>
                                        <p class="mb-0">Use the category buttons on the left or simply ask me anything about orchids!</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Typing Indicator -->
                    <div id="typingIndicator" class="px-4 pb-3 d-none">
                        <div class="d-flex align-items-center">
                            <div class="flex-shrink-0 me-3">
                                <div class="avatar bg-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                    <i data-feather="cpu" style="width: 20px; height: 20px; color: white;"></i>
                                </div>
                            </div>
                            <div class="typing-bubble bg-light p-3 rounded-3">
                                <div class="typing-animation">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                                <small class="text-muted ms-2">AI is analyzing...</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Chat Input Area -->
                <div class="card-footer bg-dark">
                    <form id="chatForm" class="d-flex gap-2">
                        <div class="flex-grow-1">
                            <div class="input-group">
                                <input type="text" 
                                       class="form-control" 
                                       id="messageInput" 
                                       placeholder="Ask about orchid identification, cultivation, research, or citations..."
                                       autocomplete="off">
                                <button type="button" class="btn btn-outline-secondary" id="voiceInputBtn" title="Voice Input">
                                    <i data-feather="mic" style="width: 16px; height: 16px;"></i>
                                </button>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary" id="sendBtn">
                            <i data-feather="send" style="width: 16px; height: 16px;"></i>
                            <span class="d-none d-sm-inline ms-2">Send</span>
                        </button>
                    </form>
                    
                    <!-- Quick Research Templates -->
                    <div class="mt-2">
                        <div class="d-flex flex-wrap gap-1">
                            <button type="button" class="btn btn-sm btn-outline-light quick-template" data-template="What orchid is this?">
                                <i data-feather="help-circle" style="width: 12px; height: 12px;"></i>
                                What orchid is this?
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-light quick-template" data-template="How do I care for this orchid?">
                                <i data-feather="heart" style="width: 12px; height: 12px;"></i>
                                Care guidance
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-light quick-template" data-template="Find research papers about this genus">
                                <i data-feather="file-text" style="width: 12px; height: 12px;"></i>
                                Research papers
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Research Context Panel (Collapsible) -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-dark">
                    <button class="btn btn-link text-white text-decoration-none p-0 w-100 text-start" 
                            type="button" 
                            data-bs-toggle="collapse" 
                            data-bs-target="#researchContext" 
                            aria-expanded="false">
                        <i data-feather="database" class="me-2" style="width: 18px; height: 18px;"></i>
                        Research Context & Session History
                        <i data-feather="chevron-down" class="float-end" style="width: 18px; height: 18px;"></i>
                    </button>
                </div>
                <div class="collapse" id="researchContext">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="fw-bold mb-3">
                                    <i data-feather="trending-up" class="me-2" style="width: 16px; height: 16px;"></i>
                                    Research Trail
                                </h6>
                                <div id="researchTrail" class="mb-3">
                                    <div class="text-muted">No research queries yet. Start by asking a question or uploading an image!</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h6 class="fw-bold mb-3">
                                    <i data-feather="bookmark" class="me-2" style="width: 16px; height: 16px;"></i>
                                    Saved Citations
                                </h6>
                                <div id="savedCitations" class="mb-3">
                                    <div class="text-muted">No citations saved yet.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Success/Error Toast Container -->
<div class="toast-container position-fixed bottom-0 end-0 p-3" id="toastContainer">
</div>

<!-- Research Result Modal -->
<div class="modal fade" id="researchModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="researchModalTitle">Research Result</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="researchModalBody">
                <!-- Content populated by JavaScript -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="saveResearchBtn">
                    <i data-feather="save" style="width: 16px; height: 16px;"></i>
                    Save Research
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Custom Styles for Research Assistant -->
<style>
.upload-zone {
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-zone:hover,
.upload-zone.drag-over {
    border-color: var(--bs-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
}

.message {
    margin-bottom: 1.5rem;
}

.message-bubble {
    max-width: 100%;
    word-wrap: break-word;
}

.user-message .message-bubble {
    background-color: var(--bs-primary) !important;
    color: white;
}

.ai-message .message-bubble {
    background-color: var(--bs-light);
    color: var(--bs-dark);
}

.avatar {
    flex-shrink: 0;
}

.typing-animation {
    display: inline-flex;
    gap: 3px;
}

.typing-animation span {
    height: 6px;
    width: 6px;
    background-color: var(--bs-primary);
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out;
}

.typing-animation span:nth-child(1) { animation-delay: -0.32s; }
.typing-animation span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
    0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

.research-category-btn {
    border-radius: 8px;
    padding: 0.75rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.research-category-btn:hover,
.research-category-btn.active {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.quick-template {
    border-radius: 20px;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.quick-template:hover {
    transform: translateY(-1px);
}

.confidence-score {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
}

.confidence-high { background-color: rgba(40, 167, 69, 0.2); color: #28a745; }
.confidence-medium { background-color: rgba(255, 193, 7, 0.2); color: #ffc107; }
.confidence-low { background-color: rgba(220, 53, 69, 0.2); color: #dc3545; }

.research-source {
    font-size: 0.8rem;
    color: var(--bs-secondary);
    border-left: 3px solid var(--bs-primary);
    padding-left: 0.5rem;
    margin-top: 0.5rem;
}

.citation-card {
    border-left: 4px solid var(--bs-info);
    background-color: rgba(var(--bs-info-rgb), 0.1);
}

#chatContainer {
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
}

@media (max-width: 768px) {
    .research-category-btn {
        font-size: 0.9rem;
        padding: 0.5rem;
    }
    
    .avatar {
        width: 32px !important;
        height: 32px !important;
    }
    
    .avatar i {
        width: 16px !important;
        height: 16px !important;
    }
}
</style>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/ai_research_assistant.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize timestamp
    document.getElementById('welcomeTimestamp').textContent = new Date().toLocaleTimeString();
    
    // Initialize AI Research Assistant
    if (typeof AIResearchAssistant !== 'undefined') {
        window.researchAssistant = new AIResearchAssistant();
    } else {
        console.warn('AI Research Assistant JavaScript not loaded, falling back to basic functionality');
        initBasicFunctionality();
    }
    
    // Initialize Feather icons for dynamic content
    if (typeof feather !== 'undefined') {
        feather.replace();
    }
});

function initBasicFunctionality() {
    // Basic fallback functionality if the main JS file isn't loaded
    const messageInput = document.getElementById('messageInput');
    const chatForm = document.getElementById('chatForm');
    
    if (chatForm) {
        chatForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const message = messageInput.value.trim();
            if (message) {
                addUserMessage(message);
                messageInput.value = '';
                // This would normally trigger AI processing
                setTimeout(() => {
                    addAIMessage('I apologize, but the AI Research Assistant is currently initializing. Please refresh the page and try again.');
                }, 1000);
            }
        });
    }
}

function addUserMessage(message) {
    const chatMessages = document.getElementById('chatMessages');
    const messageDiv = document.createElement('div');
    messageDiv.className = 'message user-message mb-4';
    messageDiv.innerHTML = `
        <div class="d-flex align-items-start justify-content-end">
            <div class="flex-grow-1 me-3">
                <div class="message-bubble bg-primary text-white p-3 rounded-3 text-end">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <small class="text-white-50">${new Date().toLocaleTimeString()}</small>
                        <strong>You</strong>
                    </div>
                    <p class="mb-0">${message}</p>
                </div>
            </div>
            <div class="flex-shrink-0">
                <div class="avatar bg-success rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                    <i data-feather="user" style="width: 20px; height: 20px; color: white;"></i>
                </div>
            </div>
        </div>
    `;
    chatMessages.appendChild(messageDiv);
    if (typeof feather !== 'undefined') feather.replace();
    scrollToBottom();
}

function addAIMessage(message) {
    const chatMessages = document.getElementById('chatMessages');
    const messageDiv = document.createElement('div');
    messageDiv.className = 'message ai-message mb-4';
    messageDiv.innerHTML = `
        <div class="d-flex align-items-start">
            <div class="flex-shrink-0 me-3">
                <div class="avatar bg-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                    <i data-feather="cpu" style="width: 20px; height: 20px; color: white;"></i>
                </div>
            </div>
            <div class="flex-grow-1">
                <div class="message-bubble bg-light p-3 rounded-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <strong class="text-primary">AI Research Assistant</strong>
                        <small class="text-muted">${new Date().toLocaleTimeString()}</small>
                    </div>
                    <p class="mb-0">${message}</p>
                </div>
            </div>
        </div>
    `;
    chatMessages.appendChild(messageDiv);
    if (typeof feather !== 'undefined') feather.replace();
    scrollToBottom();
}

function scrollToBottom() {
    const chatContainer = document.getElementById('chatContainer');
    chatContainer.scrollTop = chatContainer.scrollHeight;
}
</script>
{% endblock %}