/* ===== 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;
function Sidebar({view,setView,pending,fleetAlerts,items,perfil,setPerfil,sair}) {
  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>VIAFLUX</strong><small>Distribuição <em>DEMO</em></small></div></button>
    <nav aria-label="Navegação principal">{items.map(item=>{
      const badge=item.id==='logistica'?pending:item.id==='frota'?fleetAlerts:0;
      return <button key={item.id} onClick={()=>setView(item.id)} className={`nav-item ${view===item.id?'active':''}`}><span>{item.icon}</span>{item.label}{badge?<b>{badge}</b>:item.tag?<b className={`tag-new ${item.tag==='ao vivo'?'tag-live':''}`}>{item.tag}</b>:null}</button>;
    })}</nav>
    <div className="sidebar-bottom"><div className="profile"><span>{perfil.iniciais}</span><div><strong>{perfil.name}</strong><small>{perfil.short}</small></div></div>{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.filter(p=>p.role!=='visitante').map(p=><option key={p.id} value={p.id}>{p.label}</option>)}</select></label>:<p className="ro-tag">Somente leitura</p>}</div>
  </aside>;
}

function Topbar({perfil,setPerfil,sair}) {
  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/> Dados de demonstração</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.filter(p=>p.role!=='visitante').map(p=><option key={p.id} value={p.id}>{p.label}</option>)}</select></label>:<span className="ro-tag">Visitante · somente leitura</span>}<button aria-label="Notificações">♢<i>2</i></button><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;
  const donut={background:`conic-gradient(#2f7ddd 0 ${p1}%,#35aa73 ${p1}% ${p2}%,#f0aa45 ${p2}% ${p3}%,#cbd0d8 ${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);   // a demonstração vem antes do sistema
  const [perfilId,setPerfilId]=useState('P-DONO');
  const perfil=perfis.find(p=>p.id===perfilId)||perfis[0];
  const [view,setView]=useState('espaco'); const [adminTab,setAdminTab]=useState('vendedores'); const [toast,setToast]=useState('');
  const [novoPara,setNovoPara]=useState('');
  const [deliveries,setDeliveries]=useState(initialDeliveries);
  const [orders,setOrders]=useState(initialOrders);
  const [trips,setTrips]=useState(initialTrips);
  const [fleet,setFleet]=useState(initialFleet);
  const [sellers,setSellers]=usePersist('sellers',initialSellers);
  const [clients,setClients]=usePersist('clients',initialClients);
  const [bases,setBases]=usePersist('bases',initialBases);
  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=()=>{ setSellers(initialSellers); setClients(initialClients); setBases(initialBases); notify('Dados de demonstração restaurados.'); };
  const fleetAlerts=fleet.map(fleetInfo).filter(t=>t.alerts.length).length;
  const entrar=(id)=>{ const p=perfis.find(x=>x.id===id)||perfis[0]; setPerfilId(id); setView(p.role==='vendedor'?'v-painel':'espaco'); setEntrou(true); window.scrollTo(0,0); };
  const sair=()=>{ setEntrou(false); window.scrollTo(0,0); };
  if(!entrou) return <Entrada onEntrar={entrar}/>;
  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=vendedor?sellerNav:visitante?navItems.filter(i=>i.id!=='cadastros'):navItems;
  /* 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}/>;
    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==='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} pending={orders.length} fleetAlerts={fleetAlerts} items={items} perfil={perfil} setPerfil={perfil.role==='visitante'?null:trocarPerfil} sair={sair}/><section className="workspace"><Topbar perfil={perfil} setPerfil={perfil.role==='visitante'?null:trocarPerfil} sair={sair}/>{page}</section><nav className="mobile-nav" aria-label="Navegação móvel">{items.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/>);