const {useState,useEffect,useRef}=React;
const templates=[{id:'luna',name:'Luna Terrace',style:'Champagne Luxe',img:'./assets/templates/luna.png'},{id:'ember',name:'Ember House',style:'Midnight Gold',img:'./assets/templates/ember.png'},{id:'olive',name:'Olive Oven',style:'Rustic Mediterranean',img:'./assets/templates/olive.png'}];
const API='./api/index.php';
const qs=new URLSearchParams(location.search);
function Icon({name,size=18}){const icons={restaurant:'▦',home:'⌂',menu:'☷',users:'♙',qr:'▦',template:'▤',upload:'⇧',box:'⬡',arrow:'→',back:'←',check:'✓',edit:'✎',eye:'◉',search:'⌕',settings:'⚙',logout:'↪',plus:'+',close:'×',camera:'◎',print:'▣'};return <span aria-hidden="true" style={{fontSize:size,lineHeight:1}}>{icons[name]||'•'}</span>}
function App(){const[csrf,setCsrf]=useState(''),[account,setAccount]=useState(null),[loading,setLoading]=useState(true),[notice,setNotice]=useState(null),[page,setPage]=useState(qs.get('unitytest')==='1'?'unity-test':'dashboard'),[restaurants,setRestaurants]=useState([]),[active,setActive]=useState(null),[adminUsers,setAdminUsers]=useState([]),[showAuth,setShowAuth]=useState('login'),[publicMenu,setPublicMenu]=useState(null),[arDish,setArDish]=useState(null);
const menuMode=qs.get('menu');
async function api(op,data,extra={}){const body=data instanceof FormData?data:(data===undefined?undefined:JSON.stringify(data));const r=await fetch(`${API}?op=${op}${extra.rid?'&rid='+extra.rid:''}${extra.slug?'&slug='+encodeURIComponent(extra.slug):''}`,{method:data===undefined?'GET':'POST',credentials:'same-origin',headers:{...(data!==undefined&&!(data instanceof FormData)?{'Content-Type':'application/json'}:{}),...(data!==undefined?{'X-CSRF-Token':csrf}:{})},body});const j=await r.json().catch(()=>({error:'Invalid server response'}));if(!r.ok)throw Error(j.error||'Request failed');return j}
function flash(message,error=false){setNotice({message,error});setTimeout(()=>setNotice(null),5500)}
async function refresh(){const a=await api('restaurants');setRestaurants(a.restaurants);if(account?.role==='admin'){const u=await api('admin_users');setAdminUsers(u.users)}}
async function openRestaurant(id){try{const a=await api('restaurant',undefined,{rid:id});setActive(a.restaurant);setPage('studio')}catch(e){flash(e.message,true)}}
async function mutate(op,payload,rid=active?.id){try{const j=await api(op,payload,{rid});if(j.restaurant)setActive(j.restaurant);if(op==='create_restaurant'){setActive(j.restaurant);setPage('studio')}if(op==='publish'||op==='create_restaurant')await refresh();flash('Saved successfully');return j}catch(e){flash(e.message,true);throw e}}
async function upload(type,files){if(!files?.length)return;const f=new FormData();f.append('type',type);for(const file of Array.from(files))f.append('files[]',file);try{const j=await mutate('upload',f);return j}catch(e){}}
useEffect(()=>{(async()=>{try{const x=await api('bootstrap');setCsrf(x.csrf);setAccount(x.user);if(menuMode){const y=await api('public',undefined,{slug:menuMode});setPublicMenu(y.restaurant)}}catch(e){flash(e.message,true)}finally{setLoading(false)}})()},[]);
useEffect(()=>{if(account&&!menuMode){api('restaurants').then(x=>setRestaurants(x.restaurants)).catch(e=>flash(e.message,true));if(account.role==='admin')api('admin_users').then(x=>setAdminUsers(x.users)).catch(()=>{})}},[account]);
async function auth(action,values){try{const r=await api(action,values);if(r.csrf)setCsrf(r.csrf);const b=await api('bootstrap');setAccount(b.user);setPage('dashboard');flash('Welcome to FoodAR Studio')}catch(e){flash(e.message,true)}}
async function logout(){try{await api('logout',{});setAccount(null);setActive(null);setRestaurants([])}catch(e){flash(e.message,true)}}
if(loading)return <div className="auth-panel" style={{height:'100vh'}}><div className="spinner" style={{borderTopColor:'#237151'}}/></div>;
if(menuMode)return publicMenu?<CustomerMenu restaurant={publicMenu} onAR={setArDish} arDish={arDish} />:<div className="auth-panel" style={{height:'100vh'}}><div className="panel"><h2>Menu unavailable</h2><p>This QR menu is not published yet.</p></div></div>;
if(!account)return <><div className="auth-wrap"><section className="auth-art"><div className="brand" style={{color:'white'}}>⬡ Food<span>AR</span> Studio</div><div><span className="eyebrow" style={{color:'#bbddc1'}}>THE RESTAURANT EXPERIENCE PLATFORM</span><h1>Bring every menu to life.</h1><p>Create immersive restaurant menus, match 3D dishes and images, and publish your QR experience in one place.</p><div className="row" style={{marginTop:30}}>{templates.map(t=><img key={t.id} src={t.img} style={{width:'28%',maxWidth:155,borderRadius:12,boxShadow:'0 12px 32px #0005'}}/>)}</div></div><small>FoodAR Studio · Tasvic</small></section><section className="auth-panel"><div className="auth-box"><span className="eyebrow">RESTAURANT STUDIO</span><h2>{showAuth==='login'?'Welcome back':'Create your account'}</h2><p className="muted">{showAuth==='login'?'Sign in to manage your restaurants.':'Start building your interactive restaurant menu.'}</p>{notice&&<Notice {...notice}/>}<form className="stack" onSubmit={e=>{e.preventDefault();const v=Object.fromEntries(new FormData(e.target));auth(showAuth,v)}}>{showAuth==='register'&&<Field label="Full name"><input name="name" required minLength="2" placeholder="Your name"/></Field>}<Field label="Email address"><input name="email" type="email" required placeholder="you@restaurant.com"/></Field><Field label="Password"><input name="password" type="password" minLength="8" required placeholder="Minimum 8 characters"/></Field><button className="btn" type="submit">{showAuth==='login'?'Sign in':'Create account'} <Icon name="arrow"/></button></form><p className="muted" style={{marginTop:20}}>{showAuth==='login'?'New to FoodAR?':'Have an account?'} <button style={{background:'none',color:'var(--green)',fontWeight:800}} onClick={()=>setShowAuth(showAuth==='login'?'register':'login')}>{showAuth==='login'?'Sign up':'Sign in'}</button></p></div></section></div></>;
return <div className="app-shell"><aside className="sidebar"><div className="brand"><span className="brandicon">⬡</span><span>Food<span>AR</span></span></div><button className={'nav '+(page==='dashboard'?'active':'')} onClick={()=>{setPage('dashboard');refresh()}}><Icon name="home"/> Dashboard</button><button className={'nav '+(page==='studio'?'active':'')} onClick={()=>{if(active)setPage('studio');else{setPage('dashboard');flash('Select a restaurant first')}}}><Icon name="restaurant"/> Menu Studio</button><button className={'nav '+(page==='qr'?'active':'')} onClick={()=>{if(active)setPage('qr');else flash('Select a restaurant first')}}><Icon name="qr"/> QR & Publish</button>{account.role==='admin'&&<button className={'nav '+(page==='admin'?'active':'')} onClick={()=>{setPage('admin');refresh()}}><Icon name="users"/> Super Admin</button>}{account.role==='admin'&&<button className={'nav '+(page==='unity-test'?'active':'')} onClick={()=>setPage('unity-test')}><Icon name="camera"/> Unity Connection Test</button>}<div className="sidebottom"><div className="muted" style={{fontSize:11,marginBottom:10}}>{account.name}<br/>{account.email}</div><button className="nav" onClick={logout}><Icon name="logout"/> Sign out</button></div></aside><main className="main"><header className="topbar"><div><b>{page==='dashboard'?'Overview':page==='studio'?'Menu Studio':page==='qr'?'Publish & QR Code':page==='unity-test'?'Unity Connection Test':'Super Admin'}</b><div className="muted" style={{fontSize:11}}>{active&&page!=='dashboard'&&page!=='admin'?active.name:'Manage your restaurant experiences'}</div></div><div className="row"><span className="tag">{account.role==='admin'?'ADMIN':'RESTAURANT OWNER'}</span><button className="btn secondary tiny" onClick={()=>{setActive(null);setPage('dashboard')}}>All restaurants</button></div></header><div className="content">{notice&&<Notice {...notice}/>} {page==='dashboard'&&<Dashboard restaurants={restaurants} account={account} onOpen={openRestaurant} onCreate={v=>mutate('create_restaurant',v)} />}{page==='studio'&&active&&<Studio r={active} mutate={mutate} upload={upload} setPage={setPage} api={api} flash={flash}/>} {page==='qr'&&active&&<Publish r={active} mutate={mutate} onOpen={()=>window.open(active.menu_url,'_blank')}/>} {page==='admin'&&account.role==='admin'&&<Admin users={adminUsers} restaurants={restaurants} onOpen={openRestaurant}/>}{page==='unity-test'&&account.role==='admin'&&<UnityConnectionTest/>}</div></main></div>;
}
function Notice({message,error}){return <div className={'notice '+(error?'error':'')}>{error?'⚠ ': '✓ '}{message}</div>}
function Field({label,children}){return <div className="field"><label>{label}</label>{children}</div>}
function Dashboard({restaurants,account,onOpen,onCreate}){const[showCreate,setShowCreate]=useState(false);const[draft,setDraft]=useState({name:'',tagline:'',template_id:'luna'});return <div className="stack"><div className="section-head"><div><span className="eyebrow">YOUR WORKSPACE</span><h1>Restaurant dashboard</h1><p className="muted">Build menus, organize assets, preview designs and publish instantly.</p></div><button className="btn" onClick={()=>setShowCreate(true)}><Icon name="plus"/> New restaurant</button></div><div className="stats"><div className="panel stat"><small>Restaurants</small><strong>{restaurants.length}</strong><span className="muted">Created on FoodAR</span></div><div className="panel stat"><small>Live menus</small><strong>{restaurants.filter(r=>+r.published).length}</strong><span className="muted">Published QR experiences</span></div><div className="panel stat"><small>Templates</small><strong>{templates.length}</strong><span className="muted">Available menu styles</span></div></div><div className="section-head"><h2>Your restaurants</h2><span className="muted">Select to manage</span></div><div className="cards">{restaurants.map(r=><div className="restaurant-card" key={r.id} onClick={()=>onOpen(r.id)}><div className="row between"><div className="restaurant-logo" style={{display:'grid',placeItems:'center',fontSize:25}}>▦</div><span className={'tag '+(!+r.published?'grey':'')}>{+r.published?'LIVE':'DRAFT'}</span></div><h3 style={{marginTop:17,marginBottom:3}}>{r.name}</h3><p className="muted" style={{marginBottom:15}}>{r.tagline||'No tagline yet'}</p><div className="row between"><span className="assetbadge">{r.template_id} template</span><span style={{color:'var(--green)',fontWeight:800}}>Open →</span></div></div>)}{!restaurants.length&&<div className="panel" style={{gridColumn:'1/-1',textAlign:'center',padding:50}}><h2>Your first restaurant starts here</h2><p className="muted">Create your restaurant to upload its menu and publish a QR experience.</p><button className="btn" onClick={()=>setShowCreate(true)}>Create restaurant</button></div>}</div>{showCreate&&<div className="overlay" onMouseDown={e=>{if(e.target===e.currentTarget)setShowCreate(false)}}><div className="modal"><div className="section-head"><h2>Create restaurant</h2><button className="btn secondary tiny" onClick={()=>setShowCreate(false)}>Close</button></div><div className="stack"><Field label="Restaurant name"><input value={draft.name} onChange={e=>setDraft({...draft,name:e.target.value})} placeholder="e.g. Sora Kitchen"/></Field><Field label="Tagline"><input value={draft.tagline} onChange={e=>setDraft({...draft,tagline:e.target.value})} placeholder="Fresh flavors, new experiences"/></Field><h3>Choose your starting template</h3><TemplatePicks value={draft.template_id} onChange={x=>setDraft({...draft,template_id:x})}/><button className="btn" disabled={draft.name.trim().length<2} onClick={async()=>{await onCreate(draft);setShowCreate(false)}}>Create & open studio <Icon name="arrow"/></button></div></div></div>}</div>}
function TemplatePicks({value,onChange}){return <div className="template-picks">{templates.map(t=><button key={t.id} type="button" className={'template-pick '+(value===t.id?'active':'')} onClick={()=>onChange(t.id)}><img loading="lazy" src={t.img}/><b>{t.style}</b><small>{t.name}</small></button>)}</div>}
function Studio({r,mutate,upload,setPage,api,flash}){const[tab,setTab]=useState('details'),[draft,setDraft]=useState({name:r.name,tagline:r.tagline,template_id:r.template_id,accent:r.accent,currency:r.currency}),[newCat,setNewCat]=useState({name:'',parent_id:''}),[newDish,setNewDish]=useState({name:'',description:'',price:'',category_id:''}),[editDish,setEditDish]=useState(null),[previewModel,setPreviewModel]=useState(null),[menuTab,setMenuTab]=useState(null),[search,setSearch]=useState('');useEffect(()=>{setDraft({name:r.name,tagline:r.tagline,template_id:r.template_id,accent:r.accent,currency:r.currency})},[r.id]);const categoryOptions=r.categories.map(c=>({value:c.id,label:(c.parent_id?'↳ ':'')+c.name}));const main=r.categories.filter(c=>!c.parent_id);const filesByType=t=>r.assets.filter(a=>a.type===t);const saveDish=async(v)=>{await mutate('save_dish',{...v,category_id:v.category_id||null});setEditDish(null);setNewDish({name:'',description:'',price:'',category_id:''})};const [importText,setImportText]=useState('');const [ocrRows,setOcrRows]=useState([]),[ocrBusy,setOcrBusy]=useState(false),[ocrMessage,setOcrMessage]=useState(''),[ocrRaw,setOcrRaw]=useState('');
const importMenuFile=async(files)=>{if(!files?.length)return;setOcrBusy(true);setOcrRows([]);setOcrMessage('Preparing OCR…');try{const result=await window.FoodARMenuOCR.extract(Array.from(files),setOcrMessage);setOcrRows(result.rows);setOcrRaw(result.raw);setOcrMessage(`Read ${result.pages} page(s); found ${result.rows.length} potential dishes. Review before saving.`);await upload('menu',files);}catch(e){setOcrMessage('OCR failed: '+e.message);flash(e.message,true)}finally{setOcrBusy(false)}};
const saveOcrRows=async()=>{setOcrBusy(true);let count=0;try{for(const row of ocrRows){if(!row.name.trim()||row.skip)continue;let cat=r.categories.find(c=>c.name.toLowerCase()===row.category.toLowerCase());if(!cat){const j=await mutate('save_category',{name:row.category,parent_id:null});cat=j.restaurant.categories.find(c=>c.name.toLowerCase()===row.category.toLowerCase());}await mutate('save_dish',{name:row.name,description:row.description,price:Number(row.price)||0,category_id:cat?.id||null});count++;}setOcrRows([]);setOcrMessage(`Saved ${count} reviewed dishes.`);setTab('dishes');}catch(e){setOcrMessage(`Saved ${count}; remaining rows must be checked. ${e.message}`)}finally{setOcrBusy(false)}};
const importRows=async()=>{const rows=importText.trim().split('\n').filter(Boolean);let success=0;for(const row of rows){const [name,price,description]=row.split('|').map(x=>x?.trim()||'');if(!name)continue;await mutate('save_dish',{name,price:Number(price)||0,description,category_id:null});success++}setImportText('');flash(`Imported ${success} dishes`)};return <div className="stack"><div className="section-head"><div><span className="eyebrow">RESTAURANT EDITOR</span><h1>{r.name}</h1><p className="muted">Design, edit, match and publish your interactive menu.</p></div><div className="row"><span className={'tag '+(!+r.published?'grey':'')}>{+r.published?'PUBLISHED':'DRAFT'}</span><button className="btn" onClick={()=>setPage('qr')}>QR & Publish <Icon name="arrow"/></button></div></div><div className="row" style={{overflowX:'auto',flexWrap:'nowrap',paddingBottom:5}}>{[['details','Brand & Template'],['categories','Categories'],['dishes','Dishes & Matching'],['assets','Bulk Assets'],['import','Menu Import']].map(([k,v])=><button key={k} className={'btn '+(tab===k?'':'secondary')} onClick={()=>setTab(k)}>{v}</button>)}</div><div className="workspace"><div className="stack">{tab==='details'&&<div className="panel stack"><h2>Restaurant identity</h2><div className="grid2"><Field label="Restaurant name"><input value={draft.name} onChange={e=>setDraft({...draft,name:e.target.value})}/></Field><Field label="Brand tagline"><input value={draft.tagline} onChange={e=>setDraft({...draft,tagline:e.target.value})}/></Field><Field label="Currency"><input value={draft.currency} onChange={e=>setDraft({...draft,currency:e.target.value})}/></Field><Field label="Accent color"><input type="color" style={{height:45,padding:4}} value={draft.accent||'#be9354'} onChange={e=>setDraft({...draft,accent:e.target.value})}/></Field></div><div className="grid2"><Upload label="Upload restaurant logo" accept="image/*" onFiles={f=>upload('logo',f)}/><Upload label="Upload custom background" accept="image/*" onFiles={f=>upload('background',f)}/></div><h2>Customer-facing template</h2><TemplatePicks value={draft.template_id} onChange={v=>setDraft({...draft,template_id:v})}/><button className="btn" onClick={()=>mutate('save_restaurant',draft)}>Save brand and template</button></div>}
{tab==='categories'&&<div className="panel stack"><h2>Menu hierarchy</h2><p className="muted">Use top-level categories such as Food Menu, Bar Menu, Chinese or Continental. Nest subcategories beneath them, or create only top-level category chips.</p><div className="forminline"><input placeholder="New category name" value={newCat.name} onChange={e=>setNewCat({...newCat,name:e.target.value})}/><select value={newCat.parent_id} onChange={e=>setNewCat({...newCat,parent_id:e.target.value})}><option value="">Top-level</option>{main.map(c=><option key={c.id} value={c.id}>Under {c.name}</option>)}</select><button className="btn" onClick={async()=>{if(!newCat.name.trim())return;await mutate('save_category',newCat);setNewCat({name:'',parent_id:''})}}>Add category</button></div><div className="stack">{r.categories.map(c=><div key={c.id} className="row between" style={{padding:12,border:'1px solid var(--line)',borderRadius:12,marginLeft:c.parent_id?25:0}}><div><b>{c.parent_id?'↳ ':''}{c.name}</b><small style={{display:'block'}}>{c.parent_id?'Subcategory':'Main category'} · {r.dishes.filter(d=>String(d.category_id)===String(c.id)).length} dishes</small></div><div className="row"><button className="btn secondary tiny" onClick={()=>{const name=prompt('Rename category',c.name);if(name?.trim())mutate('save_category',{id:c.id,name,parent_id:c.parent_id})}}>Rename</button><button className="btn danger tiny" onClick={()=>{if(confirm('Remove category? Dishes will become uncategorized.'))mutate('delete_category',{id:c.id})}}>Remove</button></div></div>)}</div></div>}
{tab==='dishes'&&<div className="panel stack"><div className="section-head"><h2>Dish list & matching</h2><button className="btn secondary tiny" onClick={()=>setTab('assets')}>Upload models + images</button></div><p className="muted">Assign any numbered 3D model and image to each dish. Names do not have to match filenames.</p><input placeholder="Search dishes..." value={search} onChange={e=>setSearch(e.target.value)}/><div className="table-wrap"><table className="data-table"><thead><tr><th>Dish</th><th>Price</th><th>Category</th><th>3D model #</th><th>Image #</th><th></th></tr></thead><tbody>{r.dishes.filter(d=>d.name.toLowerCase().includes(search.toLowerCase())).map(d=><tr key={d.id}><td><b>{d.name}</b><br/><small>{(d.description||'').slice(0,70)}</small></td><td>{r.currency} {d.price}</td><td><small>{r.categories.find(c=>String(c.id)===String(d.category_id))?.name||'Unassigned'}</small></td><td><select value={d.model_asset_id||''} onChange={e=>mutate('assign',{dish_id:d.id,type:'model',asset_id:e.target.value})}><option value="">None</option>{filesByType('model').map((a,i)=><option value={a.id} key={a.id}>#{filesByType('model').length-i} {a.original_name}</option>)}</select>{d.model_url&&<button className="btn secondary tiny" style={{marginTop:5}} onClick={()=>setPreviewModel({url:d.model_url,name:d.name})}>View 3D</button>}</td><td><select value={d.image_asset_id||''} onChange={e=>mutate('assign',{dish_id:d.id,type:'image',asset_id:e.target.value})}><option value="">None</option>{filesByType('image').map((a,i)=><option value={a.id} key={a.id}>#{filesByType('image').length-i} {a.original_name}</option>)}</select></td><td><button className="btn secondary tiny" onClick={()=>setEditDish({...d})}><Icon name="edit"/></button></td></tr>)}</tbody></table></div><h3>Add a dish</h3><div className="grid2"><Field label="Dish name"><input placeholder="Chicken Tikka" value={newDish.name} onChange={e=>setNewDish({...newDish,name:e.target.value})}/></Field><Field label="Price"><input type="number" min="0" value={newDish.price} onChange={e=>setNewDish({...newDish,price:e.target.value})}/></Field><Field label="Category"><select value={newDish.category_id} onChange={e=>setNewDish({...newDish,category_id:e.target.value})}><option value="">Unassigned</option>{categoryOptions.map(c=><option key={c.value} value={c.value}>{c.label}</option>)}</select></Field><Field label="Description"><textarea rows="2" value={newDish.description} onChange={e=>setNewDish({...newDish,description:e.target.value})}/></Field></div><button className="btn" onClick={()=>newDish.name.trim()&&saveDish(newDish)}>Add dish</button></div>}
{tab==='assets'&&<div className="panel stack"><h2>Bulk upload assets</h2><p className="muted">Upload all GLBs first, then images. Match them by number inside the Dishes tab. Only one 3D model is rendered at a time.</p><div className="grid2"><Upload label="Drop multiple GLB files" accept=".glb,.gltf" multiple onFiles={f=>upload('model',f)}/><Upload label="Drop multiple dish photos" accept="image/*" multiple onFiles={f=>upload('image',f)}/></div>{['model','image'].map(t=><div key={t}><h3>{t==='model'?'3D models':'Dish images'} ({filesByType(t).length})</h3><div className="asset-list">{filesByType(t).map((a,i)=><div className="asset-item" key={a.id}>{t==='image'?<img src={a.url}/>:<div className="dishpic placeholder" style={{width:80,margin:'0 auto'}}>⬡</div>}<span className="tag grey">#{filesByType(t).length-i}</span><b>{a.original_name}</b><small>{(a.size_bytes/1024/1024).toFixed(1)} MB</small><div className="row" style={{marginTop:8}}>{t==='model'&&<button className="btn secondary tiny" onClick={()=>setPreviewModel({url:a.url,name:a.original_name})}>Inspect</button>}<a href={a.url} download className="btn secondary tiny" target="_blank" rel="noreferrer">Download</a></div></div>)}</div></div>)}</div>}
{tab==='import'&&<div className="panel stack"><h2>Automatic menu image & PDF extraction</h2><p className="muted">Upload JPG, PNG, or PDF menu pages. OCR runs in this browser (the first run needs internet to load OCR libraries). Review names, prices, descriptions and categories before committing to MySQL. Multiple prices can require manual verification.</p><Upload label="Select menu images / PDFs and extract dishes" accept=".pdf,image/jpeg,image/png" multiple onFiles={importMenuFile}/>{ocrBusy&&<div className="row"><div className="spinner"/><b>{ocrMessage}</b></div>}{!ocrBusy&&ocrMessage&&<p className="muted">{ocrMessage}</p>}{ocrRows.length>0&&<><h3>Extracted dishes — review before saving ({ocrRows.filter(x=>!x.skip).length})</h3><div className="table-wrap"><table className="data-table"><thead><tr><th>Keep</th><th>Dish name</th><th>Category</th><th>Price (Rs.)</th><th>Other sizes</th><th>Description</th></tr></thead><tbody>{ocrRows.map((row,i)=><tr key={i}><td><input type="checkbox" checked={!row.skip} onChange={e=>setOcrRows(v=>v.map((x,j)=>i===j?{...x,skip:!e.target.checked}:x))}/></td><td><input style={{minWidth:190}} value={row.name} onChange={e=>setOcrRows(v=>v.map((x,j)=>i===j?{...x,name:e.target.value}:x))}/></td><td><input style={{minWidth:110}} value={row.category} onChange={e=>setOcrRows(v=>v.map((x,j)=>i===j?{...x,category:e.target.value}:x))}/></td><td><input type="number" style={{width:105}} value={row.price} onChange={e=>setOcrRows(v=>v.map((x,j)=>i===j?{...x,price:e.target.value}:x))}/></td><td><small>{row.price_variants?Object.entries(row.price_variants).map(([k,v])=>`${k}: ${v}`).join(' / '):'—'}</small></td><td><textarea rows="2" style={{minWidth:280}} value={row.description} onChange={e=>setOcrRows(v=>v.map((x,j)=>i===j?{...x,description:e.target.value}:x))}/></td></tr>)}</tbody></table></div><p className="muted">Note: the database currently has one price per dish. Where the menu has Half/Full or Regular/Large prices, only the first price is saved until a price-variant table is implemented. Do not publish those prices without reviewing.</p><button className="btn" disabled={ocrBusy} onClick={saveOcrRows}>Save reviewed dishes to database</button></>}{ocrRaw&&<details><summary>View raw OCR text for troubleshooting</summary><textarea rows="12" readOnly value={ocrRaw}/></details>}{filesByType('menu').map(a=><a key={a.id} href={a.url} target="_blank" rel="noreferrer">↗ Uploaded: {a.original_name}</a>)}<div className="divider"/><h3>Manual import from prepared text</h3><p className="muted">One dish per line: <code>Name | Price | Description</code></p><textarea rows="5" value={importText} onChange={e=>setImportText(e.target.value)}/><button className="btn secondary" disabled={!importText.trim()} onClick={importRows}>Import pasted dishes</button></div>}
</div><div className="stack" style={{position:'sticky',top:18}}><div className="panel"><div className="section-head"><h3>Live customer preview</h3><span className="tag">{templates.find(t=>t.id===draft.template_id)?.style}</span></div><Preview r={{...r,...draft}} onAR={d=>{if(d.model_url)setPreviewModel({url:d.model_url,name:d.name});else flash('Assign a 3D model to this dish first')}}/><p className="muted" style={{textAlign:'center',marginTop:14,fontSize:11}}>Visual preview updates as you edit. Save brand changes to publish them.</p></div></div></div>{editDish&&<div className="overlay"><div className="modal stack"><div className="section-head"><h2>Edit dish</h2><button className="btn secondary tiny" onClick={()=>setEditDish(null)}>Close</button></div><div className="grid2"><Field label="Dish name"><input value={editDish.name} onChange={e=>setEditDish({...editDish,name:e.target.value})}/></Field><Field label="Price"><input type="number" min="0" value={editDish.price} onChange={e=>setEditDish({...editDish,price:e.target.value})}/></Field><Field label="Category"><select value={editDish.category_id||''} onChange={e=>setEditDish({...editDish,category_id:e.target.value})}><option value="">Unassigned</option>{categoryOptions.map(c=><option key={c.value} value={c.value}>{c.label}</option>)}</select></Field><Field label="Description"><textarea rows="3" value={editDish.description||''} onChange={e=>setEditDish({...editDish,description:e.target.value})}/></Field></div><div className="row between"><button className="btn danger" onClick={()=>{if(confirm('Delete this dish?')){mutate('delete_dish',{id:editDish.id});setEditDish(null)}}}>Delete dish</button><button className="btn" onClick={()=>saveDish(editDish)}>Save changes</button></div></div></div>}{previewModel&&<ModelModal model={previewModel} onClose={()=>setPreviewModel(null)} onReplace={file=>{upload('model',[file]);setPreviewModel(null);flash('Replacement uploaded as a new version candidate. Assign it to the dish from matching table.')}}/>}</div>}
function Upload({label,accept,multiple,onFiles}){const input=useRef(null);return <div className="upload-zone" onClick={()=>input.current?.click()} onDragOver={e=>e.preventDefault()} onDrop={e=>{e.preventDefault();onFiles(e.dataTransfer.files)}}><Icon name="upload" size={27}/><b style={{display:'block',marginTop:8}}>{label}</b><small>Click or drag files here</small><input ref={input} type="file" accept={accept} multiple={!!multiple} onChange={e=>{onFiles(e.target.files);e.target.value=''}}/></div>}
function Preview({r,onAR,onDetails}){const[top,setTop]=useState(''),[cat,setCat]=useState('');const roots=r.categories.filter(c=>!c.parent_id),nested=r.categories.filter(c=>c.parent_id),hasGroups=nested.length>0;const selectedRoot=roots.find(c=>String(c.id)===String(top))||roots[0];const chips=hasGroups? r.categories.filter(c=>String(c.parent_id)===String(selectedRoot?.id)):roots;const filtered=r.dishes.filter(d=>{if(!r.categories.length)return true;if(cat)return String(d.category_id)===String(cat);if(hasGroups){const childIds=chips.map(c=>String(c.id));return childIds.includes(String(d.category_id))||String(d.category_id)===String(selectedRoot?.id)}return true});useEffect(()=>{setCat('')},[top,r.id]);return <div className="preview-frame"><div className={'menu-preview '+r.template_id} style={{'--accent':r.accent||undefined}}>{r.background_url&&<div className="menu-background" style={{backgroundImage:`url(${r.background_url})`}}/>}<div className="menu-body"><header className="menu-header">{r.logo_url?<img src={r.logo_url}/>:<span style={{display:'grid',placeItems:'center',fontSize:30,width:44,height:44,borderRadius:44,background:'#ffffff55',color:'var(--accent)'}}>✳</span>}<div style={{minWidth:0,flex:1}}><h2>{r.name}</h2><p>{r.tagline||'RESTAURANT & LOUNGE'}</p></div><Icon name="search" size={23}/></header>{hasGroups&&<div className="segment">{roots.map(c=><button key={c.id} className={String(selectedRoot?.id)===String(c.id)?'selected':''} onClick={()=>setTop(String(c.id))}>{c.name}</button>)}</div>}{chips.length>0&&<div className="cat-chips">{!hasGroups&&<button className={!cat?'selected':''} onClick={()=>setCat('')}>ALL</button>}{chips.map(c=><button key={c.id} className={String(cat)===String(c.id)?'selected':''} onClick={()=>setCat(String(c.id)===String(cat)?'':String(c.id))}>{c.name}</button>)}</div>}<div className="dishgrid">{filtered.map(d=><div className="dishcard" key={d.id}>{d.image_url?<img className="dishpic" src={d.image_url} loading="lazy"/>:<div className="dishpic placeholder">🍽</div>}<h4 title={d.name}>{d.name}</h4><div className="price">{r.currency||'Rs.'} {d.price}</div>{d.model_url&&<button className="ar" onClick={()=>onAR?.(d)}>⬡ AR VIEW</button>}<button onClick={()=>onDetails?onDetails(d):alert(`${d.name}\n${r.currency} ${d.price}\n${d.description||''}`)}>DETAILS</button></div>)}</div>{!filtered.length&&<div style={{textAlign:'center',padding:'80px 0'}}><p>No dishes in this category</p><small>Add a dish and assign its category</small></div>}<div className="menubottom"><b>▦ MENU</b><b>％ DEALS</b></div></div></div></div>}
function Publish({r,mutate,onOpen}){const[ready,setReady]=useState(false),canvas=useRef(null);useEffect(()=>{if(r.published&&canvas.current&&window.QRCode){QRCode.toCanvas(canvas.current,r.menu_url,{width:260,margin:2,color:{dark:'#21362b',light:'#ffffff'}},()=>setReady(true))}},[r.menu_url,r.published]);return <div className="stack"><div className="section-head"><div><span className="eyebrow">YOUR RESTAURANT IS ALMOST READY</span><h1>Publish your QR menu</h1><p className="muted">A single printable QR code opens your customer's selected restaurant menu.</p></div><span className={'tag '+(!+r.published?'grey':'')}>{+r.published?'LIVE':'NOT PUBLISHED'}</span></div><div className="qr-card"><div style={{fontSize:32,color:'var(--green)'}}>▦</div><h2>{r.name}</h2><p className="muted">Scan to explore the menu</p>{+r.published?<><canvas ref={canvas}/><div style={{wordBreak:'break-all',fontSize:12,marginBottom:20}}>{r.menu_url}</div><div className="row no-print" style={{justifyContent:'center'}}><button className="btn" onClick={()=>window.print()}><Icon name="print"/> Print QR</button><button className="btn secondary" onClick={onOpen}>Open menu ↗</button></div></>:<><p>This menu is private until you publish it.</p><button className="btn" onClick={()=>mutate('publish',{published:1})}>Publish restaurant menu</button></>}{+r.published&&<button className="btn danger tiny no-print" style={{marginTop:22}} onClick={()=>mutate('publish',{published:0})}>Unpublish menu</button>}</div></div>}
function UnityConnectionTest(){
 const [events,setEvents]=useState([]),[enabled,setEnabled]=useState(false),[refreshKey,setRefreshKey]=useState(0);
 const iframe=useRef(null);
 useEffect(()=>{function onMessage(e){if(e.origin!==location.origin||e.source!==iframe.current?.contentWindow||e.data?.source!=='foodar-unity')return;const d=e.data;setEvents(xs=>[{time:new Date().toLocaleTimeString(),status:d.status,message:d.message||''},...xs].slice(0,30))}window.addEventListener('message',onMessage);return()=>window.removeEventListener('message',onMessage)},[refreshKey]);
 const post=(action)=>iframe.current?.contentWindow?.postMessage({source:'foodar-react',action},location.origin);
 return <div className="stack"><div className="section-head"><div><span className="eyebrow">SUPER ADMIN / DIAGNOSTICS</span><h1>Unity Connection Test</h1><p className="muted">Loads the exact Unity WebGL build shipped with this project. This checks iframe, tracker, WebGL initialization and camera permissions; it does not confirm dish loading.</p></div><a className="btn secondary" target="_blank" rel="noreferrer" href="/unity/index.html">Open Unity screen directly ↗</a></div><div className="panel stack"><div className="row" style={{gap:10,flexWrap:'wrap'}}><button className="btn" onClick={()=>{setEnabled(true);setEvents([])}}>Load Unity Screen</button><button className="btn secondary" disabled={!enabled} onClick={()=>post('start')}>Allow Access / Start Unity</button><button className="btn secondary" disabled={!enabled} onClick={()=>{setEnabled(true);setRefreshKey(x=>x+1);setEvents([])}}>Reload Unity</button></div><p className="muted" style={{fontSize:12}}>On phones, tap the original ALLOW ACCESS button inside the Unity frame if the browser requires a direct gesture. Camera access requires HTTPS (or localhost), and WebGL startup can be slow on first load.</p>{enabled?<div style={{height:'min(68vh,670px)',minHeight:400,position:'relative',borderRadius:14,overflow:'hidden',background:'#101820'}}><iframe key={refreshKey} ref={iframe} title="Unity AR connection test" src="/unity/index.html" allow="camera; accelerometer; gyroscope" style={{position:'absolute',inset:0,width:'100%',height:'100%',border:0}}/></div>:<div style={{minHeight:260,background:'#151d25',borderRadius:14,color:'#ddd',display:'grid',placeItems:'center',textAlign:'center'}}><div><div style={{fontSize:36}}>⬡</div><h3>Unity is not loaded yet</h3><p>Click Load Unity Screen to begin the test.</p></div></div>}<h3>Connection events</h3><div style={{background:'#111b23',color:'#d5eadd',padding:15,borderRadius:10,fontFamily:'monospace',fontSize:12,maxHeight:180,overflow:'auto'}}>{events.length?events.map((e,i)=><div key={i}>{e.time} · {e.status}{e.message?' · '+e.message:''}</div>):'Waiting for connection events…'}</div><p className="muted" style={{fontSize:12}}>Expected milestones: bridge_ready and engine_ready. engine_ready means the Unity WebGL engine started, not that a model was successfully spawned. For that, the compiled C# loader must support the bridge callback.</p></div></div>;
}
function Admin({users,restaurants,onOpen}){const[selected,setSelected]=useState('');const owners=users.filter(u=>u.role==='owner');const current=restaurants.filter(r=>!selected||String(r.user_id)===String(selected));return <div className="stack"><div className="section-head"><div><span className="eyebrow">PLATFORM MANAGEMENT</span><h1>Super admin overview</h1><p className="muted">Inspect every owner, restaurant, dish and uploaded asset.</p><p><a className="btn secondary tiny" href="?unitytest=1">◎ Open Unity Connection Test ↗</a></p></div><span className="tag">ADMIN ACCESS</span></div><div className="stats"><div className="panel stat"><small>Signed-up accounts</small><strong>{users.length}</strong></div><div className="panel stat"><small>Restaurants</small><strong>{restaurants.length}</strong></div><div className="panel stat"><small>Published</small><strong>{restaurants.filter(r=>+r.published).length}</strong></div></div><div className="grid2"><div className="panel"><h2>Registered users</h2><div className="stack">{owners.map(u=><button key={u.id} onClick={()=>setSelected(String(selected)===String(u.id)?'':String(u.id))} className={'nav '+(String(selected)===String(u.id)?'active':'')}><div style={{flex:1,textAlign:'left'}}><b>{u.name}</b><div className="muted" style={{fontSize:11}}>{u.email}</div></div><span className="tag grey">{u.restaurant_count} restaurants</span></button>)}</div></div><div className="panel"><div className="section-head"><h2>{selected?'Selected owner’s restaurants':'All restaurants'}</h2>{selected&&<button className="btn secondary tiny" onClick={()=>setSelected('')}>Clear filter</button>}</div><div className="stack">{current.map(r=><div key={r.id} className="row between" style={{borderBottom:'1px solid var(--line)',paddingBottom:12}}><div><b>{r.name}</b><div className="muted" style={{fontSize:12}}>{r.owner_name} · {r.owner_email}</div></div><button className="btn tiny" onClick={()=>onOpen(r.id)}>Inspect / Edit</button></div>)}</div></div></div></div>}
function ModelModal({model,onClose,onReplace}){const[error,setError]=useState('');useEffect(()=>{if(document.querySelector('script[data-modelviewer]'))return;let s=document.createElement('script');s.type='module';s.src='https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js';s.dataset.modelviewer='true';document.head.appendChild(s)},[]);return <div className="overlay"><div className="modal stack"><div className="section-head"><div><h2>{model.name}</h2><small>One model at a time · Preview in browser</small></div><button className="btn secondary tiny" onClick={onClose}>Close ×</button></div><div className="viewer"><model-viewer src={model.url} camera-controls auto-rotate shadow-intensity="1" alt={model.name} onError={()=>setError('This GLB could not be rendered.')}></model-viewer></div>{error&&<Notice error message={error}/>}<div className="row between"><a className="btn secondary" href={model.url} download target="_blank" rel="noreferrer">↓ Download model</a><label className="btn secondary">⇧ Upload edited version <input type="file" accept=".glb" style={{display:'none'}} onChange={e=>{if(e.target.files[0])onReplace(e.target.files[0])}}/></label></div><p className="muted" style={{fontSize:11}}>Edited uploads are safely stored as new assets; reassign a dish to the corrected model. The existing file is not deleted without an explicit replacement workflow.</p></div></div>}
function CustomerMenu({restaurant:r,onAR,arDish}){const[detail,setDetail]=useState(null);return <div style={{minHeight:'100vh',background:'#e7e8e4',padding:'0 0 40px'}}><div style={{maxWidth:690,margin:'auto'}}><Preview r={r} onAR={onAR} onDetails={setDetail}/></div>{detail&&<div className="overlay"><div className="modal"><button className="btn secondary tiny" style={{float:'right'}} onClick={()=>setDetail(null)}>Close</button>{detail.image_url&&<img src={detail.image_url} style={{width:'100%',height:260,objectFit:'cover',borderRadius:12,marginTop:15}}/>}<h2 style={{marginTop:20}}>{detail.name}</h2><b>{r.currency} {detail.price}</b><p>{detail.description}</p>{detail.model_url&&<button className="btn" onClick={()=>{setDetail(null);onAR(detail)}}>Open AR view</button>}</div></div>}{arDish&&<ARViewer restaurant={r} initialDish={arDish} onClose={()=>onAR(null)}/>}</div>}
function ARViewer({restaurant:r,initialDish,onClose}){
 const [phase,setPhase]=useState('permission'),[dish,setDish]=useState(initialDish),[message,setMessage]=useState('Preparing AR…'),[details,setDetails]=useState(false);
 const frame=useRef(null),engineReady=useRef(false),pending=useRef(initialDish);
 const available=r.dishes.filter(d=>d.model_url);
 const listUrl=`${location.origin}/api/model-list.php?restaurant=${encodeURIComponent(r.slug)}`;
 function send(action,extra={}){frame.current?.contentWindow?.postMessage({source:'foodar-react',action,...extra},location.origin)}
 function transmit(d){pending.current=d;setDish(d);setPhase('loading');setMessage('Loading selected dish…');send('dish',{payload:{dishId:String(d.id),modelName:d.name,name:d.name,modelUrl:d.model_url,initialScale:1}})}
 useEffect(()=>{
  function receive(e){if(e.origin!==location.origin||e.source!==frame.current?.contentWindow||e.data?.source!=='foodar-unity')return;
   const x=e.data;
   if(x.status==='bridge_ready'){send('list',{url:listUrl});}
   if(x.status==='engine_ready'){engineReady.current=true;send('list',{url:listUrl});transmit(pending.current);}
   if(x.status==='loaded'||x.status==='dish_loaded'){setPhase('ready');setMessage('');}
   if(x.status==='error'||x.status==='dish_error'){setPhase('failed');setMessage(x.message||'Unity reported an error');}
  }
  window.addEventListener('message',receive);return()=>window.removeEventListener('message',receive);
 },[listUrl]);
 function start(){setPhase('loading');setMessage('Starting camera and Unity…');send('start')}
 function changeDish(d){if(d.id===dish.id)return;send('close');setDish(d);pending.current=d;setPhase('loading');setMessage('Switching models and resetting origin…');window.setTimeout(()=>{if(engineReady.current)transmit(d)},750)}
 function exit(){send('close');onClose()}
 return <div className="arpage"><div className="arhead"><button className="btn secondary tiny" onClick={exit}>← Back to menu</button><b>{dish.name}</b><button className="btn secondary tiny" onClick={()=>setDetails(!details)}>Details</button></div><div className="arstage">
  <iframe ref={frame} src="/unity/index.html" title="FoodAR Unity WebGL" allow="camera; accelerometer; gyroscope" style={{border:0,width:'100%',height:'100%',position:'absolute',inset:0}}/>
  {phase!=='ready'&&<div className="arloading" style={{pointerEvents:phase==='permission'?'auto':'none'}}>{phase==='permission'?<div><div style={{fontSize:48,marginBottom:15}}>◎</div><h2>Enable AR camera</h2><p>Camera and motion permissions are needed to display dishes on your table.</p><button className="btn" onClick={start}>ALLOW ACCESS & START AR</button></div>:phase==='failed'?<div><h2>AR requires attention</h2><p>{message}</p><button className="btn secondary" onClick={exit}>Back to menu</button></div>:<div><div className="spinner"/><h2>{message}</h2><p>Unity is loading in the background. Overlay closes only after a real dish-loaded event.</p></div>}</div>}
  <div className="artray">{available.map(d=><button key={d.id} onClick={()=>changeDish(d)} style={{outline:d.id===dish.id?'2px solid #e0bd7d':'none'}}>{d.image_url&&<img src={d.image_url}/>}<b>{d.name}</b></button>)}</div>
  {details&&<div style={{position:'absolute',left:15,bottom:18,maxWidth:250,background:'#111c',borderRadius:15,padding:18,zIndex:5}}><h3>{dish.name}</h3><p>{dish.description}</p><b>{r.currency} {dish.price}</b></div>}
 </div></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);