/* ============================================================
 * App shell — Navbar + Sidebar, parameterized by role.
 *
 * The sidebar items differ per role. Critical fix from the brief:
 * the developer sidebar NO LONGER includes "Audit Log" (that was
 * VVB work misplaced in the developer portal).
 * ============================================================ */

const DEV_NAV = [
  { label:'Overview', items:[
    { id:'dashboard',  name:'Dashboard',      icon:'dashboard' },
    { id:'projects',   name:'Projects',       icon:'projects', badge:6 },
  ]},
  { label:'Compliance', items:[
    { id:'phase',      name:'Phase workspace',icon:'clock' },
    { id:'documents',  name:'Documents',      icon:'document' },
    { id:'readiness',  name:'VVB Readiness',  icon:'check' },
  ]},
  { label:'Trust', items:[
    { id:'findings',   name:'VVB findings',   icon:'flag', badge:'2', tone:'amber' },
    { id:'hedera',     name:'Hedera Monitor', icon:'hedera' },
  ]},
  { label:'Market', items:[
    { id:'buyers',     name:'Credit buyers',  icon:'link' },
    { id:'issuance',   name:'Issuance',       icon:'plus' },
  ]},
];

const VVB_NAV = [
  { label:'Workbench', items:[
    { id:'audits',     name:'Verification queue', icon:'list', badge:'4' },
    { id:'evidence',   name:'Evidence browser',   icon:'document' },
    { id:'sampling',   name:'Sampling',           icon:'layers' },
    { id:'anomalies',  name:'Anomaly queue',      icon:'flag', badge:'2', tone:'red' },
  ]},
  { label:'Sign-off', items:[
    { id:'signoff',    name:'Sign-off & commit',  icon:'signature' },
  ]},
  { label:'Trust', items:[
    { id:'hedera',     name:'Audit anchors',      icon:'hedera' },
    { id:'account',    name:'Accreditation',      icon:'shield' },
  ]},
];

/* --- Navbar ------------------------------------------------- */
function Navbar({ role, user, onSignOut, onHome, portal }) {
  return (
    <header style={{
      height:60, background:'#022C28', borderBottom:'3px solid #F4C300',
      display:'flex', alignItems:'center', padding:'0 24px', gap:14,
      position:'sticky', top:0, zIndex:50,
    }}>
      <a href="#" onClick={(e)=>{ e.preventDefault(); onHome && onHome(); }}
         style={{display:'flex', alignItems:'center', gap:10, textDecoration:'none', color:'inherit', cursor:'pointer'}}>
        <img src="brand/logo-mark.svg" alt="Pamoja" style={{height:28}}/>
        <span style={{fontSize:15, fontWeight:900, color:'#fff', letterSpacing:'-0.01em'}}>Pamoja DMRV</span>
      </a>
      <div style={{width:1, height:24, background:'rgba(255,255,255,0.15)'}}/>
      <span style={{fontSize:12, color:'rgba(255,255,255,0.7)', fontWeight:600}}>{role}</span>

      <div style={{flex:1}}/>

      <button style={navIcon} title="Search">
        <PamojaIcon name="search" size={16} color="rgba(255,255,255,0.6)"/>
      </button>
      <button style={navIcon} title="Notifications">
        <PamojaIcon name="bell" size={16} color="rgba(255,255,255,0.6)"/>
      </button>
      <select style={{
        background:'transparent', border:'1px solid rgba(255,255,255,0.15)',
        color:'rgba(255,255,255,0.7)', fontSize:11, fontWeight:700, letterSpacing:'0.04em',
        padding:'5px 8px', borderRadius:6, outline:'none', minHeight:30,
      }}>
        <option>EN</option><option>SW</option><option>FR</option><option>ES</option><option>PT</option><option>IT</option>
      </select>
      <div style={{display:'flex', alignItems:'center', gap:8, paddingLeft:8, borderLeft:'1px solid rgba(255,255,255,0.15)'}}>
        <div style={{
          width:30, height:30, borderRadius:'50%',
          background: portal === 'vvb' ? '#fff' : '#F4C300',
          color: portal === 'vvb' ? '#022C28' : '#022C28',
          display:'flex', alignItems:'center', justifyContent:'center',
          fontSize:11, fontWeight:900,
          border: portal === 'vvb' ? '1.5px solid #F4C300' : 'none',
        }}>{user.initials}</div>
        <div style={{display:'flex', flexDirection:'column', lineHeight:1.15}}>
          <span style={{fontSize:12, color:'#fff', fontWeight:700}}>{user.name}</span>
          <span style={{fontSize:10, color:'rgba(255,255,255,0.5)', letterSpacing:'0.02em'}}>{user.subtitle}</span>
        </div>
      </div>
      <button onClick={onSignOut} style={{
        background:'transparent', border:'1px solid rgba(255,255,255,0.20)',
        color:'rgba(255,255,255,0.7)', fontSize:10, fontWeight:700, letterSpacing:'0.06em',
        padding:'6px 12px', borderRadius:8, cursor:'pointer', minHeight:30,
      }}>SIGN OUT</button>
    </header>
  );
}
const navIcon = {
  background:'transparent', border:'none', width:32, height:32, borderRadius:8,
  display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer',
};

/* --- Sidebar ------------------------------------------------ */
const SIDEBAR_CSS = `
  .pj-side { width:240px; background:#022C28; min-height:calc(100vh - 60px); padding:16px 0;
             flex-shrink:0; position:sticky; top:60px; align-self:flex-start; color:#fff;
             display:flex; flex-direction:column; }
  .pj-side-sect { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.12em;
                  color:rgba(255,255,255,0.4); padding:10px 20px 6px; }
  .pj-side-link { display:flex; align-items:center; gap:12px; padding:10px 20px; min-height:44px;
                  font-size:13px; font-weight:600; color:rgba(255,255,255,0.65); background:transparent;
                  border-right:3px solid transparent; text-decoration:none; }
  .pj-side-link:hover { background:rgba(255,255,255,0.04); color:#fff; }
  .pj-side-link.is-active { color:#F4C300 !important; background:rgba(244,195,0,0.10) !important;
                            border-right-color:#F4C300 !important; font-weight:800; }
  .pj-side-link.is-active:hover { background:rgba(244,195,0,0.10); color:#F4C300; }
  .pj-side-badge { margin-left:auto; font-size:10px; font-weight:800;
                   padding:2px 7px; border-radius:9999px; letter-spacing:0.02em; }
  .pj-side-badge--gold  { background:rgba(244,195,0,0.15);  color:#F4C300; }
  .pj-side-badge--amber { background:rgba(217,119,6,0.18);  color:#FBBF24; }
  .pj-side-badge--red   { background:rgba(220,38,38,0.18);  color:#FCA5A5; }
`;

function Sidebar({ sections, active, onNav, footer }) {
  return (
    <aside className="pj-side">
      <style>{SIDEBAR_CSS}</style>
      <div style={{flex:1}}>
        {sections.map(sec => (
          <div key={sec.label} style={{marginBottom:8}}>
            <div className="pj-side-sect">{sec.label}</div>
            {sec.items.map(it => (
              <NavLink key={it.id} item={it} active={active===it.id} onClick={()=>onNav(it.id)}/>
            ))}
          </div>
        ))}
      </div>
      {footer && (
        <div style={{padding:'14px 20px', borderTop:'1px solid rgba(255,255,255,0.08)'}}>
          {footer}
        </div>
      )}
    </aside>
  );
}
function NavLink({ item, active, onClick }) {
  const badgeClass = item.tone==='red' ? 'pj-side-badge--red' : item.tone==='amber' ? 'pj-side-badge--amber' : 'pj-side-badge--gold';
  return (
    <a href="#" onClick={(e)=>{e.preventDefault(); onClick();}}
       className={'pj-side-link' + (active ? ' is-active' : '')}>
      <PamojaIcon name={item.icon} size={16} stroke={1.7}/>
      <span>{item.name}</span>
      {item.badge != null && (
        <span className={'pj-side-badge ' + badgeClass}>{item.badge}</span>
      )}
    </a>
  );
}

/* --- Hedera mainnet pill (sidebar footer) ------------------- */
function HederaPill() {
  return (
    <div>
      <div style={{fontSize:10, fontWeight:800, letterSpacing:'0.1em', textTransform:'uppercase', color:'#F4C300', marginBottom:4}}>Hedera testnet</div>
      <div style={{display:'flex', alignItems:'center', gap:8, fontSize:11, color:'rgba(255,255,255,0.6)'}}>
        <span style={{width:6, height:6, borderRadius:'50%', background:'#2BC48A', boxShadow:'0 0 0 3px rgba(43,196,138,0.25)'}}/>
        <span>Operational · 1,247 anchors</span>
      </div>
    </div>
  );
}

window.Navbar = Navbar;
window.Sidebar = Sidebar;
window.HederaPill = HederaPill;
window.DEV_NAV = DEV_NAV;
window.VVB_NAV = VVB_NAV;