const { useEffect, useMemo, useState } = React;
let _sbClient; function getSupabase(){ if(_sbClient) return _sbClient; const cfg=window.BRAZETTO_CONFIG||{}; const url=cfg.supabaseUrl||''; const key=cfg.supabasePublishableKey||''; if(!url.startsWith('https://')||!key||key.startsWith('COLE_AQUI')) return null; _sbClient=window.supabase.createClient(url,key,{auth:{persistSession:true,autoRefreshToken:true,detectSessionInUrl:true}}); return _sbClient; }

const money = new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' })
const fmt = (n) => money.format(Number(n || 0))
const dateBR = (d) => new Intl.DateTimeFormat('pt-BR', { dateStyle: 'short', timeStyle: 'short' }).format(new Date(d))
const localDate = () => {
  const d = new Date(); const y=d.getFullYear(); const m=String(d.getMonth()+1).padStart(2,'0'); const day=String(d.getDate()).padStart(2,'0');
  return `${y}-${m}-${day}`
}
const dayRange = (date = localDate()) => {
  const start = new Date(`${date}T00:00:00`); const end = new Date(`${date}T23:59:59.999`)
  return [start.toISOString(), end.toISOString()]
}

function Toast({ text }) { return text ? <div className="toast">{text}</div> : null }
function Logo() { return <div className="brand"><div className="brandMark">B</div><div><strong>BRAZETTO</strong><span>Caixa & Estoque</span></div></div> }

function ConfigMissing() {
  return <main className="centerPage"><div className="authCard"><Logo/><h1>Banco ainda não conectado</h1><p>O aplicativo está pronto, mas o arquivo <code>config.js</code> ainda precisa receber a URL e a chave publicável do projeto Supabase da Brazetto.</p><div className="hint">Depois de configurar, esta tela vira o login real do sistema.</div></div></main>
}

function Auth({ supabase }) {
  const [mode,setMode] = useState('login'); const [email,setEmail]=useState(''); const [password,setPassword]=useState(''); const [msg,setMsg]=useState(''); const [busy,setBusy]=useState(false)
  async function submit(e){e.preventDefault();setBusy(true);setMsg('');
    const result = mode==='login' ? await supabase.auth.signInWithPassword({email,password}) : await supabase.auth.signUp({email,password})
    if(result.error) setMsg(result.error.message); else if(mode==='signup') setMsg('Conta criada. Se a confirmação de e-mail estiver ativa, confirme o e-mail antes de entrar.')
    setBusy(false)
  }
  return <main className="centerPage"><form className="authCard" onSubmit={submit}><Logo/><h1>{mode==='login'?'Entrar no caixa':'Criar primeiro acesso'}</h1><label>E-mail<input type="email" value={email} onChange={e=>setEmail(e.target.value)} required autoComplete="email"/></label><label>Senha<input type="password" value={password} onChange={e=>setPassword(e.target.value)} required minLength={6} autoComplete={mode==='login'?'current-password':'new-password'}/></label>{msg&&<div className="formMsg">{msg}</div>}<button className="primary" disabled={busy}>{busy?'Aguarde...':mode==='login'?'Entrar':'Criar conta'}</button><button type="button" className="linkBtn" onClick={()=>setMode(mode==='login'?'signup':'login')}>{mode==='login'?'Primeiro acesso':'Já tenho acesso'}</button></form></main>
}

function Shell({ supabase, session }) {
  const [view,setView]=useState('pdv'); const [products,setProducts]=useState([]); const [stock,setStock]=useState([]); const [settings,setSettings]=useState(null); const [cart,setCart]=useState([]); const [toast,setToast]=useState(''); const [busy,setBusy]=useState(true)
  const notify=(t)=>{setToast(t);setTimeout(()=>setToast(''),2800)}
  async function loadAll(){setBusy(true);await supabase.rpc('bootstrap_brazetto'); const [p,s,cfg]=await Promise.all([supabase.from('products').select('*').order('sort_order'),supabase.from('inventory_items').select('*').eq('active',true).order('name'),supabase.from('settings').select('*').maybeSingle()]); if(p.error) notify(p.error.message); setProducts(p.data||[]);setStock(s.data||[]);setSettings(cfg.data||null);setBusy(false)}
  useEffect(()=>{loadAll()},[])
  const activeProducts=products.filter(p=>p.active)
  const skewerOptions=activeProducts.filter(p=>p.category==='Espetinhos')
  return <div className="app"><header className="topbar"><Logo/><div className="topActions"><span className="userEmail">{session.user.email}</span><button className="ghost" onClick={()=>supabase.auth.signOut()}>Sair</button></div></header><nav className="nav">
    {[['pdv','Caixa'],['stock','Estoque'],['closing','Fechamento'],['products','Produtos'],['reports','Relatórios'],['settings','Ajustes']].map(([id,label])=><button key={id} className={view===id?'active':''} onClick={()=>setView(id)}>{label}</button>)}
  </nav><main className="content">{busy?<div className="loading">Carregando Brazetto…</div>:<>
    {view==='pdv'&&<PDV supabase={supabase} products={activeProducts} skewers={skewerOptions} cart={cart} setCart={setCart} onDone={()=>{setCart([]);loadAll()}} notify={notify}/>} 
    {view==='stock'&&<Stock supabase={supabase} stock={stock} reload={loadAll} notify={notify}/>} 
    {view==='closing'&&<Closing supabase={supabase} reload={loadAll} notify={notify}/>} 
    {view==='products'&&<Products supabase={supabase} products={products} reload={loadAll} notify={notify}/>} 
    {view==='reports'&&<Reports supabase={supabase}/>} 
    {view==='settings'&&<Settings supabase={supabase} settings={settings} reload={loadAll} notify={notify}/>} 
  </>}</main><Toast text={toast}/></div>
}

function PDV({supabase,products,skewers,cart,setCart,onDone,notify}){
  const [category,setCategory]=useState('Todos'); const [search,setSearch]=useState(''); const [payment,setPayment]=useState('pix'); const [customer,setCustomer]=useState(''); const [notes,setNotes]=useState(''); const [discount,setDiscount]=useState(0); const [sending,setSending]=useState(false)
  const categories=['Todos',...new Set(products.map(p=>p.category))]
  const filtered=products.filter(p=>(category==='Todos'||p.category===category)&&p.name.toLowerCase().includes(search.toLowerCase()))
  const subtotal=cart.reduce((t,i)=>t+i.qty*(Number(i.product.price)+(i.extraProductId?10:0)),0); const total=Math.max(0,subtotal-Number(discount||0))
  function add(p){setCart(c=>{const idx=c.findIndex(x=>x.product.id===p.id&&!x.extraProductId); if(idx>=0){const n=[...c];n[idx]={...n[idx],qty:n[idx].qty+1};return n}return [...c,{product:p,qty:1,extraProductId:null}]})}
  function qty(idx,delta){setCart(c=>c.map((x,i)=>i===idx?{...x,qty:x.qty+delta}:x).filter(x=>x.qty>0))}
  function extra(idx,id){setCart(c=>c.map((x,i)=>i===idx?{...x,extraProductId:id||null}:x))}
  async function finish(){if(!cart.length)return;setSending(true); const items=cart.map(i=>({product_id:i.product.id,quantity:i.qty,extra_product_id:i.extraProductId||null})); const {error}=await supabase.rpc('create_sale',{p_items:items,p_payment_method:payment,p_customer_name:customer||null,p_discount:Number(discount||0),p_notes:notes||null}); if(error)notify(error.message); else {notify(`Venda concluída • ${fmt(total)}`);setCustomer('');setNotes('');setDiscount(0);onDone()} setSending(false)}
  return <div className="pdvLayout"><section><div className="pageTitle"><div><h1>Caixa</h1><p>Toque no item para registrar a venda.</p></div><div className="pill">{products.length} itens ativos</div></div><input className="search" placeholder="Buscar produto..." value={search} onChange={e=>setSearch(e.target.value)}/><div className="chips">{categories.map(c=><button key={c} className={category===c?'sel':''} onClick={()=>setCategory(c)}>{c}</button>)}</div><div className="productGrid">{filtered.map(p=><button className="productCard" key={p.id} onClick={()=>add(p)}><span className="categoryTag">{p.category}</span><strong>{p.name}</strong><b>{fmt(p.price)}</b></button>)}</div></section><aside className="cart"><div className="cartHead"><h2>Pedido</h2><span>{cart.reduce((t,i)=>t+i.qty,0)} itens</span></div>{!cart.length?<div className="empty">Nenhum item no pedido.</div>:<div className="cartItems">{cart.map((i,idx)=><div className="cartItem" key={`${i.product.id}-${idx}`}><div className="cartLine"><div><strong>{i.product.name}</strong><small>{fmt(i.product.price)} cada</small></div><div className="stepper"><button onClick={()=>qty(idx,-1)}>−</button><span>{i.qty}</span><button onClick={()=>qty(idx,1)}>+</button></div></div>{i.product.allows_extra&&<select value={i.extraProductId||''} onChange={e=>extra(idx,e.target.value)}><option value="">Sem espetinho extra</option>{skewers.map(s=><option key={s.id} value={s.id}>+ {s.name} • R$ 10,00</option>)}</select>}<div className="lineTotal">{fmt(i.qty*(Number(i.product.price)+(i.extraProductId?10:0)))}</div></div>)}</div>}<div className="cartForm"><label>Cliente<input value={customer} onChange={e=>setCustomer(e.target.value)} placeholder="Opcional"/></label><label>Pagamento<select value={payment} onChange={e=>setPayment(e.target.value)}><option value="pix">Pix</option><option value="dinheiro">Dinheiro</option><option value="debito">Débito</option><option value="credito">Crédito</option><option value="ifood">iFood</option><option value="outro">Outro</option></select></label><label>Desconto<input type="number" min="0" step="0.01" value={discount} onChange={e=>setDiscount(e.target.value)}/></label><label>Observação<textarea value={notes} onChange={e=>setNotes(e.target.value)} rows="2"/></label></div><div className="totals"><div><span>Subtotal</span><b>{fmt(subtotal)}</b></div><div><span>Desconto</span><b>- {fmt(discount)}</b></div><div className="grand"><span>Total</span><b>{fmt(total)}</b></div></div><button className="primary checkout" disabled={!cart.length||sending} onClick={finish}>{sending?'Salvando…':'Finalizar venda'}</button></aside></div>
}

function Stock({supabase,stock,reload,notify}){
 const [buy,setBuy]=useState(null); const [q,setQ]=useState(''); const [cost,setCost]=useState(''); const [supplier,setSupplier]=useState('');
 const low=stock.filter(i=>Number(i.stock_qty)<=Number(i.min_qty));
 async function save(){if(!buy||Number(q)<=0||Number(cost)<0)return;const {error}=await supabase.rpc('record_purchase',{p_inventory_item_id:buy.id,p_quantity:Number(q),p_total_cost:Number(cost),p_supplier:supplier||null,p_note:null});if(error)notify(error.message);else{notify('Entrada de estoque registrada');setBuy(null);setQ('');setCost('');setSupplier('');reload()}}
 return <section><div className="pageTitle"><div><h1>Estoque</h1><p>Saldo atual e itens que precisam de reposição.</p></div><div className={`pill ${low.length?'warn':''}`}>{low.length} abaixo do mínimo</div></div>{low.length>0&&<div className="alert"><strong>Comprar/repor:</strong> {low.slice(0,8).map(x=>x.name).join(', ')}{low.length>8?'…':''}</div>}<div className="tableWrap"><table><thead><tr><th>Item</th><th>Saldo</th><th>Mínimo</th><th>Custo atual</th><th></th></tr></thead><tbody>{stock.map(i=><tr key={i.id} className={Number(i.stock_qty)<=Number(i.min_qty)?'lowRow':''}><td><strong>{i.name}</strong><small>{i.sku}</small></td><td>{Number(i.stock_qty).toFixed(2)} {i.unit}</td><td>{Number(i.min_qty).toFixed(2)} {i.unit}</td><td>{fmt(i.cost_per_unit)} / {i.unit}</td><td><button className="secondary" onClick={()=>setBuy(i)}>Entrada</button></td></tr>)}</tbody></table></div>{buy&&<div className="modalBack" onClick={()=>setBuy(null)}><div className="modal" onClick={e=>e.stopPropagation()}><h2>Entrada • {buy.name}</h2><label>Quantidade ({buy.unit})<input type="number" step="0.001" value={q} onChange={e=>setQ(e.target.value)} autoFocus/></label><label>Total pago<input type="number" step="0.01" value={cost} onChange={e=>setCost(e.target.value)}/></label><label>Fornecedor<input value={supplier} onChange={e=>setSupplier(e.target.value)}/></label><div className="modalActions"><button className="ghost" onClick={()=>setBuy(null)}>Cancelar</button><button className="primary" onClick={save}>Registrar compra</button></div></div></div>}</section>
}

function Products({supabase,products,reload,notify}){
 const [editing,setEditing]=useState(null); const [form,setForm]=useState({name:'',price:'',cost:'',active:true,min:''})
 function open(p){setEditing(p);setForm({name:p.name,price:p.price,cost:p.cost||0,active:p.active,min:''})}
 async function save(){const {error}=await supabase.from('products').update({name:form.name,price:Number(form.price),cost:Number(form.cost||0),active:form.active}).eq('id',editing.id);if(error)notify(error.message);else{notify('Produto atualizado');setEditing(null);reload()}}
 return <section><div className="pageTitle"><div><h1>Produtos e preços</h1><p>Alterar preço aqui não muda vendas antigas.</p></div></div><div className="tableWrap"><table><thead><tr><th>Produto</th><th>Categoria</th><th>Preço</th><th>Status</th><th></th></tr></thead><tbody>{products.map(p=><tr key={p.id}><td><strong>{p.name}</strong><small>{p.sku}</small></td><td>{p.category}</td><td>{fmt(p.price)}</td><td>{p.active?'Ativo':'Inativo'}</td><td><button className="secondary" onClick={()=>open(p)}>Editar</button></td></tr>)}</tbody></table></div>{editing&&<div className="modalBack" onClick={()=>setEditing(null)}><div className="modal" onClick={e=>e.stopPropagation()}><h2>Editar produto</h2><label>Nome<input value={form.name} onChange={e=>setForm({...form,name:e.target.value})}/></label><label>Preço<input type="number" step="0.01" value={form.price} onChange={e=>setForm({...form,price:e.target.value})}/></label><label>Custo manual (fallback)<input type="number" step="0.01" value={form.cost} onChange={e=>setForm({...form,cost:e.target.value})}/></label><label className="check"><input type="checkbox" checked={form.active} onChange={e=>setForm({...form,active:e.target.checked})}/> Produto ativo no caixa</label><div className="modalActions"><button className="ghost" onClick={()=>setEditing(null)}>Cancelar</button><button className="primary" onClick={save}>Salvar</button></div></div></div>}</section>
}

function Closing({supabase,notify}){
 const [date,setDate]=useState(localDate()); const [sales,setSales]=useState([]); const [purchases,setPurchases]=useState([]); const [counted,setCounted]=useState(''); const [low,setLow]=useState([]); const [saved,setSaved]=useState(false)
 async function load(){const [a,b]=dayRange(date); const [s,p,l]=await Promise.all([supabase.from('sales').select('*').gte('sold_at',a).lte('sold_at',b).eq('status','finalizada'),supabase.from('purchases').select('*').gte('purchased_at',a).lte('purchased_at',b),supabase.from('inventory_items').select('*').eq('active',true).order('name')]);setSales(s.data||[]);setPurchases(p.data||[]);setLow((l.data||[]).filter(x=>Number(x.stock_qty)<=Number(x.min_qty)));setSaved(false)}
 useEffect(()=>{load()},[date])
 const totals=sales.reduce((o,s)=>{o.total+=Number(s.total);o.discount+=Number(s.discount);o[s.payment_method]=(o[s.payment_method]||0)+Number(s.total);return o},{total:0,discount:0,pix:0,dinheiro:0,debito:0,credito:0,ifood:0,outro:0}); const pur=purchases.reduce((t,p)=>t+Number(p.total_cost),0); const diff=Number(counted||0)-Number(totals.dinheiro||0)
 async function save(){const payload={business_date:date,gross_sales:totals.total+totals.discount,discounts:totals.discount,net_sales:totals.total,pix:totals.pix||0,cash:totals.dinheiro||0,debit:totals.debito||0,credit:totals.credito||0,other:(totals.ifood||0)+(totals.outro||0),total_purchases:pur,cash_counted:Number(counted||0),difference:diff,summary:{sales_count:sales.length,low_stock:low.map(x=>({name:x.name,stock:x.stock_qty,min:x.min_qty}))}};const {error}=await supabase.from('cash_closings').upsert(payload,{onConflict:'user_id,business_date'});if(error)notify(error.message);else{notify('Fechamento salvo');setSaved(true)}}
 return <section className="printArea"><div className="pageTitle"><div><h1>Fechamento do dia</h1><p>Resumo vendido, pagamentos e reposição.</p></div><label className="datePick">Data<input type="date" value={date} onChange={e=>setDate(e.target.value)}/></label></div><div className="stats"><Stat label="Vendas" value={fmt(totals.total)} sub={`${sales.length} pedidos`}/><Stat label="Pix" value={fmt(totals.pix)}/><Stat label="Dinheiro" value={fmt(totals.dinheiro)}/><Stat label="Cartões" value={fmt((totals.debito||0)+(totals.credito||0))}/><Stat label="Compras do dia" value={fmt(pur)}/></div><div className="twoCols"><div className="panel"><h2>Conferência de caixa</h2><label>Dinheiro contado<input type="number" step="0.01" value={counted} onChange={e=>setCounted(e.target.value)}/></label><div className={`difference ${Math.abs(diff)>0.009?'bad':''}`}>Diferença: <strong>{fmt(diff)}</strong></div><button className="primary" onClick={save}>{saved?'Fechamento salvo ✓':'Salvar fechamento'}</button><button className="secondary" onClick={()=>window.print()}>Imprimir / Salvar PDF</button></div><div className="panel"><h2>Precisa comprar</h2>{!low.length?<p>Estoque acima dos mínimos cadastrados.</p>:<ul className="buyList">{low.map(x=><li key={x.id}><span>{x.name}</span><strong>{Number(x.stock_qty).toFixed(2)} / mín. {Number(x.min_qty).toFixed(2)} {x.unit}</strong></li>)}</ul>}</div></div></section>
}
function Stat({label,value,sub}){return <div className="stat"><span>{label}</span><strong>{value}</strong>{sub&&<small>{sub}</small>}</div>}

function Reports({supabase}){
 const [closings,setClosings]=useState([]); const [top,setTop]=useState([])
 useEffect(()=>{(async()=>{const c=await supabase.from('cash_closings').select('*').order('business_date',{ascending:false}).limit(31);setClosings(c.data||[]);const from=new Date();from.setDate(from.getDate()-30);const i=await supabase.from('sale_items').select('product_name_snapshot,quantity,line_total').gte('created_at',from.toISOString());const map={};(i.data||[]).forEach(x=>{const k=x.product_name_snapshot;map[k]??={name:k,qty:0,total:0};map[k].qty+=Number(x.quantity);map[k].total+=Number(x.line_total)});setTop(Object.values(map).sort((a,b)=>b.total-a.total).slice(0,12))})()},[])
 const month=closings.reduce((t,c)=>t+Number(c.net_sales),0)
 return <section><div className="pageTitle"><div><h1>Relatórios</h1><p>Fechamentos salvos e produtos mais vendidos nos últimos 30 dias.</p></div><div className="pill">{fmt(month)} nos fechamentos exibidos</div></div><div className="twoCols"><div className="panel"><h2>Mais vendidos</h2>{top.map((x,i)=><div className="rank" key={x.name}><b>{i+1}</b><span>{x.name}<small>{x.qty} un.</small></span><strong>{fmt(x.total)}</strong></div>)}</div><div className="panel"><h2>Fechamentos recentes</h2>{closings.map(c=><div className="closingRow" key={c.id}><span>{new Date(c.business_date+'T12:00:00').toLocaleDateString('pt-BR')}<small>{c.summary?.sales_count||0} pedidos</small></span><strong>{fmt(c.net_sales)}</strong></div>)}</div></div></section>
}

function Settings({supabase,settings,reload,notify}){
 const [form,setForm]=useState(settings||{business_name:'BRAZETTO',monthly_fixed_cost:0,monthly_installments:0,family_withdrawal:0,target_revenue:15000,card_fee_pct:3})
 useEffect(()=>setForm(settings||form),[settings])
 async function save(){const {error}=await supabase.from('settings').upsert({...form,monthly_fixed_cost:Number(form.monthly_fixed_cost||0),monthly_installments:Number(form.monthly_installments||0),family_withdrawal:Number(form.family_withdrawal||0),target_revenue:Number(form.target_revenue||0),card_fee_pct:Number(form.card_fee_pct||0)});if(error)notify(error.message);else{notify('Ajustes salvos');reload()}}
 return <section><div className="pageTitle"><div><h1>Ajustes</h1><p>Metas e parâmetros financeiros do negócio.</p></div></div><div className="panel settings"><label>Nome do negócio<input value={form.business_name||''} onChange={e=>setForm({...form,business_name:e.target.value})}/></label><div className="formGrid"><label>Custos fixos mensais<input type="number" step="0.01" value={form.monthly_fixed_cost||0} onChange={e=>setForm({...form,monthly_fixed_cost:e.target.value})}/></label><label>Parcelas mensais<input type="number" step="0.01" value={form.monthly_installments||0} onChange={e=>setForm({...form,monthly_installments:e.target.value})}/></label><label>Retirada familiar<input type="number" step="0.01" value={form.family_withdrawal||0} onChange={e=>setForm({...form,family_withdrawal:e.target.value})}/></label><label>Meta de faturamento<input type="number" step="0.01" value={form.target_revenue||0} onChange={e=>setForm({...form,target_revenue:e.target.value})}/></label><label>Taxa cartão (%)<input type="number" step="0.01" value={form.card_fee_pct||0} onChange={e=>setForm({...form,card_fee_pct:e.target.value})}/></label></div><button className="primary" onClick={save}>Salvar ajustes</button></div></section>
}

function App(){
 const supabase=getSupabase(); const [session,setSession]=useState(undefined)
 useEffect(()=>{if(!supabase){setSession(null);return}supabase.auth.getSession().then(({data})=>setSession(data.session));const {data:{subscription}}=supabase.auth.onAuthStateChange((_e,s)=>setSession(s));return()=>subscription.unsubscribe()},[])
 if(!supabase)return <ConfigMissing/>; if(session===undefined)return <div className="loading full">Abrindo Brazetto…</div>; if(!session)return <Auth supabase={supabase}/>; return <Shell supabase={supabase} session={session}/>
}

const root=ReactDOM.createRoot(document.getElementById('root')); root.render(<App/>);
if('serviceWorker' in navigator){window.addEventListener('load',()=>navigator.serviceWorker.register('./sw.js').catch(()=>{}));}