import type { Session } from '@supabase/supabase-js'
import { useEffect, useState } from 'react'
import CompleteProfileScreen from './components/auth/CompleteProfileScreen'
import LoginScreen from './components/auth/LoginScreen'
import AppShell from './components/layout/AppShell'
import { supabase } from './data/supabaseClient'

export default function App() {
  // undefined = still checking for an existing session; null = signed out.
  const [session, setSession] = useState<Session | null | undefined>(undefined)
  // undefined = haven't checked yet; null = has one; true = needs to set one.
  const [needsUsername, setNeedsUsername] = useState<boolean | null | undefined>(undefined)

  useEffect(() => {
    supabase.auth.getSession().then(({ data }) => setSession(data.session))
    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => setSession(session))
    return () => subscription.unsubscribe()
  }, [])

  useEffect(() => {
    // Nothing to check while signed out — the render logic below never
    // reads needsUsername in that case anyway.
    if (!session) return
    supabase
      .from('profiles')
      .select('username')
      .eq('id', session.user.id)
      .single()
      .then(({ data }) => setNeedsUsername(!data?.username))
  }, [session])

  if (session === undefined) {
    return <div className="flex h-dvh items-center justify-center text-sm text-slate-400">Loading…</div>
  }

  if (!session) {
    return <LoginScreen />
  }

  if (needsUsername === undefined) {
    return <div className="flex h-dvh items-center justify-center text-sm text-slate-400">Loading…</div>
  }

  if (needsUsername) {
    return <CompleteProfileScreen onDone={() => setNeedsUsername(false)} />
  }

  return <AppShell />
}