zellyy-finance/src/pages/Index.tsx

import React, { useEffect } from 'react';
import NavBar from '@/components/NavBar';
import AddTransactionButton from '@/components/AddTransactionButton';
import Header from '@/components/Header';
import WelcomeDialog from '@/components/onboarding/WelcomeDialog';
import HomeContent from '@/components/home/HomeContent';
import { useBudget } from '@/contexts/BudgetContext';
import { useAuth } from '@/contexts/auth';
import { useWelcomeDialog } from '@/hooks/useWelcomeDialog';
import { useDataInitialization } from '@/hooks/useDataInitialization';
import { useIsMobile } from '@/hooks/use-mobile';

// 메인 컴포넌트
const Index = () => {
  const {
    transactions,
    budgetData,
    selectedTab,
    setSelectedTab,
    handleBudgetGoalUpdate,
    updateTransaction,
    getCategorySpending,
    resetBudgetData
  } = useBudget();

  const { user } = useAuth();
  const { showWelcome, checkWelcomeDialogState, handleCloseWelcome } = useWelcomeDialog();
  const { isInitialized } = useDataInitialization(resetBudgetData);
  const isMobile = useIsMobile();

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

  // 페이지가 처음 로드될 때 데이터 로딩 확인
  useEffect(() => {
    console.log('Index 페이지 마운트, 현재 데이터 상태:');
    console.log('트랜잭션:', transactions.length);
    console.log('예산 데이터:', budgetData);
    
    // 페이지 마운트 시 데이터 동기화 이벤트 수동 발생
    try {
      window.dispatchEvent(new Event('transactionUpdated'));
      window.dispatchEvent(new Event('budgetDataUpdated'));
      window.dispatchEvent(new Event('categoryBudgetsUpdated'));
    } catch (e) {
      console.error('이벤트 발생 오류:', e);
    }
    
    // 백업된 데이터 복구 확인 (메인 데이터가 없는 경우만)
    try {
      if (!localStorage.getItem('budgetData')) {
        const budgetBackup = localStorage.getItem('budgetData_backup');
        if (budgetBackup) {
          console.log('예산 데이터 백업에서 복구');
          localStorage.setItem('budgetData', budgetBackup);
          window.dispatchEvent(new Event('budgetDataUpdated'));
        }
      }
      
      if (!localStorage.getItem('categoryBudgets')) {
        const categoryBackup = localStorage.getItem('categoryBudgets_backup');
        if (categoryBackup) {
          console.log('카테고리 예산 백업에서 복구');
          localStorage.setItem('categoryBudgets', categoryBackup);
          window.dispatchEvent(new Event('categoryBudgetsUpdated'));
        }
      }
      
      if (!localStorage.getItem('transactions')) {
        const transactionBackup = localStorage.getItem('transactions_backup');
        if (transactionBackup) {
          console.log('트랜잭션 백업에서 복구');
          localStorage.setItem('transactions', transactionBackup);
          window.dispatchEvent(new Event('transactionUpdated'));
        }
      }
    } catch (error) {
      console.error('백업 복구 시도 중 오류:', error);
    }
  }, [transactions.length, budgetData]);

  // 앱이 포커스를 얻었을 때 데이터를 새로고침
  useEffect(() => {
    const handleFocus = () => {
      console.log('창이 포커스를 얻음 - 데이터 새로고침');
      // 이벤트 발생시켜 데이터 새로고침
      try {
        window.dispatchEvent(new Event('storage'));
        window.dispatchEvent(new Event('transactionUpdated'));
        window.dispatchEvent(new Event('budgetDataUpdated'));
        window.dispatchEvent(new Event('categoryBudgetsUpdated'));
      } catch (e) {
        console.error('이벤트 발생 오류:', e);
      }
    };

    // 포커스 이벤트
    window.addEventListener('focus', handleFocus);
    
    // 가시성 변경 이벤트 (백그라운드에서 전경으로 돌아올 때)
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'visible') {
        console.log('페이지가 다시 보임 - 데이터 새로고침');
        handleFocus();
      }
    });
    
    // 정기적인 데이터 새로고침 (10초마다)
    const refreshInterval = setInterval(() => {
      if (document.visibilityState === 'visible') {
        console.log('정기 새로고침 - 데이터 업데이트');
        handleFocus();
      }
    }, 10000);
    
    return () => {
      window.removeEventListener('focus', handleFocus);
      document.removeEventListener('visibilitychange', () => {});
      clearInterval(refreshInterval);
    };
  }, []);

  return (
    <div className="min-h-screen bg-neuro-background pb-24">
      <div className="max-w-md mx-auto px-6">
        <Header />

        <HomeContent 
          transactions={transactions}
          budgetData={budgetData}
          selectedTab={selectedTab}
          setSelectedTab={setSelectedTab}
          handleBudgetGoalUpdate={handleBudgetGoalUpdate}
          updateTransaction={updateTransaction}
          getCategorySpending={getCategorySpending}
        />
      </div>
      <AddTransactionButton />
      <NavBar />
      
      {/* 첫 사용자 안내 팝업 */}
      <WelcomeDialog open={showWelcome} onClose={handleCloseWelcome} />
    </div>
  );
};

export default Index;