{% extends "base.html" %}

{% block title %}AI Archaeological Assistant - PyArchInit-Mini{% endblock %}

{% block extra_css %}
<style>
    .chat-container {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 200px);
        min-height: 400px;
    }
    .chat-messages {
        flex: 1;
        overflow-y: auto;
        padding: 1rem;
        background: var(--bs-light, #f8f9fa);
        border-radius: 0.5rem;
        border: 1px solid var(--bs-border-color, #dee2e6);
    }
    [data-theme="dark"] .chat-messages {
        background: #1e1e2e;
        border-color: #444;
    }
    .chat-bubble {
        max-width: 85%;
        padding: 0.75rem 1rem;
        margin-bottom: 0.75rem;
        border-radius: 1rem;
        line-height: 1.5;
        word-wrap: break-word;
    }
    .chat-bubble-ai { white-space: normal; }
    .chat-bubble-user { white-space: pre-wrap; }
    .ai-content h4 { font-size: 1.1rem; margin-top: 0.8rem; color: #2c3e50; border-bottom: 1px solid #dee2e6; padding-bottom: 4px; }
    .ai-content h5 { font-size: 0.95rem; margin-top: 0.6rem; color: #34495e; }
    .ai-content table { font-size: 0.85rem; }
    .ai-content p { margin-bottom: 0.5rem; }
    .ai-content a { color: #0d6efd; text-decoration: underline; }
    .ai-content img { max-height: 150px; border-radius: 6px; margin: 4px; }
    .chat-bubble-user {
        margin-left: auto;
        background-color: #0d6efd;
        color: #fff;
        border-bottom-right-radius: 0.25rem;
    }
    .chat-bubble-ai {
        margin-right: auto;
        background-color: #fff;
        color: #212529;
        border: 1px solid #dee2e6;
        border-bottom-left-radius: 0.25rem;
    }
    [data-theme="dark"] .chat-bubble-ai {
        background-color: #2b2b3d;
        color: #e0e0e0;
        border-color: #444;
    }
    .chat-bubble .bubble-label {
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.25rem;
        opacity: 0.7;
    }
    .chat-input-area {
        padding-top: 1rem;
    }
    .quick-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    .quick-actions .btn {
        font-size: 0.85rem;
    }
    .typing-indicator {
        display: none;
        align-items: center;
        gap: 0.25rem;
        padding: 0.5rem 1rem;
        margin-bottom: 0.75rem;
        max-width: 75%;
    }
    .typing-indicator.active {
        display: flex;
    }
    .typing-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #6c757d;
        animation: typing-bounce 1.4s infinite ease-in-out both;
    }
    .typing-dot:nth-child(1) { animation-delay: 0s; }
    .typing-dot:nth-child(2) { animation-delay: 0.2s; }
    .typing-dot:nth-child(3) { animation-delay: 0.4s; }
    @keyframes typing-bounce {
        0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
        40% { transform: scale(1); opacity: 1; }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-3">
    <!-- Header -->
    <div class="d-flex align-items-center justify-content-between mb-3">
        <div>
            <h4 class="mb-0"><i class="fas fa-robot me-2"></i>{{ _('AI Archaeological Assistant') }}</h4>
            <small class="text-muted">{{ _('Ask questions about your archaeological data') }}</small>
        </div>
        <div class="d-flex align-items-center gap-2 flex-wrap">
            <label for="site-select" class="form-label mb-0 fw-semibold">{{ _('Site') }}:</label>
            <select id="site-select" class="form-select form-select-sm" style="width: auto; min-width: 180px;">
                <option value="">-- {{ _('No site selected') }} --</option>
            </select>
            <label for="model-select" class="form-label mb-0 fw-semibold ms-2">{{ _('Model') }}:</label>
            <select id="model-select" class="form-select form-select-sm" style="width: auto; min-width: 160px;">
                <optgroup label="OpenAI">
                    <option value="openai:gpt-5.4-mini" selected>GPT-5.4 Mini</option>
                    <option value="openai:gpt-5.4">GPT-5.4</option>
                    <option value="openai:gpt-4.1-mini">GPT-4.1 Mini</option>
                    <option value="openai:o4-mini">o4-mini (reasoning)</option>
                </optgroup>
                <optgroup label="Anthropic Claude">
                    <option value="anthropic:claude-sonnet-4-6">Claude Sonnet 4.6</option>
                    <option value="anthropic:claude-opus-4-6">Claude Opus 4.6</option>
                    <option value="anthropic:claude-haiku-4-5">Claude Haiku 4.5</option>
                </optgroup>
            </select>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="quick-actions">
        <button class="btn btn-outline-primary btn-sm" data-action="summarize">
            <i class="fas fa-file-alt me-1"></i>{{ _('Summarize site') }}
        </button>
        <button class="btn btn-outline-primary btn-sm" data-action="stratigraphy">
            <i class="fas fa-layer-group me-1"></i>{{ _('Analyze stratigraphy') }}
        </button>
        <button class="btn btn-outline-primary btn-sm" data-action="materials">
            <i class="fas fa-archive me-1"></i>{{ _('Material statistics') }}
        </button>
        <button class="btn btn-outline-primary btn-sm" data-action="chronology">
            <i class="fas fa-clock me-1"></i>{{ _('Chronological analysis') }}
        </button>
    </div>

    <!-- Chat area -->
    <div class="chat-container">
        <div class="chat-messages" id="chat-messages">
            <div class="chat-bubble chat-bubble-ai">
                <div class="bubble-label">{{ _('Assistant') }}</div>
                {{ _('Hello! I am the AI Archaeological Assistant for PyArchInit. You can ask me questions about your sites, stratigraphic units, materials, and chronology. Select a site from the dropdown above to provide context, or use one of the quick action buttons.') }}
            </div>
        </div>

        <!-- Typing indicator -->
        <div class="typing-indicator" id="typing-indicator">
            <div class="typing-dot"></div>
            <div class="typing-dot"></div>
            <div class="typing-dot"></div>
        </div>

        <!-- Input -->
        <div class="chat-input-area">
            <form id="chat-form" autocomplete="off">
                <div class="input-group">
                    <input type="text" id="chat-input" class="form-control"
                           placeholder="{{ _('Type your question...') }}"
                           aria-label="{{ _('Type your question') }}" required>
                    <button type="submit" class="btn btn-primary" id="send-btn">
                        <i class="fas fa-paper-plane me-1"></i>{{ _('Send') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
(function() {
    const chatMessages = document.getElementById('chat-messages');
    const chatForm = document.getElementById('chat-form');
    const chatInput = document.getElementById('chat-input');
    const sendBtn = document.getElementById('send-btn');
    const siteSelect = document.getElementById('site-select');
    const typingIndicator = document.getElementById('typing-indicator');

    // ── Load sites into dropdown ──
    fetch('/api/sites')
        .then(r => r.json())
        .then(data => {
            const sites = data.sites || data || [];
            sites.forEach(function(site) {
                const name = site.sito || site.site_name || site.name || '';
                if (!name) return;
                const opt = document.createElement('option');
                opt.value = name;
                opt.textContent = name;
                siteSelect.appendChild(opt);
            });
        })
        .catch(function() { /* sites endpoint may not exist yet */ });

    // ── Helpers ──
    function appendMessage(role, text) {
        var bubble = document.createElement('div');
        bubble.className = 'chat-bubble ' + (role === 'user' ? 'chat-bubble-user' : 'chat-bubble-ai');
        var label = document.createElement('div');
        label.className = 'bubble-label';
        label.textContent = role === 'user' ? '{{ _("You") }}' : '{{ _("Assistant") }}';
        bubble.appendChild(label);
        if (role === 'ai') {
            // AI responses are HTML — render them properly
            var content = document.createElement('div');
            content.className = 'ai-content';
            content.innerHTML = text;
            bubble.appendChild(content);
        } else {
            bubble.appendChild(document.createTextNode(text));
        }
        chatMessages.appendChild(bubble);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    function setLoading(on) {
        sendBtn.disabled = on;
        chatInput.disabled = on;
        if (on) {
            typingIndicator.classList.add('active');
        } else {
            typingIndicator.classList.remove('active');
        }
    }

    function sendQuestion(question) {
        if (!question.trim()) return;
        appendMessage('user', question);
        chatInput.value = '';
        setLoading(true);

        var payload = { question: question };
        var selectedSite = siteSelect.value;
        if (selectedSite) {
            payload.site_name = selectedSite;
        }
        var modelSelect = document.getElementById('model-select');
        if (modelSelect && modelSelect.value) {
            payload.model = modelSelect.value;
        }

        fetch('/api/ai/ask', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token_value }}'
            },
            body: JSON.stringify(payload)
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            setLoading(false);
            var answer = data.answer || data.error || 'No response received.';
            appendMessage('ai', answer);
        })
        .catch(function(err) {
            setLoading(false);
            appendMessage('ai', 'Error: could not reach the AI service. ' + err);
        });
    }

    // ── Form submit ──
    chatForm.addEventListener('submit', function(e) {
        e.preventDefault();
        sendQuestion(chatInput.value);
    });

    // ── Quick actions ──
    document.querySelectorAll('[data-action]').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var action = this.getAttribute('data-action');
            var site = siteSelect.value;
            var question = '';

            if (!site && (action === 'summarize' || action === 'stratigraphy')) {
                appendMessage('ai', '{{ _("Please select a site from the dropdown first.") }}');
                return;
            }

            switch (action) {
                case 'summarize':
                    question = 'Please provide a complete summary report for site "' + site + '", including its stratigraphic units and materials.';
                    break;
                case 'stratigraphy':
                    question = 'Analyze the stratigraphic sequence and relationships for site "' + site + '". Identify the main depositional phases.';
                    break;
                case 'materials':
                    if (site) {
                        question = 'Provide a statistical analysis of the materials and artifacts found at site "' + site + '".';
                    } else {
                        question = 'Provide a general overview of material statistics across all sites in the database.';
                    }
                    break;
                case 'chronology':
                    if (site) {
                        question = 'Analyze the chronological data and dating for site "' + site + '". Discuss the temporal phases and their evidence.';
                    } else {
                        question = 'Provide a chronological overview of all recorded sites and their dating.';
                    }
                    break;
            }
            if (question) {
                sendQuestion(question);
            }
        });
    });

    // Focus input on load
    chatInput.focus();
})();
</script>
{% endblock %}