/* ===== Estoque na base própria (12/11) ==============================
   Pedido dele: "qual é o estoque atual. Dessa forma ele pode saber se
   pode vender muito ou pouco, se pode comprar muito ou pouco."
   Então a tela não mostra só o número: ela responde as duas perguntas.

   Escopo desta primeira versão (decidido com ele):
   - só a BASE PRÓPRIA (Base Barretos). Terminal e usinas são de
     terceiros: o estoque de lá não é dele;
   - só a tela, sem avisar ainda na montagem do pedido.

   Dado de DEMONSTRAÇÃO. O estoque é editável para ele brincar com os
   números na frente do cliente. O ritmo de venda é fixo e está escrito
   na tela, para ninguém achar que veio de medição real.
   Na operação real: estoque vem da régua/telemetria do tanque e o
   ritmo vem do histórico de vendas. Troca-se ESTE bloco, mais nada.
   ================================================================== */

const ES_BASE = 'Base Barretos';
const ES_DIAS_ALVO = 10; /* cobertura que a compra sugerida busca */
const ES_CARRETA = 30000; /* L por carreta, para falar em carradas */

/* custoL = custo médio do que está parado, em R$/L. Valor SIMULADO:
   o sistema não sabe quanto ele pagou — quem diz é ele. A tela de
   Preço e pedidos deixa esse campo editável por isso. */
/* 13/11: so etanol. E este modelo (tanque na base) ainda esta errado —
   o estoque dele e produto parado em usina com prazo de retirada.
   A reescrita e o P2. Ver iunes-respostas-e-conflitos-13-11.md */
const initialEstoque = [
  {prod:'Etanol', cap:180000, litros:96000, vendaDia:16100, custoL:3.58},
];

/* Quantos dias o que está no tanque cobre no ritmo atual */
const esDias = (e) => e.vendaDia > 0 ? e.litros / e.vendaDia : 99;

/* O veredito das duas perguntas dele, numa regra só */
function esSituacao(e){
  const d = esDias(e);
  if(d < 3) return {k:'ruim', pill:'p-manutencao', tom:'bad',
    rot:'Comprar agora',
    venda:'Não prometa volume grande: o tanque não cobre 3 dias.'};
  if(d <= 7) return {k:'medio', pill:'p-carregando', tom:'warn',
    rot:'Programar compra',
    venda:'Dá para vender o normal, mas segure pedido grande até repor.'};
  return {k:'bom', pill:'p-base', tom:'good',
    rot:'Pode vender',
    venda:'Tem folga: pode fechar pedido grande sem susto.'};
}

/* Quanto comprar para voltar a ES_DIAS_ALVO dias, sem passar do tanque.
   Só sugere quando há urgência (abaixo de 7 dias): mandar comprar
   0,1 carreta de quem está folgado é ruído, não informação. */
function esCompra(e){
  if(esDias(e) > 7) return {litros:0, carretas:0, limitado:false};
  const falta = Math.max(0, e.vendaDia*ES_DIAS_ALVO - e.litros);
  const cabe = Math.max(0, e.cap - e.litros);
  const litros = Math.min(falta, cabe);
  return {litros, carretas: litros/ES_CARRETA, limitado: falta > cabe};
}

/* A outra pergunta dele, com número: quanto dá para vender agora sem
   derrubar a cobertura abaixo de ES_DIAS_RESERVA dias. */
const ES_DIAS_RESERVA = 3;
const esVendavel = (e) => Math.max(0, Math.round((e.litros - e.vendaDia*ES_DIAS_RESERVA)/1000)*1000);

/* "1,1 carretas" ajuda; "0,1 carretas" atrapalha */
const esCarradas = (c) => c.carretas >= 0.5 ? ` (${c.carretas.toFixed(1).replace('.',',')} carretas)` : '';

const esNum = (txt) => {
  const n = parseInt(String(txt).replace(/[^0-9]/g,''), 10);
  return isNaN(n) ? 0 : n;
};

function EstoqueCard({e, onLitros, readOnly}){
  const d = esDias(e), s = esSituacao(e), c = esCompra(e);
  const pct = Math.round(e.litros / e.cap * 100);
  return <article className="panel es-card">
    <div className="es-top">
      <b>{e.prod}</b>
      <span className={`pill ${s.pill}`}>{s.rot}</span>
    </div>

    <div className="meter es-bar">
      <i className={s.k==='bom'?'ok':s.k==='medio'?'warn':''}
         style={{width:`${clamp(pct)}%`}}/>
    </div>
    <p className="es-nivel">{fmt(e.litros)} L de {fmt(e.cap)} L <em>{pct}% do tanque</em></p>

    <div className="km-facts es-facts">
      <p><span>Cobertura</span><b>{d>=99?'—':d.toFixed(1).replace('.',',')} dias</b></p>
      <p><span>Ritmo de venda</span><b>{fmt(e.vendaDia)} L/dia</b></p>
    </div>

    <div className="reasons es-reasons">
      <span className={`rs ${s.tom}`}>{s.venda}</span>
      {esVendavel(e)>0
        ? <span className="rs neutral">Dá para fechar até <b>{fmt(esVendavel(e))} L</b> agora, guardando {ES_DIAS_RESERVA} dias de reserva.</span>
        : <span className="rs bad">Não dá para fechar pedido novo sem furar a reserva de {ES_DIAS_RESERVA} dias.</span>}
      {c.litros>0
        ? <span className="rs neutral">Comprar <b>{fmt(c.litros)} L</b>{esCarradas(c)} para voltar a {ES_DIAS_ALVO} dias{c.limitado?' — é o que cabe no tanque':''}.</span>
        : <span className="rs good">Sem urgência de compra.</span>}
    </div>

    <label className="field es-edit">Estoque agora (L)
      <input value={fmt(e.litros)} inputMode="numeric" disabled={readOnly}
             onChange={ev=>onLitros(Math.min(esNum(ev.target.value), e.cap))}
             aria-label={`Estoque de ${e.prod} em litros`}/>
    </label>
  </article>;
}

function Estoque({notify, readOnly}){
  const [itens, setItens] = useState(seed(initialEstoque));
  const setLitros = (prod, litros) => setItens(cur => cur.map(x => x.prod===prod ? {...x, litros} : x));

  const totalL = itens.reduce((s,x)=>s+x.litros,0);
  const totalCap = itens.reduce((s,x)=>s+x.cap,0);
  const critico = itens.slice().sort((a,b)=>esDias(a)-esDias(b))[0];
  const comprarL = itens.reduce((s,x)=>s+esCompra(x).litros,0);
  const nAtencao = itens.filter(x=>esSituacao(x).k!=='bom').length;

  const alterar = (prod, litros) => {
    if(readOnly) return notify('Modo visitante: você pode olhar tudo, mas não alterar.');
    setLitros(prod, litros);
  };

  /* Visualizacao real: comeca sem nada. Sem esta saida a tela quebrava,
     porque o "produto mais apertado" nao existe numa lista vazia. */
  if(!itens.length) return <div className="content es-content">
    <div className="page-heading"><div>
      <p>O QUE TEM NO TANQUE</p><h1>Estoque</h1>
      <span>Nada cadastrado ainda nesta visualização.</span>
    </div></div>
    <section className="panel es-vazio">
      <p><b>Nenhum produto no estoque.</b></p>
      <p>O estoque aparece aqui quando o produto comprado for lançado. Enquanto isso, a tela fica assim para o cliente.</p>
    </section>
  </div>;

  return <div className="content es-content">
    <div className="page-heading">
      <div>
        <p>O QUE TEM NO TANQUE</p>
        <h1>Estoque</h1>
        <span>{ES_BASE} · {fmt(totalL)} L de {fmt(totalCap)} L · {nAtencao?`${nAtencao} ${nAtencao===1?'produto pede':'produtos pedem'} atenção`:'nenhum produto em alerta'}</span>
      </div>
    </div>

    <section className="kpis es-kpis">
      <article className="hl">
        <span>Mais apertado</span>
        <strong>{critico.prod}</strong>
        <small>cobre {esDias(critico).toFixed(1).replace('.',',')} dias</small>
      </article>
      <article>
        <span>Total no tanque</span>
        <strong>{fmt(totalL)} L</strong>
        <small>{Math.round(totalL/totalCap*100)}% da capacidade</small>
      </article>
      <article>
        <span>Comprar da distribuidora</span>
        <strong>{fmt(comprarL)} L</strong>
        <small>{comprarL>0?`${(comprarL/ES_CARRETA).toFixed(1).replace('.',',')} carretas somando os produtos`:'nada urgente agora'}</small>
      </article>
      <article>
        <span>Produtos em alerta</span>
        <strong>{nAtencao} de {itens.length}</strong>
        <small>abaixo de 7 dias de cobertura</small>
      </article>
    </section>

    <div className="es-grid">
      {itens.map(e => <EstoqueCard key={e.prod} e={e}
        readOnly={readOnly}
        onLitros={(l)=>alterar(e.prod, l)}/>)}
    </div>

    <p className="calc-note">
      Estoque da {ES_BASE} apenas — terminal e usinas são de terceiros, o produto de lá não é da Iunes.
      Cobertura = litros no tanque ÷ ritmo de venda. A compra sugerida busca {ES_DIAS_ALVO} dias e respeita o espaço que sobra no tanque.
      Números de demonstração: o estoque é editável aqui na tela e o ritmo de venda é fixo.
      Na operação real o estoque viria da medição do tanque e o ritmo, do histórico de vendas.
    </p>
  </div>;
}

/* Entra no menu logo depois da Frota: é informação da casa, não do cliente */
(function(){
  const i = navItems.findIndex(x=>x.id==='frota');
  navItems.splice(i<0?navItems.length:i+1, 0,
    {id:'estoque', label:'Estoque', short:'Estoque', icon:'▧', tag:'novo'});
})();