{% extends "base.html" %}

{% block title %}{{ agent.agent.agent_name }} - Galangal Hub{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Breadcrumb -->
    <nav class="text-sm text-gray-400">
        <a href="/" class="hover:text-gray-200">Dashboard</a>
        <span class="mx-2">/</span>
        <span class="text-gray-200">{{ agent.agent.agent_name }}</span>
    </nav>

    <!-- Agent Header -->
    <div class="bg-gray-800 border border-gray-700 rounded-lg p-6">
        <div class="flex items-start justify-between">
            <div class="flex items-center">
                <span class="status-dot {{ 'status-connected' if agent.connected else 'status-disconnected' }} mr-3"></span>
                <div>
                    <h1 class="text-2xl font-bold">{{ agent.agent.agent_name }}</h1>
                    <p class="text-gray-400">{{ agent.agent.project_name }}</p>
                </div>
            </div>
            <span class="px-3 py-1 rounded text-sm {{ 'bg-green-900/50 text-green-400' if agent.connected else 'bg-red-900/50 text-red-400' }}">
                {{ 'Connected' if agent.connected else 'Disconnected' }}
            </span>
        </div>

        <!-- Agent Info Grid -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
            <div>
                <div class="text-xs text-gray-500 uppercase">Hostname</div>
                <div class="text-sm">{{ agent.agent.hostname }}</div>
            </div>
            <div>
                <div class="text-xs text-gray-500 uppercase">Project Path</div>
                <div class="text-sm font-mono truncate" title="{{ agent.agent.project_path }}">{{ agent.agent.project_path }}</div>
            </div>
            <div>
                <div class="text-xs text-gray-500 uppercase">Connected Since</div>
                <div class="text-sm">{{ agent.agent.connected_at.strftime('%Y-%m-%d %H:%M') if agent.agent.connected_at else 'N/A' }}</div>
            </div>
            <div>
                <div class="text-xs text-gray-500 uppercase">Last Seen</div>
                <div class="text-sm">{{ agent.agent.last_seen.strftime('%Y-%m-%d %H:%M') if agent.agent.last_seen else 'N/A' }}</div>
            </div>
        </div>
    </div>

    <!-- Active Prompt -->
    {% if agent.current_prompt %}
    <div class="bg-gray-800 border border-gray-700 rounded-lg p-6" id="active-prompt"
         hx-get="/partials/agent/{{ agent.agent.agent_id }}/prompt" hx-trigger="every 3s" hx-swap="innerHTML">
        <h2 class="text-lg font-semibold mb-4">Active Prompt</h2>
        {% set prompt = agent.current_prompt %}
        {% set agent_id = agent.agent.agent_id %}
        {% set task_name = agent.task.task_name if agent.task else '' %}
        {% include "partials/prompt_card.html" %}
    </div>
    {% endif %}

    <!-- Current Task -->
    {% if agent.task %}
    <div class="bg-gray-800 border border-gray-700 rounded-lg p-6" id="current-task"
         hx-get="/partials/agent/{{ agent.agent.agent_id }}/task" hx-trigger="every 5s" hx-swap="innerHTML">
        <h2 class="text-lg font-semibold mb-4">Current Task</h2>
        <a href="/task/{{ agent.agent.agent_id }}/{{ agent.task.task_name }}" class="block hover:bg-gray-750 -m-2 p-2 rounded overflow-hidden">
            <div class="flex items-center justify-between gap-4">
                <div class="min-w-0 flex-1">
                    <div class="font-medium text-purple-400 truncate">{{ agent.task.task_name }}</div>
                    <div class="text-sm text-gray-400 truncate">{{ agent.task.task_description }}</div>
                </div>
                <div class="text-right shrink-0">
                    <div class="text-sm font-medium">Stage: {{ agent.task.stage }}</div>
                    <div class="text-xs text-gray-500">Attempt {{ agent.task.attempt }}</div>
                </div>
            </div>
            {% if agent.task.awaiting_approval and not agent.current_prompt %}
            <div class="mt-3 flex items-center justify-between">
                <div class="flex items-center">
                    <span class="status-dot status-attention mr-2"></span>
                    <span class="text-yellow-400 text-sm">Awaiting Approval</span>
                </div>
                <div class="flex gap-2" onclick="event.preventDefault(); event.stopPropagation();">
                    <button onclick="approveTask('{{ agent.agent.agent_id }}', '{{ agent.task.task_name }}')"
                            class="px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-sm rounded">
                        Approve
                    </button>
                    <button onclick="rejectTask('{{ agent.agent.agent_id }}', '{{ agent.task.task_name }}')"
                            class="px-3 py-1 bg-red-600 hover:bg-red-700 text-white text-sm rounded">
                        Reject
                    </button>
                </div>
            </div>
            {% endif %}
        </a>
    </div>
    {% else %}
    <div class="bg-gray-800 border border-gray-700 rounded-lg p-6">
        <h2 class="text-lg font-semibold mb-2">Current Task</h2>
        <p class="text-gray-500">No active task</p>
    </div>
    {% endif %}

    <!-- Artifacts -->
    {% if agent.artifacts %}
    <div class="bg-gray-800 border border-gray-700 rounded-lg p-6">
        <h2 class="text-lg font-semibold mb-4">Artifacts</h2>
        <div class="space-y-2">
            {% for name, content in agent.artifacts.items() %}
            <details class="bg-gray-900 rounded-lg group">
                <summary class="p-3 cursor-pointer flex items-center justify-between hover:bg-gray-850 rounded-lg">
                    <span class="font-medium text-purple-400">{{ name }}</span>
                    <span class="text-xs text-gray-500">{{ content|length }} chars</span>
                </summary>
                <div class="p-4 border-t border-gray-700">
                    <pre class="text-sm text-gray-300 whitespace-pre-wrap overflow-x-auto max-h-96">{{ content }}</pre>
                </div>
            </details>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Task History -->
    <div class="bg-gray-800 border border-gray-700 rounded-lg p-6">
        <h2 class="text-lg font-semibold mb-4">Task History</h2>
        <div class="space-y-2">
            {% for task in tasks %}
            <a href="/task/{{ agent.agent.agent_id }}/{{ task.task_name }}"
               class="block hover:bg-gray-750 -mx-2 px-2 py-2 rounded border-b border-gray-700 last:border-b-0">
                <div class="flex items-center justify-between">
                    <div>
                        <span class="font-medium">{{ task.task_name }}</span>
                        <span class="ml-2 text-xs text-gray-500">{{ task.task_type }}</span>
                    </div>
                    <div class="flex items-center space-x-4">
                        {% 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 %}
                        <span class="text-xs text-gray-500">{{ task.started_at[:10] }}</span>
                    </div>
                </div>
            </a>
            {% else %}
            <p class="text-gray-500 text-sm">No tasks recorded for this agent.</p>
            {% endfor %}
        </div>
    </div>

    <!-- Recent Events -->
    <div class="bg-gray-800 border border-gray-700 rounded-lg p-6">
        <h2 class="text-lg font-semibold mb-4">Recent Events</h2>
        <div class="space-y-1 max-h-64 overflow-y-auto">
            {% for event in events[:20] %}
            <div class="flex items-start text-sm">
                <span class="text-gray-500 w-40 shrink-0">{{ event.timestamp[:19] }}</span>
                <span class="text-purple-400 w-24 shrink-0">{{ event.event_type }}</span>
                <span class="text-gray-400 truncate">{{ event.task_name or '' }}</span>
            </div>
            {% else %}
            <p class="text-gray-500 text-sm">No events recorded.</p>
            {% endfor %}
        </div>
    </div>
</div>

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

async function rejectTask(agentId, taskName) {
    const reason = prompt('Rejection reason (optional):');
    if (reason === null) return; // Cancelled
    try {
        const response = await fetch(`/api/actions/${agentId}/${taskName}/reject`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ reason: reason })
        });
        if (response.ok) {
            location.reload();
        } else {
            alert('Failed to reject task');
        }
    } catch (e) {
        alert('Error: ' + e.message);
    }
}
</script>
{% endblock %}