import React from 'react'
import { createRoot } from 'react-dom/client'
import Topbar from './components/Topbar'

function mount() {
  const container = document.getElementById('topbar-root')
  if (!container) return

  const user = container.dataset.userId
    ? {
        id:          container.dataset.userId,
        displayName: container.dataset.displayName || 'Account',
        username:    container.dataset.username || '',
        avatarUrl:   container.dataset.avatarUrl || null,
        uploadUrl:   container.dataset.uploadUrl || '/upload',
        moderationUrl: container.dataset.moderationUrl || null,
      }
    : null

  const root = createRoot(container)
  root.render(<Topbar user={user} />)

  // hide legacy header if present
  const legacy = document.getElementById('legacy-topbar')
  const topbar = document.getElementById('topbar')
  if (legacy) legacy.style.display = 'none'
  if (topbar) topbar.style.display = 'none'
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', mount)
} else {
  mount()
}
