@extends('layouts.admin')

@section('header')
<div class="flex items-center justify-between">
    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">User Flagging System</h1>
    <div class="flex space-x-3">
        <button id="bulk-flag-btn" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
            </svg>
            Bulk Actions
        </button>
        <a href="{{ route('admin.users.index') }}" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
            </svg>
            All Users
        </a>
    </div>
</div>
@endsection

@section('content')
<div class="space-y-6">
    <!-- Flag Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <x-ui.layout.card padding="normal" class="bg-gradient-to-r from-red-500 to-red-600 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-red-100 text-sm font-medium">Flagged Users</p>
                    <p class="text-3xl font-bold" id="flagged-count">{{ $flaggedCount ?? 0 }}</p>
                </div>
                <div class="p-3 bg-red-400 bg-opacity-30 rounded-full">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                    </svg>
                </div>
            </div>
        </x-ui.layout.card>

        <x-ui.layout.card padding="normal" class="bg-gradient-to-r from-yellow-500 to-yellow-600 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-yellow-100 text-sm font-medium">Under Review</p>
                    <p class="text-3xl font-bold" id="review-count">{{ $reviewCount ?? 0 }}</p>
                </div>
                <div class="p-3 bg-yellow-400 bg-opacity-30 rounded-full">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                    </svg>
                </div>
            </div>
        </x-ui.layout.card>

        <x-ui.layout.card padding="normal" class="bg-gradient-to-r from-green-500 to-green-600 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-green-100 text-sm font-medium">Resolved</p>
                    <p class="text-3xl font-bold" id="resolved-count">{{ $resolvedCount ?? 0 }}</p>
                </div>
                <div class="p-3 bg-green-400 bg-opacity-30 rounded-full">
                    <svg class="w-8 h-8" 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"></path>
                    </svg>
                </div>
            </div>
        </x-ui.layout.card>

        <x-ui.layout.card padding="normal" class="bg-gradient-to-r from-blue-500 to-blue-600 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-blue-100 text-sm font-medium">Total Flags</p>
                    <p class="text-3xl font-bold" id="total-flags">{{ $totalFlags ?? 0 }}</p>
                </div>
                <div class="p-3 bg-blue-400 bg-opacity-30 rounded-full">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                    </svg>
                </div>
            </div>
        </x-ui.layout.card>
    </div>

    <!-- Filters and Search -->
    <x-ui.layout.card>
        <x-slot name="header">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Filter & Search</h3>
                <button id="clear-filters" class="text-sm text-gray-500 hover:text-gray-700">Clear All</button>
            </div>
        </x-slot>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <label for="status-filter" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status</label>
                <select id="status-filter" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    <option value="">All Statuses</option>
                    <option value="flagged">Flagged</option>
                    <option value="under_review">Under Review</option>
                    <option value="resolved">Resolved</option>
                </select>
            </div>
            <div>
                <label for="reason-filter" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Reason</label>
                <select id="reason-filter" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    <option value="">All Reasons</option>
                    <option value="inappropriate_behavior">Inappropriate Behavior</option>
                    <option value="spam">Spam</option>
                    <option value="security_concern">Security Concern</option>
                    <option value="policy_violation">Policy Violation</option>
                    <option value="other">Other</option>
                </select>
            </div>
            <div>
                <label for="date-filter" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Date Range</label>
                <select id="date-filter" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    <option value="">All Time</option>
                    <option value="today">Today</option>
                    <option value="week">This Week</option>
                    <option value="month">This Month</option>
                    <option value="custom">Custom Range</option>
                </select>
            </div>
            <div>
                <label for="search-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Search</label>
                <div class="relative">
                    <input type="text" id="search-input" placeholder="Search users..." class="w-full pl-10 pr-4 py-2 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </x-ui.layout.card>

    <!-- Flagged Users Table -->
    <x-ui.layout.card>
        <x-slot name="header">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Flagged Users</h3>
                <div class="flex space-x-2">
                    <button id="export-flags" class="inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                        Export
                    </button>
                    <button id="refresh-table" class="inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                        </svg>
                        Refresh
                    </button>
                </div>
            </div>
        </x-slot>
        
        <!-- Table Loading State -->
        <div id="table-loading" class="hidden">
            <div class="animate-pulse">
                <div class="space-y-3">
                    <div class="h-4 bg-gray-200 rounded w-full"></div>
                    <div class="h-4 bg-gray-200 rounded w-3/4"></div>
                    <div class="h-4 bg-gray-200 rounded w-1/2"></div>
                </div>
            </div>
        </div>

        <!-- Table Content -->
        <div id="table-content" class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-800">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            <input type="checkbox" id="select-all" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            User
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Status
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Reason
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Flagged By
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Date
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Actions
                        </th>
                    </tr>
                </thead>
                <tbody id="users-table-body" class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
                    <!-- Table rows will be populated by JavaScript -->
                </tbody>
            </table>
        </div>

        <!-- Empty State -->
        <div id="empty-state" class="hidden 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"></path>
            </svg>
            <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-gray-100">No flagged users found</h3>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">No users match the current filter criteria.</p>
        </div>

        <!-- Pagination -->
        <div id="pagination" class="bg-white dark:bg-gray-900 px-4 py-3 flex items-center justify-between border-t border-gray-200 dark:border-gray-700 sm:px-6">
            <div class="flex-1 flex justify-between sm:hidden">
                <button id="prev-mobile" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    Previous
                </button>
                <button id="next-mobile" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    Next
                </button>
            </div>
            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                <div>
                    <p class="text-sm text-gray-700 dark:text-gray-300">
                        Showing <span id="showing-from" class="font-medium">1</span> to <span id="showing-to" class="font-medium">10</span> of <span id="showing-total" class="font-medium">0</span> results
                    </p>
                </div>
                <div>
                    <nav id="pagination-nav" class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                        <!-- Pagination buttons will be populated by JavaScript -->
                    </nav>
                </div>
            </div>
        </div>
    </x-ui.layout.card>

    <!-- Quick Flag Modal -->
    <div id="quick-flag-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
            <div class="mt-3">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Flag User</h3>
                    <button id="close-flag-modal" 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"></path>
                        </svg>
                    </button>
                </div>
                <form id="flag-user-form">
                    <div class="mb-4">
                        <label for="flag-status" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Status</label>
                        <select id="flag-status" name="flag_status" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" required>
                            <option value="flagged">Flagged</option>
                            <option value="under_review">Under Review</option>
                        </select>
                    </div>
                    <div class="mb-4">
                        <label for="flag-reason" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Reason</label>
                        <select id="flag-reason-select" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 mb-2">
                            <option value="">Select a reason...</option>
                            <option value="inappropriate_behavior">Inappropriate Behavior</option>
                            <option value="spam">Spam</option>
                            <option value="security_concern">Security Concern</option>
                            <option value="policy_violation">Policy Violation</option>
                            <option value="other">Other</option>
                        </select>
                        <textarea id="flag-reason" name="flag_reason" rows="3" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" placeholder="Provide detailed reason for flagging..." required></textarea>
                    </div>
                    <div class="flex justify-end space-x-3">
                        <button type="button" id="cancel-flag" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            Cancel
                        </button>
                        <button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                            Flag User
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Bulk Actions Modal -->
    <div id="bulk-actions-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
            <div class="mt-3">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Bulk Actions</h3>
                    <button id="close-bulk-modal" 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"></path>
                        </svg>
                    </button>
                </div>
                <div class="space-y-3">
                    <button id="bulk-unflag" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md">
                        Remove Flags from Selected Users
                    </button>
                    <button id="bulk-review" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md">
                        Mark Selected as Under Review
                    </button>
                    <button id="bulk-resolve" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md">
                        Mark Selected as Resolved
                    </button>
                    <button id="bulk-export" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md">
                        Export Selected Users
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize the flagging system
    initializeFlaggingSystem();
    
    function initializeFlaggingSystem() {
        // Load initial data
        loadFlaggedUsers();
        
        // Set up event listeners
        setupEventListeners();
        
        // Set up filters
        setupFilters();
    }
    
    function setupEventListeners() {
        // Modal controls
        document.getElementById('close-flag-modal').addEventListener('click', () => {
            document.getElementById('quick-flag-modal').classList.add('hidden');
        });
        
        document.getElementById('close-bulk-modal').addEventListener('click', () => {
            document.getElementById('bulk-actions-modal').classList.add('hidden');
        });
        
        document.getElementById('cancel-flag').addEventListener('click', () => {
            document.getElementById('quick-flag-modal').classList.add('hidden');
        });
        
        // Bulk actions
        document.getElementById('bulk-flag-btn').addEventListener('click', () => {
            document.getElementById('bulk-actions-modal').classList.remove('hidden');
        });
        
        // Form submission
        document.getElementById('flag-user-form').addEventListener('submit', handleFlagSubmission);
        
        // Reason select helper
        document.getElementById('flag-reason-select').addEventListener('change', function() {
            const textarea = document.getElementById('flag-reason');
            if (this.value) {
                textarea.value = this.options[this.selectedIndex].text;
            }
        });
        
        // Refresh button
        document.getElementById('refresh-table').addEventListener('click', loadFlaggedUsers);
        
        // Export button
        document.getElementById('export-flags').addEventListener('click', exportFlags);
        
        // Clear filters
        document.getElementById('clear-filters').addEventListener('click', clearFilters);
        
        // Select all checkbox
        document.getElementById('select-all').addEventListener('change', function() {
            const checkboxes = document.querySelectorAll('input[name="selected_users[]"]');
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
        });
    }
    
    function setupFilters() {
        const filters = ['status-filter', 'reason-filter', 'date-filter', 'search-input'];
        
        filters.forEach(filterId => {
            const element = document.getElementById(filterId);
            if (element) {
                element.addEventListener('change', debounce(loadFlaggedUsers, 300));
                if (filterId === 'search-input') {
                    element.addEventListener('input', debounce(loadFlaggedUsers, 500));
                }
            }
        });
    }
    
    async function loadFlaggedUsers(page = 1) {
        showTableLoading();
        
        try {
            const params = new URLSearchParams({
                page: page,
                status: document.getElementById('status-filter').value,
                reason: document.getElementById('reason-filter').value,
                date: document.getElementById('date-filter').value,
                search: document.getElementById('search-input').value
            });
            
            const response = await fetch(`/admin/users/flagged?${params}`);
            const data = await response.json();
            
            if (data.success) {
                renderUsersTable(data.data);
                updatePagination(data.pagination);
                updateStatistics(data.statistics);
            } else {
                showError('Failed to load flagged users');
            }
        } catch (error) {
            console.error('Error loading flagged users:', error);
            showError('Failed to load flagged users');
        } finally {
            hideTableLoading();
        }
    }
    
    function renderUsersTable(users) {
        const tbody = document.getElementById('users-table-body');
        const emptyState = document.getElementById('empty-state');
        const tableContent = document.getElementById('table-content');
        
        if (users.length === 0) {
            tableContent.classList.add('hidden');
            emptyState.classList.remove('hidden');
            return;
        }
        
        tableContent.classList.remove('hidden');
        emptyState.classList.add('hidden');
        
        tbody.innerHTML = users.map(user => `
            <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
                <td class="px-6 py-4 whitespace-nowrap">
                    <input type="checkbox" name="selected_users[]" value="${user.id}" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 h-10 w-10">
                            <div class="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
                                <span class="text-sm font-medium text-gray-700">${user.name.charAt(0).toUpperCase()}</span>
                            </div>
                        </div>
                        <div class="ml-4">
                            <div class="text-sm font-medium text-gray-900 dark:text-white">${user.name}</div>
                            <div class="text-sm text-gray-500 dark:text-gray-400">${user.email}</div>
                        </div>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getStatusBadgeClass(user.flag_status)}">
                        ${formatStatus(user.flag_status)}
                    </span>
                </td>
                <td class="px-6 py-4">
                    <div class="text-sm text-gray-900 dark:text-white max-w-xs truncate" title="${user.flag_reason || 'No reason provided'}">
                        ${user.flag_reason || 'No reason provided'}
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                    ${user.flagged_by_name || 'System'}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                    ${user.flagged_at ? formatDate(user.flagged_at) : 'N/A'}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <div class="flex space-x-2">
                        <button onclick="editFlag(${user.id})" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300">
                            Edit
                        </button>
                        <button onclick="unflagUser(${user.id})" class="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300">
                            Unflag
                        </button>
                        <button onclick="viewHistory(${user.id})" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
                            History
                        </button>
                    </div>
                </td>
            </tr>
        `).join('');
    }
    
    function getStatusBadgeClass(status) {
        const classes = {
            'flagged': 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
            'under_review': 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
            'resolved': 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
        };
        return classes[status] || 'bg-gray-100 text-gray-800';
    }
    
    function formatStatus(status) {
        return status ? status.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase()) : 'Unknown';
    }
    
    function formatDate(dateString) {
        return new Date(dateString).toLocaleDateString('en-US', {
            year: 'numeric',
            month: 'short',
            day: 'numeric'
        });
    }
    
    function updatePagination(pagination) {
        document.getElementById('showing-from').textContent = pagination.from || 0;
        document.getElementById('showing-to').textContent = pagination.to || 0;
        document.getElementById('showing-total').textContent = pagination.total || 0;
        
        // Update pagination navigation (simplified)
        const nav = document.getElementById('pagination-nav');
        nav.innerHTML = ''; // Clear existing pagination
        
        // Add pagination buttons based on pagination data
        if (pagination.prev_page_url) {
            nav.innerHTML += `<button onclick="loadFlaggedUsers(${pagination.current_page - 1})" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">Previous</button>`;
        }
        
        if (pagination.next_page_url) {
            nav.innerHTML += `<button onclick="loadFlaggedUsers(${pagination.current_page + 1})" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">Next</button>`;
        }
    }
    
    function updateStatistics(stats) {
        if (stats) {
            document.getElementById('flagged-count').textContent = stats.flagged || 0;
            document.getElementById('review-count').textContent = stats.under_review || 0;
            document.getElementById('resolved-count').textContent = stats.resolved || 0;
            document.getElementById('total-flags').textContent = stats.total || 0;
        }
    }
    
    function showTableLoading() {
        document.getElementById('table-loading').classList.remove('hidden');
        document.getElementById('table-content').classList.add('hidden');
    }
    
    function hideTableLoading() {
        document.getElementById('table-loading').classList.add('hidden');
        document.getElementById('table-content').classList.remove('hidden');
    }
    
    async function handleFlagSubmission(e) {
        e.preventDefault();
        
        const formData = new FormData(e.target);
        const userId = e.target.dataset.userId;
        
        try {
            const response = await fetch(`/admin/users/${userId}/flag`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    flag_status: formData.get('flag_status'),
                    flag_reason: formData.get('flag_reason')
                })
            });
            
            const data = await response.json();
            
            if (data.success) {
                showSuccess('User flagged successfully');
                document.getElementById('quick-flag-modal').classList.add('hidden');
                loadFlaggedUsers();
            } else {
                showError(data.message || 'Failed to flag user');
            }
        } catch (error) {
            console.error('Error flagging user:', error);
            showError('Failed to flag user');
        }
    }
    
    function clearFilters() {
        document.getElementById('status-filter').value = '';
        document.getElementById('reason-filter').value = '';
        document.getElementById('date-filter').value = '';
        document.getElementById('search-input').value = '';
        loadFlaggedUsers();
    }
    
    function exportFlags() {
        const params = new URLSearchParams({
            status: document.getElementById('status-filter').value,
            reason: document.getElementById('reason-filter').value,
            date: document.getElementById('date-filter').value,
            search: document.getElementById('search-input').value
        });
        
        window.open(`/admin/users/flagged/export?${params}`, '_blank');
        showSuccess('Export started');
    }
    
    // Global functions for inline event handlers
    window.editFlag = function(userId) {
        const form = document.getElementById('flag-user-form');
        form.dataset.userId = userId;
        document.getElementById('quick-flag-modal').classList.remove('hidden');
    };
    
    window.unflagUser = async function(userId) {
        if (!confirm('Are you sure you want to remove the flag from this user?')) {
            return;
        }
        
        try {
            const response = await fetch(`/admin/users/${userId}/unflag`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                }
            });
            
            const data = await response.json();
            
            if (data.success) {
                showSuccess('User unflagged successfully');
                loadFlaggedUsers();
            } else {
                showError(data.message || 'Failed to unflag user');
            }
        } catch (error) {
            console.error('Error unflagging user:', error);
            showError('Failed to unflag user');
        }
    };
    
    window.viewHistory = function(userId) {
        // Open user history in a new tab or modal
        window.open(`/admin/users/${userId}/flag-history`, '_blank');
    };
    
    // Utility functions
    function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }
    
    function showSuccess(message) {
        const toast = document.createElement('div');
        toast.className = 'fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
        toast.textContent = message;
        document.body.appendChild(toast);
        
        setTimeout(() => {
            toast.remove();
        }, 3000);
    }
    
    function showError(message) {
        const toast = document.createElement('div');
        toast.className = 'fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
        toast.textContent = message;
        document.body.appendChild(toast);
        
        setTimeout(() => {
            toast.remove();
        }, 5000);
    }
});
</script>
@endpush

@endsection