
import React, { useEffect } from 'react';
import NavBar from '@/components/NavBar';
import AddTransactionButton from '@/components/AddTransactionButton';
import WelcomeDialog from '@/components/onboarding/WelcomeDialog';
import IndexContent from '@/components/home/IndexContent';
import { useBudget } from '@/contexts/budget/BudgetContext';
import { useWelcomeDialog } from '@/hooks/useWelcomeDialog';
import { useDataInitialization } from '@/hooks/useDataInitialization';
import SafeAreaContainer from '@/components/SafeAreaContainer';
import { useInitialDataLoading } from '@/hooks/useInitialDataLoading';
import { useAppFocusEvents } from '@/hooks/useAppFocusEvents';
import { useWelcomeNotification } from '@/hooks/useWelcomeNotification';

/**
 * 애플리케이션의 메인 인덱스 페이지 컴포넌트
 */
const Index = () => {
  const { resetBudgetData } = useBudget();
  const { showWelcome, checkWelcomeDialogState, handleCloseWelcome } = useWelcomeDialog();
  const { isInitialized } = useDataInitialization(resetBudgetData);
  
  // 커스텀 훅 사용으로 코드 분리
  useInitialDataLoading();
  useAppFocusEvents();
  useWelcomeNotification(isInitialized);

  // 초기화 후 환영 메시지 표시 상태 확인
  useEffect(() => {
    if (isInitialized) {
      const timeoutId = setTimeout(checkWelcomeDialogState, 500);
      return () => clearTimeout(timeoutId);
    }
  }, [isInitialized, checkWelcomeDialogState]);

  return (
    <SafeAreaContainer className="min-h-screen bg-neuro-background pb-24" extraBottomPadding={true}>
      <IndexContent />
      <AddTransactionButton />
      <NavBar />
      
      {/* 첫 사용자 안내 팝업 */}
      <WelcomeDialog open={showWelcome} onClose={handleCloseWelcome} />
    </SafeAreaContainer>
  );
};

export default Index;
