<?php
require __DIR__ . '/_boot.php';
require __DIR__ . '/partials/nav.php';
require __DIR__ . '/partials/mobile_member_shell.php';

if (!$user) {
    header('Location: login-dev.php?source=app');
    exit;
}

$isNativeApp = \App\Core\Auth::isNativeAppRequest() && (($user['role_name'] ?? '') === 'member');
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="theme-color" content="#087f5b">
  <title>Notifications | Pyrk</title>
  <link rel="stylesheet" href="assets/css/app.css">
  <link rel="stylesheet" href="assets/css/member_notifications.css?v=mobile-collapse-v1">
  <?php if ($isNativeApp): ?><link rel="stylesheet" href="assets/css/mobile_member_app.css?v=1"><?php else: ?><link rel="stylesheet" href="assets/css/native_app_mobile_polish.css?v=6"><?php endif; ?>
</head>
<body class="<?= $isNativeApp ? 'pyrk-native-app mobile-member-app mobile-notifications-app' : '' ?>" data-mobile-notifications="<?= $isNativeApp ? '1' : '0' ?>">
<?php if ($isNativeApp): ?>
  <?php pyrk_mobile_member_header('Notifications', 'Tap a message to open or close it'); ?>
<?php else: ?>
  <?php pyrk_render_nav('client'); ?>
<?php endif; ?>

<main class="<?= $isNativeApp ? 'mobile-member-main member-notifications-page is-mobile-app' : 'container member-notifications-page' ?>">
  <?php if ($isNativeApp): ?>
    <section class="mobile-page-intro">
      <div><p class="mobile-kicker">Inbox</p><h2>Your notifications</h2><p>Messages stay collapsed until you tap them.</p></div>
      <span class="mobile-status-chip"><b id="memberUnreadCount">0</b>&nbsp;unread</span>
    </section>
    <section class="mobile-notification-controls">
      <button type="button" id="markAllNotificationsReadBtn">Mark all read</button>
      <button type="button" id="markAllNotificationsUnreadBtn">Mark all unread</button>
      <span id="memberNotificationCount" hidden>0</span><span id="memberNotificationStatus" hidden>Ready</span>
    </section>
  <?php else: ?>
    <section class="page-hero dashboard-hero enterprise-hero">
      <div>
        <p class="eyebrow">Inbox</p>
        <h1>Notifications</h1>
        <p class="muted">Official Pyrk announcements and web notifications sent by the team.</p>
      </div>
      <div class="hero-actions">
        <button class="btn btn-light" type="button" id="markAllNotificationsReadBtn">Mark all as read</button>
        <button class="btn btn-light" type="button" id="markAllNotificationsUnreadBtn">Mark all unread</button>
      </div>
    </section>

    <section class="grid three compact-stats">
      <div class="stat stat-pro"><span>Unread</span><strong id="memberUnreadCount">0</strong></div>
      <div class="stat stat-pro"><span>Total shown</span><strong id="memberNotificationCount">0</strong></div>
      <div class="stat stat-pro"><span>Status</span><strong id="memberNotificationStatus">Ready</strong></div>
    </section>
  <?php endif; ?>

  <section class="<?= $isNativeApp ? 'mobile-notification-inbox' : 'panel' ?>">
    <?php if (!$isNativeApp): ?><div class="section-head"><div><p class="eyebrow">Messages</p><h2>Web notifications</h2></div></div><?php endif; ?>
    <div id="memberNotificationList" class="member-notification-list"></div>
  </section>
</main>

<?php if ($isNativeApp) pyrk_mobile_member_dock(''); ?>
<script>
window.PYRK_API_BASE='../api';
window.PYRK_CSRF='<?= htmlspecialchars($csrf, ENT_QUOTES, 'UTF-8') ?>';
</script>
<script src="assets/js/api.js"></script>
<script src="assets/js/member_notifications.js?v=mobile-collapse-v1"></script>
<?php if (!$isNativeApp): ?><script src="assets/js/native_app_mobile_polish.js?v=6"></script><?php endif; ?>
</body>
</html>
