import React, { useEffect } from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import { QueryClientProvider } from '@tanstack/react-query'
import { AuthGate } from '@thaypley/ui'
import { useFamAuth } from '@thaypley/supabase-client'
import { useFamStore } from '@/store/useFamStore'
import { famClient } from '@/lib/supabase'
import { pb } from '@/lib/pb'
import { queryClient } from '@/lib/query-client'
import AppRoutes from '@/router/routes'
import './index.css'
import './app.css'

function App() {
  const { pbUser, supabaseTokens, setSupabaseTokens } = useFamStore()
  useFamAuth(famClient, supabaseTokens)

  useEffect(() => {
    if (!pbUser || supabaseTokens || !pb.authStore.token) return

    let cancelled = false
    const relay = (attempt: number) => {
      fetch('/api/auth/relay', {
        method:      'POST',
        headers:     { Authorization: `Bearer ${pb.authStore.token}` },
        credentials: 'include',
      })
        .then((r) => {
          if (!r.ok) throw new Error(`auth relay responded ${r.status}`)
          return r.json()
        })
        .then((data) => { if (!cancelled && data.supabase) setSupabaseTokens(data.supabase) })
        .catch((err) => {
          console.error('[auth/relay]', err)
          if (!cancelled && attempt === 0) setTimeout(() => relay(1), 1000)
        })
    }
    relay(0)

    return () => { cancelled = true }
  }, [pbUser])

  const childSession = useFamStore((s) => s.childSession)

  useEffect(() => {
    document.body.setAttribute('data-platform', 'fam')
  }, [])

  useEffect(() => {
    if (childSession) {
      document.body.setAttribute('data-child-session', 'true')
    } else {
      document.body.removeAttribute('data-child-session')
    }
  }, [childSession])

  return (
    <BrowserRouter>
      <AppRoutes />
    </BrowserRouter>
  )
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <AuthGate onUnauthenticated={() => {}}>
        <App />
      </AuthGate>
    </QueryClientProvider>
  </React.StrictMode>
)