/* ===== Estrutura, Dashboard e navegação ===== */
/* Modo visitante: quando uma ação é travada, a tela que a chamou ainda tenta
   mostrar o aviso de sucesso dela. Esta trava engole esse aviso seguinte,
   para o visitante nunca ler "salvo" de algo que não foi salvo. */
let roBlock=false;
/* 13/11, pedido dele: sem contadores e sem etiquetas na barra, e uma área
   de Ocultos para esconder o que não faz sentido para o cliente agora. */
function Sidebar({view,setView,items,perfil,setPerfil,sair,ocultos,ocultar,mostrar,podeOcultar}) {
  const [verOcultos,setVerOcultos]=useState(false);
  const escondido=(id)=>ocultos.indexOf(id)>=0;
  const visiveis=items.filter(i=>!escondido(i.id));
  const guardados=items.filter(i=>escondido(i.id));
  return <aside className="sidebar">
    <button className="brand brand-btn" onClick={sair} title="Voltar à tela de apresentação"><span className="brand-mark">V</span><div><strong>Transportadora Iunes</strong><small>Distribuição <em>{REAL?'REAL':'DEMO'}</em></small></div></button>
    <nav aria-label="Navegação principal">{visiveis.map(item=>
      <span key={item.id} className="nav-row">
        <button onClick={()=>setView(item.id)} className={`nav-item ${view===item.id?'active':''}`}><span>{item.icon}</span>{item.label}</button>
        {podeOcultar&&<button className="nav-hide" title={`Ocultar ${item.label}`} aria-label={`Ocultar ${item.label}`} onClick={()=>ocultar(item.id)}>–</button>}
      </span>)}</nav>
    {podeOcultar&&guardados.length>0&&<div className="nav-ocultos">
      <button className="oc-tit" onClick={()=>setVerOcultos(!verOcultos)} aria-expanded={verOcultos}>
        <span>Ocultos</span><b>{guardados.length}</b><i>{verOcultos?'–':'+'}</i></button>
      {verOcultos&&<div className="oc-lista">{guardados.map(it=>
        <button key={it.id} onClick={()=>mostrar(it.id)} title={`Mostrar ${it.label}`}><span>{it.icon}</span>{it.label}<i>+</i></button>)}
        <p className="oc-nota">Some da barra do cliente. Você volta a mostrar quando quiser.</p>
      </div>}
    </div>}
    <div className="sidebar-bottom">{podeOcultar&&<div className="visao-pick"><span>Visualização</span><div className="vp-botoes">
      <button className={REAL?'':'on'} onClick={()=>{ if(REAL) trocarVisao('sim'); }}>Simulada</button>
      <button className={REAL?'on':''} onClick={()=>{ if(!REAL) trocarVisao('real'); }}>Real</button>
    </div></div>}<div className="profile"><span>{perfil.iniciais}</span><div><strong>{perfil.name}</strong><small>{perfil.short}</small></div></div>{perfil.role==='visitante'&&<p className="ro-tag">Somente leitura</p>}{setPerfil?<label className="profile-pick"><span>Perfil</span><select id="perfil-side" aria-label="Trocar de perfil" value={perfil.id} onChange={e=>setPerfil(e.target.value)}>{perfis.map(p=><option key={p.id} value={p.id}>{p.label}</option>)}</select></label>:<p className="ro-tag pf-fixo">{perfil.email||'Acesso pela sua conta'}</p>}</div>
  </aside>;
}

/* O sino mostrava um "2" fixo que não abria nada. Agora ele lista as vendas
   que os vendedores lançaram e ainda não foram vistas. */
function Topbar({perfil,setPerfil,sair,vendas,vistoEm,setVistoEm}) {
  const [abrir,setAbrir]=useState(false);
  const novas=vendas.filter(v=>v.ts>vistoEm);
  const abrirSino=()=>{ setAbrir(!abrir); if(!abrir) setVistoEm(Date.now()); };
  return <header className="topbar"><button className="mobile-logo" onClick={sair} aria-label="Voltar à apresentação">V</button><label className="search">⌕<input id="busca" aria-label="Buscar" placeholder="Buscar cliente, pedido ou viagem..." /></label><div className="top-actions"><span className="demo-mode"><i/> {REAL?'Dados reais':'Dados de demonstração'}</span>{perfil.role==='visitante'&&<span className="ro-tag">Visitante · somente leitura</span>}{setPerfil&&<label className="profile-pick"><span>Perfil</span><select id="perfil-top" aria-label="Trocar de perfil" value={perfil.id} onChange={e=>setPerfil(e.target.value)}>{perfis.map(p=><option key={p.id} value={p.id}>{p.label}</option>)}</select></label>}<span className="sino-wrap">
      <button aria-label={`Avisos${novas.length?` · ${novas.length} novos`:''}`} onClick={abrirSino}>♢{novas.length?<i>{novas.length}</i>:null}</button>
      {abrir&&<div className="sino-caixa" role="dialog" aria-label="Avisos">
        <p className="sc-tit">Vendas lançadas pelos vendedores</p>
        {!vendas.length
          ? <p className="sc-vazio">Nenhuma venda lançada ainda.</p>
          : vendas.slice(0,8).map(v=><div key={v.id} className={`sc-item${v.ts>vistoEm?' nova':''}`}>
              <b>{v.cliente}</b>
              <p>{fmt(v.litros)} L de etanol a {brl3(v.precoL)}/L · {brl(Math.round(v.litros*v.precoL))}</p>
              <p>{v.modo==='retira'?'O cliente retira':'Nós entregamos'} · {v.quando} · {v.cidade}</p>
              {v.obs&&<p className="sc-obs">"{v.obs}"</p>}
              <small>{v.vendedor} · {vdHora(v.ts)}{v.pedido?` · ${v.pedido}`:''}</small>
            </div>)}
      </div>}
    </span><span className="today">Barretos · SP · {clock(0)}</span></div></header>;
}

function Dashboard({go,orders,fleet,live}) {
  const metrics = [
    {label:'Volume vendido hoje',value:'428.500 L',change:'+12,4%',tone:'blue'}, {label:'Faturamento do dia',value:'R$ 2,71 mi',change:'+8,7%',tone:'green'},
    {label:'Margem estimada',value:'R$ 186 mil',change:'6,9%',tone:'purple'}, {label:'Pedidos em aberto',value:String(orders.length),change:`${orders.filter(o=>o.priority==='Alta').length} urgentes`,tone:'orange'},
  ];
  const bars = [{day:'Qui',height:52},{day:'Sex',height:68},{day:'Sáb',height:38},{day:'Dom',height:22},{day:'Seg',height:74},{day:'Ter',height:60},{day:'Hoje',height:82}];
  const n=fleet.length, c=(s)=>fleet.filter(t=>s.includes(t.status)).length;
  const rota=c(['rota']),livres=c(['base','retorno']),carreg=c(['carregando']),manut=c(['manutencao']);
  const p1=rota/n*100,p2=p1+livres/n*100,p3=p2+carreg/n*100;
  /* cores da camada de marca: em rota, livres, carregando, manutenção */
  const donut={background:`conic-gradient(var(--va-turq) 0 ${p1}%,var(--va-vivo) ${p1}% ${p2}%,var(--va-ambar) ${p2}% ${p3}%,rgba(255,255,255,.18) ${p3}%)`};
  return <div className="content">
    <div className="page-heading"><div><p>MVP OPERACIONAL</p><h1>Distribuição em um só lugar</h1><span>Uma visão simples do comercial à entrega.</span></div><div className="heading-actions"><button className="secondary" onClick={()=>go('relatorios')}>Relatórios</button><button className="primary" onClick={()=>go('logistica')}>Ver operação →</button></div></div>
    <MarketStrip go={go} live={live}/>
    <section className="demo-guide"><div><span>ROTEIRO DA APRESENTAÇÃO</span><strong>O que há de novo nesta versão</strong></div><button onClick={()=>go('espaco')}><i>1</i><span><b>Quadro de espaço</b><small>O que cabe em cada caminhão agora</small></span></button><button onClick={()=>go('rastreamento')}><i>2</i><span><b>Rastreamento (simulado)</b><small>Frota no mapa, alertas e rotas</small></span></button><button onClick={()=>go('cadastros','vendedores')}><i>3</i><span><b>Perfil do vendedor</b><small>Troque de perfil no topo da tela</small></span></button></section>
    <section className="metrics" aria-label="Indicadores principais">{metrics.map(m=><article className={`metric ${m.tone}`} key={m.label}><div className="metric-top"><span>{m.label}</span><i>↗</i></div><strong>{m.value}</strong><small><b>{m.change}</b> vs. ontem</small></article>)}</section>
    <div className="main-grid">
      <section className="panel performance"><div className="panel-title"><div><h2>Desempenho comercial</h2><p>Volume vendido nos últimos 7 dias</p></div><button onClick={()=>go('relatorios')}>Ver relatório</button></div><div className="chart"><div className="y-axis"><span>600k</span><span>450k</span><span>300k</span><span>150k</span><span>0</span></div><div className="bars">{bars.map(bar=><div className="bar-wrap" key={bar.day}><div className={`bar ${bar.day==='Hoje'?'current':''}`} style={{height:`${bar.height}%`}}><span>{bar.day==='Hoje'?'428,5k':''}</span></div><small>{bar.day}</small></div>)}</div></div></section>
      <section className="panel fleet"><div className="panel-title"><div><h2>Status da frota</h2><p>{n} veículos cadastrados</p></div><button className="link" onClick={()=>go('frota')}>Ver frota →</button></div><div className="donut-row"><div className="donut" style={donut}><div><strong>{n}</strong><small>veículos</small></div></div><div className="legend"><p><i className="dot green-dot"/>Livres <b>{livres}</b></p><p><i className="dot blue-dot"/>Em rota <b>{rota}</b></p><p><i className="dot amber-dot"/>Carregando <b>{carreg}</b></p><p><i className="dot gray-dot"/>Manutenção <b>{manut}</b></p></div></div></section>
    </div>
    <section className="panel orders"><div className="panel-title"><div><h2>Pedidos aguardando logística</h2><p>{orders.length} pedidos precisam de programação</p></div><button className="link" onClick={()=>go('logistica')}>Abrir Central Logística →</button></div><div className="table-wrap"><table><thead><tr><th>Pedido</th><th>Cliente</th><th>Destino</th><th>Volume</th><th>Prazo</th><th>Prioridade</th><th></th></tr></thead><tbody>{orders.slice(0,3).map(order=><tr key={order.id}><td className="order-id">{order.id}</td><td>{order.client}</td><td>{order.city}</td><td>{fmt(order.volume)} L</td><td>{order.window}</td><td><span className={`priority ${order.priority==='Alta'?'high':''}`}>{order.priority}</span></td><td><button className="more" onClick={()=>go('logistica')}>•••</button></td></tr>)}{!orders.length&&<tr><td colSpan="7">Nenhum pedido aguardando.</td></tr>}</tbody></table></div></section>
  </div>;
}

function Home() {
  const [entrou,setEntrou]=useState(false);
  /* Primeiro acesso: enquanto a pessoa não trocar a senha temporária que
     você entregou, o app não mostra tela nenhuma. */
  const [precisaSenha,setPrecisaSenha]=useState(false);
  /* Trocar Simulada/Real recarrega a página. Antes isso jogava a pessoa
     de volta para o login, mesmo com a sessão viva em sessionStorage.
     Agora, se há sessão, o app volta a perguntar quem é e segue. */
  const [restaurando,setRestaurando]=useState(()=>!!bancoLerSessao());
  /* Sessão do banco. Fica em sessionStorage (ver js/banco.jsx), não em
     estado só de memória, porque trocar Simulada/Real recarrega a página. */
  const [sessao,setSessao]=useState(()=>bancoLerSessao());
  /* Quem entrou. Vem de rpc/meu_acesso, não de um seletor na tela. */
  const [acesso,setAcesso]=useState(null);
  const [entrando,setEntrando]=useState(false);
  const perfilConta=acPerfil(acesso);
  /* O seletor de perfil só existe na visualização Simulada, para ele
     caminhar pelas telas de cada função ao mostrar o sistema. Na Real
     você é quem entrou, e ponto. */
  const [perfilId,setPerfilId]=useState(null);
  const perfil=(!REAL && perfilId && perfis.find(p=>p.id===perfilId)) || perfilConta || perfis[0];
  const podeTrocarPerfil=!REAL && !!perfilConta;
  const [view,setView]=useState('espaco'); const [adminTab,setAdminTab]=useState('vendedores'); const [toast,setToast]=useState('');
  const [novoPara,setNovoPara]=useState('');
  /* seed() devolve a lista de exemplo na visualização simulada e [] na real */
  const [deliveries,setDeliveries]=useState(seed(initialDeliveries));
  const [orders,setOrders]=useState(seed(initialOrders));
  const [trips,setTrips]=useState(seed(initialTrips));
  const [fleet,setFleet]=useState(seed(initialFleet));
  const [sellers,setSellers]=usePersist('sellers',seed(initialSellers));
  const [clients,setClients]=usePersist('clients',seed(initialClients));
  const [bases,setBases]=usePersist('bases',seed(initialBases));
  const [vendas,setVendas]=usePersist('vendas',[]);
  /* Preço do dia: o Paulo abre o dia com os dois valores (retira e entrega)
     e a tela do vendedor lê daqui. Na visualização real nasce em branco. */
  const [precoDia,setPrecoDia]=usePersist('precoDia', REAL
    ? {retira:null, entrega:null, fechadoEm:null}
    : {retira:PR_HIPOTESE.padraoRetira, entrega:PR_HIPOTESE.padraoEntrega, fechadoEm:null});
  const [ocultos,setOcultos]=usePersist('ocultos',[]);
  const [vistoEm,setVistoEm]=usePersist('vistoEm',0);
  const lancarVenda=(v)=>setVendas(cur=>[v,...cur]);
  /* Autorização de exceção: o Paulo libera ou recusa, e o vendedor vê a resposta. */
  const decidirVenda=(id,decisao)=>{
    setVendas(cur=>cur.map(v=>{
      if(v.id!==id) return v;
      /* liberou: o pedido guardado entra agora na fila da logística */
      if(decisao==='liberado' && v.pedidoDados) setOrders(o=>[...o, v.pedidoDados]);
      return {...v, aprovacao:decisao, decididoEm:Date.now()};
    }));
    notify(decisao==='liberado'
      ? 'Pedido liberado: entrou na programação e o vendedor foi avisado.'
      : 'Pedido recusado. O vendedor foi avisado.');
  };
  const ocultar=(id)=>setOcultos(c=>c.indexOf(id)>=0?c:[...c,id]);
  const mostrar=(id)=>setOcultos(c=>c.filter(x=>x!==id));
  const live=useLiveQuotes();
  const go=(v,sub)=>{ if(sub) { if(v==='v-pedidos') setNovoPara(sub); else setAdminTab(sub); } else if(v==='v-pedidos') setNovoPara(''); setView(v); window.scrollTo(0,0); };
  const trocarPerfil=(id)=>{ const p=perfis.find(x=>x.id===id)||perfis[0]; setPerfilId(id); setView(p.role==='vendedor'?'v-painel':'espaco'); setNovoPara(''); window.scrollTo(0,0); notify(`Agora você está vendo como ${p.name}.`); };
  const notify=(message)=>{if(roBlock)return;setToast(message);window.setTimeout(()=>setToast(''),3200)};
  const resetDemo=()=>{ if(REAL){ notify('Na visualização real não há dados de demonstração para restaurar.'); return; } setSellers(initialSellers); setClients(initialClients); setBases(initialBases); notify('Dados de demonstração restaurados.'); };
  const fleetAlerts=fleet.map(fleetInfo).filter(t=>t.alerts.length).length;
  const abrirPara=(a,ses)=>{
    const perf=acPerfil(a);
    setAcesso(a); setPerfilId(null);
    setPrecisaSenha(!(ses && ses.senhaPropria));
    setView(acPrimeiraTela(perf, acItens(navItems, sellerNav, perf)));
    setEntrou(true); window.scrollTo(0,0);
  };

  useEffect(()=>{
    if(!restaurando) return; let vivo=true;
    const falhou=()=>{ if(vivo){ bancoSair(); setSessao(null); setRestaurando(false); } };
    bancoMeuAcesso().then(a=>{
      if(!vivo) return;
      if(!a){ falhou(); return; }
      abrirPara(a, bancoLerSessao()); setRestaurando(false);
    }).catch(falhou);
    return ()=>{ vivo=false; };
  },[restaurando]);

  /* Entrar não é só conferir a senha: é descobrir QUEM é a pessoa.
     Senha certa e e-mail fora da lista = não entra. Antes disso passaria
     e veria a tela do dono. */
  const entrarComConta=async(ses)=>{
    setEntrando(true);
    try{
      const a=await bancoMeuAcesso();
      if(!a){ bancoSair(); setSessao(null); setEntrando(false);
        throw new Error('A senha confere, mas este e-mail não tem acesso liberado. Fale com o Guilherme.'); }
      setSessao(ses); abrirPara(a, ses); setEntrando(false);
    }catch(e){ setEntrando(false); throw e; }
  };
  const sair=()=>{ bancoSair(); setSessao(null); setAcesso(null); setPerfilId(null);
    setPrecisaSenha(false); setEntrou(false); window.scrollTo(0,0); };
  if(restaurando) return <div className="en-wrap en-so-login"><div className="en-hero">
    <section className="en-login"><h2>Abrindo...</h2></section></div></div>;
  if(!entrou) return <Entrada onConta={entrarComConta}/>;
  /* Antes de qualquer tela. Não há como pular: não existe botão de depois. */
  if(precisaSenha) return <TrocarSenha email={acesso&&acesso.email} nome={acesso&&acesso.nome}
    onPronto={()=>setPrecisaSenha(false)} onSair={sair}/>;
  const vendedor=perfil.role==='vendedor'?(sellers.find(v=>v.id===perfil.id)||{id:perfil.id,name:perfil.name,region:'',meta:1}):null;
  const visitante=perfil.role==='visitante';
  const items=acItens(navItems, sellerNav, perfil);
  /* No modo visitante nada é gravado: as funções que alterariam dados viram aviso. */
  const trava=()=>{roBlock=true;setToast('Modo visitante: você pode olhar tudo, mas não alterar. Para testar as decisões, entre como Dono.');window.setTimeout(()=>setToast(''),3200);window.setTimeout(()=>{roBlock=false;},0);};
  const ro=(fn)=>visitante?trava:fn;
  let page;
  if(vendedor){
    if(view==='v-clientes') page=<SellerClients seller={vendedor} clients={clients} orders={orders} deliveries={deliveries} go={go}/>;
    else if(view==='v-pedidos') page=<SellerOrders seller={vendedor} clients={clients} orders={orders} setOrders={ro(setOrders)} deliveries={deliveries} notify={notify} preset={novoPara} onVenda={lancarVenda} precoDia={precoDia} vendas={vendas} bases={bases}/>;
    else if(view==='mercado') page=<Market live={live}/>;
    else page=<SellerHome seller={vendedor} clients={clients} orders={orders} deliveries={deliveries} go={go} live={live}/>;
  }
  else if(view==='espaco') page=<Espaco fleet={fleet} clients={clients} bases={bases} orders={orders} onAtender={(id)=>setOrders(cur=>cur.filter(o=>o.id!==id))} notify={notify} go={go} readOnly={visitante}/>;
  else if(view==='dashboard') page=<Dashboard go={go} orders={orders} fleet={fleet} live={live}/>;
  else if(view==='logistica') page=<Logistics notify={notify} setDeliveries={ro(setDeliveries)} orders={orders} setOrders={ro(setOrders)} trips={trips} setTrips={ro(setTrips)} fleet={fleet} setFleet={ro(setFleet)} bases={bases} go={go}/>;
  else if(view==='clientes') page=<Clients clients={clients} sellers={sellers} bases={bases} go={go}/>;
  else if(view==='frota') page=<Fleet fleet={fleet} setFleet={ro(setFleet)} notify={notify}/>;
  else if(view==='estoque') page=<Estoque notify={notify} readOnly={visitante}/>;
  else if(view==='manutencao') page=<Manutencao fleet={fleet} notify={notify} readOnly={visitante}/>;
  else if(view==='consumo') page=<Consumo fleet={fleet} notify={notify} readOnly={visitante}/>;
  else if(view==='agentes') page=<Agentes/>;
  else if(view==='mapa') page=<MapaMental/>;
  else if(view==='mb-equipe') page=<MapaBanco tipo="equipe" rotulo="DO BANCO DA IUNES" titulo="Mapa da equipe"
    sub="Quem é quem na operação, como está registrado no banco." notify={notify} sessao={sessao}/>;
  else if(view==='mb-processos') page=<MapaBanco tipo="processos" rotulo="DO BANCO DA IUNES" titulo="Mapa de processos"
    sub="Os processos da operação, como estão registrados no banco." notify={notify} sessao={sessao}/>;
  else if(view==='vendas') page=<Vendas vendas={vendas} sellers={sellers} go={go} decidir={ro(decidirVenda)}/>;
  else if(view==='precopedido') page=<PrecoPedido clients={clients} sellers={sellers} orders={orders} setOrders={ro(setOrders)} notify={notify} precoDia={precoDia} setPrecoDia={ro(setPrecoDia)} bases={bases}/>;
  else if(view==='mercado') page=<Market live={live}/>;
  else if(view==='relatorios') page=<Reports clients={clients} sellers={sellers} bases={bases} fleet={fleet}/>;
  else if(view==='rastreamento') page=<Tracking fleet={fleet} bases={bases}/>;
  else page=<Admin sellers={sellers} setSellers={setSellers} clients={clients} setClients={setClients} bases={bases} setBases={setBases} notify={notify} tab={adminTab} setTab={setAdminTab} resetDemo={resetDemo}/>;
  return <main className="shell"><Sidebar view={view} setView={go} items={items} perfil={perfil} setPerfil={podeTrocarPerfil?trocarPerfil:null} sair={sair} ocultos={ocultos} ocultar={ocultar} mostrar={mostrar} podeOcultar={perfil.role==='dono'}/><section className="workspace"><Topbar perfil={perfil} setPerfil={podeTrocarPerfil?trocarPerfil:null} sair={sair} vendas={vendas} vistoEm={vistoEm} setVistoEm={setVistoEm}/>{page}</section><nav className="mobile-nav" aria-label="Navegação móvel">{items.filter(i=>ocultos.indexOf(i.id)<0).map(item=><button key={item.id} className={view===item.id?'active':''} onClick={()=>go(item.id)}><span>{item.icon}</span>{item.short}</button>)}</nav>{toast&&<div className="toast" role="status"><span>✓</span>{toast}</div>}</main>;
}

ReactDOM.createRoot(document.getElementById('root')).render(<Home/>);