{% extends "v3/base.html" %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">Monitoring</h1>
</div>

<div id="monitoring-error" style="display:none" class="alert alert-danger"></div>
<div id="not-configured" style="display:none">
    <p class="text-muted">Supabase non configure - statistiques non disponibles en mode local.</p>
</div>

<div id="monitoring-content" style="display:none">
    <!-- Utilisateurs -->
    <section class="card" style="margin-bottom:1rem">
        <h2 style="margin-bottom:1rem;font-size:1rem">Utilisateurs</h2>
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem">
            <div class="stat-card">
                <div class="stat-value" id="stat-total">--</div>
                <div class="stat-label">Total</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="stat-active">--</div>
                <div class="stat-label">Actifs 30j</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="stat-new">--</div>
                <div class="stat-label">Nouveaux 7j</div>
            </div>
        </div>
    </section>

    <!-- Top features + Plans -->
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem">
        <section class="card">
            <h2 style="margin-bottom:1rem;font-size:1rem">Top features</h2>
            <table id="features-table" style="width:100%">
                <thead><tr><th>Feature</th><th style="text-align:right">Usages</th></tr></thead>
                <tbody id="features-body"></tbody>
            </table>
        </section>

        <section class="card">
            <h2 style="margin-bottom:1rem;font-size:1rem">Plans</h2>
            <table id="plans-table" style="width:100%">
                <thead><tr><th>Plan</th><th style="text-align:right">Utilisateurs</th></tr></thead>
                <tbody id="plans-body"></tbody>
            </table>
        </section>
    </div>

    <!-- Rentabilite -->
    <section class="card" style="margin-bottom:1rem">
        <h2 style="margin-bottom:1rem;font-size:1rem">Rentabilite (30 derniers jours)</h2>
        <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1rem">
            <div class="stat-card">
                <div class="stat-value" id="biz-revenue">--</div>
                <div class="stat-label">Revenus</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="biz-cost">--</div>
                <div class="stat-label">Couts API</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="biz-profit">--</div>
                <div class="stat-label">Benefice net</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="biz-freeloss" style="color:var(--danger,#ef4444)">--</div>
                <div class="stat-label">Perte Free plan</div>
            </div>
        </div>
        <table style="width:100%" id="biz-table">
            <thead><tr>
                <th style="text-align:left">Plan</th>
                <th style="text-align:right">Users</th>
                <th style="text-align:right">Revenus</th>
                <th style="text-align:right">Couts API</th>
                <th style="text-align:right">Benefice</th>
            </tr></thead>
            <tbody id="biz-body"></tbody>
        </table>
    </section>

    <!-- Volume journalier (sparkline) -->
    <section class="card" style="margin-bottom:1rem">
        <h2 style="margin-bottom:0.5rem;font-size:1rem">Volume journalier (30j)</h2>
        <div id="sparkline-container" style="display:flex;align-items:flex-end;gap:2px;height:60px;overflow:hidden">
        </div>
    </section>

    <!-- Usage par plan x modele -->
    <section class="card" style="margin-bottom:1rem">
        <h2 style="margin-bottom:0.5rem;font-size:1rem">Usage par plan × modele (30j)</h2>
        <table style="width:100%">
            <thead><tr>
                <th style="text-align:left">Plan</th>
                <th style="text-align:left">Modele</th>
                <th style="text-align:left">Metric</th>
                <th style="text-align:right">Events</th>
                <th style="text-align:right">Valeur totale</th>
                <th style="text-align:right">Users</th>
                <th style="text-align:right">Duree moy</th>
            </tr></thead>
            <tbody id="usage-plan-model-body"></tbody>
        </table>
    </section>

    <!-- Coût orchestrateur vs direct -->
    <section class="card" style="margin-bottom:1rem">
        <h2 style="margin-bottom:0.5rem;font-size:1rem">Orchestrateur vs agent direct (30j)</h2>
        <table style="width:100%">
            <thead><tr>
                <th style="text-align:left">Mode</th>
                <th style="text-align:right">Appels LLM</th>
                <th style="text-align:right">Tokens moy</th>
                <th style="text-align:right">Tokens p95</th>
                <th style="text-align:right">Duree moy</th>
                <th style="text-align:right">Cout estime</th>
            </tr></thead>
            <tbody id="orch-overhead-body"></tbody>
        </table>
    </section>

    <!-- Popularite agents (voice vs texte, source library vs user) -->
    <section class="card" style="margin-bottom:1rem">
        <h2 style="margin-bottom:0.5rem;font-size:1rem">Popularite agents (30j)</h2>
        <p class="text-muted text-sm" style="margin-bottom:0.5rem">
            Repond a "agents non-vocaux utilises ?" et "templates library vs custom user ?"
        </p>
        <table style="width:100%">
            <thead><tr>
                <th style="text-align:left">Agent ID</th>
                <th style="text-align:left">Source</th>
                <th style="text-align:left">Categorie</th>
                <th style="text-align:center">Orch.</th>
                <th style="text-align:center">Voice</th>
                <th style="text-align:right">Runs</th>
                <th style="text-align:right">Users</th>
            </tr></thead>
            <tbody id="agent-popularity-body"></tbody>
        </table>
    </section>

    <!-- Sante MCP -->
    <section class="card" style="margin-bottom:1rem">
        <h2 style="margin-bottom:0.5rem;font-size:1rem">Sante MCP (24h)</h2>
        <table style="width:100%">
            <thead><tr>
                <th style="text-align:left">Serveur</th>
                <th style="text-align:left">Outil</th>
                <th style="text-align:right">Appels</th>
                <th style="text-align:right">Erreurs</th>
                <th style="text-align:right">Taux %</th>
                <th style="text-align:right">Duree moy ms</th>
                <th style="text-align:right">p95 ms</th>
            </tr></thead>
            <tbody id="mcp-health-body"></tbody>
        </table>
    </section>

    <!-- Top consumers -->
    <section class="card" style="margin-bottom:1rem">
        <h2 style="margin-bottom:0.5rem;font-size:1rem">Top consumers (30j)</h2>
        <table style="width:100%">
            <thead><tr>
                <th style="text-align:left">Email</th>
                <th style="text-align:left">Plan</th>
                <th style="text-align:right">STT min</th>
                <th style="text-align:right">Tokens LLM</th>
                <th style="text-align:right">Runs</th>
                <th style="text-align:right">Cout estime</th>
            </tr></thead>
            <tbody id="top-consumers-body"></tbody>
        </table>
    </section>

    <!-- Taux d'erreur (1h) -->
    <section class="card" style="margin-bottom:1rem">
        <h2 style="margin-bottom:0.5rem;font-size:1rem">Taux d'erreur par feature (1h)</h2>
        <table style="width:100%">
            <thead><tr>
                <th style="text-align:left">Feature</th>
                <th style="text-align:right">Total</th>
                <th style="text-align:right">Erreurs</th>
                <th style="text-align:right">Taux %</th>
                <th style="text-align:right">Duree moy ms</th>
            </tr></thead>
            <tbody id="error-rate-body"></tbody>
        </table>
    </section>

    <!-- Stats journalieres par plan -->
    <section class="card" style="margin-bottom:1rem">
        <h2 style="margin-bottom:0.5rem;font-size:1rem">Stats journalieres par plan (30j)</h2>
        <table style="width:100%">
            <thead><tr>
                <th style="text-align:left">Jour</th>
                <th style="text-align:left">Plan</th>
                <th style="text-align:right">Users actifs</th>
                <th style="text-align:right">STT min</th>
                <th style="text-align:right">Tokens LLM</th>
                <th style="text-align:right">Runs</th>
                <th style="text-align:right">Cout API</th>
            </tr></thead>
            <tbody id="daily-stats-body"></tbody>
        </table>
    </section>

    <!-- Sentry -->
    <section class="card">
        <h2 style="margin-bottom:0.5rem;font-size:1rem">Sentry</h2>
        <p id="sentry-status" class="text-muted text-sm"></p>
    </section>
</div>
{% endblock %}

{% block scripts %}
<style>
.stat-card { text-align:center; padding:0.75rem; background:var(--bg); border-radius:6px; }
.stat-value { font-size:1.75rem; font-weight:700; color:var(--accent); }
.stat-label { font-size:0.75rem; color:var(--text-muted, #888); margin-top:0.25rem; }
.sparkline-bar { background:var(--accent); border-radius:2px 2px 0 0; min-width:6px; flex:1; transition:opacity 0.1s; }
.sparkline-bar:hover { opacity:0.7; }
</style>
<script>
async function loadMonitoring() {
    try {
        const res = await apiFetch('/api/monitoring/stats');
        const data = await res.json();

        if (!data.configured) {
            document.getElementById('not-configured').style.display = '';
            return;
        }
        if (data.error) {
            document.getElementById('monitoring-error').textContent = 'Erreur: ' + data.error;
            document.getElementById('monitoring-error').style.display = '';
            return;
        }

        document.getElementById('monitoring-content').style.display = '';

        // Utilisateurs
        document.getElementById('stat-total').textContent = data.users.total;
        document.getElementById('stat-active').textContent = data.users.active_30d;
        document.getElementById('stat-new').textContent = data.users.new_7d;

        // Top features
        const fb = document.getElementById('features-body');
        fb.innerHTML = (data.top_features || []).map(f =>
            `<tr><td>${f.feature}</td><td style="text-align:right">${f.count}</td></tr>`
        ).join('') || '<tr><td colspan="2" class="text-muted">Aucune donnee</td></tr>';

        // Plans
        const pb = document.getElementById('plans-body');
        pb.innerHTML = (data.plan_distribution || []).map(p =>
            `<tr><td>${p.plan}</td><td style="text-align:right">${p.count}</td></tr>`
        ).join('') || '<tr><td colspan="2" class="text-muted">Aucune donnee</td></tr>';

        // Sparkline
        const volumes = data.daily_volume || [];
        if (volumes.length > 0) {
            const maxCount = Math.max(...volumes.map(v => v.count), 1);
            const container = document.getElementById('sparkline-container');
            container.innerHTML = volumes.map(v => {
                const pct = Math.max(4, Math.round((v.count / maxCount) * 100));
                return `<div class="sparkline-bar" style="height:${pct}%" title="${v.date}: ${v.count}"></div>`;
            }).join('');
        }

        const eur = usd => '€' + (usd * 0.92).toFixed(2);

        // Business / rentabilite
        const biz = data.business || {};
        if (!biz.error) {
            document.getElementById('biz-revenue').textContent = eur(biz.total_revenue_usd || 0);
            const profitEl = document.getElementById('biz-profit');
            profitEl.textContent = eur(biz.net_profit_usd || 0);
            profitEl.style.color = (biz.net_profit_usd || 0) >= 0 ? 'var(--accent)' : 'var(--danger,#ef4444)';
            document.getElementById('biz-cost').textContent = eur(biz.total_cost_usd || 0);
            document.getElementById('biz-freeloss').textContent = '-' + eur(biz.free_plan_loss_usd || 0);

            const bb = document.getElementById('biz-body');
            bb.innerHTML = (biz.by_plan || []).map(p => {
                const profitColor = p.profit_usd >= 0 ? 'var(--accent)' : 'var(--danger,#ef4444)';
                return `<tr>
                    <td>${p.display_name || p.plan}</td>
                    <td style="text-align:right">${p.user_count}</td>
                    <td style="text-align:right">${eur(p.revenue_usd)}</td>
                    <td style="text-align:right">${eur(p.api_cost_usd)}</td>
                    <td style="text-align:right;color:${profitColor}">${eur(p.profit_usd)}</td>
                </tr>`;
            }).join('') || '<tr><td colspan="5" class="text-muted">Aucune donnee</td></tr>';
        }

        // Analytics avancees (P2.3)
        const an = data.analytics || {};
        const emptyRow = (cols, msg) =>
            `<tr><td colspan="${cols}" class="text-muted">${msg}</td></tr>`;

        // Usage par plan x modele
        const upm = an.usage_by_plan_model || [];
        document.getElementById('usage-plan-model-body').innerHTML = upm.length
            ? upm.map(r => `<tr>
                <td>${r.plan || '-'}</td>
                <td>${r.model || '-'}</td>
                <td>${r.metric_type || '-'}</td>
                <td style="text-align:right">${r.events ?? '-'}</td>
                <td style="text-align:right">${r.total_value ?? '-'}</td>
                <td style="text-align:right">${r.unique_users ?? '-'}</td>
                <td style="text-align:right">${r.avg_duration_ms ?? '-'}</td>
            </tr>`).join('')
            : emptyRow(7, 'Aucune donnee enrichie pour l\'instant (les nouveaux events arriveront avec le model dans metadata).');

        // Orchestrator overhead
        const orch = an.orchestrator_overhead || [];
        document.getElementById('orch-overhead-body').innerHTML = orch.length
            ? orch.map(r => `<tr>
                <td>${r.is_orchestrator ? 'Orchestrateur' : 'Agent direct'}</td>
                <td style="text-align:right">${r.llm_calls ?? '-'}</td>
                <td style="text-align:right">${r.avg_tokens_per_call ?? '-'}</td>
                <td style="text-align:right">${r.p95_tokens ?? '-'}</td>
                <td style="text-align:right">${r.avg_duration_ms ?? '-'}</td>
                <td style="text-align:right">$${(r.estimated_cost_usd_30d || 0).toFixed(4)}</td>
            </tr>`).join('')
            : emptyRow(6, 'Pas encore de tokens trackes avec orchestrator dans metadata.');

        // Agent popularity
        const pop = an.agent_popularity || [];
        document.getElementById('agent-popularity-body').innerHTML = pop.length
            ? pop.map(r => `<tr>
                <td style="font-family:monospace;font-size:0.85rem">${(r.agent_id || '').slice(0, 8)}…</td>
                <td>${r.agent_source || '-'}</td>
                <td>${r.agent_category || 'custom'}</td>
                <td style="text-align:center">${r.is_orchestrator ? '✓' : ''}</td>
                <td style="text-align:center">${r.is_voice ? '✓' : ''}</td>
                <td style="text-align:right">${r.executions ?? '-'}</td>
                <td style="text-align:right">${r.unique_users ?? '-'}</td>
            </tr>`).join('')
            : emptyRow(7, 'Aucun agent_execution avec metadata enrichie pour l\'instant.');

        // MCP health
        const mcp = an.mcp_health || [];
        document.getElementById('mcp-health-body').innerHTML = mcp.length
            ? mcp.map(r => {
                const errColor = (r.error_rate_pct || 0) > 5 ? 'var(--danger,#ef4444)' : 'inherit';
                return `<tr>
                    <td>${r.mcp_server || 'unknown'}</td>
                    <td style="font-family:monospace;font-size:0.85rem">${r.tool_name || '-'}</td>
                    <td style="text-align:right">${r.total_calls ?? '-'}</td>
                    <td style="text-align:right">${r.errors ?? 0}</td>
                    <td style="text-align:right;color:${errColor}">${r.error_rate_pct ?? 0}</td>
                    <td style="text-align:right">${r.avg_duration_ms ?? '-'}</td>
                    <td style="text-align:right">${r.p95_duration_ms ?? '-'}</td>
                </tr>`;
            }).join('')
            : emptyRow(7, 'Aucun appel MCP traque (le nouveau metric mcp_call arrivera au prochain agent run).');

        // Top consumers
        const consumers = an.top_consumers || [];
        document.getElementById('top-consumers-body').innerHTML = consumers.length
            ? consumers.map(r => `<tr>
                <td style="font-family:monospace;font-size:0.85rem">${r.email_masked || '-'}</td>
                <td>${r.plan || '-'}</td>
                <td style="text-align:right">${r.stt_minutes ?? 0}</td>
                <td style="text-align:right">${(r.llm_tokens ?? 0).toLocaleString()}</td>
                <td style="text-align:right">${r.agent_runs ?? 0}</td>
                <td style="text-align:right">${eur(r.estimated_cost_usd || 0)}</td>
            </tr>`).join('')
            : emptyRow(6, 'Aucune donnee (30j).');

        // Error rate 1h
        const errors = an.error_rate || [];
        document.getElementById('error-rate-body').innerHTML = errors.length
            ? errors.map(r => {
                const errColor = (r.error_rate_pct || 0) > 5 ? 'var(--danger,#ef4444)' : 'inherit';
                return `<tr>
                    <td>${r.metric_type || '-'}</td>
                    <td style="text-align:right">${r.total ?? '-'}</td>
                    <td style="text-align:right">${r.errors ?? 0}</td>
                    <td style="text-align:right;color:${errColor}">${r.error_rate_pct ?? 0}%</td>
                    <td style="text-align:right">${r.avg_duration_ms ?? '-'}</td>
                </tr>`;
            }).join('')
            : emptyRow(5, 'Aucune donnee sur la derniere heure.');

        // Daily stats
        const daily = an.daily_stats || [];
        document.getElementById('daily-stats-body').innerHTML = daily.length
            ? daily.map(r => `<tr>
                <td>${r.day || '-'}</td>
                <td>${r.plan || '-'}</td>
                <td style="text-align:right">${r.active_users ?? '-'}</td>
                <td style="text-align:right">${r.stt_minutes ?? 0}</td>
                <td style="text-align:right">${(r.llm_tokens ?? 0).toLocaleString()}</td>
                <td style="text-align:right">${r.agent_runs ?? 0}</td>
                <td style="text-align:right">${eur(r.api_cost_usd || 0)}</td>
            </tr>`).join('')
            : emptyRow(7, 'Aucune donnee (30j).');

        // Sentry
        document.getElementById('sentry-status').textContent = data.sentry_dsn_configured
            ? 'Sentry actif (SENTRY_DSN configure)'
            : 'Sentry inactif - ajoutez SENTRY_DSN dans .env pour activer le suivi d\'erreurs';

    } catch (e) {
        document.getElementById('monitoring-error').textContent = 'Erreur chargement: ' + e.message;
        document.getElementById('monitoring-error').style.display = '';
    }
}

loadMonitoring();
</script>
{% endblock %}