/* =====================================================================
   AI-COS — App shell: sidebar nav + topbar + readiness pill
   ===================================================================== */
function Sidebar({ active, onNav, onLogout }) {
  const DB = window.DB;
  return (
    <aside className="sidebar">
      <div className="brand">
        <BrandMark size={40} light />
        <div>
          <div className="brand-name">AI-COS</div>
          <div className="brand-sub">Al Duqum Al Masiya · ADAM</div>
        </div>
      </div>

      <nav className="nav">
        {DB.nav.map((grp) => (
          <div key={grp.group}>
            <div className="nav-group-label">{grp.group}</div>
            {grp.items.map((it) => (
              <div key={it.id} className={`nav-item${active === it.id ? ' active' : ''}`} onClick={() => onNav(it.id)}>
                <Icon name={it.icon} size={18} className="nav-ico" />
                <span>{it.label}</span>
                {it.badge ? <span className={`nav-badge${it.badgeAmber ? ' amber' : ''}`}>{it.badge}</span>
                  : it.phase ? <span className="nav-phase">{it.phase}</span> : null}
              </div>
            ))}
          </div>
        ))}
      </nav>

      <div className="side-foot">
        <div className="readiness-card" onClick={() => onNav('dashboard')}>
          <div className="row" style={{ justifyContent: 'space-between' }}>
            <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.5px', color: '#9fb4d0', textTransform: 'uppercase' }}>Audit readiness</span>
            <Icon name="sparkles" size={13} style={{ color: 'var(--primary-500)' }} fill />
          </div>
          <div className="row" style={{ gap: 10, marginTop: 8, alignItems: 'flex-end' }}>
            <span style={{ fontSize: 30, fontWeight: 800, color: '#fff', lineHeight: 1, letterSpacing: '-1px' }}>{DB.readiness.score}</span>
            <span style={{ fontSize: 12, color: '#7e94b0', marginBottom: 3 }}>/ 100</span>
            <span className="badge b-ok" style={{ marginLeft: 'auto', marginBottom: 2 }}>Audit-ready</span>
          </div>
          <div className="progress" style={{ marginTop: 9, height: 5, background: '#0a1c30' }}>
            <i style={{ width: `${DB.readiness.score}%`, background: 'linear-gradient(90deg, var(--primary-500), #58d6a6)' }} />
          </div>
        </div>
        <div className="nav-item" style={{ marginTop: 6, color: '#8aa0bd' }} onClick={onLogout}>
          <Icon name="logout" size={17} className="nav-ico" /><span>Sign out</span>
        </div>
      </div>
    </aside>
  );
}

function Topbar({ title, crumb, onOpenAI, onOpenNotif, onNav, onLogout }) {
  const [menu, setMenu] = useState(false);
  const onSearch = (e) => { if (e.key === 'Enter' && e.target.value.trim()) window._search(e.target.value.trim()); };
  return (
    <header className="topbar">
      <div className="col" style={{ gap: 1 }}>
        <div className="breadcrumb"><span>AI-COS</span><Icon name="chevR" size={13} /><b>{crumb || title}</b></div>
      </div>
      <DemoChip />
      <div className="spacer" />
      <div className="searchbox" onClick={(e) => e.currentTarget.querySelector('input').focus()}>
        <Icon name="search" size={16} />
        <input placeholder="Search assets, jobs, certificates, customers…" onKeyDown={onSearch} />
        <kbd>⌘K</kbd>
      </div>
      <button className="icon-btn" onClick={onOpenAI} title="AI assistant" style={{ color: 'var(--ai)', borderColor: 'var(--ai-line)', background: 'var(--ai-bg)' }}>
        <Icon name="sparkles" size={17} fill />
      </button>
      <button className="icon-btn" onClick={onOpenNotif} title="Notifications">
        <Icon name="bell" size={17} /><span className="dot-badge" />
      </button>
      <div className="vr" />
      <div style={{ position: 'relative' }}>
        <div className="row" style={{ gap: 9, cursor: 'pointer' }} onClick={() => setMenu((m) => !m)}>
          <Avatar id="U-007" />
          <div className="col" style={{ gap: 0, lineHeight: 1.25 }}>
            <span style={{ fontSize: 13, fontWeight: 700 }}>Savad Ahammed</span>
            <span style={{ fontSize: 11, color: 'var(--text-3)' }}>Super Admin</span>
          </div>
          <Icon name="chevD" size={14} style={{ color: 'var(--text-3)' }} />
        </div>
        {menu && (
          <React.Fragment>
            <div style={{ position: 'fixed', inset: 0, zIndex: 70 }} onClick={() => setMenu(false)} />
            <div className="popover" style={{ right: 0, top: 'calc(100% + 8px)', minWidth: 210 }}>
              <div style={{ padding: '6px 10px 8px', borderBottom: '1px solid var(--border)', marginBottom: 4 }}>
                <div style={{ fontSize: 12.5, fontWeight: 700 }}>Savad Ahammed</div>
                <div className="faint" style={{ fontSize: 11 }}>savad.ahammed@aldam.om · Al Duqum Al Masiya ENT</div>
              </div>
              <div className="pop-item" onClick={() => { setMenu(false); window.toast('Profile opened', 'info'); }}><Icon name="users" size={14} />My profile</div>
              <div className="pop-item" onClick={() => { setMenu(false); onNav && onNav('admin'); }}><Icon name="settings" size={14} />Administration</div>
              <div className="pop-item" onClick={() => { setMenu(false); onNav && onNav('ai'); }}><Icon name="sparkles" size={14} />AI intelligence</div>
              <div className="pop-item" style={{ color: 'var(--bad)' }} onClick={() => { setMenu(false); onLogout && onLogout(); }}><Icon name="logout" size={14} />Sign out</div>
            </div>
          </React.Fragment>
        )}
      </div>
    </header>
  );
}

/* ---- AI assistant slide-over ---- */
function AIAssistant({ open, onClose, onNav }) {
  const DB = window.DB;
  return (
    <Drawer open={open} onClose={onClose} width={440}>
      <div className="drawer-head" style={{ background: 'linear-gradient(120deg, var(--ai-bg), #fff)' }}>
        <span className="ai-badge-ico" style={{ width: 34, height: 34 }}><Icon name="sparkles" size={18} fill /></span>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 750, fontSize: 15 }}>Compliance Intelligence</div>
          <div className="faint" style={{ fontSize: 12 }}>Advisory · logged · human-confirmed</div>
        </div>
        <button className="icon-btn" onClick={onClose}><Icon name="x" size={17} /></button>
      </div>
      <div className="drawer-body" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div className="card card-pad" style={{ background: 'linear-gradient(140deg, var(--navy-900), var(--navy-800))', color: '#fff', border: 'none' }}>
          <div className="row" style={{ justifyContent: 'space-between' }}>
            <span style={{ fontSize: 12, color: '#9fb4d0', fontWeight: 600 }}>Live audit-readiness</span>
            <Badge kind="ok">+2 this week</Badge>
          </div>
          <div className="row" style={{ gap: 8, marginTop: 6, alignItems: 'flex-end' }}>
            <span style={{ fontSize: 38, fontWeight: 800, lineHeight: 1 }}>{DB.readiness.score}</span><span style={{ color: '#7e94b0', marginBottom: 5 }}>/ 100</span>
          </div>
          <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 6 }}>
            {DB.readiness.factors.filter(f => f.value < 0).map((f, i) => (
              <div key={i} className="row" style={{ justifyContent: 'space-between', fontSize: 12 }}>
                <span style={{ color: '#cdd9ea' }}>{f.label}</span>
                <span style={{ color: '#ff9b8f', fontWeight: 700 }}>{f.value}</span>
              </div>
            ))}
          </div>
        </div>
        {DB.aiAlerts.map((a) => (
          <AINote key={a.id} title={a.title} clause={a.clause} action={a.action} onAction={() => { onClose(); onNav(a.kind === 'doc' ? 'documents' : a.kind === 'risk' ? 'schedule' : 'iso'); }}>
            {a.body}
          </AINote>
        ))}
        <div className="faint" style={{ fontSize: 11.5, textAlign: 'center', padding: '4px 16px' }}>
          AI outputs never become records on their own. Each suggestion requires a human action and is written to the audit trail.
        </div>
      </div>
    </Drawer>
  );
}

/* ---- Notifications ---- */
function NotifPanel({ open, onClose, onNav }) {
  const items = [
    { ico: 'x-circle', tone: 'bad', t: 'Cylinder CYL-2455 expired', s: 'Hard-blocked from worksheet selection · 1h ago', nav: 'cylinders' },
    { ico: 'certificate', tone: 'ok', t: 'Certificate ADAM-CAL-26-04188 issued', s: 'PDO · auto-published to portal · 2h ago', nav: 'certs' },
    { ico: 'alert', tone: 'warn', t: 'CYL-2454 low pressure (320 psi)', s: 'Reorder suggested · 3h ago', nav: 'cylinders' },
    { ico: 'clock', tone: 'warn', t: 'CAPA-26-014 overdue', s: 'PT bias investigation · assigned to S. Iqbal', nav: 'qms' },
    { ico: 'flag', tone: 'info', t: 'JOB-26-0412 awaiting review', s: 'PDO · 6 items · submitted by P. Nair', nav: 'jobs' },
  ];
  return (
    <Drawer open={open} onClose={onClose} width={400}>
      <div className="drawer-head">
        <Icon name="bell" size={18} /><div style={{ flex: 1, fontWeight: 750, fontSize: 15 }}>Notifications</div>
        <button className="icon-btn" onClick={onClose}><Icon name="x" size={17} /></button>
      </div>
      <div className="drawer-body" style={{ padding: 14 }}>
        {items.map((it, i) => {
          const bg = { bad: 'var(--bad-bg)', ok: 'var(--ok-bg)', warn: 'var(--warn-bg)', info: 'var(--info-bg)' }[it.tone];
          const fg = { bad: 'var(--bad)', ok: 'var(--ok)', warn: 'var(--warn)', info: 'var(--primary-600)' }[it.tone];
          return (
            <div key={i} className="row" style={{ gap: 11, padding: '11px 8px', borderBottom: '1px solid var(--border)', alignItems: 'flex-start', cursor: 'pointer', borderRadius: 8 }} onClick={() => { onClose(); onNav && onNav(it.nav); }}>
              <span className="kpi-ico" style={{ background: bg, color: fg, width: 32, height: 32 }}><Icon name={it.ico} size={16} /></span>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 650, fontSize: 13 }}>{it.t}</div>
                <div className="faint" style={{ fontSize: 12, marginTop: 1 }}>{it.s}</div>
              </div>
            </div>
          );
        })}
      </div>
    </Drawer>
  );
}

Object.assign(window, { Sidebar, Topbar, AIAssistant, NotifPanel });