<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Templates use local variables supplied by the render context.
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 ? 'nexdirectory-moderation-queue-shell space-y-4 md:space-y-6' : 'nexdirectory-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('nexdirectory_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_status = sanitize_key((string) get_comment_meta($comment_id, 'nexdirectory_claim_status', true));
    $claim_is_pending = $claim_status === 'pending'
        || ($claim_status === '' && (string) $claim->comment_approved === '0');
    if (!$claim_is_pending) {
        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' => nexdirectory_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('nexdirectory_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' => nexdirectory_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('nexdirectory_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('nexdirectory_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 = '{}';
}
?>

<?php $this->enqueue_local_style_asset('templates-frontend-moderation-queue-php-style-1', 'assets/generated/templates-frontend-moderation-queue-php-style-1.css'); ?>

<?php $this->enqueue_local_script_asset('templates-frontend-moderation-queue-php-script-1', 'assets/generated/templates-frontend-moderation-queue-php-script-1.js'); ?>

<div class="nexdirectory-my-events nexdirectory-moderation-queue bg-slate-50 text-slate-800 font-sans antialiased <?php echo esc_attr($root_padding_classes); ?>"
     x-data='nexdirectoryModerationQueuePage(<?php echo esc_attr((string) $seed_json); ?>)'
     x-cloak>

    <?php if (!$admin_context) : ?>
        <?php echo wp_kses((string) $this->render_notice(), NEXDIRECTORY_Escaping::allowed_html()); ?>
        <?php
        // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Breadcrumb markup is sanitized by esc_nexdirectory_plugin_markup() against the plugin-owned allow-list.
        echo esc_nexdirectory_plugin_markup((string) $this->render_platform_breadcrumbs(__('Moderation Queue', 'nexdirectory')));
        ?>
    <?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>
                    <?php /* translators: %s: Placeholder value. */ ?>
                    <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 esc_url($action_url); ?>" class="p-4 md:p-6 border-b border-slate-200 bg-slate-50/80">
                <input type="hidden" name="action" value="nexdirectory_moderate_events_bulk">
                <input type="hidden" name="nexdirectory_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>
                    <?php /* translators: %s: Placeholder value. */ ?>
                    <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="nexdirectory-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">
                        <?php /* translators: %s: Placeholder value. */ ?>
                        <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 nexdirectory-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 nexdirectory-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 nexdirectory-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 nexdirectory-mq-cell-wrap" x-text="event.author"></span></td>
                                <td class="px-6 py-4 align-top text-sm text-slate-500 nexdirectory-mq-cell-wrap" x-text="event.date"></td>
                                <td class="px-6 py-4 align-top text-right">
                                    <div class="nexdirectory-mq-actions nexdirectory-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">
                <?php /* translators: %s: Placeholder value. */ ?>
                <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="nexdirectory-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 nexdirectory-mq-cell-wrap"><a :href="claim.url" target="_blank" rel="noopener noreferrer" class="font-bold text-slate-900 hover:text-indigo-600 hover:underline nexdirectory-mq-cell-wrap" x-text="claim.title"></a></td>
                                <td class="px-6 py-4 align-top nexdirectory-mq-cell-wrap"><span class="text-sm font-medium text-slate-700 nexdirectory-mq-cell-wrap" x-text="claim.requestedBy"></span></td>
                                <td class="px-6 py-4 align-top"><p class="text-sm text-slate-600 nexdirectory-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 nexdirectory-mq-cell-wrap" x-text="claim.date"></td>
                                <td class="px-6 py-4 align-top text-right">
                                    <div class="nexdirectory-mq-actions nexdirectory-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="nexdirectory-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 nexdirectory-mq-cell-wrap"><a :href="report.url" target="_blank" rel="noopener noreferrer" class="font-bold text-slate-900 hover:text-indigo-600 hover:underline nexdirectory-mq-cell-wrap" x-text="report.title"></a></td>
                                <td class="px-6 py-4 align-top nexdirectory-mq-cell-wrap"><span class="text-sm font-medium text-slate-700 nexdirectory-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 nexdirectory-mq-cell-wrap" x-text="report.details"></div></td>
                                <td class="px-6 py-4 align-top text-sm text-slate-500 nexdirectory-mq-cell-wrap" x-text="report.date"></td>
                                <td class="px-6 py-4 align-top text-right">
                                    <div class="nexdirectory-mq-actions nexdirectory-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 /* translators: %s: Placeholder value. */ ?>
                            <?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 /* translators: %s: Placeholder value. */ ?>
                            <?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>
