{% extends "base.html" %}
{% block title %}Live Telemetry{% endblock %}
{% block content %}

<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-2xl font-bold text-white">Live Telemetry</h1>
        <p class="text-sm text-gray-500 mt-1">Crash monitoring for delivered software</p>
    </div>
    <div class="flex gap-3 text-sm">
        <div class="stat-card px-4 py-2 rounded-lg text-center">
            <div class="text-lg font-bold text-white">{{ stats.delivered }}</div>
            <div class="text-gray-500">Delivered</div>
        </div>
        <div class="stat-card px-4 py-2 rounded-lg text-center">
            <div class="text-lg font-bold text-green-400">{{ stats.monitored }}</div>
            <div class="text-gray-500">Monitored</div>
        </div>
        <div class="stat-card px-4 py-2 rounded-lg text-center">
            <div class="text-lg font-bold text-red-400">{{ stats.crashes_24h }}</div>
            <div class="text-gray-500">Crashes (24h)</div>
        </div>
    </div>
</div>

<div class="grid grid-cols-12 gap-6">
    <!-- Project list (left panel) -->
    <div class="col-span-4">
        <div class="card rounded-lg overflow-hidden">
            <div class="px-4 py-3 border-b border-gray-700">
                <h2 class="text-sm font-semibold text-gray-300">Delivered Projects</h2>
            </div>
            <div class="divide-y divide-gray-800">
                {% for p in projects %}
                <button
                    onclick="selectProject('{{ p.id }}', this)"
                    class="project-row w-full text-left px-4 py-3 hover:bg-gray-800/50 transition-colors flex items-center justify-between {% if loop.first %}bg-gray-800/30{% endif %}"
                    data-project-id="{{ p.id }}"
                >
                    <div>
                        <div class="text-sm text-white font-medium">BS-{{ "%03d"|format(p.ref_number) }} {{ p.title|truncate(40) }}</div>
                        <div class="text-xs text-gray-500 mt-0.5">
                            {% if p.client_name %}{{ p.client_name }}{% elif p.owner_username %}@{{ p.owner_username }}{% else %}—{% endif %}
                            &middot; {{ p.updated_at|timeago }}
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        {% if p.sentry_dsn %}
                        <span class="w-2 h-2 rounded-full bg-green-400" title="Sentry connected"></span>
                        {% else %}
                        <span class="w-2 h-2 rounded-full bg-gray-600" title="No telemetry"></span>
                        {% endif %}
                    </div>
                </button>
                {% else %}
                <div class="px-4 py-8 text-center text-gray-500 text-sm">No delivered projects yet</div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Telemetry panel (right) -->
    <div class="col-span-8">
        <div class="card rounded-lg overflow-hidden" id="telemetry-panel">
            {% if projects %}
            <div class="px-4 py-3 border-b border-gray-700 flex items-center justify-between">
                <h2 class="text-sm font-semibold text-gray-300" id="panel-title">Select a project</h2>
                <div id="panel-actions" class="hidden flex items-center gap-2">
                    <button onclick="refreshCrashes()" class="text-xs text-gray-400 hover:text-white px-2 py-1 rounded border border-gray-700 hover:border-gray-500 transition-colors">Refresh</button>
                    <a id="sentry-link" href="#" target="_blank" class="text-xs text-blue-400 hover:text-blue-300 px-2 py-1">Open in Sentry</a>
                </div>
            </div>

            <!-- Setup prompt (shown when no Sentry DSN) -->
            <div id="setup-prompt" class="hidden p-6">
                <div class="text-center py-8">
                    <div class="text-4xl mb-3">🛰</div>
                    <h3 class="text-white font-semibold mb-2">Connect Sentry Telemetry</h3>
                    <p class="text-gray-400 text-sm mb-4 max-w-md mx-auto">
                        Add a Sentry DSN to enable crash monitoring, session replay, and automatic backtrace collection for this project.
                    </p>
                    <form onsubmit="saveSentryConfig(event)" class="max-w-lg mx-auto">
                        <input type="hidden" id="setup-project-id" value="">
                        <div class="flex gap-2 mb-3">
                            <input type="text" id="sentry-dsn-input" placeholder="https://abc123@o123.ingest.sentry.io/456"
                                class="flex-1 bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-blue-500 focus:outline-none">
                        </div>
                        <div class="flex gap-2 mb-4">
                            <input type="text" id="sentry-slug-input" placeholder="project-slug (e.g. bs-042-todo-app)"
                                class="flex-1 bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-blue-500 focus:outline-none">
                        </div>
                        <button type="submit" class="bg-blue-600 hover:bg-blue-500 text-white text-sm px-4 py-2 rounded transition-colors">
                            Save & Connect
                        </button>
                    </form>
                </div>
            </div>

            <!-- Crash list (shown when Sentry is connected) -->
            <div id="crash-list" class="hidden">
                <!-- Stats bar -->
                <div class="px-4 py-3 border-b border-gray-800 flex gap-6 text-xs">
                    <div><span class="text-gray-500">Total events:</span> <span id="stat-total" class="text-white font-medium">—</span></div>
                    <div><span class="text-gray-500">Unresolved:</span> <span id="stat-unresolved" class="text-red-400 font-medium">—</span></div>
                    <div><span class="text-gray-500">Last crash:</span> <span id="stat-last" class="text-white font-medium">—</span></div>
                </div>

                <!-- Crash entries -->
                <div id="crash-entries" class="divide-y divide-gray-800 max-h-[600px] overflow-y-auto">
                    <div class="px-4 py-8 text-center text-gray-500 text-sm">Loading...</div>
                </div>
            </div>

            <!-- Empty state -->
            <div id="empty-state" class="p-6">
                <div class="text-center py-12 text-gray-500">
                    <div class="text-4xl mb-3">📡</div>
                    <p class="text-sm">Click a project to view its telemetry data</p>
                </div>
            </div>
            {% else %}
            <div class="p-6 text-center py-12 text-gray-500">
                <div class="text-4xl mb-3">📡</div>
                <p class="text-sm">No delivered projects to monitor yet</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
let currentProjectId = null;

function selectProject(projectId, el) {
    currentProjectId = projectId;

    // Highlight selected row
    document.querySelectorAll('.project-row').forEach(r => r.classList.remove('bg-gray-800/30'));
    el.classList.add('bg-gray-800/30');

    // Fetch project telemetry
    document.getElementById('empty-state').classList.add('hidden');
    document.getElementById('setup-prompt').classList.add('hidden');
    document.getElementById('crash-list').classList.add('hidden');
    document.getElementById('panel-title').textContent = 'Loading...';
    document.getElementById('panel-actions').classList.add('hidden');

    fetch(`/api/v1/live/${projectId}`)
        .then(r => r.json())
        .then(data => {
            document.getElementById('panel-title').textContent = data.title;

            if (!data.sentry_dsn) {
                // Show setup prompt
                document.getElementById('setup-prompt').classList.remove('hidden');
                document.getElementById('setup-project-id').value = projectId;
                return;
            }

            // Show crash data
            document.getElementById('panel-actions').classList.remove('hidden');
            document.getElementById('crash-list').classList.remove('hidden');

            if (data.sentry_project_slug) {
                document.getElementById('sentry-link').href =
                    `https://sentry.io/organizations/bridgestack/issues/?project=${data.sentry_project_slug}`;
            }

            renderCrashes(data.issues || []);
        })
        .catch(err => {
            document.getElementById('panel-title').textContent = 'Error loading data';
            document.getElementById('empty-state').classList.remove('hidden');
            document.getElementById('empty-state').querySelector('p').textContent = err.message;
        });
}

function renderCrashes(issues) {
    const container = document.getElementById('crash-entries');

    if (issues.length === 0) {
        container.innerHTML = `
            <div class="px-4 py-8 text-center">
                <div class="text-3xl mb-2">&#10003;</div>
                <div class="text-green-400 font-medium">No crashes detected</div>
                <div class="text-gray-500 text-xs mt-1">Telemetry is active and monitoring</div>
            </div>`;
        document.getElementById('stat-total').textContent = '0';
        document.getElementById('stat-unresolved').textContent = '0';
        document.getElementById('stat-last').textContent = 'Never';
        return;
    }

    const unresolved = issues.filter(i => i.status === 'unresolved').length;
    document.getElementById('stat-total').textContent = issues.reduce((s, i) => s + (i.count || 0), 0);
    document.getElementById('stat-unresolved').textContent = unresolved;
    document.getElementById('stat-last').textContent = issues[0] ? timeAgo(issues[0].last_seen) : 'Never';

    container.innerHTML = issues.map(issue => `
        <div class="px-4 py-3 hover:bg-gray-800/30 cursor-pointer" onclick="toggleDetail(this)">
            <div class="flex items-start justify-between">
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2">
                        <span class="w-2 h-2 rounded-full flex-shrink-0 ${issue.status === 'unresolved' ? 'bg-red-400' : 'bg-gray-500'}"></span>
                        <span class="text-sm text-white font-medium truncate">${escapeHtml(issue.title)}</span>
                    </div>
                    <div class="text-xs text-gray-500 mt-1 ml-4">
                        ${escapeHtml(issue.culprit || '')}
                    </div>
                </div>
                <div class="text-right flex-shrink-0 ml-4">
                    <div class="text-xs text-gray-400">${issue.count || 0} events</div>
                    <div class="text-xs text-gray-500">${timeAgo(issue.last_seen)}</div>
                </div>
            </div>
            <!-- Expandable backtrace -->
            <div class="detail hidden mt-3 ml-4 bg-gray-900 rounded p-3 text-xs">
                <div class="text-gray-400 mb-2 font-medium">Latest Backtrace</div>
                <pre class="text-gray-300 whitespace-pre-wrap overflow-x-auto max-h-80">${escapeHtml(issue.backtrace || 'No backtrace available')}</pre>
                ${issue.replay_url ? `<a href="${issue.replay_url}" target="_blank" class="inline-block mt-2 text-blue-400 hover:text-blue-300 text-xs">Watch Session Replay &rarr;</a>` : ''}
            </div>
        </div>
    `).join('');
}

function toggleDetail(el) {
    const detail = el.querySelector('.detail');
    if (detail) detail.classList.toggle('hidden');
}

function refreshCrashes() {
    if (currentProjectId) {
        const btn = document.querySelector('[onclick="refreshCrashes()"]');
        btn.textContent = 'Refreshing...';
        fetch(`/api/v1/live/${currentProjectId}`)
            .then(r => r.json())
            .then(data => {
                renderCrashes(data.issues || []);
                btn.textContent = 'Refresh';
            })
            .catch(() => { btn.textContent = 'Refresh'; });
    }
}

function saveSentryConfig(event) {
    event.preventDefault();
    const projectId = document.getElementById('setup-project-id').value;
    const dsn = document.getElementById('sentry-dsn-input').value.trim();
    const slug = document.getElementById('sentry-slug-input').value.trim();

    if (!dsn) return;

    fetch(`/api/v1/live/${projectId}/sentry`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ sentry_dsn: dsn, sentry_project_slug: slug })
    })
    .then(r => r.json())
    .then(() => {
        // Re-select to refresh view
        const row = document.querySelector(`[data-project-id="${projectId}"]`);
        if (row) selectProject(projectId, row);
    })
    .catch(err => alert('Failed to save: ' + err.message));
}

function timeAgo(dateStr) {
    if (!dateStr) return 'Unknown';
    const seconds = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1000);
    if (seconds < 60) return seconds + 's ago';
    if (seconds < 3600) return Math.floor(seconds / 60) + 'm ago';
    if (seconds < 86400) return Math.floor(seconds / 3600) + 'h ago';
    return Math.floor(seconds / 86400) + 'd ago';
}

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

// Auto-select first project
{% if projects %}
document.addEventListener('DOMContentLoaded', () => {
    const first = document.querySelector('.project-row');
    if (first) selectProject('{{ projects[0].id }}', first);
});
{% endif %}
</script>

{% endblock %}