import { css } from '@emotion/react';
import { useEffect } from 'react';
import { BottomTabBar } from '../src/components/BottomTabBar';
import { OfflineRewardModal } from '../src/components/OfflineRewardModal';
import { AchievementToast } from '../src/components/AchievementToast';
import { ElementsScreen } from '../src/components/screens/ElementsScreen';
import { EvolutionScreen } from '../src/components/screens/EvolutionScreen';
import { FusionScreen } from '../src/components/screens/FusionScreen';
import { ShopScreen } from '../src/components/screens/ShopScreen';
import { AchievementsScreen } from '../src/components/screens/AchievementsScreen';
import { SettingsScreen } from '../src/components/screens/SettingsScreen';
import { useIdleTick } from '../src/hooks/useIdleTick';
import { useGameStore } from '../src/store/useGameStore';
import { trackGameEvent } from '../src/analytics';

const rootStyle = css`
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f7f8fa;
  overflow: hidden;
  font-family:
    'Pretendard',
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
`;

const contentStyle = css`
  flex: 1;
  overflow-y: auto;
  padding-bottom: 72px;
`;

export default function IndexPage() {
  const { activeTab, setActiveTab, elements, gold, elementLevels } = useGameStore();
  useIdleTick();

  useEffect(() => {
    const ownedCount = Object.values(elements).filter((c) => c > 0).length;
    const totalLevel = Object.values(elementLevels).reduce((sum, lv) => sum + lv, 0);
    trackGameEvent('app_open', {
      platform: 'web',
      platform_time: new Date().toISOString(),
      owned_element_count: ownedCount,
      gold,
      total_enhance_level: totalLevel,
    });
  }, []);

  return (
    <div css={rootStyle}>
      <OfflineRewardModal />
      <AchievementToast />
      <div css={contentStyle}>
        {activeTab === 'elements' && <ElementsScreen />}
        {activeTab === 'evolution' && <EvolutionScreen />}
        {activeTab === 'fusion' && <FusionScreen />}
        {activeTab === 'shop' && <ShopScreen />}
        {activeTab === 'achievements' && <AchievementsScreen />}
        {activeTab === 'settings' && <SettingsScreen />}
      </div>
      <BottomTabBar activeTab={activeTab} onTabChange={setActiveTab} />
    </div>
  );
}