{% 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>

    <!-- 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 %}
            <div class="mt-3 flex items-center">
                <span class="status-dot status-attention mr-2"></span>
                <span class="text-yellow-400 text-sm">Awaiting Approval</span>
            </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 %}

    <!-- 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>
{% endblock %}