<?php
 
 
 
 
 
$totalMessages = $totalMessages ?? ($currentTab === 'messages' ? ($total ?? 0) : 0);
$totalReports  = $totalReports  ?? ($currentTab === 'reports'  ? ($total ?? 0) : 0);
?>

<style>
 
@media (max-width: 1023.5px) {
     
    .inbox-shell[data-pane="list"]   .inbox-detail-pane { display: none; }
    .inbox-shell[data-pane="detail"] .inbox-list-pane   { display: none; }
     
    .inbox-mobile-hide { display: none !important; }

     
    .inbox-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        padding-bottom: 2px;
        margin-right: -1rem;
        padding-right: 1rem;
    }
    .inbox-pills::-webkit-scrollbar { display: none; }
    .inbox-pills > * { scroll-snap-align: start; flex-shrink: 0; }

     
    .inbox-shell input[type="checkbox"] { width: 16px; height: 16px; }
    .inbox-row-tap { min-height: 60px; }

     
    .inbox-detail-pane { margin-top: 0 !important; margin-left: -1rem; margin-right: -1rem; }
    .inbox-detail-pane > article,
    .inbox-detail-pane > div:not(.inbox-detail-back) {
        border-left: 0; border-right: 0; border-radius: 0; box-shadow: none;
        min-height: calc(100vh - 160px);
    }

     
    .inbox-detail-back {
        position: sticky; top: 0; z-index: 20;
        background: #fff; border-bottom: 1px solid #e5e7eb;
        padding: 10px 14px; display: flex; align-items: center; gap: 8px;
    }

     
    .inbox-detail-actions {
        position: sticky; bottom: 0; z-index: 10;
        background: #f9fafb; border-top: 1px solid #e5e7eb;
        padding: 10px 14px;
    }
}

@media (min-width: 1024px) {
     
    .inbox-detail-back { display: none; }
}
</style>


<div class="mb-4 flex items-end justify-between gap-3 flex-wrap">
    <div>
        <h1 class="text-xl font-semibold text-gray-900">Inbox</h1>
        <p class="text-xs text-gray-500 mt-0.5 hidden sm:block">Contact form submissions and content reports.</p>
    </div>
</div>


<div class="border-b border-gray-200 mb-4">
    <nav class="flex gap-0 -mb-px admin-tabs">
        <a href="/admin/inbox?tab=messages"
           class="inline-flex items-center gap-2 px-5 py-3 text-sm font-medium border-b-2 transition-colors <?= $currentTab === 'messages' ? 'border-primary-600 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' ?>">
            <i class="fa-solid fa-envelope text-[13px]"></i>
            Messages
            <?php if ($unreadMessages > 0): ?>
            <span class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-bold text-white bg-primary-600 rounded-full"><?= $unreadMessages ?></span>
            <?php endif; ?>
        </a>
        <a href="/admin/inbox?tab=reports"
           class="inline-flex items-center gap-2 px-5 py-3 text-sm font-medium border-b-2 transition-colors <?= $currentTab === 'reports' ? 'border-primary-600 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' ?>">
            <i class="fa-solid fa-flag text-[13px]"></i>
            Reports
            <?php if ($pendingReports > 0): ?>
            <span class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-bold text-white bg-red-500 rounded-full"><?= $pendingReports ?></span>
            <?php endif; ?>
        </a>
    </nav>
</div>

<?php if ($currentTab === 'messages'): ?>
    <?php require APP_ROOT . '/templates/admin/_inbox_messages.php'; ?>
<?php else: ?>
    <?php require APP_ROOT . '/templates/admin/_inbox_reports.php'; ?>
<?php endif; ?>
