// Menu da conta (Topbar, sidebar e mobile) e confirmação de saída. Os itens abrem as abas da tela Meu perfil (/conta/:aba).
const UM_COLORS = ['#1e3a5f', '#0e7490', '#1d4ed8', '#7c2d12', '#166534'];
const UM_TABS = [['ph-user-circle', 'Perfil', 'perfil'], ['ph-identification-card', 'Conta', 'conta'], ['ph-sliders', 'Preferências', 'pref'], ['ph-bell', 'Notificações', 'notif'], ['ph-shield-check', 'Segurança', 'seg'], ['ph-devices', 'Sessões', 'sess']];

function LogoutModal({ onConfirm, onClose }) {
  const { Modal, Button } = window.VRticeDesignSystem_d763eb;
  return (
    <Modal kicker="Sair" title="Encerrar a sessão?" width={460} onClose={onClose} footer={<><Button variant="danger" style={{ flex: 1 }} onClick={onConfirm}>Sair do Vértice OS</Button><Button variant="ghost" onClick={onClose}>Cancelar</Button></>}>
      <span style={{ fontSize: 14, color: 'var(--text-muted)', lineHeight: 1.6 }}>Você precisará entrar novamente com usuário e senha. Alterações não salvas serão perdidas.</span>
    </Modal>
  );
}

function UserMenuLayer({ origin, position, user, onClose, go, onLogout, modal, setModal }) {
  const { Menu } = window.VRticeDesignSystem_d763eb;
  const { can } = useAccess();
  const hdr = { title: user.name, sub: user.role + ' · ' + user.email };
  const items = UM_TABS.map(([icon, label, tab]) => ({ icon, label, onClick: () => { onClose(); go('profile', { tab }); } }))
    .concat(can('settings.view') ? [{ icon: 'ph-gear-six', label: 'Configurações', onClick: () => { onClose(); go('config'); } }] : []);
  const footer = [{ icon: 'ph-sign-out', label: 'Sair', danger: true, onClick: () => { onClose(); setModal('logout'); } }];
  const pos = position || (origin === 'side' ? { left: 12, bottom: 84 } : { top: 96, right: 40 });
  return <>
    {origin && <><div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 299 }} /><div style={{ position: 'fixed', zIndex: 300, ...pos }}><Menu width={272} header={hdr} items={items} footer={footer} /></div></>}
    {modal === 'logout' && <LogoutModal onClose={() => setModal(null)} onConfirm={() => { setModal(null); onLogout(); }} />}
  </>;
}
Object.assign(window, { UserMenuLayer, UM_COLORS });