// gp-sidebar.jsx — persistent left navigation + workspace top bar
// ───────────────────────────────────────────────────────────────
const { Icon: GIcon, MODULE_GROUPS: GROUPS, PROJECT: PROJ, UserMenu, hasCap: sbHasCap, sidebarGroups: sbGroups } = window;
// Modules d'estimation soumis au gating « accès formation » (visibles selon user.modules).
const SB_EST_IDS = new Set((window.ESTIMATION_MODULES || []).map((m) => m.id));
const sbModAllowed = (user, mid) => {
  const gate = window.GPTOAuth && window.GPTOAuth.enabled && user && user.role === 'user';
  if (!gate || !SB_EST_IDS.has(mid)) return true;
  return !!(user.modules && user.modules[mid]);
};

function Sidebar({ activeId, onNav, savedAt, project, projects = [], onSwitchProject, user, onLogout, userPerms, hidden = {}, org }) {
  const [open, setOpen] = React.useState(false);
  // En prod sans projet actif, ne pas retomber sur le mock : afficher un état vide.
  const prodMode = !!(window.GPTOAuth && window.GPTOAuth.enabled);
  const proj = project || (prodMode ? null : PROJ);
  // Groupes pilotés par l'organisation admin (catégories + déplacements de widgets) ; repli sur la liste statique.
  const groups = (sbGroups && org) ? sbGroups(org) : GROUPS;
  const isAdmin = user && user.role === 'admin';
  const savedLabel = savedAt ?
  'Enreg. ' + new Date(savedAt).toLocaleTimeString('fr-CA', { hour: '2-digit', minute: '2-digit' }) :
  'Enregistré';
  return (
    <nav className="sb">
      <div className="sb-brand">
        <div className="sb-logo">G</div>
        <div className="sb-brand-tx">
          <b>GO·PASSIF</b>
          <span>Estimateur</span>
        </div>
      </div>

      <div className="sb-proj-wrap">
        <button className="sb-proj sb-switch" onClick={() => setOpen((o) => !o)} aria-expanded={open}>
          <div className="sb-proj-tx">
            <div className="sb-proj-lbl">Projet actif</div>
            <div className="sb-proj-name">{proj ? proj.nom : 'Aucun projet'}</div>
            <div className="sb-proj-no">{proj ? `${proj.no}${proj.ville ? ' · ' + proj.ville : ''}` : 'Ouvrez le portefeuille'}</div>
            <div className="sb-saved"><span className="sb-saved-dot" /> {savedLabel} · v{window.SCHEMA_VERSION || 3}</div>
          </div>
          <GIcon n="chevd" style={{ width: 15, height: 15, flexShrink: 0, opacity: .6 }} />
        </button>

        {open &&
        <>
          <div className="sb-switch-backdrop" onClick={() => setOpen(false)} />
          <div className="sb-switch-menu">
              <div className="sb-switch-head">Changer de projet</div>
              {projects.map((p) =>
            <button
              key={p.id}
              className={'sb-switch-item' + (proj && p.id === proj.id ? ' on' : '')}
              onClick={() => {onSwitchProject && onSwitchProject(p.id);setOpen(false);}}>
              
                  <div className="sb-switch-tx">
                    <span className="sb-switch-name">{p.nom}</span>
                    <span className="sb-switch-meta">{p.no} · {p.statut}</span>
                  </div>
                  {proj && p.id === proj.id && <GIcon n="check" style={{ width: 14, height: 14, color: 'var(--accent)', flexShrink: 0 }} />}
                </button>
            )}
              <button className="sb-switch-all" onClick={() => {onNav('portfolio');setOpen(false);}}>
                <GIcon n="folders" style={{ width: 15, height: 15 }} /> Voir tout le portefeuille
              </button>
            </div>
          </>
        }
      </div>

      <div className="sb-scroll">
        {groups.map((g) => {
          const items = g.items.filter((m) => sbHasCap(user, m.cap, userPerms) && !hidden[m.id] && !(m.superOnly && user.role !== 'super_admin') && sbModAllowed(user, m.id));
          if (!items.length) return null;
          return (
            <div className="sb-group" key={g.group}>
            <button className={'sb-group-lbl' + (activeId === 'cat:' + g.group ? ' on' : '')}
              onClick={() => onNav('cat:' + g.group)} title={`Voir la catégorie ${g.group}`}>
              {g.group}<GIcon n="chev" className="sb-group-go" />
            </button>
            {items.map((m) =>
              <button
                key={m.id}
                className={'sb-item' + (activeId === m.id ? ' active' : '')}
                onClick={() => onNav(m.id)}
                title={m.name}>
            
                <GIcon n={m.icon} />
                <span className="sb-item-name">{m.name}</span>
                {!m.tool && m.status && <span className={'sb-dot ' + (m.status || 'none')} />}
              </button>
              )}
          </div>);

        })}
      </div>

      <div className="sb-foot sb-foot-user">
        {user && <UserMenu user={user} onLogout={onLogout} />}
      </div>
    </nav>);

}

function Topbar({ crumbCat, crumbName, isHome, isCat, onHome, onCrumbCat, project, projects = [], onSwitchProject, onPortfolio, direction, onDirection, theme, onTheme, unit, onUnit, onMesure }) {
  const [pOpen, setPOpen] = React.useState(false);
  return (
    <div className="topbar">
      <div className="topbar-in">
        <div className="crumb">
          {project &&
          <div className="crumb-proj-wrap">
            <button className="crumb-proj" onClick={() => setPOpen((o) => !o)} aria-expanded={pOpen} title="Changer de projet">
              <GIcon n="folders" style={{ width: 14, height: 14, flexShrink: 0, opacity: .7 }} />
              <span className="crumb-proj-no">{project.no}</span>
              <GIcon n="chevd" style={{ width: 12, height: 12, flexShrink: 0, opacity: .55 }} />
            </button>
            {pOpen &&
            <>
              <div className="sb-switch-backdrop" onClick={() => setPOpen(false)} />
              <div className="crumb-proj-menu">
                <div className="sb-switch-head">Tableau de bord du projet</div>
                {projects.map((p) =>
                <button key={p.id} className={'sb-switch-item' + (p.id === project.id ? ' on' : '')}
                onClick={() => {onSwitchProject && onSwitchProject(p.id);setPOpen(false);}}>
                  <div className="sb-switch-tx">
                    <span className="sb-switch-name">{p.nom}</span>
                    <span className="sb-switch-meta">{p.no} · {p.statut}</span>
                  </div>
                  {p.id === project.id && <GIcon n="check" style={{ width: 14, height: 14, color: 'var(--accent)', flexShrink: 0 }} />}
                </button>
                )}
                <button className="sb-switch-all" onClick={() => {onPortfolio && onPortfolio();setPOpen(false);}}>
                  <GIcon n="folders" style={{ width: 15, height: 15 }} /> Voir tout le portefeuille
                </button>
              </div>
            </>}
            <GIcon n="chev" className="crumb-sep" />
          </div>}
          <button className={'crumb-home' + (isHome ? ' on' : '')} onClick={onHome}>
            <GIcon n="grid" /> Tableau de bord
          </button>
          {isCat &&
          <>
            <GIcon n="chev" />
            <b>{crumbName}</b>
          </>}
          {!isHome && !isCat &&
          <>
            <GIcon n="chev" />
            <button className="crumb-cat" onClick={() => onCrumbCat && onCrumbCat(crumbCat)} title={`Voir les modules · ${crumbCat}`}>{crumbCat}</button>
            <GIcon n="chev" />
            <b>{crumbName}</b>
          </>}
        </div>
        <div className="topbar-sp" />

        <div className="seg" title="Système d'unités">
          <button className={unit === 'imp' ? 'on' : ''} onClick={() => onUnit('imp')}>impérial</button>
          <button className={unit === 'si' ? 'on' : ''} onClick={() => onUnit('si')}>métrique</button>
        </div>

        <button className="theme-toggle" onClick={() => onTheme && onTheme(theme === 'dark' ? 'light' : 'dark')}
          title={theme === 'dark' ? 'Passer en mode clair' : 'Passer en mode sombre'} aria-label="Basculer le thème">
          <GIcon n={theme === 'dark' ? 'sun' : 'moon'} />
        </button>

        <button className="btn accent" onClick={onMesure}>
          <GIcon n="ruler" /> Mesure sur plan
        </button>
      </div>
    </div>);

}

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