/* ===== Vendas (13/11) ==============================================
   Pedido dele: "uma tela de vendas, alimentada pelas vendas dos
   vendedores (na tela do vendedor ele vai lançar essa venda), e o
   cliente recebe uma notificação toda vez que uma venda for feita,
   com todas as informações que o vendedor lançou".

   14/11: ele decidiu que VENDA E PEDIDO SÃO A MESMA COISA. Então não
   existe tela de "Lançar venda": o vendedor usa o "Novo pedido" que já
   tinha (js/seller.jsx), e enviar o pedido também registra a venda.
   Aqui fica só a tela do DONO, com tudo que os vendedores enviaram.
   Cada venda vira um aviso no sino do topo, com os campos exatamente
   como o vendedor preencheu — nada é reescrito.

   O produto é só etanol (decisão de 13/11), então não há seletor de
   produto: seria uma pergunta com uma resposta só.
   ================================================================== */

const vdHora = (ts) => {
  const d = new Date(ts);
  const dd = (n)=>(n<10?'0':'')+n;
  return `${dd(d.getDate())}/${dd(d.getMonth()+1)} ${dd(d.getHours())}:${dd(d.getMinutes())}`;
};
const vdTotal = (v) => (v.litros||0) * (v.precoL||0);

/* ---- Tela do dono: tudo que foi lançado ------------------------- */
const VD_FAIXA = {
  cheio:     {rot:'Preço cheio', pill:'p-base'},
  negociado: {rot:'Negociado',   pill:'p-rota'},
  excecao:   {rot:'Exceção',     pill:'p-manutencao'},
};

function Vendas({vendas, sellers, go, decidir}){
  const [quem,setQuem] = useState('Todos');
  const pendentes = vendas.filter(v=>v.aprovacao==='pendente');
  const lista = vendas.filter(v=>v.aprovacao!=='pendente'&&v.aprovacao!=='recusado')
                      .filter(v=>quem==='Todos'||v.vendedorId===quem);
  const litros = lista.reduce((s,v)=>s+(v.litros||0),0);
  const receita = lista.reduce((s,v)=>s+vdTotal(v),0);
  const medio = litros? receita/litros : 0;
  const entregues = lista.filter(v=>v.modo!=='retira').length;

  return <div className="content vd-content">
    <div className="page-heading"><div>
      <p>COMERCIAL</p><h1>Vendas</h1>
      <span>O que os vendedores lançaram, na ordem em que chegou.</span>
    </div></div>

    {pendentes.length>0 && <section className="panel vd-aut">
      <div className="panel-title"><div><h2>Precisam da sua autorização</h2>
        <p>Só aparece aqui o que ficou abaixo da faixa que o sistema já libera sozinho.</p></div></div>
      {pendentes.map(v=><article key={v.id} className="vd-pend">
        <div className="vd-it-topo"><b>{v.cliente}</b>
          <span className="pill p-manutencao">{brl3(v.precoL)}/L</span>
          <em>{vdHora(v.ts)}</em></div>
        <p className="vd-it-meta">{v.cidade} · vendedor(a) {v.vendedor} · {fmt(v.litros)} L · {v.modo==='retira'?'o cliente retira':'nós entregamos'} · {v.quando}</p>
        <p className="vd-pend-conta">
          Cheio <b>{brl3(v.cheio)}</b> · limite de hoje <b>{brl3(v.limite)}</b> ·
          ele fechou <b>{brl3(v.precoL)}</b> — <b>{brl(Math.round((v.cheio-v.precoL)*v.litros))}</b> abaixo do cheio neste pedido.
        </p>
        {v.obs && <p className="vd-it-obs">"{v.obs}"</p>}
        <div className="vd-pend-acoes">
          <button className="primary" onClick={()=>decidir&&decidir(v.id,'liberado')}>Liberar</button>
          <button className="secondary" onClick={()=>decidir&&decidir(v.id,'recusado')}>Recusar</button>
        </div>
      </article>)}
    </section>}

    {!vendas.length
      ? <section className="panel vd-vazio">
          <p><b>Nenhuma venda lançada ainda.</b></p>
          <p>Cada pedido que um vendedor enviar aparece aqui, com o preço que ele fechou.
            Para ver como fica, troque o perfil no topo para um vendedor e envie um pedido.</p>
        </section>
      : <>
        <section className="panel vd-topo">
          <div className="vd-kpis">
            <div><span>Vendas</span><b>{lista.length}</b></div>
            <div><span>Litros</span><b>{fmt(litros)} L</b></div>
            <div><span>Receita</span><b>{brl(Math.round(receita))}</b></div>
            <div><span>Preço médio</span><b>{brl3(medio)}/L</b></div>
            <div><span>Para entregar</span><b>{entregues} de {lista.length}</b></div>
          </div>
          <label className="seller-filter vd-filtro">Vendedor
            <select id="vd-quem" value={quem} onChange={e=>setQuem(e.target.value)}>
              <option value="Todos">Todos</option>
              {sellers.map(s=><option key={s.id} value={s.id}>{s.name}</option>)}
            </select></label>
        </section>

        <section className="panel vd-lista">
          {lista.map(v=><article key={v.id} className="vd-item">
            <div className="vd-it-topo">
              <b>{v.cliente}</b>
              <span className={`pill ${v.modo==='retira'?'p-rota':'p-base'}`}>{v.modo==='retira'?'O cliente retira':'Nós entregamos'}</span>
              {v.faixa&&VD_FAIXA[v.faixa]&&<span className={`pill ${VD_FAIXA[v.faixa].pill}`}>{VD_FAIXA[v.faixa].rot}</span>}
              <em>{vdHora(v.ts)}</em>
            </div>
            <p className="vd-it-meta">{v.cidade} · vendedor(a) {v.vendedor} · {v.quando}{v.pedido?` · pedido ${v.pedido}`:''}</p>
            <div className="vd-it-num">
              <span>{fmt(v.litros)} L</span><span>{brl3(v.precoL)}/L</span>
              <b>{brl(Math.round(vdTotal(v)))}</b>
              {v.cheio!=null&&v.precoL<v.cheio-0.0005&&
                <em className="vd-desc">{brl3(v.cheio-v.precoL)}/L abaixo do cheio</em>}
            </div>
            {v.obs && <p className="vd-it-obs">"{v.obs}"</p>}
          </article>)}
        </section>
      </>}

    <p className="calc-note">Cada linha é o que o vendedor digitou, sem edição. O dono recebe um aviso no sino do topo a cada venda.
      O que o vendedor fecha dentro da faixa do dia entra sozinho — só a exceção pede autorização aqui. As regras da faixa são hipótese, para rever com o Paulo.</p>
  </div>;
}

/* Vendas logo depois de Preço e pedidos: é a consequência da etapa 2. */
(function(){
  const i = navItems.findIndex(x=>x.id==='precopedido');
  navItems.splice(i<0?1:i+1, 0, {id:'vendas', label:'Vendas', short:'Vendas', icon:'◒'});
})();