import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { createStore, Provider } from 'jotai';
import { LazyMotion, MotionConfig } from 'motion/react';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { ProxyLayout } from './components/ProxyLayout';
import { listen, rpc } from './lib/rpc';
import { initHotkeys } from './lib/hotkeys';
import { applyChange, dataAtom, replaceAll } from './lib/store';
import './main.css';

const queryClient = new QueryClient();
const jotaiStore = createStore();

// Load initial models from the database
rpc('list_models', {}).then((res) => {
  jotaiStore.set(dataAtom, (prev) => replaceAll(prev, 'http_exchange', res.httpExchanges));
});

// Register hotkeys from action metadata
initHotkeys();

// Subscribe to model change events from the backend
listen('model_write', (payload) => {
  jotaiStore.set(dataAtom, (prev) =>
    applyChange(prev, 'http_exchange', payload.model, payload.change),
  );
});

const motionFeatures = () => import('framer-motion').then((mod) => mod.domAnimation);

createRoot(document.getElementById('root') as HTMLElement).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <Provider store={jotaiStore}>
        <LazyMotion strict features={motionFeatures}>
          <MotionConfig transition={{ duration: 0.1 }}>
            <ProxyLayout />
          </MotionConfig>
        </LazyMotion>
      </Provider>
    </QueryClientProvider>
  </StrictMode>,
);