{% extends "base.html" %}
{% set active_page = "dashboard" %}
{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-xl font-semibold text-white">Dashboard</h1>
</div>

<!-- Pipeline Cards -->
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
    <a href="/projects?status=discovered" class="stat-card rounded-lg p-4 hover:ring-1 hover:ring-gray-600 transition">
        <div class="text-2xl font-bold text-white">{{ discovered_today }}</div>
        <div class="text-xs text-gray-500 mt-1">Discovered Today</div>
    </a>
    <a href="/projects?status=questions_sent" class="stat-card rounded-lg p-4 hover:ring-1 hover:ring-yellow-500/50 transition">
        <div class="text-2xl font-bold text-yellow-400">{{ status_counts.get('questions_sent', 0) }}</div>
        <div class="text-xs text-gray-500 mt-1">Questions Pending</div>
    </a>
    <a href="/projects?status=bid_placed" class="stat-card rounded-lg p-4 hover:ring-1 hover:ring-blue-500/50 transition">
        <div class="text-2xl font-bold text-blue-400">{{ status_counts.get('bid_placed', 0) }}</div>
        <div class="text-xs text-gray-500 mt-1">Bids Active</div>
    </a>
    <a href="/projects?status=awarded" class="stat-card rounded-lg p-4 hover:ring-1 hover:ring-green-500/50 transition">
        <div class="text-2xl font-bold text-green-400">{{ status_counts.get('awarded', 0) }}</div>
        <div class="text-xs text-gray-500 mt-1">Awarded</div>
    </a>
    <a href="/projects?status=awarded" class="stat-card rounded-lg p-4 hover:ring-1 hover:ring-purple-500/50 transition">
        <div class="text-2xl font-bold text-purple-400">{{ active_dev }}</div>
        <div class="text-xs text-gray-500 mt-1">In Development</div>
    </a>
    <a href="/projects?status=completed" class="stat-card rounded-lg p-4 hover:ring-1 hover:ring-emerald-500/50 transition">
        <div class="text-2xl font-bold text-emerald-400">{{ status_counts.get('completed', 0) }}</div>
        <div class="text-xs text-gray-500 mt-1">Completed</div>
    </a>
</div>

<!-- Revenue + Decisions Row -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
    <div class="stat-card rounded-lg p-5">
        <div class="text-xs text-gray-500 uppercase tracking-wider mb-2">Bids Pending Value</div>
        <div class="text-2xl font-bold text-blue-400">{{ bids_pending | currency }}</div>
    </div>
    <div class="stat-card rounded-lg p-5">
        <div class="text-xs text-gray-500 uppercase tracking-wider mb-2">Total Earned</div>
        <div class="text-2xl font-bold text-emerald-400">{{ total_earned | currency }}</div>
    </div>
    <div class="stat-card rounded-lg p-5">
        <div class="text-xs text-gray-500 uppercase tracking-wider mb-2">Pending Decisions</div>
        <div class="text-2xl font-bold {% if pending_decisions > 0 %}text-yellow-400{% else %}text-gray-500{% endif %}">
            {{ pending_decisions }}
        </div>
        {% if pending_decisions > 0 %}
        <a href="/projects?status=awarded" class="text-xs text-blue-400 hover:text-blue-300 mt-1 inline-block">View &rarr;</a>
        {% endif %}
    </div>
</div>

<!-- Guardrails + Activity -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Guardrail Controls -->
    <div class="card rounded-lg p-5">
        <h2 class="text-sm font-medium text-white mb-4">Guardrail Controls</h2>
        <form method="POST" action="/config" class="space-y-4">
            <div class="flex items-center justify-between">
                <label class="text-sm text-gray-400">Preview Mode</label>
                <select name="preview_mode" class="bg-gray-900 border border-gray-700 rounded px-3 py-1.5 text-sm text-gray-200">
                    <option value="true" {% if config.get('preview_mode') == 'true' %}selected{% endif %}>On</option>
                    <option value="false" {% if config.get('preview_mode', 'false') != 'true' %}selected{% endif %}>Off</option>
                </select>
            </div>
            <div class="flex items-center justify-between">
                <label class="text-sm text-gray-400">Max Daily Bids</label>
                <input type="number" name="max_daily_bids" value="{{ config.get('max_daily_bids', '10') }}"
                       class="bg-gray-900 border border-gray-700 rounded px-3 py-1.5 text-sm text-gray-200 w-20 text-right">
            </div>
            <div class="flex items-center justify-between">
                <label class="text-sm text-gray-400">Daily Revenue Target</label>
                <div class="flex items-center gap-1">
                    <span class="text-gray-500 text-sm">$</span>
                    <input type="number" name="daily_revenue_target" value="{{ config.get('daily_revenue_target', '500') }}"
                           class="bg-gray-900 border border-gray-700 rounded px-3 py-1.5 text-sm text-gray-200 w-24 text-right">
                </div>
            </div>
            <div class="flex items-center justify-between">
                <label class="text-sm text-gray-400">Max Concurrent Projects</label>
                <input type="number" name="max_concurrent_projects" value="{{ config.get('max_concurrent_projects', '5') }}"
                       class="bg-gray-900 border border-gray-700 rounded px-3 py-1.5 text-sm text-gray-200 w-20 text-right">
            </div>
            <button type="submit"
                    class="w-full mt-2 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm rounded-lg transition">
                Save Controls
            </button>
        </form>
    </div>

    <!-- Recent Messages -->
    <div class="card rounded-lg p-5">
        <h2 class="text-sm font-medium text-white mb-4">Recent Messages</h2>
        <div class="space-y-3 max-h-80 overflow-y-auto">
            {% for msg in recent_messages %}
            <div class="flex items-start gap-3 text-sm">
                <div class="flex-shrink-0 mt-0.5">
                    {% if msg.sender.value == 'agent' %}
                    <div class="w-2 h-2 rounded-full bg-blue-400"></div>
                    {% elif msg.sender.value == 'owner' %}
                    <div class="w-2 h-2 rounded-full bg-green-400"></div>
                    {% else %}
                    <div class="w-2 h-2 rounded-full bg-gray-500"></div>
                    {% endif %}
                </div>
                <div class="flex-1 min-w-0">
                    <div class="text-gray-400 truncate">{{ msg.message_text[:120] }}</div>
                    <div class="text-xs text-gray-600 mt-0.5">{{ msg.created_at | timeago }}</div>
                </div>
            </div>
            {% else %}
            <div class="text-sm text-gray-600">No recent messages</div>
            {% endfor %}
        </div>
    </div>
</div>

<!-- Live Agent Activity Feed -->
<div class="card rounded-lg p-5 mt-6">
    <div class="flex items-center justify-between mb-4">
        <h2 class="text-sm font-medium text-white">Live Agent Activity</h2>
        <div class="flex items-center gap-3">
            <div id="feed-status" class="flex items-center gap-1.5">
                <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
                <span class="text-xs text-gray-500">Live</span>
            </div>
            <select id="feed-filter" class="bg-gray-900 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300">
                <option value="">All types</option>
                <option value="thinking">Thinking</option>
                <option value="tool_call">Tool Calls</option>
                <option value="tool_result">Tool Results</option>
                <option value="error">Errors</option>
                <option value="decision_needed">Decisions</option>
            </select>
        </div>
    </div>
    <div id="activity-feed" class="space-y-1 max-h-[500px] overflow-y-auto font-mono text-xs">
        <div class="text-gray-600 text-center py-4">Loading activity feed...</div>
    </div>
</div>

<script>
(function() {
    const feed = document.getElementById('activity-feed');
    const filter = document.getElementById('feed-filter');
    let lastTimestamp = null;
    let allEntries = [];

    const typeColors = {
        thinking: 'text-purple-400',
        tool_call: 'text-cyan-400',
        tool_result: 'text-gray-500',
        error: 'text-red-400',
        decision_needed: 'text-yellow-400',
    };

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

    function renderEntry(e) {
        const color = typeColors[e.log_type] || 'text-gray-400';
        const title = e.project_title.length > 30 ? e.project_title.substring(0, 30) + '...' : e.project_title;
        return `<div class="activity-entry pl-3 py-1 border-l-2 ${e.log_type === 'error' ? 'border-red-500/50 bg-red-950/20' : 'border-gray-800'}" data-type="${e.log_type}">
            <div class="flex items-center gap-2">
                <span class="text-gray-600">${timeAgo(e.created_at)}</span>
                <span class="${color} font-medium">[${e.log_type}]</span>
                <a href="/projects/${e.project_id}?tab=development" class="text-blue-400/70 hover:text-blue-300 truncate">${title}</a>
            </div>
            <div class="text-gray-400 mt-0.5 pl-4">${e.content.substring(0, 300)}${e.content.length > 300 ? '...' : ''}</div>
        </div>`;
    }

    function applyFilter() {
        const val = filter.value;
        document.querySelectorAll('.activity-entry').forEach(el => {
            el.style.display = (!val || el.dataset.type === val) ? '' : 'none';
        });
    }

    filter.addEventListener('change', applyFilter);

    async function refresh() {
        try {
            const url = lastTimestamp
                ? `/api/v1/activity?limit=50&since=${encodeURIComponent(lastTimestamp)}`
                : '/api/v1/activity?limit=50';
            const res = await fetch(url);
            const data = await res.json();

            if (!lastTimestamp && data.length === 0) {
                feed.innerHTML = '<div class="text-gray-600 text-center py-4">No agent activity yet</div>';
                return;
            }

            if (data.length > 0) {
                if (!lastTimestamp) feed.innerHTML = '';
                // data comes newest-first, reverse for chronological insert
                const sorted = [...data].reverse();
                for (const e of sorted) {
                    if (!allEntries.some(x => x.id === e.id)) {
                        allEntries.push(e);
                        feed.insertAdjacentHTML('afterbegin', renderEntry(e));
                    }
                }
                lastTimestamp = data[0].created_at;
                applyFilter();
            }
        } catch (e) {
            console.error('Activity feed error:', e);
        }
    }

    refresh();
    setInterval(refresh, 5000);
})();
</script>
{% endblock %}