window.Sidebar = ({ currentPage, onNavigate, onLogout, user, sidebarOpen, onClose }) => {
  const isAdmin = user?.role === 'admin';
  const navItems = [
    { id:'dashboard', icon:'fa-tachometer-alt', label:'Dashboard',          section:'TỔNG QUAN' },
    { id:'domains',   icon:'fa-globe',          label:'Quản lý Domain' },
    { id:'keywords',  icon:'fa-key',            label:'Keyword Tracking' },
    { id:'users',     icon:'fa-users',          label:'Quản lý User',       adminOnly:true, section:'QUẢN TRỊ' },
    { id:'progress',  icon:'fa-tasks',          label:'Tiến độ Team',       adminOnly:true },
    { id:'logs',      icon:'fa-history',        label:'Activity Logs',      adminOnly:true },
    { id:'guide',     icon:'fa-book',           label:'Hướng dẫn sử dụng', section:'TÀI LIỆU' },
    { id:'docs',      icon:'fa-code',           label:'Documentation' },
  ];
  return (
    <>
      {sidebarOpen && <div style={{position:'fixed',inset:0,zIndex:150,background:'rgba(0,0,0,.4)'}} onClick={onClose}/>}
      <aside className={`sidebar ${sidebarOpen?'open':''}`}>
        <div className="sb-head">
          <div className="sb-logo">
            <div className="sb-logo-icon"><i className="fas fa-chart-line"/></div>
            <span>SEO SOP</span>
          </div>
          <button className="sb-close" onClick={onClose}><i className="fas fa-times"/></button>
        </div>
        <div className="sb-user">
          <AvatarChip name={user?.full_name} size={40}/>
          <div>
            <div className="sb-user-name">{user?.full_name}</div>
            <div className="sb-user-role">{user?.role==='admin'?'⚡ Administrator':'👤 Member'}</div>
          </div>
        </div>
        <nav className="sb-nav">
          {navItems.map(item => {
            if (item.adminOnly && !isAdmin) return null;
            return (
              <React.Fragment key={item.id}>
                {item.section && <div className="nav-sec">{item.section}</div>}
                <a className={`nav-it ${(currentPage===item.id||(currentPage==='domain-detail'&&item.id==='domains'))?'act':''}`}
                   href="#" onClick={e=>{e.preventDefault();onNavigate(item.id);onClose();}}>
                  <i className={`fas ${item.icon}`}/><span>{item.label}</span>
                </a>
              </React.Fragment>
            );
          })}
        </nav>
        <div className="sb-foot">
          <button className="btn-logout" onClick={onLogout}><i className="fas fa-sign-out-alt"/> Đăng xuất</button>
        </div>
      </aside>
    </>
  );
};

window.Topbar = ({ currentPage, onHamburger, user, onNavigate, unreadLogs=0 }) => {
  const labels = {
    dashboard:'Dashboard', domains:'Quản lý Domain', 'domain-detail':'Chi tiết Domain',
    keywords:'Keyword Tracking', users:'Quản lý User', progress:'Tiến độ Team',
    logs:'Activity Logs', guide:'Hướng dẫn sử dụng', docs:'Documentation'
  };
  return (
    <header className="topbar">
      <div className="tb-left">
        <button className="hamburger" onClick={onHamburger}><i className="fas fa-bars"/></button>
        <span className="tb-bread">{labels[currentPage]||'Dashboard'}</span>
      </div>
      <div className="tb-right">
        {user?.role==='admin' && (
          <button className="notif-btn" onClick={()=>onNavigate('logs')} title="Activity Logs">
            <i className="fas fa-bell"/>
            {unreadLogs>0 && <span className="notif-dot">{unreadLogs>9?'9+':unreadLogs}</span>}
          </button>
        )}
        <div className="tb-user" onClick={()=>onNavigate('dashboard')}>
          <AvatarChip name={user?.full_name} size={34}/>
          <span className="tb-uname" style={{fontSize:'.875rem',fontWeight:600}}>{user?.full_name}</span>
        </div>
      </div>
    </header>
  );
};