/* Navigation chrome for the Parent App */

const JL_TABS = [
  { id:'home',       label:'Home',       icon:'house' },
  { id:'messages',   label:'Messages',   icon:'message-circle' },
  { id:'transport',  label:'Transport',  icon:'bus' },
  { id:'activities', label:'Activities', icon:'clipboard-list' },
  { id:'profile',    label:'Profile',    icon:'user' },
];

function BottomNav({ active, onNav }) {
  return (
    <div style={{
      position:'absolute', left:0, right:0, bottom:0, zIndex:40,
      background:'#fff', borderTop:'1px solid var(--gray-200)',
      boxShadow:'0 -2px 12px rgba(19,28,48,.05)',
      padding:'9px 6px 26px', display:'flex',
    }}>
      {JL_TABS.map(t => {
        const on = active === t.id;
        return (
          <button key={t.id} onClick={() => onNav(t.id)} style={{
            flex:1, border:0, background:'transparent', cursor:'pointer',
            display:'flex', flexDirection:'column', alignItems:'center', gap:4,
            color: on ? 'var(--blue-500)' : 'var(--gray-500)',
            fontFamily:'var(--font-sans)',
          }}>
            <span style={{
              padding:'4px 16px', borderRadius:'999px',
              background: on ? 'var(--blue-100)' : 'transparent', display:'flex',
            }}>
              <Icon name={t.icon} size={21} color="currentColor" stroke={on?2.2:2} />
            </span>
            <span style={{ fontSize:10, fontWeight:600 }}>{t.label}</span>
          </button>
        );
      })}
    </div>
  );
}

/* Top bar with personal greeting (Home) */
function GreetingBar({ name, onBell, onBack }) {
  return (
    <div style={{
      paddingTop:54, padding:'54px 18px 14px', display:'flex',
      alignItems:'center', gap:12, background:'transparent',
    }}>
      {onBack
        ? <button onClick={onBack} style={iconBtn}><Icon name="arrow-left" size={22} color="var(--ink)" /></button>
        : <Avatar initials="JH" color="navy" size={42} />}
      <div style={{ flex:1, lineHeight:1.2 }}>
        <div style={{ fontSize:13, color:'var(--gray-500)', fontWeight:500 }}>Good afternoon,</div>
        <div style={{ fontSize:19, fontWeight:800, color:'var(--ink)', letterSpacing:'-.01em' }}>Jermaine</div>
      </div>
      <button onClick={onBell} style={bellBtn}><Icon name="bell" size={21} color="var(--navy-600)" /><span style={dot} /></button>
    </div>
  );
}

/* Pushed-screen bar: back + centered title (+ optional bell) */
function PushBar({ title, onBack, bell = true }) {
  return (
    <div style={{
      paddingTop:54, padding:'54px 16px 12px', display:'flex',
      alignItems:'center', gap:8, background:'#fff',
      borderBottom:'1px solid var(--gray-200)',
    }}>
      <button onClick={onBack} style={iconBtn}><Icon name="arrow-left" size={22} color="var(--ink)" /></button>
      <div style={{ flex:1, textAlign:'center', fontSize:17, fontWeight:700, color:'var(--ink)' }}>{title}</div>
      {bell
        ? <button onClick={()=>jlToast('No new notifications', { icon:'bell' })} style={iconBtn}><Icon name="bell" size={20} color="var(--navy-600)" /></button>
        : <span style={{ width:38 }} />}
    </div>
  );
}

/* Large-title bar (Messages) */
function TitleBar({ title, action, onBack }) {
  return (
    <div style={{ paddingTop:54, padding:'54px 18px 6px', display:'flex', alignItems:'center', justifyContent:'space-between', gap:8 }}>
      <div style={{ display:'flex', alignItems:'center', gap:6, minWidth:0 }}>
        {onBack && <button onClick={onBack} style={{ ...iconBtn, marginLeft:-8 }}><Icon name="arrow-left" size={22} color="var(--ink)" /></button>}
        <div style={{ fontSize:26, fontWeight:800, color:'var(--ink)', letterSpacing:'-.02em' }}>{title}</div>
      </div>
      {action}
    </div>
  );
}

const bellBtn = { position:'relative', width:42, height:42, borderRadius:'999px', border:'1px solid var(--gray-200)', background:'#fff', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' };
const iconBtn = { width:38, height:38, borderRadius:'999px', border:0, background:'transparent', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' };
const dot = { position:'absolute', top:9, right:10, width:8, height:8, borderRadius:'999px', background:'var(--danger-500)', border:'1.5px solid #fff' };

Object.assign(window, { BottomNav, GreetingBar, PushBar, TitleBar, JL_TABS });