// ─────────────────────────────────────────────
// DEV_NavBar.jsx — Developer portal top nav
// ─────────────────────────────────────────────

function DEVNavBar({ currentUser, view, currentApp, onApps, onLogout }) {
  const [userDropOpen, setUserDropOpen] = React.useState(false);

  const initials = [currentUser?.first, currentUser?.last]
    .filter(Boolean).map(s => s[0]).join('').toUpperCase()
    || (currentUser?.email?.[0] || 'D').toUpperCase();

  const displayName = [currentUser?.first, currentUser?.last].filter(Boolean).join(' ')
    || currentUser?.email || 'Developer';

  return (
    <div style={SN.bar}>
      <div style={SN.inner}>

        {/* Left — Logo + breadcrumb */}
        <div style={SN.left}>
          <button style={SN.logoBtn} onClick={onApps}>
            <span style={SN.logoMark}>⟨/⟩</span>
            <span style={SN.logoText}>DataObjects</span>
            <span style={SN.logoBadge}>DEV</span>
          </button>
          {view === 'app-detail' && currentApp && (
            <>
              <span style={SN.breadSep}>/</span>
              <button style={SN.breadItem} onClick={onApps}>Apps</button>
              <span style={SN.breadSep}>/</span>
              <span style={SN.breadCurrent}>{currentApp.app_name}</span>
            </>
          )}
          {view === 'apps' && (
            <>
              <span style={SN.breadSep}>/</span>
              <span style={SN.breadCurrent}>Apps</span>
            </>
          )}
        </div>

        {/* Right — nav links + user */}
        <div style={SN.right}>
          <button style={SN.navLink} onClick={onApps}>Apps</button>
          <button style={SN.navLink}>Account</button>
          <button style={SN.navLink}>Support</button>

          {/* User dropdown */}
          <div style={{ position:'relative' }}>
            <button style={SN.userBtn} onClick={() => setUserDropOpen(!userDropOpen)}>
              <div style={SN.avatar}>{initials}</div>
              <span style={SN.userName}>{displayName}</span>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                strokeWidth="2.5" style={{ opacity:0.5, marginLeft:2 }}>
                <polyline points="6 9 12 15 18 9"/>
              </svg>
            </button>

            {userDropOpen && (
              <>
                <div style={SN.dropBackdrop} onClick={() => setUserDropOpen(false)} />
                <div style={SN.drop}>
                  <div style={SN.dropHeader}>
                    <div style={SN.dropName}>{displayName}</div>
                    <div style={SN.dropEmail}>{currentUser?.email}</div>
                  </div>
                  <div style={SN.dropDivider} />
                  <button style={SN.dropItem} onClick={() => setUserDropOpen(false)}>Profile</button>
                  <button style={SN.dropItem} onClick={() => setUserDropOpen(false)}>Settings</button>
                  <div style={SN.dropDivider} />
                  <button style={{ ...SN.dropItem, color:'#dc2626' }}
                    onClick={() => { setUserDropOpen(false); onLogout(); }}>
                    Sign out
                  </button>
                </div>
              </>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

const SN = {
  bar:          { background:'#0f1923', borderBottom:'1px solid rgba(255,255,255,0.06)',
                  position:'sticky', top:0, zIndex:100 },
  inner:        { maxWidth:1200, margin:'0 auto', padding:'0 24px',
                  display:'flex', alignItems:'center', justifyContent:'space-between', height:54 },
  left:         { display:'flex', alignItems:'center', gap:0 },
  logoBtn:      { display:'flex', alignItems:'center', gap:10, background:'none', border:'none',
                  cursor:'pointer', padding:0, marginRight:8 },
  logoMark:     { color:'#fff', fontFamily:'DM Mono, monospace', fontSize:16, fontWeight:500 },
  logoText:     { color:'#fff', fontSize:15, fontWeight:700, letterSpacing:'-0.01em' },
  logoBadge:    { background:'rgba(255,255,255,0.12)', color:'rgba(255,255,255,0.7)',
                  fontSize:10, fontWeight:600, padding:'2px 7px', borderRadius:4,
                  letterSpacing:'0.08em', fontFamily:'DM Mono, monospace' },
  breadSep:     { color:'rgba(255,255,255,0.2)', fontSize:16, margin:'0 10px' },
  breadItem:    { background:'none', border:'none', color:'rgba(255,255,255,0.5)',
                  fontSize:13, cursor:'pointer', fontFamily:'inherit', padding:0 },
  breadCurrent: { color:'rgba(255,255,255,0.85)', fontSize:13, fontWeight:500 },
  right:        { display:'flex', alignItems:'center', gap:4 },
  navLink:      { background:'none', border:'none', color:'rgba(255,255,255,0.6)',
                  fontSize:13, fontWeight:500, padding:'6px 12px', borderRadius:6,
                  cursor:'pointer', fontFamily:'inherit',
                  transition:'color 0.15s, background 0.15s' },
  userBtn:      { display:'flex', alignItems:'center', gap:8, background:'rgba(255,255,255,0.07)',
                  border:'1px solid rgba(255,255,255,0.1)', borderRadius:8,
                  padding:'5px 10px 5px 6px', cursor:'pointer', color:'#fff',
                  fontFamily:'inherit', marginLeft:8 },
  avatar:       { width:26, height:26, borderRadius:6, background:'#2563eb',
                  color:'#fff', fontSize:11, fontWeight:700,
                  display:'flex', alignItems:'center', justifyContent:'center' },
  userName:     { fontSize:13, fontWeight:500, color:'rgba(255,255,255,0.85)' },
  dropBackdrop: { position:'fixed', inset:0, zIndex:98 },
  drop:         { position:'absolute', right:0, top:'calc(100% + 8px)', width:220,
                  background:'#fff', borderRadius:10, boxShadow:'0 8px 32px rgba(0,0,0,0.15)',
                  border:'1px solid #e2e8f0', zIndex:99, overflow:'hidden' },
  dropHeader:   { padding:'14px 16px 12px' },
  dropName:     { fontSize:13, fontWeight:600, color:'#0f1923', marginBottom:2 },
  dropEmail:    { fontSize:12, color:'#94a3b8' },
  dropDivider:  { height:1, background:'#f1f5f9' },
  dropItem:     { display:'block', width:'100%', textAlign:'left', background:'none', border:'none',
                  padding:'10px 16px', fontSize:13, color:'#374151', cursor:'pointer',
                  fontFamily:'inherit' },
};