import { StrictMode, Component, type ReactNode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router';
import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import App from './App';
import { queryClient } from './lib/queryClient';
import './styles/globals.css';
// v6.1.0-beta.3 Phase 0a — adds CSS variables under :root[data-theme=…]
// for Office / Workshop / Observatory. Bridge hook in App sets the
// attribute from the existing DeskTheme React context.
import './styles/theme-variables.css';
import { DeskThemeProvider } from '@/components/desk/DeskTheme';

function shouldShowQueryDevtools(): boolean {
  try {
    const env = (import.meta as unknown as { env?: { DEV?: boolean } }).env;
    return Boolean(env?.DEV) && localStorage.getItem('titan:query-devtools') === '1';
  } catch {
    return false;
  }
}

class ErrorBoundary extends Component<{ children: ReactNode }, { error: Error | null }> {
  state = { error: null as Error | null };
  static getDerivedStateFromError(error: Error) { return { error }; }
  render() {
    if (this.state.error) {
      return (
        <div style={{ padding: 40, color: 'var(--color-error)', fontFamily: 'monospace', background: 'var(--color-bg)', minHeight: '100vh' }}>
          <h1 style={{ fontSize: 20, marginBottom: 16 }}>TITAN UI Error</h1>
          <pre style={{ whiteSpace: 'pre-wrap', fontSize: 13, color: 'var(--color-text)' }}>{this.state.error.message}</pre>
          <pre style={{ whiteSpace: 'pre-wrap', fontSize: 11, color: 'var(--color-text-muted)', marginTop: 12 }}>{this.state.error.stack}</pre>
        </div>
      );
    }
    return this.props.children;
  }
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ErrorBoundary>
      <DeskThemeProvider>
        <QueryClientProvider client={queryClient}>
          <BrowserRouter>
            <App />
          </BrowserRouter>
          {shouldShowQueryDevtools() && <ReactQueryDevtools initialIsOpen={false} />}
        </QueryClientProvider>
      </DeskThemeProvider>
    </ErrorBoundary>
  </StrictMode>,
);

// Register basic service worker for PWA
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').catch(() => {});
}
