// Gestor Food Demo — rebuilt to match actual Comandas mobile screenshots
const GestorDemo = () => {
  const [screen, setScreen] = React.useState('login');
  const [tab, setTab] = React.useState('open');
  const [selectedComanda, setSelectedComanda] = React.useState(null);

  const comandas = [
    { id:'01', apelido:'Mesa 3 — João', pedidos:'9 de 12', valor:'R$ 187,50', lastOrder:'Hoje às 14:53', open:true },
    { id:'02', apelido:'Mesa 7 — Família Lima', pedidos:'15 de 15', valor:'R$ 342,00', lastOrder:'Hoje às 13:21', open:true },
    { id:'03', apelido:'Mesa 1 — Rodrigo', pedidos:'4 de 4', valor:'R$ 96,00', lastOrder:'Hoje às 14:10', open:true },
    { id:'04', apelido:'Mesa 5 — Aniversário', pedidos:'22 de 22', valor:'R$ 890,00', lastOrder:'Hoje às 12:05', open:true },
    { id:'05', apelido:'Mesa 2 — Casal Santos', pedidos:'6 de 6', valor:'R$ 134,90', lastOrder:'Hoje às 11:48', open:false },
    { id:'06', apelido:'Mesa 9 — Executivo', pedidos:'3 de 3', valor:'R$ 78,00', lastOrder:'Hoje às 11:20', open:false },
    { id:'07', apelido:'Mesa 4 — Grupo Almoço', pedidos:'18 de 18', valor:'R$ 524,00', lastOrder:'Hoje às 10:55', open:false },
    { id:'08', apelido:'Mesa 11 — Sr. Carlos', pedidos:'8 de 8', valor:'R$ 215,00', lastOrder:'Hoje às 14:30', open:true },
  ];

  const openC = comandas.filter(c=>c.open);
  const closedC = comandas.filter(c=>!c.open);
  const displayed = tab==='open'?openC:closedC;

  const s = {
    root: { width:'100%', height:'100%', fontFamily:'Inter,sans-serif', background:'#F2F3F7', display:'flex', alignItems:'center', justifyContent:'center', overflow:'hidden' },
    phone: { width:375, height:'100%', maxHeight:700, background:'#F2F3F7', display:'flex', flexDirection:'column', overflow:'hidden', borderRadius:0, position:'relative' },
    // LOGIN
    loginBg: { flex:1, background:'#F5F5F0', display:'flex', flexDirection:'column', padding:'0 28px 40px', position:'relative', overflow:'hidden' },
    blob1: { position:'absolute', top:-60, right:-60, width:200, height:200, borderRadius:'50%', background:'#1a1a2e', pointerEvents:'none' },
    blob2: { position:'absolute', top:40, right:20, width:80, height:80, borderRadius:'50%', background:'#FFB020', opacity:0.85, pointerEvents:'none' },
    logoRow: { marginTop:32, marginBottom:4, display:'flex', alignItems:'center', gap:8 },
    logoBox: { width:36, height:36, borderRadius:8, background:'#FF9A1F', display:'flex', alignItems:'center', justifyContent:'center', fontSize:18 },
    logoText: { fontSize:18, fontWeight:800, color:'#1a1a1a', letterSpacing:-0.5 },
    logoGold: { color:'#FF9A1F' },
    tagline: { fontSize:22, fontWeight:800, color:'#1a1a1a', lineHeight:1.25, marginBottom:4, marginTop:80 },
    taglineGold: { color:'#FF9A1F', fontStyle:'italic' },
    loginForm: { marginTop:28 },
    label: { fontSize:13, fontWeight:600, color:'#1a1a1a', marginBottom:6, display:'block' },
    input: { width:'100%', padding:'14px 16px', border:'1.5px solid #e2e2e2', borderRadius:12, fontSize:14, color:'#333', outline:'none', boxSizing:'border-box', fontFamily:'Inter,sans-serif', marginBottom:14, background:'#fff' },
    submitBtn: { width:'100%', padding:'15px', background:'#FFB020', border:'none', borderRadius:12, color:'#fff', fontWeight:700, fontSize:15, cursor:'pointer', fontFamily:'Inter,sans-serif', display:'flex', alignItems:'center', justifyContent:'center', gap:8 },
    // COMANDAS
    header: { background:'#F2F3F7', padding:'16px 20px 0', flexShrink:0 },
    headerTop: { display:'flex', alignItems:'center', gap:12, marginBottom:2 },
    backBtn: { width:32, height:32, borderRadius:'50%', border:'none', background:'transparent', fontSize:18, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', color:'#333' },
    headerTitle: { fontSize:20, fontWeight:800, color:'#1a1a1a', flex:1 },
    iconBtn: { width:36, height:36, borderRadius:10, background:'#fff', border:'1px solid #e8e8ee', display:'flex', alignItems:'center', justifyContent:'center', fontSize:14, cursor:'pointer', color:'#888' },
    headerSub: { fontSize:11, color:'#aaa', marginLeft:44, marginBottom:12 },
    tabs: { display:'flex', gap:10, padding:'0 20px 14px' },
    tab: (a) => ({ flex:1, padding:'10px 8px', borderRadius:12, border:'none', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', gap:8, fontFamily:'Inter,sans-serif', fontWeight:700, fontSize:13,
      background: a ? '#fff' : '#fff',
      boxShadow: a ? '0 2px 8px rgba(0,0,0,0.1)' : 'none',
      color: a ? '#1a1a1a' : '#bbb',
      border: a ? 'none' : '1px solid #e8e8ee',
    }),
    tabBadge: (a) => ({ width:32, height:32, borderRadius:'50%', background: a ? '#FFB020' : '#e8e8ee', display:'flex', alignItems:'center', justifyContent:'center', fontSize:14, fontWeight:800, color: a ? '#fff' : '#aaa' }),
    list: { flex:1, overflowY:'auto', padding:'0 20px 20px' },
    card: (closed) => ({ background:'#fff', borderRadius:16, padding:'14px 16px', marginBottom:10, display:'flex', alignItems:'center', gap:12, boxShadow:'0 1px 4px rgba(0,0,0,0.06)', position:'relative', cursor:'pointer' }),
    numCircle: (closed) => ({ width:48, height:48, borderRadius:16, background: closed ? '#e8e8ee' : '#FFB020', display:'flex', alignItems:'center', justifyContent:'center', fontSize:18, fontWeight:800, color: closed ? '#aaa' : '#fff', flexShrink:0 }),
    cardInfo: { flex:1, minWidth:0 },
    cardName: { fontSize:14, fontWeight:700, color:'#1a1a1a', marginBottom:2 },
    lastOrder: { fontSize:10, color:'#aaa', marginBottom:4 },
    cardMeta: { display:'flex', gap:16 },
    metaItem: { display:'flex', flexDirection:'column' },
    metaLabel: { fontSize:9, color:'#aaa', marginBottom:1 },
    metaVal: { fontSize:14, fontWeight:700, color:'#1a1a1a' },
    arrowBtn: { width:36, height:36, borderRadius:'50%', background:'#f5f5f5', display:'flex', alignItems:'center', justifyContent:'center', fontSize:18, color:'#333', flexShrink:0 },
    closedBadge: { position:'absolute', top:10, left:62, background:'#f5f5f5', border:'1px solid #e0e0e0', borderRadius:6, padding:'2px 7px', fontSize:9, color:'#aaa', fontWeight:600, display:'flex', alignItems:'center', gap:4 },
    emptyIcon: { flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', color:'#ddd', paddingBottom:60 },
    // DETAIL
    detailHeader: { background:'#fff', padding:'16px 20px', display:'flex', alignItems:'center', gap:12, borderBottom:'1px solid #f0f0f0', flexShrink:0 },
    detailTitle: { flex:1 },
    detailBody: { flex:1, overflowY:'auto', padding:'0 20px 20px' },
    itemCard: (sel) => ({ background: sel ? '#fff' : '#fff', border: `1.5px solid ${sel?'#FFB020':'#f0f0f0'}`, borderRadius:14, padding:'12px 14px', marginBottom:8, display:'flex', alignItems:'center', gap:12, cursor:'pointer' }),
    itemImg: { width:52, height:52, borderRadius:10, background:'#f0ece0', flexShrink:0, display:'flex', alignItems:'center', justifyContent:'center', fontSize:20 },
    itemInfo: { flex:1 },
    itemName: { fontSize:13, fontWeight:600, color:'#1a1a1a', marginBottom:4, lineHeight:1.3 },
    itemPrice: { fontSize:11, color:'#888', display:'flex', gap:8 },
    checkCircle: (sel) => ({ width:28, height:28, borderRadius:'50%', background: sel ? '#FFB020' : '#f0f0f0', display:'flex', alignItems:'center', justifyContent:'center', fontSize:14, color: sel ? '#fff' : '#ccc', flexShrink:0 }),
    detailFooter: { padding:'16px 20px', background:'#fff', borderTop:'1px solid #f0f0f0', flexShrink:0 },
    footerRow: { display:'flex', justifyContent:'space-between', fontSize:12, color:'#888', marginBottom:10 },
    continueBtn: { width:'100%', padding:'15px', background:'#FFB020', border:'none', borderRadius:12, color:'#fff', fontWeight:700, fontSize:14, cursor:'pointer', fontFamily:'Inter,sans-serif' },
  };

  const items = [
    { name:'Parmegiana de frango a milanesa com arroz e fritas', sub:'R$9.999,99 + R$9.999,99 = R$9.999,99', emoji:'🍗', sel:false },
    { name:'Parmegiana de frango a milanesa com arroz e fritas', sub:'R$9.999,99 + R$9.999,99 = R$9.999,99', emoji:'', sel:false },
    { name:'Parmegiana de frango a milanesa com arroz e fritas', sub:'R$9.999,99 + R$9.999,99 = R$9.999,99', emoji:'', sel:false },
    { name:'Parmegiana de frango a milanesa com arroz e fritas', sub:'R$9.999,99 + R$9.999,99 = R$9.999,99', emoji:'🍗', sel:true },
    { name:'Parmegiana de frango a milanesa com arroz e fritas', sub:'R$9.999,99 + R$9.999,99 = R$9.999,99', emoji:'🍗', sel:false },
    { name:'Parmegiana de frango a milanesa com arroz e fritas', sub:'R$9.999,99 + R$9.999,99 = R$9.999,99', emoji:'🍗', sel:false },
  ];

  return (
    <div style={s.root}>
      <div style={s.phone}>
        {screen==='login' && (
          <div style={s.loginBg}>
            <div style={s.blob1}></div>
            <div style={s.blob2}></div>
            <div style={s.logoRow}>
              <div style={s.logoBox}>⚙</div>
              <div style={s.logoText}>gestor <span style={s.logoGold}>food</span></div>
            </div>
            <div style={{flex:1}}></div>
            <div style={s.tagline}>
              Seja bem-vindo a sua<br/>plataforma de gestão<br/><span style={s.taglineGold}>favorita</span>
            </div>
            <div style={s.loginForm}>
              <label style={s.label}>Insira seu ID</label>
              <input style={s.input} placeholder="Insira aqui o seu ID"/>
              <label style={s.label}>Insira sua senha</label>
              <div style={{position:'relative',marginBottom:14}}>
                <input type="password" style={{...s.input,marginBottom:0}} placeholder="Insira sua senha"/>
                <span style={{position:'absolute',right:14,top:'50%',transform:'translateY(-50%)',fontSize:16,color:'#bbb'}}>👁</span>
              </div>
              <button style={s.submitBtn} onClick={()=>setScreen('list')}>Entrar</button>
            </div>
          </div>
        )}

        {screen==='list' && (
          <>
            <div style={s.header}>
              <div style={s.headerTop}>
                <button style={s.backBtn} onClick={()=>setScreen('login')}>←</button>
                <div style={s.headerTitle}>Comandas abertas</div>
                {['↺','⟳','≡'].map(i=><div key={i} style={s.iconBtn}>{i}</div>)}
              </div>
              <div style={s.headerSub}>Último atualização: Hoje às 14:47</div>
            </div>
            <div style={s.tabs}>
              <button style={s.tab(tab==='open')} onClick={()=>setTab('open')}>
                <div style={s.tabBadge(tab==='open')}>{openC.length.toString().padStart(2,'0')}</div>
                Comandas abertas
              </button>
              <button style={s.tab(tab==='closed')} onClick={()=>setTab('closed')}>
                <div style={s.tabBadge(tab==='closed')}>{closedC.length.toString().padStart(2,'0')}</div>
                Comandas fechadas
              </button>
            </div>
            <div style={s.list}>
              {displayed.map(c=>(
                <div key={c.id} style={s.card(!c.open)} onClick={()=>setSelectedComanda(c)&&setScreen('detail')}>
                  <div style={s.numCircle(!c.open)}>{c.id}</div>
                  <div style={s.cardInfo}>
                    {!c.open&&<div style={s.closedBadge}>🔒 Comanda fechada!</div>}
                    <div style={s.cardName}>{c.apelido}</div>
                    <div style={s.lastOrder}>Último pedido: {c.lastOrder}</div>
                    <div style={s.cardMeta}>
                      <div style={s.metaItem}>
                        <div style={s.metaLabel}>Pedidos</div>
                        <div style={s.metaVal}>{c.pedidos}</div>
                      </div>
                      <div style={s.metaItem}>
                        <div style={s.metaLabel}>Valor a receber</div>
                        <div style={s.metaVal}>{c.valor}</div>
                      </div>
                    </div>
                  </div>
                  <div style={s.arrowBtn}>→</div>
                </div>
              ))}
              {displayed.length===0&&(
                <div style={s.emptyIcon}>
                  <div style={{fontSize:60,marginBottom:8}}>🔔</div>
                  <div style={{fontSize:13,color:'#ccc'}}>Nenhuma comanda</div>
                </div>
              )}
            </div>
          </>
        )}

        {screen==='detail' && selectedComanda && (
          <>
            <div style={s.detailHeader}>
              <button style={{...s.backBtn,background:'transparent',border:'none'}} onClick={()=>setScreen('list')}>←</button>
              <div style={s.detailTitle}>
                <div style={{fontSize:11,color:'#aaa'}}>Receber itens</div>
                <div style={{fontSize:16,fontWeight:800,color:'#1a1a1a'}}>Comanda: {selectedComanda.id}</div>
              </div>
              <div style={{display:'flex',alignItems:'center',gap:6,background:'#FFB020',borderRadius:20,padding:'6px 12px'}}>
                <span style={{fontSize:11,fontWeight:700,color:'#fff'}}>1 item selecionado</span>
                <div style={{width:22,height:22,borderRadius:'50%',background:'rgba(0,0,0,0.2)',display:'flex',alignItems:'center',justifyContent:'center',color:'#fff',fontWeight:700,fontSize:14}}>−</div>
              </div>
            </div>
            <div style={s.detailBody}>
              {items.map((item,i)=>(
                <div key={i} style={s.itemCard(item.sel)}>
                  <div style={s.itemImg}>{item.emoji||'🍽'}</div>
                  <div style={s.itemInfo}>
                    <div style={s.itemName}>{item.name}</div>
                    <div style={s.itemPrice}>
                      <span>R$9.999,99</span><span style={{color:'#ccc'}}>+</span>
                      <span>R$9.999,99</span><span style={{color:'#ccc'}}>=</span>
                      <span style={{fontWeight:700,color:'#1a1a1a'}}>R$9.999,99</span>
                    </div>
                    <div style={{fontSize:9,color:'#bbb',marginTop:2}}>Subtotal &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Taxa &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Total</div>
                  </div>
                  <div style={s.checkCircle(item.sel)}>{item.sel?'✓':''}</div>
                </div>
              ))}
            </div>
            <div style={s.detailFooter}>
              <div style={s.footerRow}>
                <span>R$9.999,99</span><span>+</span><span>R$9.999,99</span><span>=</span><span style={{fontWeight:700,color:'#1a1a1a'}}>R$9.999,99</span>
              </div>
              <div style={{...s.footerRow,fontSize:9,color:'#ccc',marginBottom:14}}><span>Subtotal</span><span></span><span>Taxa</span><span></span><span>Total</span></div>
              <button style={s.continueBtn}>Continuar</button>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { GestorDemo });