{% extends "base.html" %}

{% block title %}{{ task.task_name if task else 'Task' }} - 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>
        {% if agent %}
        <span class="mx-2">/</span>
        <a href="/agent/{{ agent.agent.agent_id }}" class="hover:text-gray-200">{{ agent.agent.agent_name }}</a>
        {% endif %}
        <span class="mx-2">/</span>
        <span class="text-gray-200">{{ task.task_name }}</span>
    </nav>

    <!-- Task Header -->
    <div class="bg-gray-800 border border-gray-700 rounded-lg p-6">
        <div class="flex items-start justify-between">
            <div>
                <h1 class="text-2xl font-bold">{{ task.task_name }}</h1>
                <p class="text-gray-400 mt-1">{{ task.task_description }}</p>
            </div>
            <div class="flex items-center space-x-2">
                <span class="px-3 py-1 rounded text-sm {{ 'bg-blue-900/50 text-blue-400' if active else 'bg-gray-700 text-gray-400' }}">
                    {{ 'Active' if active else 'Completed' }}
                </span>
                <span class="px-3 py-1 rounded text-sm bg-purple-900/50 text-purple-400">
                    {{ task.task_type }}
                </span>
            </div>
        </div>

        <!-- Task 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">Stage</div>
                <div class="text-lg font-semibold text-purple-400">{{ task.stage }}</div>
            </div>
            <div>
                <div class="text-xs text-gray-500 uppercase">Attempt</div>
                <div class="text-lg font-semibold">{{ task.attempt }}</div>
            </div>
            <div>
                <div class="text-xs text-gray-500 uppercase">Started</div>
                <div class="text-sm">{{ task.started_at[:16] }}</div>
            </div>
            {% if task.github_issue %}
            <div>
                <div class="text-xs text-gray-500 uppercase">GitHub Issue</div>
                <a href="https://github.com/{{ task.github_repo }}/issues/{{ task.github_issue }}"
                   target="_blank"
                   class="text-blue-400 hover:text-blue-300">
                    #{{ task.github_issue }}
                </a>
            </div>
            {% endif %}
        </div>

        <!-- Action Buttons -->
        {% if active and task.awaiting_approval and not (agent and agent.current_prompt) %}
        <div class="mt-6 pt-6 border-t border-gray-700">
            <div class="flex items-center space-x-4">
                <span class="text-yellow-400 flex items-center">
                    <span class="status-dot status-attention mr-2"></span>
                    Awaiting Approval
                </span>
                <button onclick="approveTask('{{ agent.agent.agent_id }}', '{{ task.task_name }}')"
                        class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded font-medium">
                    Approve
                </button>
                <button onclick="rejectTask('{{ agent.agent.agent_id }}', '{{ task.task_name }}')"
                        class="px-4 py-2 bg-red-600 hover:bg-red-700 rounded font-medium">
                    Reject
                </button>
                <button onclick="skipStage('{{ agent.agent.agent_id }}', '{{ task.task_name }}')"
                        class="px-4 py-2 bg-gray-600 hover:bg-gray-700 rounded font-medium">
                    Skip Stage
                </button>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Active Prompt -->
    {% if active and agent and agent.current_prompt %}
    <div class="bg-gray-800 border border-gray-700 rounded-lg p-6">
        <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 = task.task_name %}
        {% include "partials/prompt_card.html" %}
    </div>
    {% endif %}

    <!-- Artifacts -->
    {% if active and agent and 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 %}

    <!-- Stage Durations -->
    {% if task.stage_durations %}
    <div class="bg-gray-800 border border-gray-700 rounded-lg p-6">
        <h2 class="text-lg font-semibold mb-4">Stage Durations</h2>
        <div class="space-y-2">
            {% for stage, duration in task.stage_durations.items() %}
            <div class="flex items-center">
                <span class="w-24 text-sm text-gray-400">{{ stage }}</span>
                <div class="flex-1 bg-gray-700 rounded h-4 overflow-hidden">
                    <div class="bg-purple-600 h-full" style="width: {{ [duration / 3600 * 100, 100]|min }}%"></div>
                </div>
                <span class="ml-4 text-sm text-gray-400">{{ (duration / 60)|round(1) }}m</span>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Last Failure -->
    {% if task.last_failure %}
    <div class="bg-red-900/20 border border-red-800 rounded-lg p-6">
        <h2 class="text-lg font-semibold text-red-400 mb-2">Last Failure</h2>
        <pre class="text-sm text-gray-300 whitespace-pre-wrap overflow-x-auto">{{ task.last_failure }}</pre>
    </div>
    {% endif %}

    <!-- Event Log -->
    <div class="bg-gray-800 border border-gray-700 rounded-lg p-6">
        <h2 class="text-lg font-semibold mb-4">Event Log</h2>
        <div class="space-y-2 max-h-96 overflow-y-auto">
            {% for event in events %}
            <div class="flex items-start text-sm border-l-2 border-gray-700 pl-4 py-1 {{ 'border-red-600' if event.event_type == 'stage_fail' else ('border-green-600' if event.event_type == 'stage_complete' else '') }}">
                <span class="text-gray-500 w-40 shrink-0">{{ event.timestamp[:19] }}</span>
                <span class="text-gray-300">{{ event.event_type }}</span>
                {% if event.data %}
                <span class="ml-2 text-gray-500">{{ event.data }}</span>
                {% endif %}
            </div>
            {% else %}
            <div class="text-gray-500 text-sm">No events recorded.</div>
            {% 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' },
            body: JSON.stringify({})
        });
        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:');
    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) {
            location.reload();
        } else {
            alert('Failed to reject task');
        }
    } catch (e) {
        alert('Error: ' + e.message);
    }
}

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