import { useEffect, useState } from 'react'
import { onDemoLocked } from '../lib/demoNotice.js'

// The one toast for a write the public demo refused (DEMO_MODE.md §3.1). Fed
// by api/client.js through lib/demoNotice.js, so every screen — and every
// installed module's screens — gets it without handling the code itself. On a
// real shard nothing is ever refused that way, so it never appears.
const SHOW_MS = 5000

export default function DemoToast() {
  const [message, setMessage] = useState(null)

  useEffect(() => onDemoLocked((text) => setMessage(text)), [])

  useEffect(() => {
    if (!message) return undefined
    const t = setTimeout(() => setMessage(null), SHOW_MS)
    return () => clearTimeout(t)
  }, [message])

  return (
    <div
      role="status"
      aria-live="polite"
      style={{ position: 'fixed', left: 16, right: 16, bottom: 20, zIndex: 1000, display: 'flex', justifyContent: 'center', pointerEvents: 'none' }}
    >
      {message && (
        <div
          className="sans"
          style={{
            maxWidth: 480,
            padding: '11px 16px',
            borderRadius: 10,
            fontSize: '0.88rem',
            color: 'var(--head)',
            background: 'var(--bg-deep)',
            border: '1px solid var(--accent)',
            boxShadow: '0 12px 32px rgba(0,0,0,0.45)',
            pointerEvents: 'auto',
          }}
        >
          {message}
        </div>
      )}
    </div>
  )
}