/* ===== Perfil VENDEDOR: painel, carteira e pedidos (só o que cabe a ele) ===== */
/* Regra aplicada: o vendedor vê litros, clientes dele e status de entrega.
   Não vê faturamento, margem, custo de entrega, resultado, frota, outros vendedores nem cadastros. */

const initialDeliveries=[
  {id:'#PED-2828',client:'Rede Barretos',city:'Barretos',volume:45000,product:'Diesel S10',window:'Ontem, 15:00',stage:'entregue',trip:'VG-1079',eta:'entregue 15:42'},
  {id:'#PED-2830',client:'Auto Posto Guaíra',city:'Guaíra',volume:30000,product:'Gasolina C',window:'Hoje, 11:00',stage:'entregue',trip:'VG-1080',eta:'entregue 11:08'},
  {id:'#PED-2833',client:'Rede Terra Roxa',city:'Terra Roxa',volume:45000,product:'Diesel S10',window:'Hoje, 13:00',stage:'rota',trip:'VG-1085',eta:'previsão 12:25'},
  {id:'#PED-2835',client:'Auto Posto Irmãos Colina',city:'Colina',volume:20000,product:'Diesel S500',window:'Hoje, 17:00',stage:'programado',trip:'VG-1087',eta:'saída 15:00'},
  {id:'#PED-2836',client:'Posto Via Rio',city:'Severínia',volume:15000,product:'Etanol',window:'Ontem, 16:00',stage:'entregue',trip:'VG-1078',eta:'entregue 16:20'},
  {id:'#PED-2838',client:'Posto Avenida',city:'Bebedouro',volume:30000,product:'Diesel S10',window:'Hoje, 12:30',stage:'rota',trip:'VG-1084',eta:'previsão 12:12'},
];

const perfis=[
  {id:'P-DONO',label:'Dono e Logística',short:'Dono · Logística',name:'Dono',iniciais:'DL',role:'dono'},
  {id:'V-01',label:'Juliana Prado · Vendedora',short:'Vendedora',name:'Juliana Prado',iniciais:'JP',role:'vendedor'},
  {id:'V-02',label:'Marcelo Tavares · Vendedor',short:'Vendedor',name:'Marcelo Tavares',iniciais:'MT',role:'vendedor'},
  {id:'V-03',label:'Ricardo Souza · Vendedor',short:'Vendedor',name:'Ricardo Souza',iniciais:'RS',role:'vendedor'},
  {id:'VISIT',label:'Visitante · somente leitura',short:'Somente leitura',name:'Visitante',iniciais:'VI',role:'visitante'},
];

const sellerNav=[
  { id:'v-painel', label:'Meu painel', short:'Painel', icon:'▦' },
  { id:'v-clientes', label:'Meus clientes', short:'Clientes', icon:'◉' },
  { id:'v-pedidos', label:'Meus pedidos', short:'Pedidos', icon:'◆' },
  { id:'mercado', label:'Mercado e cotações', short:'Mercado', icon:'◭', tag:'ao vivo' },
];

const PRODUTOS=['Diesel S10','Diesel S500','Gasolina C','Etanol'];
const statusPedido={aguardando:'Aguardando programação',programado:'Programado',rota:'Em rota',entregue:'Entregue'};
const statusTone={aguardando:'st-wait',programado:'st-plan',rota:'st-road',entregue:'st-done'};

/* Ritmo de compra: fictício, deterministico a partir do cadastro do cliente */
const hashId=(s)=>{let h=7;for(const c of String(s))h=(h*31+c.charCodeAt(0))%997;return h;};
const intervaloCompra=(c)=>Math.max(2,Math.round(30/Math.max(1,c.compras||1)));
const diasSemComprar=(c)=>{const i=intervaloCompra(c);return hashId(c.id)%(i*2+1);};
const atrasoRecompra=(c)=>diasSemComprar(c)-intervaloCompra(c); // >0 = passou do ritmo

function agendaCliente(c){
  const d=atrasoRecompra(c);
  if(d>2) return {tone:'bad',text:`Passou ${d} dias do ritmo de compra`};
  if(d>=0) return {tone:'warn',text:'Está na hora de ligar'};
  return {tone:'ok',text:`Próxima compra em ~${-d} ${-d===1?'dia':'dias'}`};
}

function PedidoLinha({p}) {
  return <tr><td className="order-id">{p.id}</td><td><b className="strong">{p.client}</b><small className="cell-sub">{p.city}</small></td><td>{p.product}</td><td className="num">{fmt(p.volume)} L</td><td>{p.window}</td><td><span className={`pstat ${statusTone[p.stage]}`}>{statusPedido[p.stage]}</span>{p.info&&<small className="cell-sub">{p.info}</small>}</td></tr>;
}

/* Junta o que o vendedor precisa ver: fila da logística + o que já foi programado/entregue */
function pedidosDoVendedor(seller,clients,orders,deliveries){
  const meus=clients.filter(c=>c.sellerId===seller.id).map(c=>c.name);
  const fila=orders.filter(o=>meus.includes(o.client)).map(o=>({...o,stage:'aguardando',info:''}));
  const prog=deliveries.filter(d=>meus.includes(d.client)).map(d=>({...d,info:d.trip?`Viagem ${d.trip}${d.eta?` · ${d.eta}`:''}`:''}));
  return [...fila,...prog];
}

function SellerHome({seller,clients,orders,deliveries,go,live}) {
  const meus=clients.filter(c=>c.sellerId===seller.id);
  const volume=meus.reduce((s,c)=>s+c.vol,0);
  const pct=Math.min(100,Math.round(volume/seller.meta*100));
  const peds=pedidosDoVendedor(seller,clients,orders,deliveries);
  const abertos=peds.filter(p=>p.stage!=='entregue');
  const ligar=meus.map(c=>({c,a:agendaCliente(c)})).filter(x=>x.a.tone!=='ok').sort((a,b)=>atrasoRecompra(b.c)-atrasoRecompra(a.c));
  const cobranca=meus.filter(c=>c.atraso>0).sort((a,b)=>b.atraso-a.atraso);
  return <div className="content seller-content">
    <div className="page-heading"><div><p>PERFIL VENDEDOR</p><h1>Olá, {seller.name.split(' ')[0]}</h1><span>{seller.region}</span></div><div className="heading-actions"><button className="primary" onClick={()=>go('v-pedidos')}>Novo pedido</button></div></div>
    <MarketStrip go={go} live={live}/>
    <section className="perm-banner"><b>O que este perfil vê:</b> apenas a carteira de {seller.name}, em litros — clientes, pedidos e status de entrega. <b>Não vê</b> faturamento, margem, custo de entrega, resultado por cliente, frota, rastreamento nem os clientes dos outros vendedores.</section>
    <section className="log-metrics"><article><span>Volume do mês</span><strong>{fmt(volume)} L</strong><small>carteira de {meus.length} clientes</small></article><article><span>Meta do mês</span><strong>{pct}%</strong><small>{fmt(seller.meta)} L</small></article><article><span>Pedidos em aberto</span><strong className={abertos.length?'warn-num':''}>{abertos.length}</strong><small>aguardando ou em entrega</small></article><article><span>Clientes para ligar</span><strong className={ligar.length?'warn-num':''}>{ligar.length}</strong><small>passaram do ritmo de compra</small></article></section>
    <section className="panel meta-panel"><div className="panel-title"><div><h2>Meta do mês</h2><p>{fmt(volume)} L de {fmt(seller.meta)} L</p></div><b className={pct>=100?'ok-num':''}>{pct}%</b></div><div className="meta-bar"><i style={{width:`${pct}%`}}/><span style={{left:'100%'}}/></div></section>
    <div className="rep-grid">
      <section className="panel"><div className="panel-title"><div><h2>Clientes para atender</h2><p>Quem passou do ritmo normal de compra</p></div></div><ul className="todo-list">{ligar.slice(0,6).map(({c,a})=><li key={c.id} className={a.tone}><div><b>{c.name}</b><small>{c.city} · compra ~{fmt(c.vol)} L/mês · última compra há {diasSemComprar(c)} dias</small></div><button className="secondary" onClick={()=>go('v-pedidos',c.id)}>Fazer pedido</button></li>)}{!ligar.length&&<li className="ok"><div><b>Carteira em dia</b><small>Nenhum cliente fora do ritmo de compra</small></div></li>}</ul></section>
      <section className="panel"><div className="panel-title"><div><h2>Atenção no pagamento</h2><p>Confirme antes de fechar um novo pedido</p></div></div><ul className="todo-list">{cobranca.slice(0,6).map(c=><li key={c.id} className={c.atraso>10?'bad':'warn'}><div><b>{c.name}</b><small>{c.atraso} {c.atraso===1?'dia':'dias'} de atraso · {c.city}</small></div></li>)}{!cobranca.length&&<li className="ok"><div><b>Todos em dia</b><small>Nenhum cliente com atraso</small></div></li>}</ul></section>
    </div>
    <section className="panel orders"><div className="panel-title"><div><h2>Meus pedidos recentes</h2><p>{peds.length} pedidos na semana</p></div><button className="link" onClick={()=>go('v-pedidos')}>Ver todos →</button></div><div className="table-wrap"><table><thead><tr><th>Pedido</th><th>Cliente</th><th>Produto</th><th>Volume</th><th>Prazo</th><th>Status</th></tr></thead><tbody>{peds.slice(0,5).map(p=><PedidoLinha key={p.id} p={p}/>)}{!peds.length&&<tr><td colSpan="6">Nenhum pedido ainda.</td></tr>}</tbody></table></div></section>
  </div>;
}

function SellerClients({seller,clients,orders,deliveries,go}) {
  const meus=clients.filter(c=>c.sellerId===seller.id);
  const [sel,setSel]=useState(meus[0]?meus[0].id:'');
  const cur=meus.find(c=>c.id===sel)||meus[0];
  const peds=cur?pedidosDoVendedor(seller,clients,orders,deliveries).filter(p=>p.client===cur.name):[];
  return <div className="content seller-content">
    <div className="page-heading"><div><p>PERFIL VENDEDOR</p><h1>Meus clientes</h1><span>{meus.length} clientes na sua carteira · volumes em litros</span></div></div>
    <div className="clients-grid">
      <section className="panel"><div className="panel-title"><div><h2>Carteira</h2><p>Clique num cliente para ver a ficha</p></div></div><div className="table-wrap"><table><thead><tr><th>Cliente</th><th>Cidade</th><th>Postos</th><th>Volume/mês</th><th>Última compra</th><th>Situação</th></tr></thead><tbody>{meus.map(c=>{const a=agendaCliente(c);return <tr key={c.id} className={cur&&cur.id===c.id?'row-on':''} onClick={()=>setSel(c.id)}><td><b className="strong">{c.name}</b></td><td>{c.city}</td><td>{c.postos}</td><td className="num">{fmt(c.vol)} L</td><td>há {diasSemComprar(c)} {diasSemComprar(c)===1?'dia':'dias'}</td><td><span className={`pstat sig-${a.tone}`}>{a.text}</span></td></tr>;})}{!meus.length&&<tr><td colSpan="6">Nenhum cliente nesta carteira.</td></tr>}</tbody></table></div></section>
      <section className="panel detail-panel">{cur&&<>
        <div className="panel-title"><div><h2>{cur.name}</h2><p>{cur.city} · {cur.postos} {cur.postos===1?'posto':'postos'}</p></div><button className="primary" onClick={()=>go('v-pedidos',cur.id)}>Novo pedido</button></div>
        <div className="detail-body">
          <div className="tk-grid"><p><span>Volume por mês</span><b>{fmt(cur.vol)} L</b></p><p><span>Compras por mês</span><b>{cur.compras}</b></p><p><span>Última compra</span><b>há {diasSemComprar(cur)} dias</b></p><p><span>Pagamento</span><b className={cur.atraso>0?'bad-num':'ok-num'}>{cur.atraso===0?'Em dia':`${cur.atraso} ${cur.atraso===1?'dia':'dias'} de atraso`}</b></p></div>
          <p className="tk-status">Carga usual: {fmt(cur.carga)} L por entrega{cur.note?` · ${cur.note}`:''}</p>
          <h3 className="mini-title">Pedidos deste cliente</h3>
          <ul className="mini-list">{peds.map(p=><li key={p.id}><b>{p.id}</b><span>{p.product} · {fmt(p.volume)} L</span><em className={statusTone[p.stage]}>{statusPedido[p.stage]}</em></li>)}{!peds.length&&<li className="empty">Nenhum pedido registrado nesta semana.</li>}</ul>
        </div></>}
      </section>
    </div>
  </div>;
}

function SellerOrders({seller,clients,orders,setOrders,deliveries,notify,preset}) {
  const meus=clients.filter(c=>c.sellerId===seller.id);
  const [open,setOpen]=useState(!!preset);
  const [form,setForm]=useState({clientId:preset||(meus[0]?meus[0].id:''),product:PRODUTOS[0],volume:'30.000',day:'Hoje',hour:'16:00',priority:'Normal',note:''});
  useEffect(()=>{ if(preset){ setForm(f=>({...f,clientId:preset})); setOpen(true); } },[preset]);
  const peds=pedidosDoVendedor(seller,clients,orders,deliveries);
  const set=(k,v)=>setForm(f=>({...f,[k]:v}));
  const enviar=()=>{
    const c=meus.find(x=>x.id===form.clientId); const vol=parseInt(String(form.volume).replace(/\D/g,''),10);
    if(!c) return notify('Escolha um cliente.');
    if(!vol||vol<1000) return notify('Volume mínimo de 1.000 L.');
    if(vol>60000) return notify('Volume acima de 60.000 L: divida em mais de um pedido.');
    const id='#PED-'+(2850+orders.length);
    setOrders(cur=>[...cur,{id,client:c.name,city:c.city,volume:vol,window:`${form.day}, ${form.hour}`,deadlineH:form.day==='Hoje'?4:20,product:form.product,priority:form.priority,note:form.note,seller:seller.name}]);
    notify(`${id} enviado para a programação da logística.`);
    setOpen(false);
  };
  return <div className="content seller-content">
    <div className="page-heading"><div><p>PERFIL VENDEDOR</p><h1>Meus pedidos</h1><span>O pedido enviado entra na fila de programação e volta com o status da entrega.</span></div><div className="heading-actions"><button className="primary" onClick={()=>setOpen(o=>!o)}>{open?'Fechar':'Novo pedido'}</button></div></div>
    {open&&<section className="panel form-panel"><div className="panel-title"><div><h2>Novo pedido</h2><p>Sem preço nesta versão: a negociação comercial ainda precisa ser definida</p></div></div>
      <div className="form-grid">
        <label>Cliente<select id="np-cli" value={form.clientId} onChange={e=>set('clientId',e.target.value)}>{meus.map(c=><option key={c.id} value={c.id}>{c.name} · {c.city}</option>)}</select></label>
        <label>Produto<select id="np-prod" value={form.product} onChange={e=>set('product',e.target.value)}>{PRODUTOS.map(p=><option key={p}>{p}</option>)}</select></label>
        <label>Volume (L)<input id="np-vol" value={form.volume} onChange={e=>set('volume',e.target.value)} inputMode="numeric"/></label>
        <label>Dia<select id="np-dia" value={form.day} onChange={e=>set('day',e.target.value)}><option>Hoje</option><option>Amanhã</option></select></label>
        <label>Horário limite<input id="np-hora" value={form.hour} onChange={e=>set('hour',e.target.value)}/></label>
        <label>Prioridade<select id="np-prio" value={form.priority} onChange={e=>set('priority',e.target.value)}><option>Normal</option><option>Alta</option></select></label>
        <label className="wide">Observação para a logística<input id="np-obs" value={form.note} onChange={e=>set('note',e.target.value)} placeholder="Ex.: descarga só até as 17h"/></label>
      </div>
      <div className="form-actions"><button className="secondary" onClick={()=>setOpen(false)}>Cancelar</button><button className="primary" onClick={enviar}>Enviar para programação</button></div>
    </section>}
    <section className="panel orders"><div className="panel-title"><div><h2>Pedidos da semana</h2><p>{peds.filter(p=>p.stage!=='entregue').length} em aberto · {peds.filter(p=>p.stage==='entregue').length} entregues</p></div></div><div className="table-wrap"><table><thead><tr><th>Pedido</th><th>Cliente</th><th>Produto</th><th>Volume</th><th>Prazo</th><th>Status</th></tr></thead><tbody>{peds.map(p=><PedidoLinha key={p.id} p={p}/>)}{!peds.length&&<tr><td colSpan="6">Nenhum pedido ainda.</td></tr>}</tbody></table></div></section>
    <p className="calc-note">O vendedor acompanha o status, mas quem programa a viagem é a logística. Ritmo de compra e status são dados fictícios de demonstração.</p>
  </div>;
}