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

    <!-- Create Task -->
    {% if agent.connected and not agent.task %}
    <div class="bg-gray-800 border border-gray-700 rounded-lg p-6">
        <h2 class="text-lg font-semibold mb-4">Create New Task</h2>

        <!-- Tab buttons -->
        <div class="flex border-b border-gray-700 mb-4">
            <button id="tab-issue" onclick="showTab('issue')"
                    class="px-4 py-2 text-sm font-medium border-b-2 border-purple-500 text-purple-400">
                From GitHub Issue
            </button>
            <button id="tab-manual" onclick="showTab('manual')"
                    class="px-4 py-2 text-sm font-medium border-b-2 border-transparent text-gray-400 hover:text-gray-200">
                Manual
            </button>
        </div>

        <!-- GitHub Issue Tab -->
        <div id="panel-issue" class="space-y-4">
            <div>
                <label class="block text-sm text-gray-400 mb-1">GitHub Issue Number</label>
                <input type="number" id="github-issue" placeholder="e.g. 123"
                       class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm focus:border-purple-500 focus:outline-none">
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-1">Repository (owner/repo)</label>
                <input type="text" id="github-repo" placeholder="e.g. owner/repo"
                       class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm focus:border-purple-500 focus:outline-none">
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-1">Task Type</label>
                <select id="issue-task-type"
                        class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm focus:border-purple-500 focus:outline-none">
                    <option value="feature">Feature</option>
                    <option value="bug_fix">Bug Fix</option>
                    <option value="refactor">Refactor</option>
                    <option value="chore">Chore</option>
                    <option value="docs">Docs</option>
                    <option value="hotfix">Hotfix</option>
                </select>
            </div>
            <button onclick="createTaskFromIssue('{{ agent.agent.agent_id }}')"
                    class="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded text-sm font-medium">
                Create Task from Issue
            </button>
        </div>

        <!-- Manual Tab -->
        <div id="panel-manual" class="space-y-4 hidden">
            <div>
                <label class="block text-sm text-gray-400 mb-1">Task Name</label>
                <input type="text" id="task-name" placeholder="e.g. add-user-authentication"
                       class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm focus:border-purple-500 focus:outline-none">
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-1">Description</label>
                <textarea id="task-description" rows="3" placeholder="Describe what needs to be done..."
                          class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm focus:border-purple-500 focus:outline-none resize-none"></textarea>
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-1">Task Type</label>
                <select id="manual-task-type"
                        class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm focus:border-purple-500 focus:outline-none">
                    <option value="feature">Feature</option>
                    <option value="bug_fix">Bug Fix</option>
                    <option value="refactor">Refactor</option>
                    <option value="chore">Chore</option>
                    <option value="docs">Docs</option>
                    <option value="hotfix">Hotfix</option>
                </select>
            </div>
            <button onclick="createTaskManual('{{ agent.agent.agent_id }}')"
                    class="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded text-sm font-medium">
                Create Task
            </button>
        </div>
    </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);
    }
}

function showTab(tab) {
    // Update tab buttons
    document.getElementById('tab-issue').classList.toggle('border-purple-500', tab === 'issue');
    document.getElementById('tab-issue').classList.toggle('text-purple-400', tab === 'issue');
    document.getElementById('tab-issue').classList.toggle('border-transparent', tab !== 'issue');
    document.getElementById('tab-issue').classList.toggle('text-gray-400', tab !== 'issue');

    document.getElementById('tab-manual').classList.toggle('border-purple-500', tab === 'manual');
    document.getElementById('tab-manual').classList.toggle('text-purple-400', tab === 'manual');
    document.getElementById('tab-manual').classList.toggle('border-transparent', tab !== 'manual');
    document.getElementById('tab-manual').classList.toggle('text-gray-400', tab !== 'manual');

    // Show/hide panels
    document.getElementById('panel-issue').classList.toggle('hidden', tab !== 'issue');
    document.getElementById('panel-manual').classList.toggle('hidden', tab !== 'manual');
}

async function createTaskFromIssue(agentId) {
    const issue = document.getElementById('github-issue').value;
    const repo = document.getElementById('github-repo').value;
    const taskType = document.getElementById('issue-task-type').value;

    if (!issue) {
        alert('Please enter a GitHub issue number');
        return;
    }
    if (!repo) {
        alert('Please enter the repository (owner/repo)');
        return;
    }

    try {
        const response = await fetch(`/api/actions/${agentId}/create-task`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                github_issue: parseInt(issue),
                github_repo: repo,
                task_type: taskType
            })
        });

        if (response.ok) {
            alert('Task creation request sent! The agent will start the task.');
            location.reload();
        } else {
            const data = await response.json();
            alert('Failed to create task: ' + (data.detail || 'Unknown error'));
        }
    } catch (e) {
        alert('Error: ' + e.message);
    }
}

async function createTaskManual(agentId) {
    const taskName = document.getElementById('task-name').value;
    const taskDescription = document.getElementById('task-description').value;
    const taskType = document.getElementById('manual-task-type').value;

    if (!taskName) {
        alert('Please enter a task name');
        return;
    }

    try {
        const response = await fetch(`/api/actions/${agentId}/create-task`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                task_name: taskName,
                task_description: taskDescription,
                task_type: taskType
            })
        });

        if (response.ok) {
            alert('Task creation request sent! The agent will start the task.');
            location.reload();
        } else {
            const data = await response.json();
            alert('Failed to create task: ' + (data.detail || 'Unknown error'));
        }
    } catch (e) {
        alert('Error: ' + e.message);
    }
}
</script>
{% endblock %}