// ============================================================
// アプリシェル: 実データ受信版
// ============================================================
const T_app = window.TOKENS;

function AppRoot() {
  const [screen, setScreen] = React.useState(() => localStorage.getItem('hub_screen') || 'home');
  const [inSetup, setInSetup] = React.useState(false);
  const [dataMode, setDataMode] = React.useState(window.APP_STATE.mode || 'empty');
  const [refreshKey, setRefreshKey] = React.useState(0);
  const [loadState, setLoadState] = React.useState('loading');

  React.useEffect(() => {
    localStorage.setItem('hub_screen', screen);
  }, [screen]);

  const refresh = React.useCallback(async () => {
    setLoadState('loading');
    window.APP_STATE.syncStatus = 'syncing';
    try {
      const hasData = await window.fetchHubData();
      setDataMode(hasData ? 'active' : 'empty');
      setLoadState(hasData ? 'ready' : 'empty');
      setRefreshKey((value) => value + 1);
    } catch (error) {
      window.APP_STATE = {
        ...window.APP_STATE,
        mode: 'empty',
        syncStatus: 'offline',
        lastSync: null,
        lastSyncLabel: 'HUB未接続',
      };
      setDataMode('empty');
      setLoadState('error');
      setRefreshKey((value) => value + 1);
    }
  }, []);

  React.useEffect(() => {
    refresh();
    const timer = window.setInterval(refresh, 60000);
    return () => window.clearInterval(timer);
  }, [refresh]);

  const onNav = (id) => {
    if (id === 'setup') {
      setInSetup(true);
      return;
    }
    setScreen(id);
  };

  let content;
  if (inSetup) {
    content = <window.SetupWizardA onDone={() => { setInSetup(false); refresh(); }} onExit={() => setInSetup(false)} />;
  } else if (screen === 'home') {
    content = <window.HomeScreenA key={`home-${refreshKey}`} onNav={onNav} mode={dataMode} onStartSetup={() => setInSetup(true)} onRefresh={refresh} loadState={loadState} />;
  } else if (screen === 'acc') {
    content = <window.AccountsScreen key={`acc-${refreshKey}`} onNav={onNav} onRefresh={refresh} />;
  } else if (screen === 'cal') {
    content = <window.CalendarScreen key={`cal-${refreshKey}`} onNav={onNav} onRefresh={refresh} />;
  } else if (screen === 'ana') {
    content = <window.AnalysisScreen key={`ana-${refreshKey}`} onNav={onNav} />;
  } else if (screen === 'more') {
    content = <window.MoreScreen key={`more-${refreshKey}`} onNav={onNav} onReRunSetup={() => setInSetup(true)} onRefresh={refresh} loadState={loadState} />;
  }

  return (
    <div style={{
      minHeight: '100vh',
      background: '#08090D',
      backgroundImage: `
        radial-gradient(1200px 800px at 20% 0%, rgba(59,130,246,0.06), transparent 60%),
        radial-gradient(1000px 600px at 80% 100%, rgba(34,197,94,0.04), transparent 60%)
      `,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      color: T_app.fg,
      fontFamily: T_app.fontUi,
      padding: 24,
    }}>
      <window.IOSDevice width={402} height={874} dark={true}>
        <div style={{
          height: '100%',
          overflow: 'auto',
          background: T_app.bg,
          paddingBottom: 74,
          position: 'relative',
        }}>
          {content}
        </div>
        {!inSetup && (
          <window.BottomTabs current={screen} onChange={(id) => setScreen(id)} />
        )}
      </window.IOSDevice>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<AppRoot />);