// UserMenu — small dropdown anchored under the avatar pill.
// Shows Jordan Reed's profile strip at the top, then a list of items:
//   • My account
//   • My commissions
//   • Saved studies
//   • Preferences
//   • Sign out
// Closes on outside-click and Escape.
//
// SignInModal — shown when user is logged out and they click "Sign in".
// Minimal email + OAuth buttons; prototype-only (clicking "Continue"
// flips auth state to signed-in).

function UserMenu({ open, onClose, onSignOut }) {
  const I = window.useI18n();
  const ref = React.useRef(null);

  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); };
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    // Delay to avoid catching the click that opened it
    const id = setTimeout(() => document.addEventListener('mousedown', onDoc), 0);
    window.addEventListener('keydown', onKey);
    return () => {
      clearTimeout(id);
      document.removeEventListener('mousedown', onDoc);
      window.removeEventListener('keydown', onKey);
    };
  }, [open, onClose]);

  if (!open) return null;

  const Item = ({ icon, label, danger }) =>
    React.createElement('button', {
      className: 'amos-usermenu-item ' + (danger ? 'danger' : ''),
      onClick: () => {
        if (danger) onSignOut && onSignOut();
        onClose();
      }
    },
      icon && React.createElement('span', { className:'umi-ico' }, icon),
      React.createElement('span', null, label)
    );

  return React.createElement('div', { className:'amos-usermenu', ref },
    React.createElement('div', { className:'amos-usermenu-head' },
      React.createElement('div', { className:'umh-avatar' }, 'JR'),
      React.createElement('div', null,
        React.createElement('div', { className:'umh-name' }, 'Jordan Reed'),
        React.createElement('div', { className:'umh-email' }, 'jordan@readsonthetrain.org')
      )
    ),
    React.createElement('div', { className:'amos-usermenu-list' },
      React.createElement(Item, { icon: window.I.user(14),     label: I.t('topbar.my_account') }),
      React.createElement(Item, { icon: window.I.layers(14),   label: I.t('topbar.my_commissions') }),
      React.createElement(Item, { icon: window.I.bookmark(14), label: I.t('topbar.saved') }),
      React.createElement(Item, { icon: window.I.settings(14), label: I.t('topbar.preferences') }),
      React.createElement('div', { className:'amos-usermenu-sep' }),
      React.createElement(Item, { icon: window.I.arrowRight(14), label: I.t('topbar.sign_out'), danger: true })
    )
  );
}

function SignInModal({ open, onClose, onSuccess }) {
  const I = window.useI18n();
  const [email, setEmail] = React.useState('');

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  if (!open) return null;

  const submit = () => {
    if (!email) return;
    onSuccess && onSuccess({ email });
    onClose();
  };

  return React.createElement('div', { className:'amos-modal-backdrop', onClick: onClose },
    React.createElement('div', { className:'amos-signin-modal', onClick: (e) => e.stopPropagation() },
      React.createElement('button', { className:'wlm-close', onClick: onClose, 'aria-label':'Close' }, window.I.x(18)),
      React.createElement('div', { className:'si-brand-mark' }, 'WM'),
      React.createElement('h2', null, I.t('signin.title')),
      React.createElement('p', { className:'si-sub' }, I.t('signin.sub')),

      React.createElement('div', { className:'si-oauth' },
        React.createElement('button', { className:'si-oauth-btn google' },
          React.createElement('span', { className:'si-oauth-ico' },
            // Google G (inline SVG, no external asset)
            React.createElement('svg', { viewBox:'0 0 48 48', width:16, height:16 },
              React.createElement('path', { fill:'#FFC107', d:'M43.6 20.5H42V20H24v8h11.3c-1.6 4.6-6 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34.5 6.1 29.5 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.6-.4-3.5z' }),
              React.createElement('path', { fill:'#FF3D00', d:'M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34.5 6.1 29.5 4 24 4 16.3 4 9.7 8.3 6.3 14.7z' }),
              React.createElement('path', { fill:'#4CAF50', d:'M24 44c5.3 0 10.1-2 13.8-5.3l-6.4-5.2c-2 1.5-4.6 2.5-7.4 2.5-5.2 0-9.7-3.4-11.3-8l-6.5 5C9.6 39.6 16.2 44 24 44z' }),
              React.createElement('path', { fill:'#1976D2', d:'M43.6 20.5H42V20H24v8h11.3c-.8 2.3-2.3 4.3-4.1 5.5l6.4 5.2C41.5 35.7 44 30.3 44 24c0-1.3-.1-2.6-.4-3.5z' })
            )
          ),
          I.t('signin.google')
        ),
        React.createElement('button', { className:'si-oauth-btn apple' },
          React.createElement('span', { className:'si-oauth-ico' },
            React.createElement('svg', { viewBox:'0 0 24 24', width:16, height:16, fill:'#000' },
              React.createElement('path', { d:'M17.1 12.6c0-2.3 1.9-3.4 2-3.4-1.1-1.6-2.8-1.8-3.4-1.9-1.5-.1-2.8.8-3.6.8-.8 0-1.9-.8-3.2-.8-1.6 0-3.2.9-4 2.3-1.7 3-.4 7.4 1.3 9.8.8 1.2 1.8 2.5 3.1 2.4 1.3 0 1.7-.8 3.2-.8 1.4 0 1.9.8 3.2.8 1.3 0 2.2-1.2 3-2.4.9-1.4 1.3-2.8 1.3-2.8s-2.5-1-2.9-3.8zm-2.5-7c.7-.8 1.1-1.9 1-3-1 0-2.1.7-2.8 1.5-.6.7-1.2 1.8-1 2.9 1.1.1 2.2-.6 2.8-1.4z' })
            )
          ),
          I.t('signin.apple')
        )
      ),

      React.createElement('div', { className:'si-divider' },
        React.createElement('span', null, I.t('signin.or'))
      ),

      React.createElement('label', { className:'si-label' }, I.t('signin.email')),
      React.createElement('input', {
        type:'email',
        className:'si-email',
        value: email,
        onChange: (e) => setEmail(e.target.value),
        placeholder:'you@example.com',
        onKeyDown: (e) => { if (e.key === 'Enter') submit(); }
      }),
      React.createElement('button', {
        className:'si-submit',
        disabled: !email,
        onClick: submit
      }, I.t('signin.continue')),
      React.createElement('div', { className:'si-foot' }, I.t('signin.footer'))
    )
  );
}

Object.assign(window, { UserMenu, SignInModal });