/**
 * dcAI Platform — Shared Navigation Sidebar
 * Single source of truth for all dashboard pages.
 * Usage: add <div id="dcai-nav"></div> then <script src="sidebar.js"></script>
 * Main content must have class="main" — script auto-sets margin-left.
 */
(function () {
  /* ── Tabler Icons ── */
  if (!document.querySelector('link[href*="tabler-icons"]')) {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.19.0/dist/tabler-icons.min.css';
    document.head.appendChild(link);
  }

  /* ── CSS ── */
  const style = document.createElement('style');
  style.textContent = `
    #dcai-nav {
      position: fixed; left: 0; top: 0;
      width: 220px; height: 100vh;
      background: #0b1120;
      border-right: 1px solid #1e2d4a;
      display: flex; flex-direction: column;
      z-index: 200; overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: #1e2d4a transparent;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    }
    #dcai-nav::-webkit-scrollbar { width: 4px; }
    #dcai-nav::-webkit-scrollbar-thumb { background: #1e2d4a; border-radius: 2px; }

    .dcai-ws-header {
      padding: 14px 12px 12px;
      display: flex; align-items: center; gap: 9px;
      border-bottom: 1px solid #1e2d4a;
      flex-shrink: 0; text-decoration: none;
    }
    .dcai-ws-logo {
      width: 26px; height: 26px; border-radius: 7px;
      background: linear-gradient(135deg, #4f46e5, #7c3aed);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .dcai-ws-logo i { font-size: 14px; color: #fff; }
    .dcai-ws-info { flex: 1; min-width: 0; }
    .dcai-ws-name { font-size: 13px; font-weight: 600; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dcai-ws-plan { font-size: 10px; padding: 1px 6px; background: #1e1b4b; color: #a5b4fc; border-radius: 4px; font-weight: 600; white-space: nowrap; }
    .dcai-ws-tags { font-size: 9px; color: #475569; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .dcai-section-label {
      padding: 14px 14px 5px;
      font-size: 9px; font-weight: 700;
      letter-spacing: .08em; text-transform: uppercase;
      color: #334155;
    }

    .dcai-nav-item {
      display: flex; align-items: center; gap: 9px;
      padding: 7px 12px; margin: 1px 8px;
      border-radius: 7px; border: 1px solid transparent;
      cursor: pointer; text-decoration: none;
      transition: background .12s, border-color .12s;
    }
    .dcai-nav-item:hover { background: #111c30; border-color: #1e2d4a; }
    .dcai-nav-item.active { background: #1e1b4b; border-color: #3730a3; }
    .dcai-nav-item.active .dcai-nav-label { color: #c4b5fd; }
    .dcai-nav-item.active .dcai-nav-icon i { color: #a5b4fc; }

    .dcai-nav-icon {
      width: 22px; height: 22px; border-radius: 5px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; background: #111827;
    }
    .dcai-nav-icon i { font-size: 13px; color: #475569; }
    .dcai-nav-icon.ni-purple { background: #1e1b4b; }
    .dcai-nav-icon.ni-purple i { color: #818cf8; }
    .dcai-nav-icon.ni-blue { background: #0d1f35; }
    .dcai-nav-icon.ni-blue i { color: #60a5fa; }
    .dcai-nav-icon.ni-green { background: #052e16; }
    .dcai-nav-icon.ni-green i { color: #4ade80; }
    .dcai-nav-icon.ni-teal { background: #042f2e; }
    .dcai-nav-icon.ni-teal i { color: #2dd4bf; }
    .dcai-nav-icon.ni-amber { background: #1a1200; }
    .dcai-nav-icon.ni-amber i { color: #fbbf24; }
    .dcai-nav-icon.ni-red { background: #1f0a0a; }
    .dcai-nav-icon.ni-red i { color: #f87171; }

    .dcai-nav-label { font-size: 11px; font-weight: 500; color: #94a3b8; flex: 1; }
    .dcai-nav-item:hover .dcai-nav-label { color: #e2e8f0; }

    .dcai-nav-badge {
      margin-left: auto; flex-shrink: 0;
      font-size: 9px; font-weight: 700;
      padding: 1px 6px; border-radius: 8px;
    }
    .nb-live { background: #052e16; color: #4ade80; border: 1px solid #166534; }
    .nb-ai   { background: #1e1b4b; color: #a5b4fc; }
    .nb-num  { background: #0d1f35; color: #60a5fa; }
    .nb-new  { background: #1e1b4b; color: #c4b5fd; }
    .nb-p0   { background: #1a1200; color: #fbbf24; font-size: 8px; }

    .dcai-divider { height: 1px; background: #1e2d4a; margin: 5px 12px; }

    /* Collapsible soon group */
    .dcai-soon-toggle {
      display: flex; align-items: center; gap: 9px;
      padding: 5px 12px; margin: 1px 8px;
      border-radius: 7px; cursor: pointer;
      border: none; background: transparent; width: calc(100% - 16px);
      text-align: left;
    }
    .dcai-soon-toggle:hover { background: #0d1526; }
    .dcai-soon-toggle i.ti-chevron-right {
      font-size: 11px; color: #334155;
      transition: transform .2s; flex-shrink: 0;
    }
    .dcai-soon-toggle.open i.ti-chevron-right { transform: rotate(90deg); }
    .dcai-soon-label { font-size: 10px; color: #334155; font-weight: 600; flex: 1; }
    .dcai-soon-count { font-size: 9px; padding: 1px 5px; background: #0d1526; color: #334155; border-radius: 8px; }

    .dcai-soon-items { display: none; }
    .dcai-soon-items.open { display: block; }
    .dcai-soon-items .dcai-nav-item { opacity: .5; pointer-events: none; }

    /* Implementations */
    .dcai-impl-card {
      margin: 2px 8px; border-radius: 7px;
      border: 1px solid #1e2d4a; overflow: hidden;
    }
    .dcai-impl-header {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 10px; cursor: pointer;
      background: rgba(99,102,241,0.08);
    }
    .dcai-impl-header i { font-size: 13px; color: #818cf8; }
    .dcai-impl-name { font-size: 11px; font-weight: 500; color: #a5b4fc; flex: 1; }
    .dcai-impl-pct { font-size: 11px; color: #818cf8; opacity: .8; }
    .dcai-impl-bar { height: 2px; background: #1e2d4a; }
    .dcai-impl-fill { height: 100%; background: #6366f1; transition: width .3s; }

    .dcai-add-btn {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 12px; margin: 2px 8px;
      border-radius: 7px; cursor: pointer;
      text-decoration: none; border: 1px dashed #1e2d4a;
      background: transparent;
    }
    .dcai-add-btn:hover { background: #0d1526; border-color: #334155; }
    .dcai-add-btn i { font-size: 12px; color: #334155; }
    .dcai-add-btn span { font-size: 11px; color: #334155; }

    .dcai-footer {
      margin-top: auto; border-top: 1px solid #1e2d4a;
      padding: 10px 12px; display: flex; align-items: center; gap: 9px;
      flex-shrink: 0;
    }
    .dcai-avatar {
      width: 28px; height: 28px; border-radius: 50%;
      background: linear-gradient(135deg, #4f46e5, #7c3aed);
      display: flex; align-items: center; justify-content: center;
      font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0;
    }
    .dcai-user-info { flex: 1; min-width: 0; }
    .dcai-user-name { font-size: 11px; font-weight: 600; color: #e2e8f0; }
    .dcai-user-org  { font-size: 10px; color: #475569; }
    .dcai-footer a { color: #475569; text-decoration: none; font-size: 14px; }
    .dcai-footer a:hover { color: #94a3b8; }

    /* upgrade pill */
    .dcai-upgrade {
      display: flex; align-items: center; gap: 7px;
      margin: 6px 8px 2px; padding: 7px 10px;
      border-radius: 7px; background: #1a0d00;
      border: 1px solid #3d2000; text-decoration: none;
      transition: background .12s;
    }
    .dcai-upgrade:hover { background: #2a1500; }
    .dcai-upgrade i { font-size: 13px; color: #fb923c; }
    .dcai-upgrade span { font-size: 11px; font-weight: 600; color: #fb923c; }
  `;
  document.head.appendChild(style);

  /* ── Active page detection ── */
  const page = window.location.pathname.split('/').pop() || 'live.html';

  function isActive(href) {
    if (!href) return false;
    return page === href || (href === 'live.html' && page === '');
  }

  function navItem(href, iconClass, iconColor, label, badge, badgeClass, external) {
    const active = isActive(href) ? ' active' : '';
    const target = external ? ' target="_blank" rel="noopener"' : '';
    const url = href || '#';
    const bdg = badge ? `<span class="dcai-nav-badge ${badgeClass}">${badge}</span>` : '';
    return `<a class="dcai-nav-item${active}" href="${url}"${target}>
      <div class="dcai-nav-icon ${iconColor}"><i class="ti ${iconClass}" aria-hidden="true"></i></div>
      <span class="dcai-nav-label">${label}</span>${bdg}
    </a>`;
  }

  function soonGroup(id, items) {
    const count = items.length;
    const rows = items.map(it =>
      `<div class="dcai-nav-item">
        <div class="dcai-nav-icon"><i class="ti ${it.icon}" aria-hidden="true"></i></div>
        <span class="dcai-nav-label">${it.label}</span>
        ${it.badge ? `<span class="dcai-nav-badge nb-p0">${it.badge}</span>` : ''}
      </div>`
    ).join('');
    return `
      <button class="dcai-soon-toggle" onclick="dcaiToggleSoon('${id}', this)">
        <i class="ti ti-chevron-right" aria-hidden="true"></i>
        <span class="dcai-soon-label">Coming soon</span>
        <span class="dcai-soon-count">${count}</span>
      </button>
      <div class="dcai-soon-items" id="dcai-soon-${id}">${rows}</div>`;
  }

  /* ── HTML ── */
  const html = `
    <a class="dcai-ws-header" href="live.html">
      <div class="dcai-ws-logo"><i class="ti ti-hexagon-filled" aria-hidden="true"></i></div>
      <div class="dcai-ws-info">
        <div class="dcai-ws-name">dcAI Platform</div>
        <div class="dcai-ws-tags">Finance · SOX · FINRA</div>
      </div>
      <span class="dcai-ws-plan">Enterprise</span>
    </a>

    <div class="dcai-section-label">Products</div>
    ${navItem('agent.html',      'ti-robot',          'ni-purple', 'Agent Builder',  'AI', 'nb-ai')}
    ${navItem('blueprint.html',  'ti-microphone',     'ni-blue',   'Blueprint',      '', '')}
    ${navItem('industryiq.html', 'ti-building-bank',  'ni-amber',  'IndustryIQ',     '', '')}
    ${navItem('connectors.html', 'ti-plug',           'ni-teal',   'DataBridge',     '60+', 'nb-num')}
    ${navItem('flows.html',      'ti-git-branch',     'ni-blue',   'FlowEngine',     '', '')}
    ${navItem('rag.html',        'ti-brain',          'ni-purple', 'IntelliEngine',  '5,374', 'nb-num')}
    ${navItem('autotest.html',   'ti-flask',          'ni-green',  'AutoProve',      'NEW', 'nb-new')}
    ${navItem('deployshield.html','ti-rocket',        'ni-blue',   'DeployShield',   '', '')}

    <div class="dcai-divider"></div>
    <div class="dcai-section-label">Platform</div>
    ${navItem('live.html',     'ti-layout-dashboard', 'ni-purple', 'Dashboard',    'LIVE', 'nb-live')}
    ${navItem('live.html',     'ti-activity',         'ni-teal',   'Live Monitor', '',     '')}
    ${navItem('review.html',   'ti-shield-check',     'ni-teal',   'Govern',       '', '')}
    ${navItem('flowkit.html',  'ti-template',         'ni-purple', 'FlowKit',      '', '')}
    ${navItem('webhooks.html', 'ti-webhook',          '',          'Webhooks',     '', '')}
    ${navItem('sandbox.html',  'ti-box',              'ni-blue',   'Sandbox',      '', '')}

    <div class="dcai-divider"></div>
    <div class="dcai-section-label">Workspaces</div>
    <div class="dcai-impl-card">
      <div class="dcai-impl-header">
        <i class="ti ti-building" aria-hidden="true"></i>
        <span class="dcai-impl-name">Meridian Wealth</span>
        <span class="dcai-impl-pct">75%</span>
      </div>
      <div class="dcai-impl-bar"><div class="dcai-impl-fill" style="width:75%"></div></div>
    </div>
    <div class="dcai-impl-card" style="margin-top:4px">
      <div class="dcai-impl-header" style="background:rgba(59,130,246,0.08)">
        <i class="ti ti-building" aria-hidden="true" style="color:#60a5fa"></i>
        <span class="dcai-impl-name" style="color:#93c5fd">Acme Corp</span>
        <span class="dcai-impl-pct" style="color:#60a5fa">40%</span>
      </div>
      <div class="dcai-impl-bar"><div class="dcai-impl-fill" style="width:40%;background:#3b82f6"></div></div>
    </div>
    <a class="dcai-add-btn" href="#">
      <i class="ti ti-plus" aria-hidden="true"></i>
      <span>New workspace</span>
    </a>

    <div class="dcai-divider"></div>
    <div class="dcai-section-label">Ecosystem</div>
    ${navItem('research.html',   'ti-chart-dots',   '', 'Research',   '', '')}
    ${navItem('community.html',  'ti-users-group',  '', 'Community',  '', '')}
    ${navItem('opensource.html', 'ti-brand-github', '', 'Open Source','', '')}

    <div class="dcai-divider"></div>
    <div class="dcai-section-label">Dev</div>
    ${navItem('api-docs.html', 'ti-book', '', 'API Docs', '', '')}
    ${navItem('https://api.deepcognitive.io/docs', 'ti-external-link', '', 'Backend API', '', '', true)}

    <div class="dcai-divider"></div>
    <div class="dcai-section-label">Account</div>
    ${navItem('settings.html', 'ti-settings', '', 'Settings', '', '')}
    ${navItem('admin.html',    'ti-shield',   '', 'Admin',    '', '')}

    <a class="dcai-upgrade" href="settings.html#plans">
      <i class="ti ti-bolt" aria-hidden="true"></i>
      <span>Upgrade plan</span>
    </a>

    <div class="dcai-footer">
      <div class="dcai-avatar">DS</div>
      <div class="dcai-user-info">
        <div class="dcai-user-name">Deep Sangeet</div>
        <div class="dcai-user-org">deepcognitive.io</div>
      </div>
      <a href="settings.html" title="Settings"><i class="ti ti-settings" aria-hidden="true"></i></a>
    </div>
  `;

  /* ── Mount ── */
  const mount = document.getElementById('dcai-nav');
  if (mount) {
    mount.innerHTML = html;
  } else {
    const div = document.createElement('div');
    div.id = 'dcai-nav';
    div.innerHTML = html;
    document.body.insertBefore(div, document.body.firstChild);
  }

  /* ── Offset main content ── */
  document.querySelectorAll('.main, #main, .main-content').forEach(el => {
    el.style.marginLeft = '230px';
  });

  /* ── Restore collapse state ── */
  try {
    const saved = JSON.parse(localStorage.getItem('dcai-nav-open') || '{}');
    Object.keys(saved).forEach(id => {
      if (saved[id]) {
        const btn = document.querySelector(`.dcai-soon-toggle[onclick*="'${id}'"]`);
        const list = document.getElementById('dcai-soon-' + id);
        if (btn && list) { btn.classList.add('open'); list.classList.add('open'); }
      }
    });
  } catch (e) {}
})();

/* ── Toggle handler (global) ── */
function dcaiToggleSoon(id, btn) {
  btn.classList.toggle('open');
  const list = document.getElementById('dcai-soon-' + id);
  if (list) list.classList.toggle('open');
  try {
    const saved = JSON.parse(localStorage.getItem('dcai-nav-open') || '{}');
    saved[id] = btn.classList.contains('open');
    localStorage.setItem('dcai-nav-open', JSON.stringify(saved));
  } catch (e) {}
}