import { useState, useEffect } from 'react'
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
import { supabase } from './supabase'
import Auth from './components/Auth'
import ProfileForm from './components/ProfileForm'
import ResultChart from './components/ResultChart'
import Home from './components/Home'
import './App.css'

function App() {
  const [session, setSession] = useState(null)
  const [profile, setProfile] = useState(null)
  const [sajuData, setSajuData] = useState(null)

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session)
      if (session) {
        fetchProfile(session.user.id)
      }
    })

    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session)
      if (session) {
        fetchProfile(session.user.id)
      } else {
        setProfile(null)
        setSajuData(null)
      }
    })

    return () => subscription.unsubscribe()
  }, [])

  const fetchProfile = async (userId) => {
    try {
      const { data, error } = await supabase
        .from('profiles')
        .select('*')
        .eq('id', userId)
        .single()
        
      if (error) throw error
      
      if (data) {
        setProfile(data)
        setSajuData(data.saju_data)
      } else {
        setProfile(null)
        setSajuData(null)
      }
    } catch (error) {
      console.error('프로필 불러오기 오류:', error)
    }
  }

  const handleProfileComplete = (sajuData) => {
    setSajuData(sajuData)
    setProfile({...profile, saju_data: sajuData})
  }

  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={!session ? <Auth /> : <Navigate to="/profile" />} />
        <Route path="/signup" element={!session ? <Auth /> : <Navigate to="/profile" />} />
        <Route 
          path="/profile" 
          element={
            session ? (
              !profile || !profile.saju_data ? (
                <ProfileForm session={session} onComplete={handleProfileComplete} />
              ) : (
                <Navigate to="/result" />
              )
            ) : (
              <Navigate to="/login" />
            )
          } 
        />
        <Route 
          path="/result" 
          element={
            session && profile && sajuData ? (
              <ResultChart sajuData={sajuData} mbti={profile.mbti} />
            ) : (
              <Navigate to={session ? "/profile" : "/login"} />
            )
          } 
        />
        <Route path="*" element={<Navigate to="/" />} />
      </Routes>
    </Router>
  )
}

export default App