import React, { useEffect } from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { AuthGate } from '@thaypley/ui'
import { useWerkAuth } from '@thaypley/supabase-client'
import { useWerkStore } from '@/store/useWerkStore'
import { werkClient } from '@/lib/supabase'
import { pb } from '@/lib/pb'
import AppShell                         from '@/components/AppShell'
import Login                            from '@/pages/Login'
import Dashboard                        from '@/pages/Dashboard'
import Workspace                        from '@/pages/Workspace'
import Tasks                            from '@/pages/Tasks'
import Chat                             from '@/pages/Chat'
import CRM                              from '@/pages/CRM'
import Invoices                         from '@/pages/Invoices'
import Directory                        from '@/pages/Directory'
import { ProjectList, ProjectBoard }    from '@/pages/Projects'
import Join                             from '@/pages/Join'
import Settings                         from '@/pages/Settings'
import './index.css'

function App() {
  const { pbUser, supabaseTokens, setSupabaseTokens } = useWerkStore()
  useWerkAuth(werkClient, supabaseTokens)

  useEffect(() => {
    if (pbUser && !supabaseTokens && pb.authStore.token) {
      fetch('/api/auth/relay', {
        method:      'POST',
        headers:     { Authorization: `Bearer ${pb.authStore.token}` },
        credentials: 'include',
      })
        .then((r) => r.json())
        .then((data) => { if (data.supabase) setSupabaseTokens(data.supabase) })
        .catch(() => {})
    }
  }, [pbUser])

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

  if (!pbUser) return <Login />

  return (
    <BrowserRouter>
      <Routes>
        <Route element={<AppShell />}>
          <Route path="/"                  element={<Dashboard />} />
          <Route path="/workspace"         element={<Workspace />} />
          <Route path="/tasks"             element={<Workspace />} />
          <Route path="/tasks/:groupId"    element={<Tasks />} />
          <Route path="/chat"              element={<Chat />} />
          <Route path="/chat/:groupId"     element={<Chat />} />
          <Route path="/crm"               element={<CRM />} />
          <Route path="/invoices"          element={<Invoices />} />
          <Route path="/directory"         element={<Directory />} />
          {/* Phase 4: client project boards */}
          <Route path="/projects"          element={<ProjectList />} />
          <Route path="/projects/:projectId" element={<ProjectBoard />} />
          <Route path="/join/:token"       element={<Join />} />
          <Route path="/settings"          element={<Settings />} />
          <Route path="*"                  element={<Navigate to="/" />} />
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

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