import * as React from 'react'
import ClassicWindow from './components/Classic.jsx'

// Wails sizes the host window itself (internal/gui/run.go). Classic renders
// 100% of that surface; we own the mode state here so the title-bar toggle
// in Classic can flip between dark and light without re-mounting.
//
// onToggleMode receives the click event so we can plant a circle-reveal
// origin at the cursor position. The View Transitions API (Chromium 111+,
// Edge / WebView2 included) snapshots the old DOM, swaps to the new one
// after setMode commits, and animates between them. Fallback path just
// flips the mode synchronously when the API is missing.
export default function App() {
  const [mode, setMode] = React.useState('dark')

  function onToggleMode(e) {
    const x = e?.clientX ?? window.innerWidth - 24
    const y = e?.clientY ?? 16
    document.documentElement.style.setProperty('--reveal-x', x + 'px')
    document.documentElement.style.setProperty('--reveal-y', y + 'px')

    const flip = () => setMode(m => (m === 'dark' ? 'light' : 'dark'))
    if (document.startViewTransition) {
      document.startViewTransition(flip)
    } else {
      flip()
    }
  }

  return <ClassicWindow mode={mode} onToggleMode={onToggleMode} />
}