import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import { listenForegroundMessages } from './hooks/useReminder'

// Keep #root height in sync with the visual viewport (shrinks when keyboard opens)
if (window.visualViewport) {
  const setVH = () => {
    document.documentElement.style.setProperty('--vh', `${window.visualViewport!.height}px`)
  }
  window.visualViewport.addEventListener('resize', setVH)
  setVH()
}

// Apply saved theme immediately to avoid flash
const savedTheme = localStorage.getItem('gj-theme') || 'light'
document.documentElement.setAttribute('data-theme', savedTheme)

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
  })
}

// Show FCM notifications when app is open in foreground
listenForegroundMessages().catch((err) => {
  console.error('[FCM] Failed to set up foreground message listener:', err)
})

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