import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { BrowserRouter } from 'react-router-dom'
import { AuthProvider } from './auth/AuthContext'
import { registerAppUpdates } from './utils/appUpdates'

const updateViewportHeight = () => {
  const vv = window.visualViewport;
  // Pinch-zoom outside the graph shrinks the visual viewport but should not
  // reflow app chrome (keyboard, header). Keyboard open keeps scale at ~1.
  if (vv && vv.scale > 1.01) return;

  const height = vv?.height || window.innerHeight;
  document.documentElement.style.setProperty('--vh', `${height * 0.01}px`);
};

updateViewportHeight();
window.visualViewport?.addEventListener('resize', updateViewportHeight);
window.visualViewport?.addEventListener('scroll', updateViewportHeight);
window.addEventListener('resize', updateViewportHeight);
registerAppUpdates();

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <AuthProvider>
        <App />
      </AuthProvider>
    </BrowserRouter>
  </StrictMode>,
)