// client/src/shared/utils/isWebView.ts
export const isWebView = () => {
  return typeof window !== 'undefined' && (window as any).ReactNativeWebView;
};

<WebView
  source={{ uri: url }}
  sharedCookiesEnabled={true} // iOS: WKWebView에서 쿠키 공유 허용
  thirdPartyCookiesEnabled={true} // Android: 타사 쿠키 허용
  domStorageEnabled={true} // DOM Storage 허용
/>

// 안전한 옵셔널 체이닝 대안 (구형 WebView 대응)
// ❌ 구형에서 문법 에러
const value = obj?.nested?.value;
 
// ✅ Babel/SWC로 트랜스파일 필수
const value = obj && obj.nested && obj.nested.value;

// ❌ WebView에서 동작 안 함
Notification.requestPermission();
 
// ✅ 네이티브에 푸시 권한 요청 위임
sendToNative({ type: 'REQUEST_PUSH_PERMISSION' });

// 토큰 저장 시 네이티브에도 백업
function saveToken(token: string) {
  localStorage.setItem('accessToken', token);
 
  if (isWebView()) {
    sendToNative({ type: 'TOKEN_BACKUP', token });
  }
}
 
// 앱 시작 시 네이티브에서 토큰 복원 요청
if (isWebView() && !localStorage.getItem('accessToken')) {
  sendToNative({ type: 'TOKEN_RESTORE_REQUEST' });
}

// React Native에서 뒤로가기 처리
const [canGoBack, setCanGoBack] = useState(false);
 
<WebView
  ref={webViewRef}
  onNavigationStateChange={(navState) => {
    setCanGoBack(navState.canGoBack);
  }}
/>;
 
// Android 백버튼 인터셉트
useEffect(() => {
  const handler = BackHandler.addEventListener('hardwareBackPress', () => {
    if (canGoBack) {
      webViewRef.current?.goBack();
      return true; // 이벤트 소비, 앱 종료 방지
    }
    return false; // 앱 종료 허용
  });
  return () => handler.remove();
}, [canGoBack]);

// 하드웨어 가속 활성화 (Android)
<WebView androidLayerType='hardware' androidHardwareAccelerationDisabled={false} />

// 공통(권장): client/app이 공유하는 스키마(또는 동일한 형태로 복제)
type BridgeMessage =
  | { type: 'APP_READY'; version: string }
  | { type: 'ROUTE'; url: string }
  | { type: 'AUTH_REQUEST'; provider: 'apple' }
  | { type: 'AUTH_RESULT'; ok: boolean; token?: string; reason?: string }
  | { type: 'PUSH_TOKEN'; token: string }
  | { type: 'TAB_FOCUS'; tab: 'home' | 'collection' | 'comment' }
  | { type: 'ERROR'; message: string; detail?: unknown };

  ┌──────────────────────────────────────────────┬────────────────────┐
  │                    메시지                    │        용도        │
  ├──────────────────────────────────────────────┼────────────────────┤
  │ { type: 'AUTH_REQUEST', provider: 'apple' }  │ Apple 로그인 요청  │
  ├──────────────────────────────────────────────┼────────────────────┤
  │ { type: 'AUTH_REQUEST', provider: 'google' } │ Google 로그인 요청 │
  ├──────────────────────────────────────────────┼────────────────────┤
  │ { type: 'GROUP_CHANGED', groupId }           │ 그룹 변경 알림     │
  ├──────────────────────────────────────────────┼────────────────────┤
  │ { type: 'TAB_FOCUS', tab: 'comment' }        │ 탭 이동 요청       │
  └──────────────────────────────────────────────┴────────────────────┘

  ┌─────────────────┐                    ┌─────────────────┐
  │   Web (Client)  │  ───postMessage──► │  Native (App)   │
  │                 │                    │                 │
  │ ReactNativeWeb  │                    │ 애플 로그인 API  │
  │ View.postMessage│                    │ 호출 및 결과 수신│
  └─────────────────┘                    └─────────────────┘
           │                                      │
           │                                      │
           │◄──────────injectJavaScript──────────│
           │        { type: 'AUTH_RESULT',        │
           │          ok: true, token: '...' }    │
           │                                      │

export function sendToNative(message: unknown) {
  if (!(window as any).ReactNativeWebView) return;
 
  (window as any).ReactNativeWebView.postMessage(JSON.stringify(message));
}
 
sendToNative({ type: 'ROUTE', url: 'https://example.com/groups/123' });

  ┌─────────────────┐                    ┌─────────────────┐
  │   Web (Client)  │  ───postMessage──► │  Native (App)   │
  │                 │                    │                 │
  │ ReactNativeWeb  │                    │ WebView의       │
  │ View.postMessage│                    │ onMessage 핸들러│
  └─────────────────┘                    └─────────────────┘

// RN(WebView)에서 웹으로 이벤트 주입
webViewRef.current?.injectJavaScript(`
  window.dispatchEvent(new CustomEvent("native:tabFocus", { detail: { tab: "home" } }));
  true;
`);

useEffect(() => {
  const handler = (e: any) => {
    // e.detail.tab 기반으로 invalidateQueries 등
  };
 
  window.addEventListener('native:tabFocus', handler);
  return () => window.removeEventListener('native:tabFocus', handler);
}, []);

┌─────────────────────────────────────────────────────┐
│                      App                            │
├─────────┬─────────┬─────────┬─────────┬─────────────┤
│ WebView │ WebView │ WebView │ WebView │ WebView     │
│ (모멘트) │ (코멘트) │  (홈)   │ (모음집) │ (마이페이지) │
└─────────┴─────────┴─────────┴─────────┴─────────────┘
         ↑ 각각 독립적인 WebView 인스턴스

1. 마이페이지 탭에서 로그아웃 클릭
2. 웹이 로그인 페이지로 리다이렉트
3. 로그인 완료 → 웹이 홈("/")으로 리다이렉트
4. 하지만 현재 탭은 여전히 "마이페이지" 탭
5. 결과: 마이페이지 탭에 홈 화면이 표시됨 😱

┌─────────────────────────────────────────────────────┐
│                      App                            │
├─────────────────────────────────────────────────────┤
│                                                     │
│              단일 WebView (URL 전환)                 │
│                                                     │
├─────────────────────────────────────────────────────┤
│  [모멘트]  [코멘트]  [홈]  [모음집]  [마이페이지]     │
│              ↑ 커스텀 탭 바 (React Native)          │
└─────────────────────────────────────────────────────┘

// app/components/CustomTabBar.tsx
export type TabType = 'home' | 'moment' | 'comment' | 'collection' | 'my';
 
interface TabConfig {
  key: TabType;
  title: string;
  icon: ImageSourcePropType;
  requiresGroup: boolean; // 그룹 가입 필요 여부
}
 
const TABS: TabConfig[] = [
  {
    key: 'moment',
    title: '모멘트',
    icon: require('@/assets/images/paperAirplane.webp'),
    requiresGroup: true,
  },
  {
    key: 'comment',
    title: '코멘트',
    icon: require('@/assets/images/bluePlanet.webp'),
    requiresGroup: true,
  },
  { key: 'home', title: '홈', icon: require('@/assets/images/rocket.webp'), requiresGroup: false },
  {
    key: 'collection',
    title: '모음집',
    icon: require('@/assets/images/starPlanet.webp'),
    requiresGroup: true,
  },
  {
    key: 'my',
    title: '마이페이지',
    icon: require('@/assets/images/spaceMan.webp'),
    requiresGroup: false,
  },
];
 
interface CustomTabBarProps {
  currentTab: TabType;
  onTabPress: (tab: TabType) => void;
  hasGroup: boolean;
}
 
export function CustomTabBar({ currentTab, onTabPress, hasGroup }: CustomTabBarProps) {
  const insets = useSafeAreaInsets();
 
  return (
    <View style={[styles.container, { paddingBottom: insets.bottom }]}>
      {TABS.map((tab) => {
        const isActive = currentTab === tab.key;
        const isDisabled = tab.requiresGroup && !hasGroup;
 
        // 그룹이 없으면 그룹 필요 탭은 숨김
        if (isDisabled) return null;
 
        return (
          <TouchableOpacity
            key={tab.key}
            style={styles.tab}
            onPress={() => onTabPress(tab.key)}
            activeOpacity={0.7}
          >
            <Image source={tab.icon} style={[styles.icon, { opacity: isActive ? 1 : 0.5 }]} />
            <Text style={[styles.label, { opacity: isActive ? 1 : 0.5 }]}>{tab.title}</Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

// 탭 → URL 매핑
const TAB_URLS: Record<TabType, string> = {
  home: `${BASE_URL}/`,
  moment: `${BASE_URL}/moment`,
  comment: `${BASE_URL}/comment`,
  collection: `${BASE_URL}/collection`,
  my: `${BASE_URL}/my`,
};
 
function MainScreen() {
  const [currentTab, setCurrentTab] = useState<TabType>('home');
  const webViewRef = useRef<WebView>(null);
 
  const handleTabPress = (tab: TabType) => {
    setCurrentTab(tab);
    // WebView URL 변경 (새로고침 없이)
    webViewRef.current?.injectJavaScript(`
      window.location.href = '${TAB_URLS[tab]}';
      true;
    `);
  };
 
  return (
    <View style={{ flex: 1 }}>
      <WebView
        ref={webViewRef}
        source={{ uri: TAB_URLS[currentTab] }}
        // ... 기타 설정
      />
      <CustomTabBar currentTab={currentTab} onTabPress={handleTabPress} hasGroup={hasGroup} />
    </View>
  );
}