{% extends "dashboard/base.html" %}

{% block dashboard_header %}
<div class="flex items-center justify-between">
    <div>
        <h1 class="text-2xl font-bold text-gray-900">Pending Tools</h1>
        <p class="mt-1 text-gray-600">Review and approve submitted tools</p>
    </div>
    <a href="{{ url_for('web.admin_dashboard') }}" class="text-sm text-indigo-600 hover:text-indigo-700">&larr; Back to Admin</a>
</div>
{% endblock %}

{% block dashboard_content %}
<div class="bg-white rounded-lg border border-gray-200">
    {% if tools %}
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tool</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Publisher</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Scrutiny</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Submitted</th>
                    <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for tool in tools %}
                <tr id="tool-row-{{ tool.id }}" class="hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <div>
                                <button onclick="viewTool({{ tool.id }})" class="text-sm font-medium text-indigo-600 hover:text-indigo-800 hover:underline">
                                    {{ tool.owner }}/{{ tool.name }}
                                </button>
                                <div class="text-sm text-gray-500">v{{ tool.version }}</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">{{ tool.publisher_name }}</div>
                        <div class="text-xs text-gray-500">{{ tool.category or 'Uncategorized' }}</div>
                    </td>
                    <td class="px-6 py-4">
                        {% if tool.scrutiny_status == 'approved' %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                            Passed
                        </span>
                        {% elif tool.scrutiny_status == 'pending_review' %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                            Warnings
                        </span>
                        {% else %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                            {{ tool.scrutiny_status or 'N/A' }}
                        </span>
                        {% endif %}
                        {% if tool.scrutiny_report and tool.scrutiny_report.findings %}
                        <button onclick="toggleFindings({{ tool.id }})" class="ml-2 text-xs text-indigo-600 hover:text-indigo-800">
                            ({{ tool.scrutiny_report.findings | selectattr('result', 'equalto', 'warning') | list | length }} warnings)
                        </button>
                        <div id="findings-{{ tool.id }}" class="hidden mt-2 text-xs space-y-1 max-w-md">
                            {% for finding in tool.scrutiny_report.findings %}
                            {% if finding.result == 'warning' %}
                            <div class="p-2 rounded bg-yellow-50">
                                <span class="font-medium">{{ finding.check }}:</span>
                                <span class="text-yellow-700">{{ finding.message }}</span>
                                {% if finding.suggestion %}
                                <div class="text-gray-500 italic text-xs">{{ finding.suggestion }}</div>
                                {% endif %}
                            </div>
                            {% endif %}
                            {% endfor %}
                        </div>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {{ tool.published_at[:10] if tool.published_at else 'Unknown' }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <button onclick="approveTool({{ tool.id }})" class="text-green-600 hover:text-green-900 mr-3">Approve</button>
                        <button onclick="rejectTool({{ tool.id }})" class="text-red-600 hover:text-red-900">Reject</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    {% if meta.total_pages > 1 %}
    <div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200">
        <div class="text-sm text-gray-700">
            Page {{ meta.page }} of {{ meta.total_pages }} ({{ meta.total }} total)
        </div>
        <div class="flex items-center space-x-2">
            <!-- First/Previous -->
            {% if meta.page > 1 %}
            <a href="?page=1" class="px-2 py-1 border rounded text-sm hover:bg-gray-100" title="First page">&laquo;</a>
            <a href="?page={{ meta.page - 1 }}" class="px-3 py-1 border rounded text-sm hover:bg-gray-100">Previous</a>
            {% endif %}

            <!-- Page numbers -->
            {% set start_page = [1, meta.page - 2] | max %}
            {% set end_page = [meta.total_pages, meta.page + 2] | min %}

            {% if start_page > 1 %}
            <span class="text-gray-400">...</span>
            {% endif %}

            {% for p in range(start_page, end_page + 1) %}
            {% if p == meta.page %}
            <span class="px-3 py-1 bg-indigo-600 text-white rounded text-sm">{{ p }}</span>
            {% else %}
            <a href="?page={{ p }}" class="px-3 py-1 border rounded text-sm hover:bg-gray-100">{{ p }}</a>
            {% endif %}
            {% endfor %}

            {% if end_page < meta.total_pages %}
            <span class="text-gray-400">...</span>
            {% endif %}

            <!-- Next/Last -->
            {% if meta.page < meta.total_pages %}
            <a href="?page={{ meta.page + 1 }}" class="px-3 py-1 border rounded text-sm hover:bg-gray-100">Next</a>
            <a href="?page={{ meta.total_pages }}" class="px-2 py-1 border rounded text-sm hover:bg-gray-100" title="Last page">&raquo;</a>
            {% endif %}
        </div>
    </div>
    {% endif %}
    {% else %}
    <div class="text-center py-12">
        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <h3 class="mt-2 text-sm font-medium text-gray-900">No pending tools</h3>
        <p class="mt-1 text-sm text-gray-500">All submitted tools have been reviewed.</p>
    </div>
    {% endif %}
</div>

<!-- Tool Detail Modal -->
<div id="detail-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
    <div class="relative top-10 mx-auto p-6 border max-w-4xl shadow-lg rounded-md bg-white mb-10">
        <div class="flex items-center justify-between mb-4">
            <h3 id="detail-title" class="text-lg font-medium text-gray-900">Tool Details</h3>
            <button onclick="closeDetailModal()" class="text-gray-400 hover:text-gray-600">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <div id="detail-loading" class="py-8 text-center text-gray-500">Loading...</div>
        <div id="detail-content" class="hidden">
            <!-- Description -->
            <div class="mb-6">
                <h4 class="text-sm font-medium text-gray-700 mb-2">Description</h4>
                <p id="detail-description" class="text-sm text-gray-600"></p>
            </div>

            <!-- Arguments -->
            <div id="detail-args-section" class="mb-6">
                <h4 class="text-sm font-medium text-gray-700 mb-2">Arguments</h4>
                <div id="detail-args" class="bg-gray-50 rounded-md p-3 text-sm font-mono overflow-x-auto"></div>
            </div>

            <!-- Steps -->
            <div id="detail-steps-section" class="mb-6">
                <h4 class="text-sm font-medium text-gray-700 mb-2">Steps</h4>
                <div id="detail-steps" class="space-y-3"></div>
            </div>

            <!-- README -->
            <div id="detail-readme-section" class="mb-6">
                <h4 class="text-sm font-medium text-gray-700 mb-2">README</h4>
                <div id="detail-readme" class="bg-gray-50 rounded-md p-4 text-sm prose prose-sm max-w-none overflow-auto max-h-64"></div>
            </div>
        </div>
        <div class="mt-6 flex justify-end space-x-3 border-t pt-4">
            <button onclick="closeDetailModal()" class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-500">Close</button>
            <button id="detail-approve-btn" class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700">Approve</button>
            <button id="detail-reject-btn" class="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-md hover:bg-red-700">Reject</button>
        </div>
    </div>
</div>

<!-- Reject Modal -->
<div id="reject-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Reject Tool</h3>
            <textarea id="reject-reason" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Reason for rejection (required)"></textarea>
            <div class="mt-4 flex justify-end space-x-3">
                <button onclick="closeRejectModal()" class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-500">Cancel</button>
                <button onclick="confirmReject()" class="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-md hover:bg-red-700">Reject</button>
            </div>
        </div>
    </div>
</div>

<script>
let currentToolId = null;
let currentDetailToolId = null;

function toggleFindings(toolId) {
    const el = document.getElementById(`findings-${toolId}`);
    el.classList.toggle('hidden');
}

async function viewTool(toolId) {
    currentDetailToolId = toolId;
    document.getElementById('detail-modal').classList.remove('hidden');
    document.getElementById('detail-loading').classList.remove('hidden');
    document.getElementById('detail-content').classList.add('hidden');

    try {
        const response = await fetch(`/api/v1/admin/tools/${toolId}`, {
            headers: {
                'Authorization': 'Bearer {{ session.get("auth_token") }}'
            }
        });
        if (!response.ok) {
            throw new Error('Failed to load tool details');
        }
        const result = await response.json();
        const tool = result.data;

        // Update title
        document.getElementById('detail-title').textContent = `${tool.owner}/${tool.name} v${tool.version}`;

        // Description
        document.getElementById('detail-description').textContent = tool.description || 'No description';

        // Arguments
        const argsSection = document.getElementById('detail-args-section');
        const argsDiv = document.getElementById('detail-args');
        if (tool.config.arguments && tool.config.arguments.length > 0) {
            argsSection.classList.remove('hidden');
            argsDiv.innerHTML = tool.config.arguments.map(arg => {
                const required = arg.required ? '<span class="text-red-600">*</span>' : '';
                return `<div class="mb-2"><span class="text-indigo-600">${arg.flag || arg.variable}</span>${required} - ${arg.description || 'No description'}</div>`;
            }).join('');
        } else {
            argsSection.classList.add('hidden');
        }

        // Steps
        const stepsSection = document.getElementById('detail-steps-section');
        const stepsDiv = document.getElementById('detail-steps');
        if (tool.config.steps && tool.config.steps.length > 0) {
            stepsSection.classList.remove('hidden');
            stepsDiv.innerHTML = tool.config.steps.map((step, idx) => {
                let content = '';
                if (step.type === 'prompt') {
                    content = `<div class="text-xs text-gray-500 mb-1">Prompt Step</div>
                               <pre class="bg-white p-2 rounded border text-xs overflow-x-auto whitespace-pre-wrap">${escapeHtml(step.content || '')}</pre>`;
                } else if (step.type === 'code') {
                    content = `<div class="text-xs text-gray-500 mb-1">Code Step${step.output_var ? ` → ${step.output_var}` : ''}</div>
                               <pre class="bg-gray-900 text-green-400 p-2 rounded text-xs overflow-x-auto"><code>${escapeHtml(step.code || '')}</code></pre>`;
                } else {
                    content = `<div class="text-xs text-gray-500">${step.type} step</div>`;
                }
                return `<div class="bg-gray-50 p-3 rounded-md">
                    <div class="text-xs font-medium text-gray-700 mb-2">Step ${idx + 1}</div>
                    ${content}
                </div>`;
            }).join('');
        } else {
            stepsSection.classList.add('hidden');
        }

        // README
        const readmeSection = document.getElementById('detail-readme-section');
        const readmeDiv = document.getElementById('detail-readme');
        if (tool.readme) {
            readmeSection.classList.remove('hidden');
            readmeDiv.innerHTML = `<pre class="whitespace-pre-wrap text-xs">${escapeHtml(tool.readme)}</pre>`;
        } else {
            readmeSection.classList.add('hidden');
        }

        // Wire up approve/reject buttons
        document.getElementById('detail-approve-btn').onclick = () => {
            closeDetailModal();
            approveTool(toolId);
        };
        document.getElementById('detail-reject-btn').onclick = () => {
            closeDetailModal();
            rejectTool(toolId);
        };

        document.getElementById('detail-loading').classList.add('hidden');
        document.getElementById('detail-content').classList.remove('hidden');
    } catch (error) {
        console.error('Error loading tool:', error);
        document.getElementById('detail-loading').textContent = 'Error loading tool details';
    }
}

function closeDetailModal() {
    document.getElementById('detail-modal').classList.add('hidden');
    currentDetailToolId = null;
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

async function approveTool(toolId) {
    if (!confirm('Approve this tool?')) return;
    try {
        const response = await fetch(`/api/v1/admin/tools/${toolId}/approve`, {
            method: 'POST',
            headers: {
                'Authorization': 'Bearer {{ session.get("auth_token") }}',
                'Content-Type': 'application/json'
            }
        });
        if (response.ok) {
            const row = document.getElementById(`tool-row-${toolId}`);
            if (row) row.remove();
            location.reload();
        } else {
            const data = await response.json();
            alert(data.error?.message || 'Failed to approve tool');
        }
    } catch (error) {
        console.error('Approve error:', error);
        alert('Error: ' + (error.message || 'Unknown error occurred'));
    }
}

function rejectTool(toolId) {
    currentToolId = toolId;
    document.getElementById('reject-modal').classList.remove('hidden');
    document.getElementById('reject-reason').value = '';
}

function closeRejectModal() {
    document.getElementById('reject-modal').classList.add('hidden');
    currentToolId = null;
}

async function confirmReject() {
    const reason = document.getElementById('reject-reason').value.trim();
    if (!reason) {
        alert('Rejection reason is required');
        return;
    }
    try {
        const response = await fetch(`/api/v1/admin/tools/${currentToolId}/reject`, {
            method: 'POST',
            headers: {
                'Authorization': 'Bearer {{ session.get("auth_token") }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ reason })
        });
        if (response.ok) {
            closeRejectModal();
            const row = document.getElementById(`tool-row-${currentToolId}`);
            if (row) row.remove();
            location.reload();
        } else {
            const data = await response.json();
            alert(data.error?.message || 'Failed to reject tool');
        }
    } catch (error) {
        console.error('Reject error:', error);
        alert('Error: ' + (error.message || 'Unknown error occurred'));
    }
}
</script>
{% endblock %}