import { ApolloClient, ApolloProvider, HttpLink, InMemoryCache, from } from '@apollo/client';
import { onError } from '@apollo/client/link/error';
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 { Session } from 'inspector';
import { routeTree } from './routeTree.gen';

// 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 MODE = import.meta.env.VITE_MODE || 'prod';
const isProd = MODE === 'prod';

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

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

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

  // if (authHeaders == null) refreshToken();

  const httpLink = new HttpLink({
    uri,
    credentials: 'include',
    headers: authHeaders != null ? { authorization: JSON.stringify(authHeaders) } : undefined
  });

  const errorLink = onError(({ graphQLErrors, networkError }) => {
    if (graphQLErrors)
      graphQLErrors.forEach(({ message, locations, path }) =>
        console.error(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`)
      );

    if (networkError) console.error(`[Network error]: ${networkError}`);
  });

  const client = new ApolloClient({
    uri,
    link: isProd ? undefined : from([errorLink, httpLink]),
    cache: new InMemoryCache(),
    connectToDevTools: !isProd,
    credentials: 'include'
  });

  return (
    <StrictMode>
      <AuthProvider
        value={{
          authHeaders,
          setHeaders: (session: 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 />);
}