import { useState } from 'react'

// UpdateBanner gently floats down from the top when a newer build has been
// deployed, inviting a refresh. Mandarin-first copy (north star Note #17), soft
// rose styling, and a clear primary action. Dismissable — if she dismisses it,
// the next deploy (or reload) will surface a fresh one.
export function UpdateBanner() {
  const [dismissed, setDismissed] = useState(false)
  if (dismissed) return null

  return (
    <div className="pointer-events-none fixed inset-x-0 top-4 z-50 flex justify-center px-4">
      <div
        role="status"
        className="petal-update pointer-events-auto flex items-center gap-3 py-2.5 pl-4 pr-2.5"
        style={{
          background: 'var(--color-surface)',
          border: '1px solid var(--color-border)',
          borderRadius: 'var(--radius-pill)',
          boxShadow: 'var(--shadow-soft)',
          fontFamily: 'var(--font-ui)',
          maxWidth: 'min(92vw, 460px)',
        }}
      >
        <span aria-hidden style={{ fontSize: 20, lineHeight: 1 }}>
          🌸
        </span>
        <div className="min-w-0">
          <p
            className="truncate text-sm font-bold leading-snug"
            style={{ color: 'var(--color-plum)' }}
          >
            有新版本啦
          </p>
          <p className="truncate text-xs leading-snug" style={{ color: 'var(--color-muted)' }}>
            A new version is ready — refresh to update.
          </p>
        </div>
        <button
          type="button"
          onClick={() => window.location.reload()}
          className="shrink-0 rounded-full px-3.5 py-1.5 text-sm font-bold text-white transition-colors"
          style={{ background: 'var(--color-accent)' }}
          onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--color-accent-hover)')}
          onMouseLeave={(e) => (e.currentTarget.style.background = 'var(--color-accent)')}
        >
          刷新 · Refresh
        </button>
        <button
          type="button"
          onClick={() => setDismissed(true)}
          aria-label="稍后再说 · Dismiss"
          title="稍后再说 · Dismiss"
          className="shrink-0 rounded-full px-1.5 text-lg leading-none transition-colors"
          style={{ color: 'var(--color-muted)' }}
          onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--color-plum)')}
          onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--color-muted)')}
        >
          ×
        </button>
      </div>
    </div>
  )
}
