import React, { lazy, Suspense } from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import { installModalEscape } from './lib/modalEscape'
import { installTableLabels } from './lib/tableLabels'
import { initMonitoring } from './lib/monitoring'

installModalEscape()
installTableLabels()
initMonitoring()

// Aperçu avec données fictives (?apercu=entreprise ou ?apercu=createur) : en développement uniquement,
// retiré du site publié (import.meta.env.DEV vaut false au build).
const apercu = import.meta.env.DEV ? new URLSearchParams(window.location.search).get('apercu') : null
const Preview = import.meta.env.DEV ? lazy(() => import('./dev/Preview').then((m) => ({ default: m.Preview }))) : null
// Banc d'essai (?banc) : vraie base PostgreSQL dans le navigateur, avec les scripts SQL et les règles de sécurité
// de la production, et plusieurs personnes fictives (src/dev/banc/). Développement uniquement.
const banc = import.meta.env.DEV ? readBancMode() : false
const Banc = import.meta.env.DEV ? lazy(() => import('./dev/banc/Banc').then((m) => ({ default: m.Banc }))) : null

function readBancMode(): boolean {
  if (new URLSearchParams(window.location.search).has('banc')) return true
  try { return !!sessionStorage.getItem('linkz-banc') } catch { return false }
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    {Banc && banc
      ? <Suspense fallback={null}><Banc /></Suspense>
      : Preview && (apercu === 'entreprise' || apercu === 'createur')
      ? <Suspense fallback={null}><Preview kind={apercu} /></Suspense>
      : <App />}
  </React.StrictMode>,
)