// 统一导航与样式注入
(function() {
  const STYLE_ID = 'layout-shared-style';
  const NAV_ITEMS = [
    { key: 'home', label: '首页', link: 'dashboard.html' },
    { key: 'project', label: '商机管理', link: 'project-initiation.html' },
    { key: 'process', label: '过程管理', link: 'project-start.html' },
    { key: 'finance', label: '财务管理', link: 'finance-invoice.html' },
    { key: 'report', label: '报表管理', link: 'report-project-detail.html' },
    { key: 'approval', label: '审批中心', link: 'approval-center.html' },
    { key: 'message', label: '消息中心', link: 'message-center.html' },
    { key: 'file', label: '文件中心', link: 'file-center.html' },
    { key: 'tool', label: '工具中心', link: 'tool-center.html' },
    { key: 'help', label: '帮助中心', link: 'help-center.html' },
    { key: 'search', label: '全局搜索', link: 'global-search.html' },
    { key: 'audit', label: '操作日志', link: 'audit-log.html' },
    { key: 'settings', label: '系统设置', link: 'settings-org.html' }
  ];

  function injectStyle() {
    if (document.getElementById(STYLE_ID)) return;
    const style = document.createElement('style');
    style.id = STYLE_ID;
    style.innerHTML = `
      body { margin: 0; padding: 0; background: #f0f2f5; color: #303133; }
      .navbar { height: 50px; background: #fff; border-bottom: 1px solid #e6e6e6; 
        display: flex; align-items: center; justify-content: space-between; padding: 0 20px; 
        box-shadow: 0 1px 4px rgba(0,21,41,.08); }
      .navbar-left { display: flex; align-items: center; }
      .logo { font-size: 20px; font-weight: bold; color: #409EFF; cursor: pointer; }
      .nav-menu { display: flex; gap: 8px; margin-left: 16px; }
      .nav-item { padding: 8px 16px; cursor: pointer; border-radius: 4px; color: #303133; font-size: 14px; }
      .nav-item:hover { background: #ecf5ff; color: #409EFF; }
      .nav-item.active { background: #409EFF; color: #fff; }
      .navbar-right { display: flex; align-items: center; gap: 16px; font-size: 14px; }
      .navbar-right a { color: #409EFF; text-decoration: none; }
      a { text-decoration: none; }
      .content { padding: 20px; }
      .card { border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
    `;
    document.head.appendChild(style);
  }

  function renderNavbar(activeKey) {
    injectStyle();
    let navbar = document.querySelector('.navbar');
    if (!navbar) {
      navbar = document.createElement('div');
      navbar.className = 'navbar';
      document.body.insertBefore(navbar, document.body.firstChild);
    }
    navbar.innerHTML = `
      <div class="navbar-left">
        <div class="logo" onclick="location.href='dashboard.html'">OA系统</div>
        <div class="nav-menu">
          ${NAV_ITEMS.map(item => `
            <div class="nav-item ${item.key === activeKey ? 'active' : ''}" onclick="location.href='${item.link}'">${item.label}</div>
          `).join('')}
        </div>
      </div>
      <div class="navbar-right">
        <span style="color:#303133;">张三</span><span style="color:#909399;">|</span>
        <a href="profile.html" style="color:#409EFF;">个人中心</a>
        <span style="color:#909399;">|</span>
        <a href="login.html" style="color:#409EFF;">退出</a>
      </div>
    `;
  }

  window.injectLayout = renderNavbar;
})();