/* global React */
const { brl, pct } = window;

function KpiRail({ calc, venda, produto }) {
  const c = calc;
  const lucroLiq = c.dre.lucroLiq;
  const lucroPos = lucroLiq >= 0;
  const lucroUn = venda.qtd > 0 ? lucroLiq / venda.qtd : 0;
  const cmvUn = c.cmvUn;
  const margemLiq = c.kpi.margemLiq;
  const margemBruta = c.kpi.margemBruta;
  const cargaTrib = c.kpi.cargaTrib;
  const markupTxt = c.dre.cmvTotal > 0 && c.dre.lucroBruto >= 0
    ? pct(c.kpi.markup)
    : (c.dre.cmvTotal > 0 ? 'prejuízo' : '—');

  // Distribuição: cmv, tributos, comissão, fixos, lucro
  const total = c.dre.valorNota || 1;
  const cmvPct = (c.dre.cmvTotal / total) * 100;
  const tribPct = (c.kpi.tributos / total) * 100;
  const comPct = (c.dre.comissao / total) * 100;
  const fixosPct = (c.dre.custosFixos / total) * 100;
  const lucroPct = Math.max(0, (lucroLiq / total) * 100);

  return (
    <aside className="rail">
      <div className="rail-section-label">Resultado da venda</div>

      <div className="kpi-hero">
        <div className="label">Lucro líquido</div>
        <div className={`value ${lucroPos ? '' : 'neg'}`}>{brl(lucroLiq)}</div>
        <div className="sub">
          <span className={lucroPos ? 'pos' : 'neg'}>{brl(lucroUn, 4)} / un</span>
          {' · '}
          <span>{pct(margemLiq)} margem</span>
        </div>
      </div>

      <div className="kpi-mini">
        <div className="kpi-mini-card">
          <div className="label">Margem bruta</div>
          <div className="value">{pct(margemBruta)}</div>
          <div className="sub">após impostos s/ venda</div>
        </div>
        <div className="kpi-mini-card">
          <div className="label">Carga trib.</div>
          <div className="value neg">{pct(cargaTrib)}</div>
          <div className="sub">{brl(c.kpi.tributos)}</div>
        </div>
        <div className="kpi-mini-card">
          <div className="label">CMV / un</div>
          <div className={`value ${cmvUn > 0 ? '' : 'neg'}`}>{brl(cmvUn, 4)}</div>
          <div className="sub">markup {markupTxt}</div>
        </div>
        <div className="kpi-mini-card">
          <div className="label">Preço / un</div>
          <div className="value info">{brl(c.precoUn, 4)}</div>
          <div className="sub">{venda.qtd} un</div>
        </div>
      </div>

      <div className="dist-bar">
        <div className="label">
          <span>Distribuição da nota</span>
          <span style={{ fontFamily: 'var(--font-mono)' }}>{brl(total)}</span>
        </div>
        <div className="track">
          <div className="seg" style={{ width: `${cmvPct}%`, background: '#7a808c' }} title={`CMV ${pct(cmvPct/100)}`} />
          <div className="seg" style={{ width: `${tribPct}%`, background: 'var(--negative)' }} title={`Tributos ${pct(tribPct/100)}`} />
          <div className="seg" style={{ width: `${comPct}%`, background: 'var(--info)' }} title={`Comissão ${pct(comPct/100)}`} />
          <div className="seg" style={{ width: `${fixosPct}%`, background: '#5a5e6a' }} title={`Fixos ${pct(fixosPct/100)}`} />
          <div className="seg" style={{ width: `${lucroPct}%`, background: 'var(--positive)' }} title={`Lucro ${pct(lucroPct/100)}`} />
        </div>
        <div className="legend">
          <div className="row"><span className="swatch" style={{ background: '#7a808c' }} /> CMV {pct(cmvPct/100)}</div>
          <div className="row"><span className="swatch" style={{ background: 'var(--negative)' }} /> Trib. {pct(tribPct/100)}</div>
          {comPct > 0 && <div className="row"><span className="swatch" style={{ background: 'var(--info)' }} /> Mkt. {pct(comPct/100)}</div>}
          <div className="row"><span className="swatch" style={{ background: '#5a5e6a' }} /> Fixos {pct(fixosPct/100)}</div>
          <div className="row"><span className="swatch" style={{ background: 'var(--positive)' }} /> Lucro {pct(lucroPct/100)}</div>
        </div>
      </div>

      <div className="rail-section-label" style={{ marginTop: 6 }}>Operação</div>
      <div className="kpi-mini">
        <div className="kpi-mini-card">
          <div className="label">UF · Tipo</div>
          <div className="value" style={{ fontSize: 14 }}>{venda.uf} · {c.tipo === 'Interna' ? 'INT' : 'INTER'}</div>
          <div className="sub">ICMS {pct(c.aliqICMS)}</div>
        </div>
        <div className="kpi-mini-card">
          <div className="label">Canal</div>
          <div className="value" style={{ fontSize: 14 }}>{venda.mkt === 'SIM' ? 'Marketplace' : 'Direto'}</div>
          <div className="sub">{venda.mkt === 'SIM' ? `${venda.comissao}% comissão` : 'sem comissão'}</div>
        </div>
        {c.difalAplicavel && (
          <div className="kpi-mini-card" style={{ gridColumn: 'span 2' }}>
            <div className="label">DIFAL</div>
            <div className="value neg" style={{ fontSize: 14 }}>{brl(c.dre.difal)}</div>
            <div className="sub">base dupla LC 190/22</div>
          </div>
        )}
      </div>
    </aside>
  );
}
window.KpiRail = KpiRail;