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

{% block dashboard_header %}
<div class="flex items-center justify-between">
    <div>
        <h1 class="text-2xl font-bold text-gray-900">Reports</h1>
        <p class="mt-1 text-gray-600">Review and resolve tool reports</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="space-y-6">
    <!-- Status Filter -->
    <div class="flex space-x-2">
        <a href="?status=pending" class="px-4 py-2 rounded-md text-sm font-medium {% if status_filter == 'pending' %}bg-indigo-600 text-white{% else %}bg-gray-100 text-gray-700 hover:bg-gray-200{% endif %}">
            Pending
        </a>
        <a href="?status=resolved" class="px-4 py-2 rounded-md text-sm font-medium {% if status_filter == 'resolved' %}bg-indigo-600 text-white{% else %}bg-gray-100 text-gray-700 hover:bg-gray-200{% endif %}">
            Resolved
        </a>
        <a href="?status=" class="px-4 py-2 rounded-md text-sm font-medium {% if not status_filter %}bg-indigo-600 text-white{% else %}bg-gray-100 text-gray-700 hover:bg-gray-200{% endif %}">
            All
        </a>
    </div>

    <div class="bg-white rounded-lg border border-gray-200">
        {% if reports %}
        <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">Reason</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Reporter</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</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 report in reports %}
                    <tr id="report-row-{{ report.id }}" class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">{{ report.tool }}</div>
                            <div class="text-sm text-gray-500">v{{ report.version }}</div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="text-sm text-gray-900">{{ report.reason }}</div>
                            {% if report.details %}
                            <div class="text-xs text-gray-500 mt-1 max-w-xs truncate">{{ report.details }}</div>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ report.reporter_name or 'Anonymous' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ report.created_at[:10] if report.created_at else 'Unknown' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
                                {% if report.status == 'pending' %}bg-yellow-100 text-yellow-800
                                {% else %}bg-green-100 text-green-800{% endif %}">
                                {{ report.status }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                            {% if report.status == 'pending' %}
                            <button onclick="resolveReport({{ report.id }}, {{ report.tool_id }})" class="text-indigo-600 hover:text-indigo-900">Resolve</button>
                            {% else %}
                            <span class="text-gray-400">{{ report.resolution_note or 'Resolved' }}</span>
                            {% endif %}
                        </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 space-x-2">
                {% if meta.page > 1 %}
                <a href="?page={{ meta.page - 1 }}&status={{ status_filter }}" class="px-3 py-1 border rounded text-sm hover:bg-gray-100">Previous</a>
                {% endif %}
                {% if meta.page < meta.total_pages %}
                <a href="?page={{ meta.page + 1 }}&status={{ status_filter }}" class="px-3 py-1 border rounded text-sm hover:bg-gray-100">Next</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 reports</h3>
            <p class="mt-1 text-sm text-gray-500">No reports matching this filter.</p>
        </div>
        {% endif %}
    </div>
</div>

<!-- Resolve Modal -->
<div id="resolve-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">Resolve Report</h3>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Action</label>
                <select id="resolve-action" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option value="dismiss">Dismiss (no action)</option>
                    <option value="warn">Warn publisher</option>
                    <option value="remove_tool">Remove tool</option>
                    <option value="ban_publisher">Ban publisher</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Note (optional)</label>
                <textarea id="resolve-note" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Resolution notes"></textarea>
            </div>
            <div class="mt-4 flex justify-end space-x-3">
                <button onclick="closeResolveModal()" class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-500">Cancel</button>
                <button onclick="confirmResolve()" class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700">Resolve</button>
            </div>
        </div>
    </div>
</div>

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

function resolveReport(reportId, toolId) {
    currentReportId = reportId;
    currentToolId = toolId;
    document.getElementById('resolve-modal').classList.remove('hidden');
    document.getElementById('resolve-action').value = 'dismiss';
    document.getElementById('resolve-note').value = '';
}

function closeResolveModal() {
    document.getElementById('resolve-modal').classList.add('hidden');
    currentReportId = null;
    currentToolId = null;
}

async function confirmResolve() {
    const action = document.getElementById('resolve-action').value;
    const note = document.getElementById('resolve-note').value.trim();

    try {
        const response = await fetch(`/api/v1/admin/reports/${currentReportId}/resolve`, {
            method: 'POST',
            headers: {
                'Authorization': 'Bearer {{ session.get("auth_token") }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ action, note })
        });
        if (response.ok) {
            location.reload();
        } else {
            const data = await response.json();
            alert(data.error?.message || 'Failed to resolve report');
        }
    } catch (error) {
        alert('Network error');
    }
}
</script>
{% endblock %}