{% extends "layouts/base.html" %}
{% load i18n %}

{% block title %}{% trans "Ask Your Data" %} - PX360{% endblock %}

{% block extra_css %}
<style>
    :root {
        --arrow-primary: #7c3aed;
        --arrow-primary-light: #a78bfa;
        --arrow-bg: #f8fafc;
    }

    .ask-container {
        max-width: 900px;
        margin: 0 auto;
        padding: 2rem 1rem;
    }

    .ask-header {
        text-align: center;
        margin-bottom: 2rem;
    }

    .ask-header h1 {
        font-size: 2rem;
        font-weight: 800;
        color: #1e293b;
        margin-bottom: 0.5rem;
    }

    .ask-header p {
        color: #64748b;
        font-size: 1rem;
    }

    /* Search Input */
    .ask-input-wrapper {
        position: relative;
        margin-bottom: 1.5rem;
    }

    .ask-input {
        width: 100%;
        padding: 1.25rem 3.5rem 1.25rem 1.5rem;
        font-size: 1.1rem;
        border: 2px solid #e2e8f0;
        border-radius: 1rem;
        background: white;
        color: #1e293b;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        transition: all 0.2s;
    }

    .ask-input:focus {
        outline: none;
        border-color: var(--arrow-primary);
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

    .ask-input::placeholder {
        color: #94a3b8;
    }

    .ask-submit {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        border-radius: 0.75rem;
        border: none;
        background: var(--arrow-primary);
        color: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }

    .ask-submit:hover:not(:disabled) {
        background: #6d28d9;
        transform: translateY(-50%) scale(1.05);
    }

    .ask-submit:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* Suggestions */
    .ask-suggestions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 2rem;
    }

    .ask-suggestion {
        padding: 0.5rem 1rem;
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 9999px;
        font-size: 0.85rem;
        color: #475569;
        cursor: pointer;
        transition: all 0.2s;
    }

    .ask-suggestion:hover {
        border-color: var(--arrow-primary);
        color: var(--arrow-primary);
        background: #f5f3ff;
    }

    /* History */
    .ask-history {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .ask-item {
        background: white;
        border-radius: 1rem;
        border: 1px solid #e2e8f0;
        overflow: hidden;
        animation: fadeIn 0.3s ease-out;
    }

    .ask-item-header {
        padding: 1rem 1.25rem;
        background: var(--arrow-bg);
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .ask-item-question {
        font-weight: 600;
        color: #1e293b;
        flex: 1;
    }

    .ask-item-time {
        font-size: 0.75rem;
        color: #94a3b8;
    }

    .ask-item-content {
        padding: 1.25rem;
        min-height: 100px;
    }

    /* States */
    .ask-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 3rem 0;
    }

    .ask-loading-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid #e2e8f0;
        border-top-color: var(--arrow-primary);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    .ask-loading-text {
        color: #64748b;
        font-size: 0.9rem;
    }

    .ask-error {
        padding: 1rem;
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 0.75rem;
        color: #b91c1c;
        font-size: 0.9rem;
    }

    /* Arrow.js Sandbox Container */
    .arrow-output {
        min-height: 200px;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>
{% endblock %}

{% block content %}
<div class="ask-container">
    <!-- Header -->
    <div class="ask-header">
        <h1 class="flex items-center justify-center gap-3">
            <i data-lucide="message-square" class="w-8 h-8 text-purple-600"></i>
            {% trans "Ask Your Data" %}
        </h1>
        <p>{% trans "Ask questions in natural language — AI generates interactive answers with charts and tables" %}</p>
    </div>

    <!-- Input -->
    <div class="ask-input-wrapper">
        <input
            type="text"
            id="askInput"
            class="ask-input"
            placeholder="{% trans 'Example: How many complaints did Cardiology have last month?' %}"
            onkeydown="if(event.key==='Enter' && !event.shiftKey) submitQuestion()"
        >
        <button
            id="askSubmitBtn"
            class="ask-submit"
            onclick="submitQuestion()"
        >
            <i data-lucide="send" class="w-5 h-5"></i>
        </button>
    </div>

    <!-- Suggestions -->
    <div class="ask-suggestions" id="askSuggestions">
        <button class="ask-suggestion" onclick="askSuggestion(this)">
            {% trans "How many complaints this month?" %}
        </button>
        <button class="ask-suggestion" onclick="askSuggestion(this)">
            {% trans "Show complaints by department" %}
        </button>
        <button class="ask-suggestion" onclick="askSuggestion(this)">
            {% trans "What's the average survey score?" %}
        </button>
        <button class="ask-suggestion" onclick="askSuggestion(this)">
            {% trans "Which departments have overdue complaints?" %}
        </button>
        <button class="ask-suggestion" onclick="askSuggestion(this)">
            {% trans "Show NPS trend for the last 6 months" %}
        </button>
        <button class="ask-suggestion" onclick="askSuggestion(this)">
            {% trans "How many actions are overdue?" %}
        </button>
        <button class="ask-suggestion" onclick="askSuggestion(this)">
            {% trans "Top complaint categories this week" %}
        </button>
        <button class="ask-suggestion" onclick="askSuggestion(this)">
            {% trans "Show physician ratings leaderboard" %}
        </button>
    </div>

    <!-- History -->
    <div class="ask-history" id="askHistory">
        <!-- Questions and answers will be added here -->
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script type="module">
import { reactive, html, watch, component } from 'https://esm.sh/@arrow-js/core@latest';

// Make Arrow.js globals available on window for LLM-generated components
window.reactive = reactive;
window.html = html;
window.watch = watch;
import { sandbox } from 'https://esm.sh/@arrow-js/sandbox@latest';

// Global state
const state = reactive({
    isLoading: false,
    questions: [],
    currentId: null,
    error: null,
    csrfToken: '{{ csrf_token }}',
    conversationHistory: [], // {role: "user"|"assistant", content: "...", data: {...}}
});

// Make state globally accessible for the sandbox callback
window.askState = state;

// Submit a question
window.submitQuestion = function() {
    const input = document.getElementById('askInput');
    const question = input.value.trim();
    if (!question || state.isLoading) return;

    input.value = '';
    state.isLoading = true;
    state.error = null;

    const id = Date.now().toString();
    const q = reactive({
        id,
        question,
        answer: null,
        status: 'loading', // loading | generating | ready | error
        component: null,
        timestamp: new Date(),
    });

    state.questions = [{ ...state.questions[0] }, q, ...state.questions.slice(1)].slice(0, 20);
    state.currentId = id;

    // Hide suggestions after first question
    const suggestions = document.getElementById('askSuggestions');
    if (suggestions) suggestions.style.display = 'none';

    // Render the question card
    renderHistory();

    // Send to backend with conversation history
    const historyPayload = state.conversationHistory.slice(-8); // last 8 messages

    fetch('{% url "analytics:ask_data_query" %}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': state.csrfToken,
        },
        body: JSON.stringify({ question, conversation_history: historyPayload }),
    })
    .then(r => r.json())
    .then(data => {
        if (data.error) {
            q.status = 'error';
            q.answer = data.error;
            // Still add to history even on error
            state.conversationHistory.push({ role: 'user', content: question });
            state.conversationHistory.push({ role: 'assistant', content: data.error });
        } else {
            q.status = 'ready';
            q.answer = data.answer || '';
            q.data = data.data || {};
            q.chartType = data.chart_type || 'table';
            q.component = data.component || null;

            // Update conversation history
            state.conversationHistory.push({ role: 'user', content: question });
            state.conversationHistory.push({ role: 'assistant', content: data.answer, data: data.data, chart_type: data.chart_type });
            // Keep only last 10 messages (5 exchanges)
            if (state.conversationHistory.length > 10) {
                state.conversationHistory = state.conversationHistory.slice(-10);
            }
        }
    })
    .catch(err => {
        console.error('Ask data error:', err);
        q.status = 'error';
        q.answer = 'Failed to get answer. Please try again.';
    })
    .finally(() => {
        state.isLoading = false;
        renderHistory();
    });
};

// Click a suggestion
window.askSuggestion = function(btn) {
    document.getElementById('askInput').value = btn.textContent.trim();
    submitQuestion();
};

// Render the history
function renderHistory() {
    const container = document.getElementById('askHistory');
    container.innerHTML = '';

    state.questions.forEach(q => {
        if (!q || !q.id) return;

        const item = document.createElement('div');
        item.className = 'ask-item';
        item.id = `ask-${q.id}`;

        const time = q.timestamp ? new Date(q.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';

        item.innerHTML = `
            <div class="ask-item-header">
                <span class="ask-item-question">❓ ${escapeHtml(q.question)}</span>
                <span class="ask-item-time">${time}</span>
            </div>
            <div class="ask-item-content">
                <div class="ask-loading">
                    <div class="ask-loading-spinner"></div>
                    <div class="ask-loading-text">${q.status === 'loading' ? 'Analyzing question...' : 'Generating interactive answer...'}</div>
                </div>
            </div>
        `;

        container.appendChild(item);

        // If ready, render content
        if (q.status === 'ready' || q.status === 'error') {
            const contentEl = item.querySelector('.ask-item-content');
            renderContent(contentEl, q);
        }
    });

    // Re-initialize lucide icons
    if (typeof lucide !== 'undefined') lucide.createIcons();
}

function renderContent(container, q) {
    container.innerHTML = '';

    if (q.status === 'error') {
        container.innerHTML = `<div class="ask-error">⚠️ ${escapeHtml(q.answer || 'An error occurred')}</div>`;
        return;
    }

    // Answer text (narrative)
    if (q.answer) {
        const narrative = document.createElement('div');
        narrative.className = 'mb-4 p-3 bg-purple-50 rounded-lg text-sm text-gray-700 leading-relaxed';
        narrative.textContent = q.answer;
        container.appendChild(narrative);
    }

    // Arrow.js interactive component
    if (q.component) {
        // Set data for the component
        window.askData = q.data || {};

        try {
            // Wrap component code to handle exports
            let code = q.component;
            // Remove import statements (we already have globals)
            code = code.replace(/import\s+.*?from\s+['"][^'"]+['"];?/g, '');
            // Handle export default
            const exportMatch = code.match(/export\s+default\s+(.+)/s);
            if (exportMatch) {
                const viewExpr = exportMatch[1].trim();
                // Remove the export line
                code = code.replace(/export\s+default\s+.+/s, '');
                // Execute the component code
                const fn = new Function('html', 'reactive', 'watch', 'ApexCharts',
                    code + '\nreturn ' + viewExpr + ';');
                const view = fn(window.html, window.reactive, window.watch, window.ApexCharts);
                if (typeof view === 'function') {
                    const arrowContainer = document.createElement('div');
                    arrowContainer.className = 'arrow-output mb-4';
                    container.appendChild(arrowContainer);
                    view(arrowContainer);
                    return; // Success — stop here, no fallback
                }
            }
        } catch (e) {
            console.error('Arrow.js component error:', e);
            // Fall through to static rendering
        }
    }

    // Fallback: static rendering (no component or component failed)
    if (q.data && Object.keys(q.data).length > 0 && !q.data.error) {
        renderFallbackContent(container, q);
    }
}

function renderFallbackContent(container, q) {
    const vizContainer = document.createElement('div');
    vizContainer.className = 'arrow-output';
    container.appendChild(vizContainer);

    const chartType = q.chartType || 'table';

    if (chartType === 'metric' && q.data.value !== undefined) {
        renderMetric(vizContainer, q.data);
    } else if (chartType === 'bar' && q.data.headers && q.data.rows) {
        renderBarChart(vizContainer, q.data);
    } else if (chartType === 'line' && q.data.headers && q.data.rows) {
        renderLineChart(vizContainer, q.data);
    } else if (q.data.headers && q.data.rows) {
        renderTable(vizContainer, q.data);
    } else {
        vizContainer.innerHTML = '<pre class="text-sm bg-gray-50 p-4 rounded-lg overflow-auto">' + JSON.stringify(q.data, null, 2) + '</pre>';
    }
}

function escapeHtml(str) {
    if (!str) return '';
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
}

function escapeForJs(str) {
    if (!str) return '';
    return str.replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/"/g, '\\"').replace(/\n/g, '\\n');
}

function renderTable(container, data) {
    if (!data || !data.headers || !data.rows || data.rows.length === 0) {
        container.innerHTML = '<p class="text-gray-500 text-sm p-4 text-center">No data found</p>';
        return;
    }

    let html = '<table class="w-full text-sm" style="border-collapse:collapse;">';
    html += '<thead><tr>';
    data.headers.forEach(h => {
        html += `<th class="px-3 py-2 text-left text-xs font-bold text-gray-500 uppercase bg-gray-50 border-b border-gray-200">${escapeHtml(h)}</th>`;
    });
    html += '</tr></thead><tbody>';

    data.rows.forEach((row) => {
        html += '<tr class="hover:bg-gray-50 transition">';
        data.headers.forEach(h => {
            let val = row[h];
            if (val === null || val === undefined) val = '—';
            html += `<td class="px-3 py-2 text-gray-700 border-b border-gray-100">${escapeHtml(String(val))}</td>`;
        });
        html += '</tr>';
    });

    html += '</tbody></table>';
    html += `<div class="text-xs text-gray-400 px-3 py-2">${data.rows.length} record(s)</div>`;

    container.innerHTML = html;
}

function renderMetric(container, data) {
    const value = data.value !== undefined ? data.value : '—';
    let suffix = '';
    let color = '#7c3aed';

    if (data.numerator !== undefined && data.denominator !== undefined) {
        suffix = `<div style="font-size:0.875rem;color:#64748b;margin-top:0.5rem;">${data.numerator} out of ${data.denominator}</div>`;
    }

    container.innerHTML = `
        <div style="text-align:center;padding:2rem;">
            <div style="font-size:3.5rem;font-weight:800;color:${color};">${value}${suffix ? '' : ''}</div>
            ${suffix}
        </div>
    `;
}

function renderBarChart(container, data) {
    if (!data.rows || data.rows.length === 0) {
        container.innerHTML = '<p class="text-gray-500 text-sm p-4 text-center">No data found</p>';
        return;
    }

    const labelKey = data.headers[0];
    const valueKey = data.headers[1];
    const labels = data.rows.map(r => r[labelKey] || 'Unknown');
    const values = data.rows.map(r => r[valueKey] || 0);
    const colors = ['#7c3aed', '#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4', '#ec4899', '#14b8a6', '#f97316', '#6366f1', '#84cc16'];

    const chartDiv = document.createElement('div');
    chartDiv.className = 'bar-chart-apex';
    container.appendChild(chartDiv);

    const options = {
        series: [{ name: valueKey, data: values }],
        chart: { type: 'bar', height: 280, toolbar: { show: false } },
        plotOptions: { bar: { borderRadius: 4, columnWidth: '60%', distributed: true } },
        colors: colors,
        dataLabels: { enabled: false },
        legend: { show: false },
        xaxis: { categories: labels, labels: { rotate: -45, style: { fontSize: '11px' } } },
        yaxis: { title: { text: valueKey } },
        tooltip: { y: { formatter: v => v } },
        fill: { opacity: 0.9 },
    };

    if (typeof ApexCharts !== 'undefined') {
        const chart = new ApexCharts(chartDiv, options);
        chart.render();
    } else {
        // Fallback to CSS bars
        _renderFallbackBars(container, labels, values, labelKey, valueKey);
    }

    // Collapsible table below
    const details = document.createElement('details');
    details.className = 'mt-4';
    details.innerHTML = '<summary class="cursor-pointer text-xs text-gray-500">Show data table</summary>';
    let tableHtml = '<table class="w-full text-sm mt-2" style="border-collapse:collapse;">';
    tableHtml += '<thead><tr>';
    data.headers.forEach(h => {
        tableHtml += `<th class="px-3 py-2 text-left text-xs font-bold text-gray-500 uppercase bg-gray-50 border-b border-gray-200">${escapeHtml(h)}</th>`;
    });
    tableHtml += '</tr></thead><tbody>';
    data.rows.forEach(row => {
        tableHtml += '<tr class="hover:bg-gray-50">';
        data.headers.forEach(h => {
            let val = row[h];
            if (val === null || val === undefined) val = '—';
            tableHtml += `<td class="px-3 py-2 text-gray-700 border-b border-gray-100">${escapeHtml(String(val))}</td>`;
        });
        tableHtml += '</tr>';
    });
    tableHtml += '</tbody></table>';
    details.innerHTML += tableHtml;
    container.appendChild(details);
}

function renderLineChart(container, data) {
    if (!data.rows || data.rows.length === 0) {
        container.innerHTML = '<p class="text-gray-500 text-sm p-4 text-center">No trend data available</p>';
        return;
    }

    const dateKey = data.headers[0];
    const countKey = data.headers[1];
    const labels = data.rows.map(r => r[dateKey]);
    const values = data.rows.map(r => r[countKey] || 0);

    const chartDiv = document.createElement('div');
    chartDiv.className = 'line-chart-apex';
    container.appendChild(chartDiv);

    const options = {
        series: [{ name: countKey, data: values }],
        chart: { type: 'area', height: 260, toolbar: { show: false }, zoom: { enabled: true } },
        stroke: { curve: 'smooth', width: 2.5 },
        fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.4, opacityTo: 0.1, stops: [0, 90, 100] } },
        colors: ['#7c3aed'],
        dataLabels: { enabled: false },
        xaxis: { categories: labels, labels: { rotate: -45, style: { fontSize: '11px' } } },
        yaxis: { title: { text: countKey } },
        tooltip: { x: { show: true }, y: { formatter: v => v } },
        markers: { size: 3, colors: ['#7c3aed'], strokeColors: '#fff', strokeWidth: 2 },
        grid: { borderColor: '#e2e8f0', strokeDashArray: 3 },
    };

    if (typeof ApexCharts !== 'undefined') {
        const chart = new ApexCharts(chartDiv, options);
        chart.render();
    } else {
        container.innerHTML = '<p class="text-gray-500 text-sm p-4">Chart library unavailable</p>';
    }

    // Collapsible table below
    const details = document.createElement('details');
    details.className = 'mt-4';
    details.innerHTML = '<summary class="cursor-pointer text-xs text-gray-500">Show data table</summary>';
    let tableHtml = '<table class="w-full text-sm mt-2" style="border-collapse:collapse;">';
    tableHtml += '<thead><tr>';
    data.headers.forEach(h => {
        tableHtml += `<th class="px-3 py-2 text-left text-xs font-bold text-gray-500 uppercase bg-gray-50 border-b border-gray-200">${escapeHtml(h)}</th>`;
    });
    tableHtml += '</tr></thead><tbody>';
    data.rows.forEach(row => {
        tableHtml += '<tr class="hover:bg-gray-50">';
        data.headers.forEach(h => {
            let val = row[h];
            if (val === null || val === undefined) val = '—';
            tableHtml += `<td class="px-3 py-2 text-gray-700 border-b border-gray-100">${escapeHtml(String(val))}</td>`;
        });
        tableHtml += '</tr>';
    });
    tableHtml += '</tbody></table>';
    details.innerHTML += tableHtml;
    container.appendChild(details);
}

function _renderFallbackBars(container, labels, values, labelKey, valueKey) {
    const maxVal = Math.max(...values, 1);
    const colors = ['#7c3aed', '#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4', '#ec4899', '#14b8a6', '#f97316'];
    let html = '<div style="padding:0.5rem 0;">';
    labels.forEach((label, i) => {
        const val = values[i] || 0;
        const pct = (val / maxVal * 100);
        html += `<div style="margin-bottom:0.5rem;">
            <div style="display:flex;justify-content:space-between;font-size:0.8rem;margin-bottom:2px;">
                <span style="font-weight:600;">${escapeHtml(label)}</span>
                <span style="color:#64748b;">${val}</span>
            </div>
            <div style="height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden;">
                <div style="height:100%;width:${pct}%;background:${colors[i % colors.length]};border-radius:4px;"></div>
            </div>
        </div>`;
    });
    html += '</div>';
    container.innerHTML += html;
}

// Initialize lucide icons
document.addEventListener('DOMContentLoaded', () => {
    if (typeof lucide !== 'undefined') lucide.createIcons();
    // Focus input
    const input = document.getElementById('askInput');
    if (input) input.focus();
});
</script>

<!-- Pass hospital context to JS -->
{% if selected_hospital %}
<script>var requestHospitalId = '{{ selected_hospital.id }}';</script>
{% endif %}
{% endblock %}