// 统一导航与样式注入
(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: linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%); color: #303133; }
      .navbar { height: 60px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-bottom: none; 
        display: flex; align-items: center; justify-content: space-between; padding: 0 24px; 
        box-shadow: 0 4px 16px rgba(0,0,0,0.12); position: relative; z-index: 1000; }
      .navbar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
        background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); }
      .navbar > * { position: relative; z-index: 1; }
      .navbar-left { display: flex; align-items: center; }
      .logo { font-size: 22px; font-weight: 700; color: #ffffff; cursor: pointer; 
        text-shadow: 0 2px 4px rgba(0,0,0,0.1); letter-spacing: 0.5px; 
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
      .logo:hover { transform: scale(1.05); text-shadow: 0 4px 8px rgba(0,0,0,0.15); }
      .nav-menu { display: flex; gap: 4px; margin-left: 20px; }
      .nav-item { padding: 10px 18px; cursor: pointer; border-radius: 8px; color: rgba(255,255,255,0.9); 
        font-size: 14px; font-weight: 500; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
        position: relative; overflow: hidden; }
      .nav-item::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; 
        background: rgba(255,255,255,0.1); transition: left 0.3s; }
      .nav-item:hover::before { left: 0; }
      .nav-item:hover { color: #ffffff; background: rgba(255,255,255,0.15); transform: translateY(-1px); }
      .nav-item.active { background: rgba(255,255,255,0.25); color: #ffffff; 
        box-shadow: 0 4px 12px rgba(0,0,0,0.15); font-weight: 600; }
      .navbar-right { display: flex; align-items: center; gap: 16px; font-size: 14px; 
        color: rgba(255,255,255,0.9); }
      .navbar-right a { color: rgba(255,255,255,0.9); text-decoration: none; 
        transition: all 0.3s; }
      .navbar-right a:hover { color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
      a { text-decoration: none; }
      .content { padding: 20px; }
      .card { border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); 
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
      .card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-2px); }
    `;
    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;
})();