// shell.jsx — Sidebar, Topbar, Capture banner, Avatars

function Avatar({ name, photo, status, size = 'md', src = null }) {
  const a = window.APPORTOO.av(name || photo || '?');
  const cls = size === 'lg' ? 'av lg' : size === 'sm' ? 'av sm' : size === 'xs' ? 'av xs' : 'av';
  return (
    <div className={cls} style={{ background: a.bg, color: a.fg }}>
      {a.initials}
      {status && <span className={`badge-dot ${status}`} />}
    </div>
  );
}

function Sidebar({ route, onRoute, counts, captureOn, onToggleCapture }) {
  const items = [
    { id: 'home', label: 'Accueil', icon: 'home', count: counts.home, sc: 'G H' },
    { id: 'me', label: 'Mes missions', icon: 'briefcase', count: counts.me, sc: 'G E' },
    { id: 'presta', label: 'Prestataires', icon: 'presta', count: counts.presta, sc: 'G P' },
    { id: 'client', label: 'Clients', icon: 'client', count: counts.client, sc: 'G C' },
    { id: 'match', label: 'Mise en relation', icon: 'match', count: counts.match, sc: 'G M' },
    { id: 'conv', label: 'Conversations', icon: 'conv', count: counts.conv, sc: 'G I' },
    { id: 'calendar', label: 'Calendrier', icon: 'calendar', count: counts.calendar, sc: 'G A' },
  ];
  const bottom = [
    { id: 'settings', label: 'Réglages', icon: 'settings' },
  ];
  return (
    <aside className="sb">
      <div className="sb-brand">
        <div className="sb-logo">A</div>
        <div>
          <div className="sb-name">Apportoo</div>
          <div style={{ fontSize: 10.5, color: 'var(--ink-4)', marginTop: 1, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Personal cockpit</div>
        </div>
      </div>

      <div className="sb-sect">Pipeline</div>
      {items.map(it => {
        const Ico = window.Icon[it.icon];
        return (
          <div key={it.id}
               className={`sb-item ${route === it.id ? 'is-active' : ''}`}
               onClick={() => onRoute(it.id)}>
            <Ico size={16} className="icn" />
            <span>{it.label}</span>
            {it.count != null && it.count > 0 && (
              <span className="count" style={{
                background: it.id === 'home' ? 'var(--coral)' : 'var(--bg-1)',
                color: it.id === 'home' ? '#fff' : 'var(--ink-3)',
              }}>{it.count}</span>
            )}
          </div>
        );
      })}

      <div className="sb-sect">Système</div>
      {bottom.map(it => {
        const Ico = window.Icon[it.icon];
        return (
          <div key={it.id}
               className={`sb-item ${route === it.id ? 'is-active' : ''}`}
               onClick={() => onRoute(it.id)}>
            <Ico size={16} className="icn" />
            <span>{it.label}</span>
          </div>
        );
      })}

      <div className="sb-foot">
        <div className={`sb-sync ${captureOn ? '' : 'off'}`}>
          <span className="dot" />
          <span>Synchro {captureOn ? 'auto' : 'pause'}</span>
          <span className="sync-meta">{captureOn ? 'à l\'instant' : '—'}</span>
          <button className="sb-sync-toggle" onClick={onToggleCapture} aria-label="Toggle sync" />
        </div>
        <div className="sb-me">
          <div className="av sm" style={{ background: '#523f38', color: '#fff' }}>FB</div>
          <div className="who">
            <b>François B.</b>
            <span>Apport d'affaires · Pro</span>
          </div>
        </div>
      </div>
    </aside>
  );
}

function Topbar({ title, sub, counters, onCommandPalette, route }) {
  return (
    <div className="topbar">
      <div>
        <h1>{title}</h1>
        {sub && <div className="sub">{sub}</div>}
      </div>
      {counters && (
        <div className="counters" style={{ marginLeft: 18 }}>
          <span className="n">{counters.qualif}</span>
          <span>leads à qualifier</span>
          <span className="dotsep">·</span>
          <span className="n">{counters.dm}</span>
          <span>DM à traiter aujourd'hui</span>
        </div>
      )}
      <div className="grow" />
      <div className="actions">
        <div className="btn ghost" onClick={onCommandPalette}>
          <window.Icon.search size={15} />
          <span style={{ color: 'var(--ink-4)' }}>Rechercher…</span>
          <span className="kbd">⌘K</span>
        </div>
        <button className="btn icon"><window.Icon.bell size={15} /></button>
      </div>
    </div>
  );
}

function CaptureBanner({ data, onDismiss, onView }) {
  if (!data) return null;
  return (
    <div className="capture-banner">
      <span className="pulse" />
      <span>
        L'extension a capturé <b>{data.messages} nouveaux messages</b> et <b>{data.profiles} profils enrichis</b>.
      </span>
      <button onClick={onView}>Voir les nouveaux →</button>
      <button className="dismiss" onClick={onDismiss} aria-label="Fermer">✕</button>
    </div>
  );
}

window.Avatar = Avatar;
window.Sidebar = Sidebar;
window.Topbar = Topbar;
window.CaptureBanner = CaptureBanner;