// petal-ui.jsx — shared visual primitives for Petal. Exports to window.
const { useState: useStateUI, useEffect: useEffectUI, useRef: useRefUI } = React;

// soft 4-petal bloom mark (circles only)
function Bloom({ size = 22, color = '#D98C8C', center = '#FBF4EF' }) {
  const r = size * 0.27, o = size * 0.23;
  return (
    <div style={{ position: 'relative', width: size, height: size, flexShrink: 0 }}>
      {[[0, -o], [o, 0], [0, o], [-o, 0]].map(([x, y], i) => (
        <div key={i} style={{
          position: 'absolute', width: r * 2, height: r * 2, borderRadius: '50%',
          left: size / 2 - r + x, top: size / 2 - r + y, background: color, opacity: 0.88,
        }} />
      ))}
      <div style={{
        position: 'absolute', width: r * 1.1, height: r * 1.1, borderRadius: '50%',
        left: size / 2 - r * 0.55, top: size / 2 - r * 0.55, background: center,
      }} />
    </div>
  );
}

function PosyAvatar({ size = 38, ring = false }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%', background: PAL.blush,
      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      boxShadow: ring ? '0 0 0 4px rgba(217,140,140,0.16)' : 'none',
    }}>
      <Bloom size={size * 0.56} color="#fff" center={PAL.blush} />
    </div>
  );
}

// a Posy (left) chat bubble
function PosyBubble({ children, soft = false }) {
  return (
    <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end', maxWidth: '92%' }}>
      <div style={{
        background: PAL.card, color: PAL.ink, borderRadius: '20px 20px 20px 7px',
        padding: '13px 16px', fontSize: 15.5, lineHeight: 1.5, boxShadow: PAL.shadowSoft,
        border: `1px solid ${PAL.borderSoft}`,
      }}>{children}</div>
    </div>
  );
}

// Maryna (right) chat bubble
function MarynaBubble({ children }) {
  return (
    <div style={{ alignSelf: 'flex-end', maxWidth: '82%', background: PAL.blush, color: '#fff',
      borderRadius: '20px 20px 7px 20px', padding: '12px 16px', fontSize: 15, lineHeight: 1.45,
      boxShadow: '0 6px 16px rgba(217,140,140,0.30)' }}>{children}</div>
  );
}

function TypingDots() {
  return (
    <div style={{ display: 'flex', gap: 5, padding: '15px 18px', background: PAL.card,
      borderRadius: '20px 20px 20px 7px', border: `1px solid ${PAL.borderSoft}`, boxShadow: PAL.shadowSoft }}>
      {[0, 1, 2].map(i => (
        <span key={i} style={{ width: 7, height: 7, borderRadius: '50%', background: PAL.blush,
          animation: `petalbounce 1.2s ${i * 0.18}s infinite ease-in-out` }} />
      ))}
    </div>
  );
}

// soft pill button
function PillButton({ children, onClick, disabled, variant = 'solid', style = {} }) {
  const base = {
    border: 'none', borderRadius: 16, fontFamily: FONT, fontWeight: 700, fontSize: 16,
    padding: '15px 20px', cursor: disabled ? 'default' : 'pointer', transition: 'all .15s',
    opacity: disabled ? 0.45 : 1, ...style,
  };
  const variants = {
    solid: { background: PAL.blush, color: '#fff', boxShadow: disabled ? 'none' : '0 8px 20px rgba(217,140,140,0.40)' },
    ghost: { background: 'transparent', color: PAL.deep, boxShadow: 'none' },
    outline: { background: '#fff', color: PAL.ink, border: `1.5px solid ${PAL.border}`, boxShadow: 'none' },
  };
  return <button onClick={disabled ? undefined : onClick} disabled={disabled} style={{ ...base, ...variants[variant] }}>{children}</button>;
}

function StatusDot({ color = PAL.green, label }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12.5, color: PAL.mut, whiteSpace: 'nowrap' }}>
      <span style={{ width: 7, height: 7, borderRadius: '50%', background: color, flexShrink: 0 }} />{label}
    </span>
  );
}

Object.assign(window, { Bloom, PosyAvatar, PosyBubble, MarynaBubble, TypingDots, PillButton, StatusDot });