import { StrictMode, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { ConfigProvider, App as AntdApp } from 'antd';
import ptBR from 'antd/locale/pt_BR';
import { QueryClientProvider } from '@tanstack/react-query';
import { RouterProvider } from '@tanstack/react-router';
import dayjs from 'dayjs';
import 'dayjs/locale/pt-br';

import './styles/global.css';

import { sarTheme } from './lib/theme';
import { queryClient } from './lib/query-client';
import { router } from './lib/router';
import { authStore } from './lib/auth-store';
import { DevLogin } from './components/dev/DevLogin';

dayjs.locale('pt-br');

const isDev = import.meta.env.DEV;

function Root() {
  const [hasToken, setHasToken] = useState(() => !!authStore.get());

  // Em dev, exibe DevLogin se não houver token. Em prod, fluxo de auth real virá aqui.
  if (isDev && !hasToken) {
    return <DevLogin onLogin={() => setHasToken(true)} />;
  }

  return <RouterProvider router={router} />;
}

const rootEl = document.getElementById('root');
if (!rootEl) {
  throw new Error('Root element not found');
}

createRoot(rootEl).render(
  <StrictMode>
    <ConfigProvider theme={sarTheme} locale={ptBR} componentSize="middle">
      <AntdApp>
        <QueryClientProvider client={queryClient}>
          <Root />
        </QueryClientProvider>
      </AntdApp>
    </ConfigProvider>
  </StrictMode>,
);