import { createRoot } from 'react-dom/client'
import { App } from './App'
import reset from '@unocss/reset/tailwind.css?inline'
import css from 'virtual:uno.css?inline'

function mount() {
  const host = document.createElement('div')
  host.id = 'writekit-owner-tools'
  document.body.appendChild(host)

  const shadow = host.attachShadow({ mode: 'open' })

  const style = document.createElement('style')
  style.textContent = reset + css + `
    :host {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  `
  shadow.appendChild(style)

  const container = document.createElement('div')
  container.style.cssText = `
    position:fixed;inset:0;z-index:99999;pointer-events:none;
    --un-bg-opacity:100%;--un-text-opacity:100%;--un-border-opacity:100%;
    --un-ring-opacity:100%;--un-shadow-opacity:100%;
  `.replace(/\s+/g, '')
  shadow.appendChild(container)

  createRoot(container).render(<App />)
}

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