// Shell — Sidebar + TopNav

function Sidebar({ active, onChange }) {
  // Sidebar items map to screens (icon-only). Order: home, journeys, contacts, opps, cal, reports, cases
  const items = [
    { id: "painel",        icon: ICN.home,       label: "Painel" },
    { id: "pipeline",      icon: ICN.trendUp,    label: "Pipeline" },
    { id: "jornadas",      icon: ICN.share,      label: "Jornadas" },
    { id: "contatos",      icon: ICN.users,      label: "Contatos" },
    { id: "oportunidades", icon: ICN.briefcase,  label: "Oportunidades" },
    { id: "calendario",    icon: ICN.cal,        label: "Calendário" },
    { id: "relatorios",    icon: ICN.chart,      label: "Relatórios" },
    { id: "casos",         icon: ICN.bolt,       label: "Casos" },
    { id: "conversas",     icon: ICN.whatsapp,   label: "Conversas" },
  ];

  return (
    <aside className="sidebar">
      <div className="sb-logo" title="Ezza">
        <img src="assets/ezza-icon.svg" alt="Ezza" />
      </div>
      {items.map((it, idx) => (
        <div
          key={it.id}
          className={`sb-btn ${active === it.id ? 'active' : ''}`}
          data-tip={it.label}
          onClick={() => onChange(it.id)}
        >
          {it.icon}
          {it.id === 'casos' && <span className="sb-dot" />}
        </div>
      ))}
      <div className="sb-spacer" />
    </aside>
  );
}

function TopNav({ active, onChange, onOpenSearch, onOpenMessages, onOpenNotifs, onOpenProfile }) {
  return (
    <nav className="topnav">
      <div className="brand">
        <img src="assets/ezza-icon.svg" alt="" className="brand-img" />
        <span className="brand-name">ezza<em>CRM</em></span>
      </div>
      <div className="tabs">
        {MENU.map(m => (
          <div
            key={m.id}
            data-id={m.id}
            className={`tab ${active === m.id ? 'active' : ''}`}
            onClick={() => onChange(m.id)}
          >
            {m.label}
          </div>
        ))}
      </div>
      <div className="tn-actions">
        <div className="icon-btn" title="Buscar (⌘K)" onClick={onOpenSearch}>{ICN.search}</div>
        <div className="icon-btn" title="Mensagens" onClick={onOpenMessages}>{ICN.mail}<span className="badge-dot" /></div>
        <div className="icon-btn" title="Notificações" onClick={onOpenNotifs}>{ICN.bell}<span className="badge-dot" /></div>
        <img className="avatar" src="https://i.pravatar.cc/120?img=47" alt="Você" onClick={onOpenProfile} style={{cursor:'default'}} />
      </div>
    </nav>
  );
}

function PageHead({ title, subtitle, back, onBack, right }) {
  return (
    <div className="page-head">
      <div className="page-title">
        {back && <div className="back-btn" onClick={onBack}>{ICN.arrowLeft}</div>}
        <div>
          <h1>{title}</h1>
          {subtitle && <div className="page-sub">{subtitle}</div>}
        </div>
      </div>
      {right}
    </div>
  );
}

function CardActions({ children, count, createLabel = 'Novo item', onCreate, onPeriod, moreItems }) {
  // Se children for passado, mostra eles (compat com uso antigo).
  // Caso contrário, usa CardActionsBar com ações reais.
  if (children) {
    return <div className="card-actions">{children}</div>;
  }
  return <CardActionsBar count={count} createLabel={createLabel} onCreate={onCreate} onPeriod={onPeriod} moreItems={moreItems} />;
}

function AvatarStack({ ids, max = 6, more }) {
  const shown = ids.slice(0, max);
  const extra = more ?? Math.max(0, ids.length - max);
  return (
    <div className="av-stack">
      {shown.map((id, i) => (
        <img key={i} src={AVATAR_URLS[id % AVATAR_URLS.length]} alt="" />
      ))}
      {extra > 0 && <div className="av-more">+{extra}</div>}
    </div>
  );
}

Object.assign(window, { Sidebar, TopNav, PageHead, CardActions, AvatarStack });