<?php
if (!defined('ABSPATH')) {
    exit;
}

$ui_labels = isset($ui_labels) && is_array($ui_labels) ? $ui_labels : [];
$singular_label = sanitize_text_field((string) ($ui_labels['singular'] ?? __('Event', 'nexdirectory')));
$plural_label = sanitize_text_field((string) ($ui_labels['plural'] ?? __('Events', 'nexdirectory')));
$singular_lower = sanitize_text_field((string) ($ui_labels['singular_lower'] ?? strtolower((string) $singular_label)));
$page_kicker = sanitize_text_field((string) $this->get_event_hero_kicker_text());
$admin_context = !empty($admin_context);
$root_padding_classes = $admin_context ? 'pb-8 md:pb-8' : 'min-h-screen pb-24 md:pb-8';
$shell_classes = $admin_context ? 'eep-moderation-queue-shell space-y-4 md:space-y-6' : 'eep-moderation-queue-shell max-w-[1400px] mx-auto space-y-4 md:space-y-6 md:p-6';

$pending_items = [];
if ($pending instanceof WP_Query && !empty($pending->posts) && is_array($pending->posts)) {
    foreach ($pending->posts as $pending_post) {
        if (!$pending_post instanceof WP_Post) {
            continue;
        }
        $post_id = (int) $pending_post->ID;
        if ($post_id <= 0) {
            continue;
        }
        $author_id = (int) get_post_field('post_author', $post_id);
        $author_name = (string) get_the_author_meta('display_name', $author_id);
        if ($author_name === '') {
            $author_name = __('Unknown', 'nexdirectory');
        }

        $pending_items[] = [
            'id' => $post_id,
            'title' => sanitize_text_field((string) get_the_title($post_id)),
            'author' => sanitize_text_field($author_name),
            'date' => sanitize_text_field((string) $this->format_event_date($post_id)),
            'url' => esc_url_raw((string) get_permalink($post_id)),
            'nonce' => wp_create_nonce('eep_moderate_event_' . $post_id),
        ];
    }
}

$claims_list = is_array($claims) ? $claims : [];
$claim_items = [];
foreach ($claims_list as $claim) {
    if (!$claim instanceof WP_Comment) {
        continue;
    }

    $comment_id = (int) $claim->comment_ID;
    $event_id = (int) $claim->comment_post_ID;
    if ($comment_id <= 0 || $event_id <= 0) {
        continue;
    }

    $claim_user = $claim->user_id ? get_user_by('id', (int) $claim->user_id) : null;
    $claimer_label = $claim_user instanceof WP_User
        ? trim((string) $claim_user->display_name) . ' (' . (string) $claim_user->user_email . ')'
        : sanitize_text_field((string) $claim->comment_author);

    $claim_items[] = [
        'id' => $comment_id,
        'eventId' => $event_id,
        'title' => sanitize_text_field((string) get_the_title($event_id)),
        'requestedBy' => sanitize_text_field($claimer_label),
        'reason' => eep_sanitize_textarea((string) $claim->comment_content),
        'date' => sanitize_text_field((string) wp_date(
            get_option('date_format') . ' ' . get_option('time_format'),
            strtotime((string) $claim->comment_date_gmt . ' GMT')
        )),
        'url' => esc_url_raw((string) get_permalink($event_id)),
        'nonce' => wp_create_nonce('eep_moderate_claim_' . $comment_id),
    ];
}

$reports_list = is_array($reports) ? $reports : [];
$report_items = [];
foreach ($reports_list as $report) {
    if (!$report instanceof WP_Comment) {
        continue;
    }

    $event_id = (int) $report->comment_post_ID;
    if ($event_id <= 0) {
        continue;
    }
    $event_status = sanitize_key((string) get_post_status($event_id));
    $is_event_live = $event_status === 'publish';

    $report_items[] = [
        'id' => (int) $report->comment_ID,
        'eventId' => $event_id,
        'title' => sanitize_text_field((string) get_the_title($event_id)),
        'reporter' => sanitize_text_field((string) $report->comment_author),
        'details' => eep_sanitize_textarea((string) $report->comment_content),
        'eventStatus' => $event_status !== '' ? $event_status : 'draft',
        'isEventLive' => $is_event_live,
        'eventToggleLabel' => $is_event_live ? __('Deactivate Event', 'nexdirectory') : __('Activate Event', 'nexdirectory'),
        'date' => sanitize_text_field((string) wp_date(
            get_option('date_format') . ' ' . get_option('time_format'),
            strtotime((string) $report->comment_date_gmt . ' GMT')
        )),
        'url' => esc_url_raw((string) get_permalink($event_id)),
        'nonce' => wp_create_nonce('eep_moderate_report_' . (int) $report->comment_ID),
    ];
}

$pending_count = count($pending_items);
$claim_count = count($claim_items);
$report_count = count($report_items);
$open_total = $pending_count + $claim_count + $report_count;
$action_url = esc_url(admin_url('admin-post.php'));
$bulk_nonce = wp_create_nonce('eep_moderate_events_bulk');

$json_flags = JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT;
if (defined('JSON_INVALID_UTF8_SUBSTITUTE')) {
    $json_flags |= JSON_INVALID_UTF8_SUBSTITUTE;
}
$seed_json = wp_json_encode([
    'pendingEvents' => $pending_items,
    'claims' => $claim_items,
    'reports' => $report_items,
    'actionUrl' => $action_url,
    'bulkNonce' => $bulk_nonce,
], $json_flags);
if (!is_string($seed_json) || $seed_json === '') {
    $seed_json = '{}';
}
?>

<style>
    [x-cloak] { display: none !important; }
    .custom-scrollbar::-webkit-scrollbar { height: 6px; width: 6px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
    .hide-scroll::-webkit-scrollbar { display: none; }
    .hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }
    .eep-moderation-queue .eep-mq-table {
        width: 100%;
        min-width: 0 !important;
        table-layout: fixed;
    }
    .eep-moderation-queue .eep-mq-cell-wrap {
        white-space: normal !important;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .eep-moderation-queue .eep-mq-actions {
        display: grid;
        gap: 0.375rem;
        justify-content: end;
        margin-left: auto;
    }
    .eep-moderation-queue .eep-mq-actions-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 260px;
    }
    .eep-moderation-queue .eep-mq-actions-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 360px;
    }
    .eep-moderation-queue .eep-mq-actions-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 360px;
    }
    .eep-moderation-queue .eep-mq-actions button {
        width: 100%;
        white-space: normal;
        line-height: 1.2;
        padding: 0.45rem 0.5rem;
    }
</style>

<script>
window.eepModerationQueuePage = function(seed) {
    const safeSeed = seed && typeof seed === 'object' ? seed : {};

    const pendingEvents = Array.isArray(safeSeed.pendingEvents)
        ? safeSeed.pendingEvents.map(function(item) {
            return Object.assign({ selected: false }, item || {});
        })
        : [];

    const claims = Array.isArray(safeSeed.claims) ? safeSeed.claims : [];
    const reports = Array.isArray(safeSeed.reports) ? safeSeed.reports : [];

    return {
        activeTab: 'pending',
        pendingEvents: pendingEvents,
        claims: claims,
        reports: reports,
        actionUrl: String(safeSeed.actionUrl || ''),
        bulkNonce: String(safeSeed.bulkNonce || ''),

        bulkAction: '',
        bulkNote: '',
        selectAll: false,

        toast: { show: false, message: '', type: 'success', timeout: null },
        actionModal: { open: false, type: '', source: '', item: null, note: '' },

        get stats() {
            return {
                pending: this.pendingEvents.length,
                claims: this.claims.length,
                reports: this.reports.length,
                total: this.pendingEvents.length + this.claims.length + this.reports.length
            };
        },

        get selectedPendingIds() {
            return this.pendingEvents.filter(function(item) {
                return !!item.selected;
            }).map(function(item) {
                return Number(item.id || 0);
            }).filter(function(id) {
                return id > 0;
            });
        },

        showToast(msg, type) {
            this.toast.message = String(msg || '');
            this.toast.type = String(type || 'success');
            this.toast.show = true;
            if (this.toast.timeout) {
                clearTimeout(this.toast.timeout);
            }
            this.toast.timeout = setTimeout(() => {
                this.toast.show = false;
            }, 3000);
        },

        syncSelectAll() {
            if (this.pendingEvents.length === 0) {
                this.selectAll = false;
                return;
            }
            this.selectAll = this.pendingEvents.every(function(item) {
                return !!item.selected;
            });
        },

        toggleSelectAll() {
            const shouldSelect = !!this.selectAll;
            this.pendingEvents.forEach(function(item) {
                item.selected = shouldSelect;
            });
        },

        applyBulkAction() {
            if (this.selectedPendingIds.length === 0) {
                this.showToast('Please select at least one item.', 'error');
                return;
            }
            if (!this.bulkAction) {
                this.showToast('Please choose a bulk action.', 'error');
                return;
            }
            if (!this.$refs.bulkForm) {
                return;
            }
            this.$refs.bulkForm.submit();
        },

        submitPendingDecision(item, decision, note) {
            if (!item || !item.id || !item.nonce || !this.actionUrl) {
                return;
            }
            this.submitHiddenForm([
                { name: 'action', value: 'eep_moderate_event' },
                { name: 'post_id', value: item.id },
                { name: 'event_id', value: item.id },
                { name: 'decision', value: decision },
                { name: 'moderator_note', value: String(note || '') },
                { name: 'eep_moderate_nonce', value: item.nonce }
            ]);
        },

        submitClaimDecision(item, decision, note) {
            if (!item || !item.id || !item.nonce || !this.actionUrl) {
                return;
            }
            this.submitHiddenForm([
                { name: 'action', value: 'eep_moderate_claim' },
                { name: 'comment_id', value: item.id },
                { name: 'decision', value: decision },
                { name: 'claim_reject_reason', value: String(note || '') },
                { name: 'eep_moderate_claim_nonce', value: item.nonce }
            ]);
        },

        submitReportAction(item, intent, note, subject) {
            if (!item || !item.id || !item.nonce || !this.actionUrl) {
                return;
            }
            this.submitHiddenForm([
                { name: 'action', value: 'eep_moderate_report' },
                { name: 'comment_id', value: item.id },
                { name: 'report_id', value: item.id },
                { name: 'event_id', value: item.eventId || 0 },
                { name: 'intent', value: String(intent || '') },
                { name: 'admin_message', value: String(note || '') },
                { name: 'admin_subject', value: String(subject || '') },
                { name: 'eep_moderate_report_nonce', value: item.nonce }
            ]);
        },

        submitHiddenForm(fields) {
            const form = document.createElement('form');
            form.method = 'post';
            form.action = this.actionUrl;
            fields.forEach(function(field) {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = String(field.name || '');
                input.value = String(field.value || '');
                form.appendChild(input);
            });
            document.body.appendChild(form);
            form.submit();
        },

        quickApprovePending(item) {
            this.submitPendingDecision(item, 'approve', '');
        },

        quickApproveClaim(item) {
            this.submitClaimDecision(item, 'approve', '');
        },

        quickToggleReportedEvent(item) {
            this.submitReportAction(item, 'toggle_event_status', '', '');
        },

        quickResolveReport(item) {
            this.submitReportAction(item, 'resolve_report', '', '');
        },

        openActionModal(type, source, item) {
            this.actionModal.type = String(type || '');
            this.actionModal.source = String(source || '');
            this.actionModal.item = item || null;
            this.actionModal.note = '';
            this.actionModal.open = true;
            document.body.style.overflow = 'hidden';
        },

        closeActionModal() {
            this.actionModal.open = false;
            this.actionModal.type = '';
            this.actionModal.source = '';
            this.actionModal.item = null;
            this.actionModal.note = '';
            document.body.style.overflow = '';
        },

        submitAction() {
            if (!this.actionModal.item) {
                return;
            }

            if (this.actionModal.source === 'claim' && this.actionModal.type === 'reject' && String(this.actionModal.note || '').trim() === '') {
                this.showToast('Please provide a rejection reason.', 'error');
                return;
            }

            if (this.actionModal.source === 'pending') {
                this.submitPendingDecision(this.actionModal.item, this.actionModal.type, this.actionModal.note);
                return;
            }

            if (this.actionModal.source === 'claim') {
                this.submitClaimDecision(this.actionModal.item, this.actionModal.type, this.actionModal.note);
                return;
            }

            if (this.actionModal.source === 'report') {
                if (String(this.actionModal.note || '').trim() === '') {
                    this.showToast('Please provide a message first.', 'error');
                    return;
                }
                this.submitReportAction(this.actionModal.item, this.actionModal.type, this.actionModal.note, '');
            }
        }
    };
};
</script>

<div class="eep-my-events eep-moderation-queue bg-slate-50 text-slate-800 font-sans antialiased <?php echo esc_attr($root_padding_classes); ?>"
     x-data='eepModerationQueuePage(<?php echo $seed_json; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>)'
     x-cloak>

    <?php if (!$admin_context) : ?>
        <?php echo $this->render_notice(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
        <?php echo $this->render_platform_breadcrumbs(__('Moderation Queue', 'nexdirectory')); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
    <?php endif; ?>

    <div class="<?php echo esc_attr($shell_classes); ?>">

        <?php if (!$admin_context) : ?>
            <header class="bg-white md:rounded-2xl shadow-sm p-5 md:p-8 border border-slate-200 relative overflow-hidden">
                <div class="absolute -top-24 -right-24 w-64 h-64 bg-indigo-50 rounded-full blur-3xl opacity-60 pointer-events-none hidden md:block"></div>
                <div>
                    <span class="inline-block py-1 px-2.5 rounded-md bg-amber-100 text-amber-700 text-[10px] font-bold tracking-wider uppercase mb-2"><?php echo esc_html($page_kicker); ?></span>
                    <h1 class="text-2xl md:text-3xl font-extrabold text-slate-900 mb-1 md:mb-2 tracking-tight"><?php esc_html_e('Moderation Queue', 'nexdirectory'); ?></h1>
                    <p class="text-sm md:text-base text-slate-500 max-w-2xl leading-relaxed"><?php echo esc_html(sprintf(__('Review submissions quickly, approve quality %s, and handle community reports.', 'nexdirectory'), strtolower((string) $plural_label))); ?></p>
                </div>
            </header>
        <?php endif; ?>

        <section class="flex overflow-x-auto hide-scroll gap-3 md:grid md:grid-cols-4 md:gap-4 snap-x snap-mandatory">
            <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-4 flex items-center space-x-3 min-w-[200px] md:min-w-0 snap-center shrink-0">
                <div class="p-2.5 bg-indigo-50 text-indigo-600 rounded-lg">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                </div>
                <div><p class="text-xs font-semibold text-slate-500 uppercase tracking-wide"><?php esc_html_e('Pending Events', 'nexdirectory'); ?></p><p class="text-xl font-bold text-slate-900" x-text="stats.pending"></p></div>
            </div>
            <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-4 flex items-center space-x-3 min-w-[200px] md:min-w-0 snap-center shrink-0">
                <div class="p-2.5 bg-blue-50 text-blue-600 rounded-lg">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11.5V10a5 5 0 0110 0v1.5M5 11.5h14a1 1 0 011 1V19a1 1 0 01-1 1H5a1 1 0 01-1-1v-6.5a1 1 0 011-1z"></path></svg>
                </div>
                <div><p class="text-xs font-semibold text-slate-500 uppercase tracking-wide"><?php esc_html_e('Claims', 'nexdirectory'); ?></p><p class="text-xl font-bold text-slate-900" x-text="stats.claims"></p></div>
            </div>
            <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-4 flex items-center space-x-3 min-w-[200px] md:min-w-0 snap-center shrink-0">
                <div class="p-2.5 bg-rose-50 text-rose-600 rounded-lg">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h18M8 5V3m8 2V3M6 9h12v10H6V9zm6 0v10"></path></svg>
                </div>
                <div><p class="text-xs font-semibold text-slate-500 uppercase tracking-wide"><?php esc_html_e('Reports', 'nexdirectory'); ?></p><p class="text-xl font-bold text-slate-900" x-text="stats.reports"></p></div>
            </div>
            <div class="bg-slate-900 rounded-xl shadow-sm p-4 flex items-center space-x-3 min-w-[200px] md:min-w-0 snap-center shrink-0">
                <div class="p-2.5 bg-white/10 text-white rounded-lg">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
                </div>
                <div><p class="text-xs font-semibold text-slate-300 uppercase tracking-wide"><?php esc_html_e('Total Open', 'nexdirectory'); ?></p><p class="text-xl font-bold text-white" x-text="stats.total"></p></div>
            </div>
        </section>

        <nav class="flex overflow-x-auto hide-scroll gap-2 border-b border-slate-200 pb-2 md:border-none md:pb-0">
            <button @click="activeTab = 'pending'" class="whitespace-nowrap flex items-center gap-2 px-4 py-2.5 rounded-full text-sm font-bold transition-colors" :class="activeTab === 'pending' ? 'bg-slate-900 text-white' : 'bg-white text-slate-600 border border-slate-200 hover:bg-slate-50'">
                <?php esc_html_e('Pending Submissions', 'nexdirectory'); ?>
                <span class="px-1.5 py-0.5 rounded-full text-[10px]" :class="activeTab === 'pending' ? 'bg-white/20 text-white' : 'bg-slate-100 text-slate-500'" x-text="stats.pending"></span>
            </button>
            <button @click="activeTab = 'claims'" class="whitespace-nowrap flex items-center gap-2 px-4 py-2.5 rounded-full text-sm font-bold transition-colors" :class="activeTab === 'claims' ? 'bg-slate-900 text-white' : 'bg-white text-slate-600 border border-slate-200 hover:bg-slate-50'">
                <?php esc_html_e('Claim Requests', 'nexdirectory'); ?>
                <span x-show="stats.claims > 0" class="px-1.5 py-0.5 rounded-full text-[10px]" :class="activeTab === 'claims' ? 'bg-rose-500 text-white' : 'bg-rose-100 text-rose-600'" x-text="stats.claims"></span>
            </button>
            <button @click="activeTab = 'reports'" class="whitespace-nowrap flex items-center gap-2 px-4 py-2.5 rounded-full text-sm font-bold transition-colors" :class="activeTab === 'reports' ? 'bg-rose-600 text-white' : 'bg-white text-slate-600 border border-slate-200 hover:bg-rose-50 hover:text-rose-600 hover:border-rose-200'">
                <?php esc_html_e('User Reports', 'nexdirectory'); ?>
                <span x-show="stats.reports > 0" class="px-1.5 py-0.5 rounded-full text-[10px]" :class="activeTab === 'reports' ? 'bg-white/20 text-white' : 'bg-rose-100 text-rose-600'" x-text="stats.reports"></span>
            </button>
        </nav>

        <section x-show="activeTab === 'pending'" class="bg-white md:rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
            <form x-ref="bulkForm" method="post" action="<?php echo $action_url; ?>" class="p-4 md:p-6 border-b border-slate-200 bg-slate-50/80">
                <input type="hidden" name="action" value="eep_moderate_events_bulk">
                <input type="hidden" name="eep_moderate_bulk_nonce" :value="bulkNonce">
                <template x-for="eventId in selectedPendingIds" :key="'bulk-' + eventId">
                    <input type="hidden" name="post_ids[]" :value="eventId">
                </template>

                <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
                    <select x-model="bulkAction" name="bulk_decision" class="w-full sm:w-52 py-2 px-3 border border-slate-300 rounded-lg text-sm bg-white focus:ring-2 focus:ring-indigo-500 outline-none">
                        <option value=""><?php esc_html_e('Choose bulk action...', 'nexdirectory'); ?></option>
                        <option value="approve"><?php esc_html_e('Approve Selected', 'nexdirectory'); ?></option>
                        <option value="reject"><?php esc_html_e('Reject Selected', 'nexdirectory'); ?></option>
                        <option value="request_changes"><?php esc_html_e('Request Changes', 'nexdirectory'); ?></option>
                    </select>
                    <input type="text" x-model="bulkNote" name="moderator_note" class="w-full flex-1 py-2 px-3 border border-slate-300 rounded-lg text-sm bg-white focus:ring-2 focus:ring-indigo-500 outline-none" placeholder="<?php echo esc_attr(sprintf(__('Optional moderator note for selected %s...', 'nexdirectory'), strtolower((string) $plural_label))); ?>">
                    <button type="button" @click="applyBulkAction" class="w-full sm:w-auto px-5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-bold rounded-lg transition-colors"><?php esc_html_e('Apply', 'nexdirectory'); ?></button>
                </div>
            </form>

            <div class="hidden md:block overflow-x-hidden custom-scrollbar">
                <table class="eep-mq-table divide-y divide-slate-200">
                    <thead class="bg-slate-50">
                        <tr>
                            <th class="px-6 py-4 text-center w-12"><input type="checkbox" x-model="selectAll" @change="toggleSelectAll" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"></th>
                            <th class="px-6 py-4 w-[34%] text-left text-xs font-bold text-slate-500 uppercase tracking-wider"><?php esc_html_e('Event Details', 'nexdirectory'); ?></th>
                            <th class="px-6 py-4 w-[18%] text-left text-xs font-bold text-slate-500 uppercase tracking-wider"><?php esc_html_e('Submitted By', 'nexdirectory'); ?></th>
                            <th class="px-6 py-4 w-[14%] text-left text-xs font-bold text-slate-500 uppercase tracking-wider"><?php esc_html_e('Date', 'nexdirectory'); ?></th>
                            <th class="px-6 py-4 w-[30%] text-right text-xs font-bold text-slate-500 uppercase tracking-wider"><?php esc_html_e('Moderation Action', 'nexdirectory'); ?></th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-slate-100">
                        <tr x-show="pendingEvents.length === 0"><td colspan="5" class="px-6 py-12 text-center text-slate-500 font-medium"><?php echo esc_html(sprintf(__('No pending %s to review right now.', 'nexdirectory'), strtolower((string) $plural_label))); ?></td></tr>
                        <template x-for="event in pendingEvents" :key="event.id">
                            <tr class="hover:bg-slate-50/50">
                                <td class="px-6 py-4 text-center"><input type="checkbox" x-model="event.selected" @change="syncSelectAll" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"></td>
                                <td class="px-6 py-4 align-top eep-mq-cell-wrap">
                                    <a :href="event.url" target="_blank" rel="noopener noreferrer" class="block font-bold text-slate-900 hover:text-indigo-600 hover:underline eep-mq-cell-wrap" x-text="event.title"></a>
                                    <div class="text-xs text-slate-500 mt-0.5" x-text="'ID: ' + event.id"></div>
                                </td>
                                <td class="px-6 py-4 align-top eep-mq-cell-wrap"><span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-800 eep-mq-cell-wrap" x-text="event.author"></span></td>
                                <td class="px-6 py-4 align-top text-sm text-slate-500 eep-mq-cell-wrap" x-text="event.date"></td>
                                <td class="px-6 py-4 align-top text-right">
                                    <div class="eep-mq-actions eep-mq-actions-3">
                                        <button type="button" @click="quickApprovePending(event)" class="bg-emerald-50 text-emerald-700 hover:bg-emerald-100 border border-emerald-200 rounded-lg text-xs font-bold transition-colors"><?php esc_html_e('Approve', 'nexdirectory'); ?></button>
                                        <button type="button" @click="openActionModal('request_changes', 'pending', event)" class="bg-white text-slate-600 hover:bg-slate-50 border border-slate-200 rounded-lg text-xs font-bold transition-colors"><?php esc_html_e('Changes', 'nexdirectory'); ?></button>
                                        <button type="button" @click="openActionModal('reject', 'pending', event)" class="bg-rose-50 text-rose-700 hover:bg-rose-100 border border-rose-200 rounded-lg text-xs font-bold transition-colors"><?php esc_html_e('Reject', 'nexdirectory'); ?></button>
                                    </div>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>

            <div class="md:hidden bg-slate-50 p-4 space-y-4">
                <div x-show="pendingEvents.length === 0" class="py-10 text-center text-slate-500 text-sm"><?php echo esc_html(sprintf(__('No pending %s to review right now.', 'nexdirectory'), strtolower((string) $plural_label))); ?></div>
                <template x-for="event in pendingEvents" :key="'mob-p-' + event.id">
                    <div class="bg-white border border-slate-200 rounded-xl p-4 shadow-sm relative pl-12">
                        <div class="absolute left-4 top-5"><input type="checkbox" x-model="event.selected" @change="syncSelectAll" class="rounded border-slate-300 w-5 h-5 text-indigo-600"></div>
                        <a :href="event.url" target="_blank" rel="noopener noreferrer" class="font-bold text-slate-900 text-lg leading-tight block mb-1" x-text="event.title"></a>
                        <div class="flex items-center justify-between mb-4">
                            <div class="text-xs text-slate-500"><span x-text="event.author"></span></div>
                            <div class="text-xs text-slate-400" x-text="event.date"></div>
                        </div>
                        <div class="grid grid-cols-3 gap-2 border-t border-slate-100 pt-3">
                            <button type="button" @click="quickApprovePending(event)" class="py-2 bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-lg text-[11px] font-bold"><?php esc_html_e('Approve', 'nexdirectory'); ?></button>
                            <button type="button" @click="openActionModal('request_changes', 'pending', event)" class="py-2 bg-white text-slate-600 border border-slate-200 rounded-lg text-[11px] font-bold"><?php esc_html_e('Changes', 'nexdirectory'); ?></button>
                            <button type="button" @click="openActionModal('reject', 'pending', event)" class="py-2 bg-rose-50 text-rose-700 border border-rose-200 rounded-lg text-[11px] font-bold"><?php esc_html_e('Reject', 'nexdirectory'); ?></button>
                        </div>
                    </div>
                </template>
            </div>
        </section>

        <section x-show="activeTab === 'claims'" class="bg-white md:rounded-2xl shadow-sm border border-slate-200 overflow-hidden" x-cloak>
            <div class="hidden md:block overflow-x-hidden custom-scrollbar">
                <table class="eep-mq-table divide-y divide-slate-200">
                    <thead class="bg-slate-50">
                        <tr>
                            <th class="px-6 py-4 w-[26%] text-left text-xs font-bold text-slate-500 uppercase tracking-wider"><?php echo esc_html($singular_label); ?></th>
                            <th class="px-6 py-4 w-[20%] text-left text-xs font-bold text-slate-500 uppercase tracking-wider"><?php esc_html_e('Requested By', 'nexdirectory'); ?></th>
                            <th class="px-6 py-4 w-[28%] text-left text-xs font-bold text-slate-500 uppercase tracking-wider"><?php esc_html_e('Reason Provided', 'nexdirectory'); ?></th>
                            <th class="px-6 py-4 w-[11%] text-left text-xs font-bold text-slate-500 uppercase tracking-wider"><?php esc_html_e('Date', 'nexdirectory'); ?></th>
                            <th class="px-6 py-4 w-[15%] text-right text-xs font-bold text-slate-500 uppercase tracking-wider"><?php esc_html_e('Action', 'nexdirectory'); ?></th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-slate-100">
                        <tr x-show="claims.length === 0"><td colspan="5" class="px-6 py-12 text-center text-slate-500 font-medium"><?php esc_html_e('No pending claim requests.', 'nexdirectory'); ?></td></tr>
                        <template x-for="claim in claims" :key="claim.id">
                            <tr class="hover:bg-slate-50/50">
                                <td class="px-6 py-4 align-top eep-mq-cell-wrap"><a :href="claim.url" target="_blank" rel="noopener noreferrer" class="font-bold text-slate-900 hover:text-indigo-600 hover:underline eep-mq-cell-wrap" x-text="claim.title"></a></td>
                                <td class="px-6 py-4 align-top eep-mq-cell-wrap"><span class="text-sm font-medium text-slate-700 eep-mq-cell-wrap" x-text="claim.requestedBy"></span></td>
                                <td class="px-6 py-4 align-top"><p class="text-sm text-slate-600 eep-mq-cell-wrap" :title="claim.reason" x-text="claim.reason"></p></td>
                                <td class="px-6 py-4 align-top text-sm text-slate-500 eep-mq-cell-wrap" x-text="claim.date"></td>
                                <td class="px-6 py-4 align-top text-right">
                                    <div class="eep-mq-actions eep-mq-actions-2">
                                        <button type="button" @click="quickApproveClaim(claim)" class="bg-indigo-600 text-white hover:bg-indigo-700 rounded-lg text-xs font-bold"><?php esc_html_e('Approve', 'nexdirectory'); ?></button>
                                        <button type="button" @click="openActionModal('reject', 'claim', claim)" class="bg-white text-rose-600 hover:bg-rose-50 border border-slate-200 hover:border-rose-200 rounded-lg text-xs font-bold transition-colors"><?php esc_html_e('Reject', 'nexdirectory'); ?></button>
                                    </div>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>

            <div class="md:hidden bg-slate-50 p-4 space-y-4">
                <div x-show="claims.length === 0" class="py-10 text-center text-slate-500 text-sm"><?php esc_html_e('No pending claim requests.', 'nexdirectory'); ?></div>
                <template x-for="claim in claims" :key="'mob-c-' + claim.id">
                    <div class="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
                        <div class="flex justify-between items-start mb-2">
                            <a :href="claim.url" target="_blank" rel="noopener noreferrer" class="font-bold text-slate-900 leading-tight" x-text="claim.title"></a>
                            <span class="text-[10px] text-slate-400 whitespace-nowrap ml-2" x-text="claim.date"></span>
                        </div>
                        <div class="text-xs text-slate-500 mb-3"><span class="font-bold text-slate-700"><?php esc_html_e('By:', 'nexdirectory'); ?></span> <span x-text="claim.requestedBy"></span></div>
                        <div class="bg-slate-50 border border-slate-100 rounded-lg p-3 text-sm text-slate-600 italic mb-4">"<span x-text="claim.reason"></span>"</div>
                        <div class="grid grid-cols-2 gap-2">
                            <button type="button" @click="quickApproveClaim(claim)" class="py-2.5 bg-indigo-600 text-white rounded-lg text-sm font-bold"><?php esc_html_e('Approve', 'nexdirectory'); ?></button>
                            <button type="button" @click="openActionModal('reject', 'claim', claim)" class="py-2.5 bg-white text-rose-600 border border-slate-200 rounded-lg text-sm font-bold"><?php esc_html_e('Reject', 'nexdirectory'); ?></button>
                        </div>
                    </div>
                </template>
            </div>
        </section>

        <section x-show="activeTab === 'reports'" class="bg-white md:rounded-2xl shadow-sm border border-slate-200 overflow-hidden" x-cloak>
            <div class="hidden md:block overflow-x-hidden custom-scrollbar">
                <table class="eep-mq-table divide-y divide-slate-200">
                    <thead class="bg-slate-50">
                        <tr>
                            <th class="px-6 py-4 w-[20%] text-left text-xs font-bold text-slate-500 uppercase tracking-wider"><?php esc_html_e('Event Flagged', 'nexdirectory'); ?></th>
                            <th class="px-6 py-4 w-[18%] text-left text-xs font-bold text-slate-500 uppercase tracking-wider"><?php esc_html_e('Reporter', 'nexdirectory'); ?></th>
                            <th class="px-6 py-4 w-[26%] text-left text-xs font-bold text-slate-500 uppercase tracking-wider"><?php esc_html_e('Reason / Details', 'nexdirectory'); ?></th>
                            <th class="px-6 py-4 w-[10%] text-left text-xs font-bold text-slate-500 uppercase tracking-wider"><?php esc_html_e('Date', 'nexdirectory'); ?></th>
                            <th class="px-6 py-4 w-[26%] text-right text-xs font-bold text-slate-500 uppercase tracking-wider"><?php esc_html_e('Actions', 'nexdirectory'); ?></th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-slate-100">
                        <tr x-show="reports.length === 0"><td colspan="5" class="px-6 py-12 text-center text-slate-500 font-medium"><?php esc_html_e('No reports to review.', 'nexdirectory'); ?></td></tr>
                        <template x-for="report in reports" :key="report.id">
                            <tr class="hover:bg-slate-50/50">
                                <td class="px-6 py-4 align-top eep-mq-cell-wrap"><a :href="report.url" target="_blank" rel="noopener noreferrer" class="font-bold text-slate-900 hover:text-indigo-600 hover:underline eep-mq-cell-wrap" x-text="report.title"></a></td>
                                <td class="px-6 py-4 align-top eep-mq-cell-wrap"><span class="text-sm font-medium text-slate-700 eep-mq-cell-wrap" x-text="report.reporter"></span></td>
                                <td class="px-6 py-4 align-top"><div class="bg-rose-50 border border-rose-200 text-rose-700 p-2.5 rounded-lg text-sm leading-snug eep-mq-cell-wrap" x-text="report.details"></div></td>
                                <td class="px-6 py-4 align-top text-sm text-slate-500 eep-mq-cell-wrap" x-text="report.date"></td>
                                <td class="px-6 py-4 align-top text-right">
                                    <div class="eep-mq-actions eep-mq-actions-4">
                                        <button type="button" @click="quickToggleReportedEvent(report)" class="bg-white text-slate-700 hover:bg-slate-50 border border-slate-200 rounded-lg text-xs font-bold transition-colors" x-text="report.eventToggleLabel"></button>
                                        <button type="button" @click="quickResolveReport(report)" class="bg-emerald-50 text-emerald-700 hover:bg-emerald-100 border border-emerald-200 rounded-lg text-xs font-bold transition-colors"><?php esc_html_e('Resolve', 'nexdirectory'); ?></button>
                                        <button type="button" @click="openActionModal('email_reporter', 'report', report)" class="bg-indigo-50 text-indigo-700 hover:bg-indigo-100 border border-indigo-200 rounded-lg text-xs font-bold transition-colors"><?php esc_html_e('Reply Reporter', 'nexdirectory'); ?></button>
                                        <button type="button" @click="openActionModal('email_owner', 'report', report)" class="bg-amber-50 text-amber-700 hover:bg-amber-100 border border-amber-200 rounded-lg text-xs font-bold transition-colors"><?php esc_html_e('Write Owner', 'nexdirectory'); ?></button>
                                    </div>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>

            <div class="md:hidden bg-slate-50 p-4 space-y-4">
                <div x-show="reports.length === 0" class="py-10 text-center text-slate-500 text-sm"><?php esc_html_e('No reports to review.', 'nexdirectory'); ?></div>
                <template x-for="report in reports" :key="'mob-r-' + report.id">
                    <div class="bg-white border border-rose-200 rounded-xl p-0 shadow-sm overflow-hidden">
                        <div class="bg-rose-50 p-3 border-b border-rose-100 flex justify-between items-center">
                            <span class="text-xs font-bold text-rose-700 uppercase tracking-wider"><?php esc_html_e('User Report', 'nexdirectory'); ?></span>
                            <span class="text-[10px] text-rose-400" x-text="report.date"></span>
                        </div>
                        <div class="p-4">
                            <a :href="report.url" target="_blank" rel="noopener noreferrer" class="font-bold text-slate-900 text-lg leading-tight block mb-1" x-text="report.title"></a>
                            <div class="text-xs text-slate-500 mb-3"><?php esc_html_e('Reported by:', 'nexdirectory'); ?> <span class="font-bold text-slate-700" x-text="report.reporter"></span></div>
                            <div class="text-sm text-slate-700 leading-relaxed bg-slate-50 p-3 rounded-lg border border-slate-100" x-text="report.details"></div>
                            <div class="grid grid-cols-2 gap-2 mt-4">
                                <button type="button" @click="quickToggleReportedEvent(report)" class="py-2.5 bg-white text-slate-700 border border-slate-200 rounded-lg text-xs font-bold" x-text="report.eventToggleLabel"></button>
                                <button type="button" @click="quickResolveReport(report)" class="py-2.5 bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-lg text-xs font-bold"><?php esc_html_e('Resolve', 'nexdirectory'); ?></button>
                                <button type="button" @click="openActionModal('email_reporter', 'report', report)" class="py-2.5 bg-indigo-50 text-indigo-700 border border-indigo-200 rounded-lg text-xs font-bold"><?php esc_html_e('Reply Reporter', 'nexdirectory'); ?></button>
                                <button type="button" @click="openActionModal('email_owner', 'report', report)" class="py-2.5 bg-amber-50 text-amber-700 border border-amber-200 rounded-lg text-xs font-bold"><?php esc_html_e('Write Owner', 'nexdirectory'); ?></button>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </section>

        <div x-show="actionModal.open" x-cloak class="fixed inset-0 z-50 flex items-end md:items-center justify-center p-4 sm:p-0">
            <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm" @click="closeActionModal()"></div>

            <div x-show="actionModal.open" x-transition class="relative bg-white rounded-2xl w-full max-w-lg overflow-hidden shadow-2xl">
                <div class="w-12 h-1.5 bg-slate-200 rounded-full mx-auto mt-3 md:hidden"></div>

                <div class="p-5 md:p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-bold text-slate-900">
                            <span x-show="actionModal.type === 'request_changes'"><?php esc_html_e('Request Changes', 'nexdirectory'); ?></span>
                            <span x-show="actionModal.type === 'reject'"><?php esc_html_e('Reject Submission', 'nexdirectory'); ?></span>
                            <span x-show="actionModal.type === 'email_reporter'"><?php esc_html_e('Reply to Reporter', 'nexdirectory'); ?></span>
                            <span x-show="actionModal.type === 'email_owner'"><?php esc_html_e('Write to Event Owner', 'nexdirectory'); ?></span>
                        </h3>
                        <button type="button" @click="closeActionModal()" class="text-slate-400 p-2">
                            <svg class="w-5 h-5" 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>

                    <p class="text-sm text-slate-500 mb-4">
                        <span x-show="actionModal.source === 'pending'">
                            <?php echo esc_html(sprintf(__('Please provide a reason. This note will be sent to the submitter of the %s.', 'nexdirectory'), $singular_lower)); ?>
                        </span>
                        <span x-show="actionModal.source === 'claim'">
                            <?php esc_html_e('Please provide a rejection reason. This note will be emailed to the claimant.', 'nexdirectory'); ?>
                        </span>
                        <span x-show="actionModal.source === 'report' && actionModal.type === 'email_reporter'">
                            <?php esc_html_e('Send a response to the person who filed this report.', 'nexdirectory'); ?>
                        </span>
                        <span x-show="actionModal.source === 'report' && actionModal.type === 'email_owner'">
                            <?php echo esc_html(sprintf(__('Send an admin message to the %s owner.', 'nexdirectory'), $singular_lower)); ?>
                        </span>
                        <strong class="text-slate-700" x-text="actionModal.item ? actionModal.item.title : ''"></strong>
                    </p>

                    <textarea x-model="actionModal.note" rows="4" class="w-full border border-slate-300 rounded-xl p-3 bg-slate-50 outline-none focus:ring-2 focus:ring-indigo-500 text-sm mb-5" :placeholder="actionModal.source === 'report' ? '<?php echo esc_attr(__('Write your email message...', 'nexdirectory')); ?>' : '<?php echo esc_attr(__('Write a note to the user...', 'nexdirectory')); ?>'"></textarea>

                    <div class="grid grid-cols-2 gap-3">
                        <button type="button" @click="closeActionModal()" class="py-3 bg-white border border-slate-300 rounded-xl text-slate-700 font-bold active:bg-slate-50"><?php esc_html_e('Cancel', 'nexdirectory'); ?></button>
                        <button type="button" @click="submitAction()" class="py-3 rounded-xl text-white font-bold transition-colors" :class="actionModal.type === 'reject' ? 'bg-rose-600 active:bg-rose-700 hover:bg-rose-700' : (actionModal.source === 'report' ? 'bg-amber-600 active:bg-amber-700 hover:bg-amber-700' : 'bg-indigo-600 active:bg-indigo-700 hover:bg-indigo-700')">
                            <?php esc_html_e('Submit Decision', 'nexdirectory'); ?>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="fixed top-4 left-4 right-4 md:top-auto md:left-auto md:bottom-5 md:right-5 z-50 pointer-events-none">
            <div x-show="toast.show" x-transition.opacity class="max-w-sm w-full mx-auto md:ml-auto bg-slate-900 text-white shadow-xl rounded-xl p-4 flex items-center pointer-events-auto">
                <span class="inline-block w-2 h-2 rounded-full mr-3" :class="toast.type === 'success' ? 'bg-emerald-400' : (toast.type === 'error' ? 'bg-rose-400' : 'bg-blue-400')"></span>
                <p class="text-sm font-medium flex-1" x-text="toast.message"></p>
                <button type="button" @click="toast.show = false" class="text-slate-400 p-1">
                    <svg class="w-4 h-4" 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>

    </div>
</div>
