<?php
require_once 'includes/auth.php';
require_once 'includes/header.php';
?>

<div x-data="reportsPage()" class="space-y-6">
    <div class="flex items-center justify-between gap-4">
        <div>
            <h3 class="text-3xl font-medium text-gray-100">Report Center</h3>
            <p class="text-sm text-gray-400 mt-1">Review and resolve user complaints</p>
        </div>
        <span class="px-4 py-2 bg-red-500/20 text-red-400 rounded-full text-sm font-bold border border-red-500/30">
            <i class="fas fa-exclamation-circle mr-2"></i> <span x-text="reports.length"></span> Pending
        </span>
    </div>

    <div class="bg-surface rounded-xl shadow-lg border border-gray-700 overflow-hidden">
        <table class="w-full text-left border-collapse">
            <thead>
                <tr class="bg-darker/50 text-gray-400 text-xs uppercase tracking-wider border-b border-gray-700">
                    <th class="p-4">ID</th>
                    <th class="p-4">Reporter</th>
                    <th class="p-4">Reported User</th>
                    <th class="p-4">Reason</th>
                    <th class="p-4">Date</th>
                    <th class="p-4 text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-700">
                <template x-for="report in reports" :key="report.id">
                    <tr class="hover:bg-dark/50 transition-colors">
                        <td class="p-4 font-mono text-gray-500" x-text="'#'+report.id"></td>
                        <td class="p-4">
                            <div class="flex items-center gap-2">
                                <img :src="report.reporter_avatar || 'https://ui-avatars.com/api/?name=User'" class="w-7 h-7 rounded-full border border-gray-600 object-cover">
                                <div class="min-w-0">
                                    <div class="text-white font-medium truncate" x-text="report.reporter_name || 'Unknown'"></div>
                                    <div class="text-[11px] text-gray-500 font-mono" x-text="'ID: ' + report.reporter_id"></div>
                                </div>
                            </div>
                        </td>
                        <td class="p-4">
                            <div class="flex items-center gap-2">
                                <img :src="report.reported_avatar || 'https://ui-avatars.com/api/?name=User'" class="w-7 h-7 rounded-full border border-gray-600 object-cover">
                                <div class="min-w-0">
                                    <div class="text-red-300 font-bold truncate" x-text="report.reported_name || 'Unknown'"></div>
                                    <div class="text-[11px] text-gray-500 font-mono" x-text="'ID: ' + report.reported_user_id"></div>
                                </div>
                            </div>
                        </td>
                        <td class="p-4">
                            <span class="bg-dark px-2 py-1 rounded text-sm text-gray-200 border border-gray-600" x-text="report.reason"></span>
                        </td>
                        <td class="p-4 text-sm text-gray-400" x-text="formatDateTime(report.created_at)"></td>
                        <td class="p-4">
                            <div class="flex justify-end gap-2">
                                <button @click="viewContext(report)"
                                        class="p-2 bg-primary/20 text-primary hover:bg-primary hover:text-white rounded transition-colors"
                                        title="View Conversation">
                                    <i class="fas fa-comments"></i>
                                </button>
                                <button @click="banUser(report.reported_user_id)"
                                        class="p-2 bg-red-500/10 text-red-400 hover:bg-red-500 hover:text-white rounded transition-colors border border-red-500/30"
                                        title="Ban Reported User">
                                    <i class="fas fa-ban"></i>
                                </button>
                                <button @click="closeReport(report.id)"
                                        class="p-2 bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500 hover:text-white rounded transition-colors border border-emerald-500/30"
                                        title="Mark Resolved">
                                    <i class="fas fa-check"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                </template>
                <tr x-show="reports.length === 0">
                    <td colspan="6" class="p-8 text-center text-gray-500">
                        <i class="fas fa-check-circle fa-2x mb-2 text-green-500/50"></i>
                        <p>All clear! No pending reports.</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<script>
function reportsPage() {
    return {
        reports: [],
        
        init() {
            this.fetchReports();
        },

        _headers() {
            const token = localStorage.getItem('admin_token');
            const headers = {};
            if (token) headers['Authorization'] = 'Bearer ' + token;
            return headers;
        },

        fetchReports() {
            fetch('/backend-php/public/api/admin/reports', { headers: this._headers() })
                .then(res => res.json())
                .then(data => this.reports = Array.isArray(data) ? data : [])
                .catch(() => this.reports = []);
        },

        closeReport(id) {
            if(!confirm('Mark this report as resolved?')) return;
            fetch(`/backend-php/public/api/admin/reports/${id}/close`, { method: 'POST', headers: this._headers() })
                .then(() => {
                    this.fetchReports();
                    showToast('Report closed');
                });
        },
        
        banUser(userId) {
            if(!confirm('Are you sure you want to BAN this user?')) return;
            fetch(`/backend-php/public/api/admin/users/${userId}/ban`, {
                method: 'POST',
                headers: { ...this._headers(), 'Content-Type': 'application/json' },
                body: JSON.stringify({ reason: 'Reported by users' })
            }).then(() => {
                showToast('User banned');
            });
        },

        formatDateTime(dateStr) {
            if (!dateStr) return '';
            const d = new Date(dateStr);
            return d.toLocaleDateString() + ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        },
        
        viewContext(report) {
            // If report has conversation_id, go to chat detail
            if (report.conversation_id) {
                window.location.href = `chat_detail.php?id=${report.conversation_id}`;
            } else {
                alert('No conversation context available for this report.');
            }
        }
    }
}
</script>

<?php require_once 'includes/footer.php'; ?>
