// src/features/student/ui/student-home-account-menu.jsx
//
// Top-right "My account" dropdown for the student dashboard header.
// Contents: the account name, Messages (with the live unread badge),
// My availability, and Sign out. Split out of student-home.jsx to keep
// both files under the 400-LOC budget. Availability now lives behind this
// menu (opened via onOpenAvailability into a modal) instead of as a card
// in the dashboard body.
//
// Props: name (string), onOpenAvailability (fn), onSignOut (fn).
// Public: window.StudentAccountMenu.

const StudentAccountMenu = ({ name, onOpenAvailability, onSignOut }) => {
  const [open, setOpen] = React.useState(false);
  const hov = (e, on) => { e.currentTarget.style.background = on ? 'oklch(96% 0.012 265)' : 'none'; };
  const item = {
    display:'flex', alignItems:'center', width:'100%', textAlign:'left',
    background:'none', border:'none', cursor:'pointer', gap:8,
    padding:'12px 14px', fontSize:14.5, fontWeight:600,
    color:'oklch(28% 0.05 265)', fontFamily:"'Plus Jakarta Sans', sans-serif",
    borderRadius:10,
  };

  return (
    <div style={{ position:'relative', flexShrink:0 }}>
      <button onClick={() => setOpen(o => !o)} aria-haspopup="menu" aria-expanded={open}
        style={{ display:'flex', alignItems:'center', gap:6, background:'none',
                 border:'1px solid oklch(88% 0.02 265)', borderRadius:999,
                 padding:'7px 14px', cursor:'pointer', whiteSpace:'nowrap',
                 fontFamily:"'Plus Jakarta Sans', sans-serif",
                 fontSize:14, fontWeight:600, color:'oklch(28% 0.05 265)' }}>
        My account
        <span style={{ fontSize:10, color:'oklch(55% 0.03 265)', transform: open ? 'rotate(180deg)' : 'none', transition:'transform 0.12s' }}>▾</span>
      </button>

      {open && (
        <>
          {/* click-away backdrop */}
          <div onClick={() => setOpen(false)} style={{ position:'fixed', inset:0, zIndex:60 }} />
          <div role="menu"
            style={{ position:'absolute', right:0, top:'calc(100% + 8px)', zIndex:61,
                     minWidth:226, background:'#fff', borderRadius:14,
                     border:'1px solid oklch(91% 0.01 265)',
                     boxShadow:'0 14px 36px oklch(18% 0.06 265 / 0.20)',
                     padding:6, fontFamily:"'Plus Jakarta Sans', sans-serif" }}>
            <div style={{ padding:'10px 14px', borderBottom:'1px solid oklch(95% 0.005 60)', marginBottom:4 }}>
              <div style={{ fontSize:10.5, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.09em', color:'oklch(62% 0.03 265)' }}>Account</div>
              <div style={{ fontSize:16, fontWeight:700, color:'oklch(18% 0.03 265)', marginTop:3, wordBreak:'break-word', lineHeight:1.2 }}>{name || 'You'}</div>
            </div>

            {/* Messages — reuse the nav button so the live unread badge stays. */}
            <div onClick={() => setOpen(false)} onMouseEnter={e => hov(e, true)} onMouseLeave={e => hov(e, false)}
              style={{ display:'flex', alignItems:'center', padding:'6px 8px', borderRadius:10, cursor:'pointer' }}>
              <window.MessagesNavButton />
            </div>

            <button role="menuitem" style={item}
              onMouseEnter={e => hov(e, true)} onMouseLeave={e => hov(e, false)}
              onClick={() => { setOpen(false); onOpenAvailability && onOpenAvailability(); }}>
              My availability
            </button>

            <div style={{ borderTop:'1px solid oklch(95% 0.005 60)', margin:'4px 0' }} />
            <button role="menuitem" style={{ ...item, color:'oklch(50% 0.15 25)' }}
              onMouseEnter={e => hov(e, true)} onMouseLeave={e => hov(e, false)}
              onClick={() => { setOpen(false); onSignOut && onSignOut(); }}>
              Sign out
            </button>
          </div>
        </>
      )}
    </div>
  );
};

window.StudentAccountMenu = StudentAccountMenu;