/* global React */
const { IcoCart, IcoClock, IcoStack, IcoSliders, IcoMap, IcoPlus, IcoLogout } = window.Icons;

function Sidebar({ activeView, onView, produtos, activeProduto, onSelectProduto, onAddProduto, onRemoveProduto,
                   user, onLogout, histSimsCount, histProdsCount }) {
  // Inicial do email do usuário para avatar
  const avatarText = user && user.email
    ? user.email.substring(0, 2).toUpperCase()
    : '—';

  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-mark">af</div>
        <div>
          <div className="brand-name">Calculadora</div>
          <div className="brand-sub">Lucro Real</div>
        </div>
      </div>

      <div
        className={`nav-item ${activeView === 'venda' ? 'active' : ''}`}
        onClick={() => onView('venda')}>
        <IcoCart />
        <span>Venda</span>
      </div>

      <div className="nav-section">Produtos</div>
      {produtos.map(p => (
        <div
          key={p.id}
          className={`nav-product-row ${activeView === 'produto' && activeProduto === p.id ? 'active' : ''}`}
          onClick={() => { onView('produto'); onSelectProduto(p.id); }}>
          <span className="dot" />
          <span className="name">{p.nome}</span>
          {produtos.length > 1 && (
            <span
              className="close"
              onClick={(e) => { e.stopPropagation(); onRemoveProduto(p.id); }}
              title="Remover">
              ×
            </span>
          )}
        </div>
      ))}
      <button className="nav-add" onClick={onAddProduto}>
        <IcoPlus size={12} /> Novo produto
      </button>

      <div className="nav-section">Dados</div>
      <div
        className={`nav-item ${activeView === 'hist-sim' ? 'active' : ''}`}
        onClick={() => onView('hist-sim')}>
        <IcoClock />
        <span>Simulações</span>
        {histSimsCount !== null && histSimsCount !== undefined && (
          <span className="badge">{histSimsCount}</span>
        )}
      </div>
      <div
        className={`nav-item ${activeView === 'hist-prod' ? 'active' : ''}`}
        onClick={() => onView('hist-prod')}>
        <IcoStack />
        <span>Versões de produtos</span>
        {histProdsCount !== null && histProdsCount !== undefined && (
          <span className="badge">{histProdsCount}</span>
        )}
      </div>

      <div className="nav-section">Configuração</div>
      <div
        className={`nav-item ${activeView === 'params' ? 'active' : ''}`}
        onClick={() => onView('params')}>
        <IcoSliders />
        <span>Parâmetros</span>
      </div>
      <div
        className={`nav-item ${activeView === 'ufs' ? 'active' : ''}`}
        onClick={() => onView('ufs')}>
        <IcoMap />
        <span>Tabela de UFs</span>
      </div>

      {user && (
        <div className="sidebar-footer">
          <div className="avatar">{avatarText}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div
              style={{ color: 'var(--text-2)', fontSize: 11.5, fontWeight: 500,
                       overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
              title={user.email}>
              {user.email}
            </div>
            <div style={{ fontSize: 10.5, color: 'var(--positive)' }}>● Online</div>
          </div>
          <button
            onClick={onLogout}
            title="Sair"
            style={{ background: 'transparent', border: 'none', color: 'var(--text-3)',
                     cursor: 'pointer', padding: 4, borderRadius: 4,
                     display: 'flex', alignItems: 'center', justifyContent: 'center' }}
            onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--negative)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--text-3)'; }}>
            {IcoLogout ? <IcoLogout size={14} /> : '⏻'}
          </button>
        </div>
      )}
    </aside>
  );
}
window.Sidebar = Sidebar;