import { useEffect } from "react";
import { Stack } from "expo-router";
import * as Notifications from "expo-notifications";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { UnreadProvider, useUnread } from "../lib/unread-context";

// Q-1/Q-2 根佈局：只有一層 Stack 包住底部分頁籤群組，佈局策略跟 apps/web 的 RWD 行動版共用同一份設計原則
// （立繪置頂 40% ＋ 對話流覆蓋其上），只是 React Native 沒有 CSS，改用 View 的 flex 排版達成同樣效果。
function NotificationBadgeBridge() {
  const { markUnread } = useUnread();

  // Q-4：收到推播（含 App 前景中收到）就點亮聊天分頁的心跳紅點，直到使用者切回聊天分頁才清除。
  useEffect(() => {
    const subscription = Notifications.addNotificationReceivedListener(() => {
      markUnread();
    });
    return () => subscription.remove();
  }, [markUnread]);

  return null;
}

export default function RootLayout() {
  return (
    <SafeAreaProvider>
      <UnreadProvider>
        <NotificationBadgeBridge />
        <Stack screenOptions={{ headerShown: false }} />
      </UnreadProvider>
    </SafeAreaProvider>
  );
}