{% extends "base.html" %}

{% block title %}Dashboard - Galangal Hub{% endblock %}

{% block content %}
<div class="space-y-8">
    <!-- Needs Attention Section -->
    {% if needs_attention %}
    <section id="needs-attention" hx-get="/partials/needs-attention" hx-trigger="every 5s" hx-swap="innerHTML">
        <h2 class="text-lg font-semibold text-yellow-400 mb-4 flex items-center">
            <span class="status-dot status-attention mr-2"></span>
            Needs Attention ({{ needs_attention|length }})
        </h2>
        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {% for agent in needs_attention %}
            <a href="/task/{{ agent.agent.agent_id }}/{{ agent.task.task_name }}"
               class="block bg-yellow-900/20 border border-yellow-700 rounded-lg p-4 hover:bg-yellow-900/30 transition">
                <div class="flex items-center justify-between mb-2">
                    <span class="font-medium">{{ agent.agent.agent_name }}</span>
                    <span class="text-xs text-yellow-400 bg-yellow-900/50 px-2 py-1 rounded">
                        Awaiting Approval
                    </span>
                </div>
                <div class="text-sm text-gray-400">{{ agent.agent.project_name }}</div>
                <div class="mt-2">
                    <div class="text-sm font-medium">{{ agent.task.task_name }}</div>
                    <div class="text-xs text-gray-500">Stage: {{ agent.task.stage }}</div>
                </div>
                <div class="mt-3 flex space-x-2">
                    <button onclick="event.preventDefault(); approveTask('{{ agent.agent.agent_id }}', '{{ agent.task.task_name }}')"
                            class="px-3 py-1 bg-green-600 hover:bg-green-700 rounded text-sm">
                        Approve
                    </button>
                    <button onclick="event.preventDefault(); rejectTask('{{ agent.agent.agent_id }}', '{{ agent.task.task_name }}')"
                            class="px-3 py-1 bg-red-600 hover:bg-red-700 rounded text-sm">
                        Reject
                    </button>
                </div>
            </a>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    <!-- Connected Agents -->
    <section id="agents" hx-get="/partials/agents" hx-trigger="every 10s" hx-swap="innerHTML">
        <h2 class="text-lg font-semibold text-gray-200 mb-4">
            Connected Agents ({{ agents|length }})
        </h2>
        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {% for agent in agents %}
            <a href="/agent/{{ agent.agent.agent_id }}"
               class="block bg-gray-800 border border-gray-700 rounded-lg p-4 hover:bg-gray-750 transition">
                <div class="flex items-center justify-between mb-2">
                    <div class="flex items-center">
                        <span class="status-dot {{ 'status-connected' if agent.connected else 'status-disconnected' }} mr-2"></span>
                        <span class="font-medium">{{ agent.agent.agent_name }}</span>
                    </div>
                    {% if agent.task %}
                    <span class="text-xs text-purple-400 bg-purple-900/50 px-2 py-1 rounded">
                        {{ agent.task.stage }}
                    </span>
                    {% endif %}
                </div>
                <div class="text-sm text-gray-400">{{ agent.agent.project_name }}</div>
                {% if agent.task %}
                <div class="mt-2 pt-2 border-t border-gray-700">
                    <div class="text-sm">{{ agent.task.task_name }}</div>
                    <div class="text-xs text-gray-500 truncate">{{ agent.task.task_description }}</div>
                </div>
                {% else %}
                <div class="mt-2 text-sm text-gray-500">No active task</div>
                {% endif %}
            </a>
            {% endfor %}

            {% if not agents %}
            <div class="col-span-full text-center py-8 text-gray-500">
                No agents connected. Start a workflow with hub enabled to see it here.
            </div>
            {% endif %}
        </div>
    </section>

    <!-- Recent Tasks -->
    <section>
        <h2 class="text-lg font-semibold text-gray-200 mb-4">Recent Tasks</h2>
        <div class="bg-gray-800 border border-gray-700 rounded-lg overflow-hidden">
            <table class="w-full">
                <thead class="bg-gray-750">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">Task</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">Agent</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">Type</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">Status</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">Started</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-700">
                    {% for task in recent_tasks %}
                    <tr class="hover:bg-gray-750">
                        <td class="px-4 py-3">
                            <a href="/task/{{ task.agent_id }}/{{ task.task_name }}" class="text-purple-400 hover:text-purple-300">
                                {{ task.task_name }}
                            </a>
                        </td>
                        <td class="px-4 py-3 text-sm text-gray-400">{{ task.agent_id[:8] }}...</td>
                        <td class="px-4 py-3 text-sm">{{ task.task_type }}</td>
                        <td class="px-4 py-3">
                            {% if task.completed_at %}
                            <span class="text-xs px-2 py-1 rounded {{ 'bg-green-900/50 text-green-400' if task.success else 'bg-red-900/50 text-red-400' }}">
                                {{ 'Complete' if task.success else 'Failed' }}
                            </span>
                            {% else %}
                            <span class="text-xs px-2 py-1 rounded bg-blue-900/50 text-blue-400">
                                In Progress
                            </span>
                            {% endif %}
                        </td>
                        <td class="px-4 py-3 text-sm text-gray-400">{{ task.started_at[:10] }}</td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="5" class="px-4 py-8 text-center text-gray-500">
                            No tasks recorded yet.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
</div>

<script>
async function approveTask(agentId, taskName) {
    try {
        const response = await fetch(`/api/actions/${agentId}/${taskName}/approve`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({})
        });
        if (response.ok) {
            htmx.trigger(document.body, 'refresh');
        } else {
            alert('Failed to approve task');
        }
    } catch (e) {
        alert('Error: ' + e.message);
    }
}

async function rejectTask(agentId, taskName) {
    const reason = prompt('Rejection reason:');
    if (!reason) return;

    try {
        const response = await fetch(`/api/actions/${agentId}/${taskName}/reject`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ reason })
        });
        if (response.ok) {
            htmx.trigger(document.body, 'refresh');
        } else {
            alert('Failed to reject task');
        }
    } catch (e) {
        alert('Error: ' + e.message);
    }
}
</script>
{% endblock %}