import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
import '@client/assets/styles/index.css';
import '@client/assets/styles/nerd-fonts-icons.css';
import { Provider } from '@client/components/ui/provider';
import { Toaster } from '@client/components/ui/toaster';
import { RouterProvider, createRouter } from '@tanstack/react-router';
import { StrictMode, createContext, useState } from 'react';
import ReactDOM from 'react-dom/client';

// TanStackRouter - Import the generated route tree
import { routeTree } from './routeTree.gen';
import { Session } from 'inspector';

// Create a new router instance
const router = createRouter({ routeTree });

// Register the router instance for type safety
declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router;
  }
}

// Environment
const HOST = import.meta.env.VITE_HOST || 'localhost';
const PORT = import.meta.env.VITE_PORT || '3000';
const uri = `http://${HOST}:${PORT}/graphql`;

// Auth context
export const AuthContext = createContext<any>(null);

function App() {
  const sessionRaw = localStorage.getItem('session');
  const session: Session | null = sessionRaw !== null ? JSON.parse(sessionRaw) : null;

  const [authHeaders, setAuthHeaders] = useState<Session | null>(session);
  const AuthProvider = AuthContext.Provider;

  const client = new ApolloClient({
    uri,
    cache: new InMemoryCache(),
    connectToDevTools: true,
    headers: authHeaders != null ? { authorization: JSON.stringify(authHeaders) } : undefined
  });

  return (
    <StrictMode>
      <AuthProvider
        value={{
          authHeaders,
          setHeaders: (session: Session) => {
            localStorage.setItem('session', JSON.stringify(session));
            setAuthHeaders(session);
          }
        }}
      >
        <ApolloProvider client={client}>
          <Provider>
            <Toaster />
            <RouterProvider router={router} />
          </Provider>
        </ApolloProvider>
      </AuthProvider>
    </StrictMode>
  );
}

const rootElement = document.getElementById('root')!;
if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(<App />);
}