import {StrictMode} from 'react';
import {createRoot, hydrateRoot} from 'react-dom/client';
import type {SitePayload} from '@o2o/shared';
import {App} from './App';
import './index.css';

declare global {
  interface Window {
    /** 프리렌더가 HTML 안에 심어 둔 payload. 이게 있으면 하이드레이션, 없으면 개발 모드. */
    __SITE_PAYLOAD__?: SitePayload;
  }
}

const container = document.getElementById('root')!;
const injected = window.__SITE_PAYLOAD__;

if (injected) {
  // 정적 HTML 위에 하이드레이션. 서버가 그린 마크업과 1:1 이어야 하므로
  // 여기서 payload 를 바꾸거나 fetch 를 걸지 않는다.
  hydrateRoot(
    container,
    <StrictMode>
      <App payload={injected} />
    </StrictMode>,
  );
} else {
  // 개발 서버(vite dev) — 데모 payload 로 CSR 렌더. 프로덕션 경로가 아니다.
  void import('./fixtures/moonlight-stay').then(({MOONLIGHT_STAY_PAYLOAD}) => {
    createRoot(container).render(
      <StrictMode>
        <App payload={MOONLIGHT_STAY_PAYLOAD} />
      </StrictMode>,
    );
  });
}