{% 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 class="flex-1 min-w-0">
                <h1 class="text-2xl font-bold">{{ task.task_name }}</h1>
                {% if task.task_description %}
                <details class="mt-2 group">
                    <summary class="cursor-pointer text-gray-400 hover:text-gray-300 text-sm flex items-center">
                        <svg class="w-4 h-4 mr-1 transform group-open:rotate-90 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                        Show Description
                    </summary>
                    <div class="mt-3 p-4 bg-gray-900 rounded-lg">
                        <div id="task-description" class="markdown-content text-gray-300 text-sm"></div>
                    </div>
                </details>
                {% endif %}
            </div>
            <div class="flex items-center space-x-2 ml-4 shrink-0">
                <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" id="artifacts-container">
            {% for name, content in agent.artifacts.items() %}
            <details class="bg-gray-900 rounded-lg group artifact-item" data-artifact-name="{{ name }}">
                <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>
                    <div class="flex items-center gap-2">
                        <button onclick="event.stopPropagation(); toggleArtifactView(this)" class="text-xs px-2 py-1 bg-gray-700 hover:bg-gray-600 rounded">
                            Raw
                        </button>
                        <span class="text-xs text-gray-500">{{ content|length }} chars</span>
                    </div>
                </summary>
                <div class="p-4 border-t border-gray-700">
                    <div class="artifact-rendered markdown-content text-sm text-gray-300 max-h-96 overflow-y-auto"></div>
                    <pre class="artifact-raw text-sm text-gray-300 whitespace-pre-wrap overflow-x-auto max-h-96 hidden">{{ 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);
    }
}

// Render task description as markdown
document.addEventListener('DOMContentLoaded', function() {
    const descriptionEl = document.getElementById('task-description');
    if (descriptionEl && typeof marked !== 'undefined') {
        const rawDescription = {{ task.task_description|tojson|safe }};
        if (rawDescription) {
            descriptionEl.innerHTML = marked.parse(rawDescription);
        }
    }

    // Render artifacts as markdown
    renderArtifacts();
});

// Artifact data for rendering
const artifactContents = {
    {% for name, content in (agent.artifacts if agent and agent.artifacts else {}).items() %}
    "{{ name }}": {{ content|tojson|safe }},
    {% endfor %}
};

function renderArtifacts() {
    if (typeof marked === 'undefined') return;

    document.querySelectorAll('.artifact-item').forEach(item => {
        const name = item.dataset.artifactName;
        const content = artifactContents[name];
        const renderedEl = item.querySelector('.artifact-rendered');

        if (content && renderedEl) {
            try {
                renderedEl.innerHTML = marked.parse(content);
            } catch (e) {
                // Fall back to pre-formatted text if markdown fails
                renderedEl.textContent = content;
            }
        }
    });
}

function toggleArtifactView(button) {
    const details = button.closest('.artifact-item');
    const rendered = details.querySelector('.artifact-rendered');
    const raw = details.querySelector('.artifact-raw');

    if (raw.classList.contains('hidden')) {
        raw.classList.remove('hidden');
        rendered.classList.add('hidden');
        button.textContent = 'Formatted';
    } else {
        raw.classList.add('hidden');
        rendered.classList.remove('hidden');
        button.textContent = 'Raw';
    }
}
</script>
{% endblock %}